0

Tengo una lista de preguntas con respuestas las cuales cada listado lleva un máximo de 4 respuesta que al seleccionar debo indicar si la respuesta a esa pregunta es correcta o incorrecta y marcarlas esto lo hace actualmente pero solo obtengo el valor siempre del mismo radio seleccionado la primera vez al ser correcta debe marcarse ejemplo:

Correcta: Verde Incorrecta: Rojo

Esto debe suceder si doy click al botón Next Step verificando antes de pasar a la siguiente pregunta si esta es o no o correcta la respuesta.

Dejo el formulario con la lista de quiz

<form id="quizForm" action="/user/quizzes/50/store_results" method="post" class="quiz-form">
    <input type="hidden" name="quiz_result_id" value="39">
    <fieldset>
        <input type="hidden" name="question[52]" value="52">
        <div class="form-card">
            <h3 class="question-title">1 - Resuelve  254 + 78 + 136 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw361" type="radio" name="question[52][answer]" value="361">
                    <label class="answer-label" for="asw361">
                        <span class="answer-title">468</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw362" type="radio" name="question[52][answer]" value="362">
                    <label class="answer-label" for="asw362">
                        <span class="answer-title">523</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw363" type="radio" name="question[52][answer]" value="363">
                    <label class="answer-label" for="asw363">
                        <span class="answer-title">495</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw364" type="radio" name="question[52][answer]" value="364">
                    <label class="answer-label" for="asw364">
                        <span class="answer-title">348</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button next btn btn-custom">Next Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
    <fieldset>
        <input type="hidden" name="question[53]" value="53">
        <div class="form-card">
            <h3 class="question-title">2 - Resuelve 1480+237+48 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw365" type="radio" name="question[53][answer]" value="365">
                    <label class="answer-label" for="asw365">
                        <span class="answer-title">1765</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw366" type="radio" name="question[53][answer]" value="366">
                    <label class="answer-label" for="asw366">
                        <span class="answer-title">1823</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw367" type="radio" name="question[53][answer]" value="367">
                    <label class="answer-label" for="asw367">
                        <span class="answer-title">1723</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw368" type="radio" name="question[53][answer]" value="368">
                    <label class="answer-label" for="asw368">
                        <span class="answer-title">1654</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button previous btn btn-custom">prev Step</button>
            <button type="button" class="action-button next btn btn-custom">Next Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
    <fieldset>
        <input type="hidden" name="question[54]" value="54">
        <div class="form-card">
            <h3 class="question-title">3 - Resuelve 340+255-429 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw369" type="radio" name="question[54][answer]" value="369">
                    <label class="answer-label" for="asw369">
                        <span class="answer-title">145</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw370" type="radio" name="question[54][answer]" value="370">
                    <label class="answer-label" for="asw370">
                        <span class="answer-title">166</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw371" type="radio" name="question[54][answer]" value="371">
                    <label class="answer-label" for="asw371">
                        <span class="answer-title">185</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw372" type="radio" name="question[54][answer]" value="372">
                    <label class="answer-label" for="asw372">
                        <span class="answer-title">201</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button previous btn btn-custom">prev Step</button>
            <button type="button" class="action-button next btn btn-custom">Next Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
    <fieldset>
        <input type="hidden" name="question[55]" value="55">
        <div class="form-card">
            <h3 class="question-title">4 - Resuelve 1526-831+63 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw373" type="radio" name="question[55][answer]" value="373">
                    <label class="answer-label" for="asw373">
                        <span class="answer-title">789</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw374" type="radio" name="question[55][answer]" value="374">
                    <label class="answer-label" for="asw374">
                        <span class="answer-title">763</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw375" type="radio" name="question[55][answer]" value="375">
                    <label class="answer-label" for="asw375">
                        <span class="answer-title">758</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw376" type="radio" name="question[55][answer]" value="376">
                    <label class="answer-label" for="asw376">
                        <span class="answer-title">755</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button previous btn btn-custom">prev Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
</form>

Adjunto el js donde pasa pregunta a pregunta, actualmente esta me da el id de las respuesta seleccionada pero solo de la primera.

<script type="application/javascript" src="/assets/default/clock-counter/jquery.flipTimer.js"></script>
<script>

