Есть такой код: https://codepen.io/zikwal/pen/NWGodpV (Для воспроизведения)
UPDATE: Ответ ниже - как видно - работает и выполняет именно то, что нужно, но он написан не по моему коду - и не получается его к моему адаптировать. (Если, кто может в этом помочь - буду благодарен)
ВОПРОС:
HTML Выводится из БД через PHP, для примера запечатал HTML.
Суть в том, что при нажатии на чекбокс - меняется вопрос. Необходимо ограничить время ответа и в случае отсутствия ответа через 15 сек - сделать выбор за пользователя.
Реализовал таймер обратного отсчета но не могу реализовать к нему оставшиеся две функции:
1 - Чтобы при достижении 0 автоматически выбирался 2 ответ
2 - Чтобы при нажатии на чекбокс - таймер перезагружался
(Перекопал много постов, пытался через if else, addClass/removeClass - но реализовать так и не смог - надеюсь на помощь и хоть небольшое разъяснение)
Развёрнутый код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-data">
<div class="question" data-id="6" id="question-6">
<p class="q">Вопрос 1</p>
<p class="a">
<input type="radio" id="answer-1" name="question-6" value="1">
<label for="answer-1">1</label>
</p>
<p class="a">
<input type="radio" id="answer-2" name="question-6" value="2">
<label for="answer-2">2</label>
</p>
<div class="sec seconds">15</div>
</div>
<div class="question" data-id="4" id="question-4">
<p class="q">Вопрос 2</p>
<p class="a">
<input type="radio" id="answer-1" name="question-4" value="1">
<label for="answer-1">1</label>
</p>
<p class="a">
<input type="radio" id="answer-2" name="question-4" value="2">
<label for="answer-2">2</label>
</p>
<div class="sec">15</div>
</div>
<div class="question" data-id="5" id="question-5">
<p class="q">Вопрос 3</p>
<p class="a">
<input type="radio" id="answer-1" name="question-5" value="1">
<label for="answer-1">1</label>
</p>
<p class="a">
<input type="radio" id="answer-2" name="question-5" value="2">
<label for="answer-2">2</label>
</p>
<div class="sec">15</div>
</div>
</div>
CSS
.q{
border-bottom: 1px solid #000;
font-weight: bold;
}
.a {
padding: 5px 0;
}
.question {
display: none;
}
.nav-active {
display: none;
}
JS:
$('.test-data').children('div:first').show();
$('input[id^="answer"]').click(({currentTarget})=>{
$(currentTarget).parent().parent().hide().next().fadeIn();
console.log($(currentTarget).attr('name'), $(currentTarget).val());
});
$(document).ready(function() {
var sec = $('.seconds');
var secVal = parseInt(sec.text());
var timer = setTimeout(function tick() {
if (secVal > 0) {
sec.text(--secVal);
timer = setTimeout(tick, 1000);
}
}, 1000);
});