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>