$(document).ready(function () {
    @if(isset($quiz->time))
    var currentTime = new Date();
    currentTime.setMinutes(currentTime.getMinutes() + {{ $quiz->time }});
    
    
    $('.flipTimer').flipTimer({
        direction: 'down',
        date: currentTime,
        callback: function () {
            $('body .action-button.finish').remove();
            $('#quizForm').submit();
        },
    });
    @endif
    
    var current_fs, next_fs, previous_fs; //fieldsets
    var opacity;
    var preguntas = '[52,53,54,55]'
    var respuestas = '[361,365,370,375]'
    console.log(preguntas+ "preguntas");
    console.log(respuestas+ "respuestas");
    
    $(".next").click(function () {
        current_fs = $(this).parent().parent();
        next_fs = $(this).parent().parent().next();
        next_fs.show();
        
        var answer = $('#answers').find('input:radio').val(); //Obtiene la respuesta pero no de todas solo de una
        
        console.log(answer)
        console.log(respuestas.indexOf(answer)); //Imprimo el log para saber si existe en la lista de respuestas correctas.
        
        current_fs.animate({opacity: 0}, {
            step: function (now) {
                opacity = 1 - now;
                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                next_fs.css({'opacity': opacity});
            },
            duration: 600
        });
        
    });
    
    $(".previous").click(function () {
        
        current_fs = $(this).parent().parent();
        previous_fs = $(this).parent().parent().prev();
        
        previous_fs.show();
        
        
        current_fs.animate({opacity: 0}, {
            step: function (now) {
                opacity = 1 - now;
                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                previous_fs.css({'opacity': opacity});
            },
            duration: 600
        });
    });
    
    $('body').on('click', '.action-button.finish', function (e) {
        e.preventDefault();
        $('#finishModal').modal('show');
    });
    
    $('body').on('click', '#SubmitResult', function (e) {
        e.preventDefault();
        $('#quizForm').submit();
    });
});
</script>
5
  • 1
    Es bueno mostrar el codigo sin embargo esto no remplaza una buena explicación, y la explicación no es sólo el título. Utiliza includes() para saber si un elemto se encuentra en un array
    – Christian
    Commented el 12 abr. 2021 a las 18:50
  • @christian Si pero el detalles es que en la lista de los input radio me obtiene siempre el mismo valor. Entonces me imposibilita saber que valor se obtuvo en el input radio seleccionado.
    – vdjkelly
    Commented el 12 abr. 2021 a las 18:52
  • entonces tu problema no es saber si existe un elemento dentro de un array, sino que siempre obtienes el mismo valor de un input, deberias de poner el proble que tienes en si como titulo.
    – Christian
    Commented el 12 abr. 2021 a las 18:57
  • Si, la pregunta no se relaciona mucho con la explicación. Si el problema es que solo puedes acceder a un valor y no a todos... puedes usar esto para acceder a todos $('#answers').find('input:radio').each(function(){ console.log($(this).val())}); Pero aun así... la pregunta está mal formulada o mal explicada. No es muy claro el problema.
    – Pipe
    Commented el 12 abr. 2021 a las 19:00
  • @Pipe Editada la pregunta
    – vdjkelly
    Commented el 12 abr. 2021 a las 19:09

1 respuesta 1

0

El problema es que usas el mismo identificador answers para todos los contenedores de radios, pero los identificadores deben ser únicos:

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).
Referencia: https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id

Como hay varios elementos con el mismo identificador, el navegador (o jQuery), devuelve solo el primero que encuentra. La solución es obtener el input radio desde el contenedor:

var answer = $(current_fs).find('input:radio').val();

Recomendación: Define variables usando let en vez de var para limitar su existencia al bloque o contexto donde las creas.

