Skip to main content
Mal formulada la pregunta
Origen Enlace
vdjkelly
  • 694
  • 1
  • 9
  • 25

Saber si existe un elemento dentro Obtener el valor de un arrayinput radio de una lista y marca como correctaverificar si existe o no dentro de un array

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:

Saber si existe un elemento dentro de un array y marca como correcta si existe o no

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 ejemplo:

Obtener el valor de un input radio de una lista y verificar si existe o no dentro de un array

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:

Formatear mejor el código
Origen Enlace
ArianJM
  • 3.4k
  • 10
  • 22
  <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>
<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>
<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>
  <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>
<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>
<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>
<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>
Origen Enlace
vdjkelly
  • 694
  • 1
  • 9
  • 25

Saber si existe un elemento dentro de un array y marca como correcta si existe o no

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 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>