Skip to main content
2 de 3
Formatear mejor el código
ArianJM
  • 3.4k
  • 10
  • 22

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>
vdjkelly
  • 694
  • 1
  • 9
  • 25