$(document).ready(function () {
    /*
    @if(isset($quiz->time))
    var currentTime = new Date();
    currentTime.setMinutes(currentTime.getMinutes() + {{ $quiz->time }});
    
    
    $('.flipTimer').flipTimer({
        direction: 'down',
        date: currentTime,
        callback: function () {
            $('body .action-button.finish').remove();
            $('#quizForm').submit();
        },
    });
    @endif
    */
    
    var current_fs, next_fs, previous_fs; //fieldsets
    var opacity;
    var preguntas = '[52,53,54,55]'
    var respuestas = '[361,365,370,375]'
    console.log(preguntas+ "preguntas");
    console.log(respuestas+ "respuestas");
    
    $(".next").click(function () {
        // Selecciona el contenedor por etiqueta
        current_fs = $(this).closest('fieldset');
        // Avanza tomando en cuenta el actual
        next_fs = $(current_fs).next();
        next_fs.show();
        
        //Obtiene la respuesta pero no de todas solo de una
        // Busca desde el fieldset actual
        var answer = $(current_fs).find('input:radio').val();
        
        console.log(answer)
        console.log(respuestas.indexOf(answer)); //Imprimo el log para saber si existe en la lista de respuestas correctas.
        
        current_fs.animate({opacity: 0}, {
            step: function (now) {
                opacity = 1 - now;
                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                next_fs.css({'opacity': opacity});
            },
            duration: 600
        });
        
    });
    
    $(".previous").click(function () {
        
        current_fs = $(this).closest('fieldset');
        previous_fs = $(current_fs).prev();
        
        previous_fs.show();
        
        
        current_fs.animate({opacity: 0}, {
            step: function (now) {
                opacity = 1 - now;
                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                previous_fs.css({'opacity': opacity});
            },
            duration: 600
        });
    });
    
    $('body').on('click', '.action-button.finish', function (e) {
        e.preventDefault();
        $('#finishModal').modal('show');
    });
    
    $('body').on('click', '#SubmitResult', function (e) {
        e.preventDefault();
        $('#quizForm').submit();
    });
});
fieldset { display:none; }
fieldset:nth-of-type(1) { display:block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- script src="http://andrewjtait.github.io/flipTimer/js/jquery.flipTimer.js"></script -->
<form id="quizForm" action="/user/quizzes/50/store_results" method="post" class="quiz-form">
    <input type="hidden" name="quiz_result_id" value="39">
    <fieldset>
        <input type="hidden" name="question[52]" value="52">
        <div class="form-card">
            <h3 class="question-title">1 - Resuelve  254 + 78 + 136 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw361" type="radio" name="question[52][answer]" value="361">
                    <label class="answer-label" for="asw361">
                        <span class="answer-title">468</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw362" type="radio" name="question[52][answer]" value="362">
                    <label class="answer-label" for="asw362">
                        <span class="answer-title">523</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw363" type="radio" name="question[52][answer]" value="363">
                    <label class="answer-label" for="asw363">
                        <span class="answer-title">495</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw364" type="radio" name="question[52][answer]" value="364">
                    <label class="answer-label" for="asw364">
                        <span class="answer-title">348</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button next btn btn-custom">Next Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
    <fieldset>
        <input type="hidden" name="question[53]" value="53">
        <div class="form-card">
            <h3 class="question-title">2 - Resuelve 1480+237+48 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw365" type="radio" name="question[53][answer]" value="365">
                    <label class="answer-label" for="asw365">
                        <span class="answer-title">1765</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw366" type="radio" name="question[53][answer]" value="366">
                    <label class="answer-label" for="asw366">
                        <span class="answer-title">1823</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw367" type="radio" name="question[53][answer]" value="367">
                    <label class="answer-label" for="asw367">
                        <span class="answer-title">1723</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw368" type="radio" name="question[53][answer]" value="368">
                    <label class="answer-label" for="asw368">
                        <span class="answer-title">1654</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button previous btn btn-custom">prev Step</button>
            <button type="button" class="action-button next btn btn-custom">Next Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
    <fieldset>
        <input type="hidden" name="question[54]" value="54">
        <div class="form-card">
            <h3 class="question-title">3 - Resuelve 340+255-429 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw369" type="radio" name="question[54][answer]" value="369">
                    <label class="answer-label" for="asw369">
                        <span class="answer-title">145</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw370" type="radio" name="question[54][answer]" value="370">
                    <label class="answer-label" for="asw370">
                        <span class="answer-title">166</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw371" type="radio" name="question[54][answer]" value="371">
                    <label class="answer-label" for="asw371">
                        <span class="answer-title">185</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw372" type="radio" name="question[54][answer]" value="372">
                    <label class="answer-label" for="asw372">
                        <span class="answer-title">201</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button previous btn btn-custom">prev Step</button>
            <button type="button" class="action-button next btn btn-custom">Next Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
    <fieldset>
        <input type="hidden" name="question[55]" value="55">
        <div class="form-card">
            <h3 class="question-title">4 - Resuelve 1526-831+63 e indica el resultado</h3>
            <div class="answer-items" id="answers">
                <div class="form-radio">
                    <input id="asw373" type="radio" name="question[55][answer]" value="373">
                    <label class="answer-label" for="asw373">
                        <span class="answer-title">789</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw374" type="radio" name="question[55][answer]" value="374">
                    <label class="answer-label" for="asw374">
                        <span class="answer-title">763</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw375" type="radio" name="question[55][answer]" value="375">
                    <label class="answer-label" for="asw375">
                        <span class="answer-title">758</span>
                    </label>
                </div>
                <div class="form-radio">
                    <input id="asw376" type="radio" name="question[55][answer]" value="376">
                    <label class="answer-label" for="asw376">
                        <span class="answer-title">755</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-actions d-flex align-items-center">
            <button type="button" class="action-button previous btn btn-custom">prev Step</button>
            <button type="button" class="action-button finish btn btn-danger">finish</button>
        </div>
    </fieldset>
</form>

1
  • Aun obtengo de la lista los mismo valores de un mismo input, cuando ya voy por las 3 pregunta es que viene arrojando los resultados correctos o incorrectos.
    – vdjkelly
    Commented el 12 abr. 2021 a las 19:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.