Есть код теста в котором пять вопросов от балды. Когда нажимается кнопка "проверить" правильные ответы подсвечиваются зеленым, а неправильные красным. То есть, если пользователь ответил неправильно, то его ответ становится красным, а нужный зеленым.
Хотелось бы реализовать тес так, чтобы из пяти вопросов рандомно выбирались три из них (в данном примере). При этом каждый выбранный из списка вопрос выводился на экран отдельно и правильный ответ также подсвечивался зеленым, а неправильный - красным.
window.onload = function() {
$(".questionsubmit").click(function(e) {
e.preventDefault();
$('.correct').parent('p').addClass('checked-right');
$('.wrong:checked').parent('p').addClass('checked-wrong');
});
}
<style type="text/css">.checked-wrong {
background-color: #E12F52;
}
.checked-right {
background-color: #4CE12F;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<form action="">
<div class="question">
<p>Сколько сантиметров в метре?</p>
<p><input type="checkbox" class="correct" value="100"> 100</p>
<p><input type="checkbox" class="wrong" value="1680"> 1680</p>
<p><input type="checkbox" class="wrong" value="10"> 10</p>
</div>
<div class="question">
<p>Сколько ног у улитки?</p>
<p><input type="checkbox" class="wrong" value="Две"> Две</p>
<p><input type="checkbox" class="correct" value="Одна"> Одна</p>
<p><input type="checkbox" class="wrong" value="Три"> Три</p>
</div>
<div class="question">
<p>Сколько месяцев в году?</p>
<p><input type="checkbox" class="wrong" value="10"> 10</p>
<p><input type="checkbox" class="correct" value="12"> 12</p>
<p><input type="checkbox" class="wrong" value="11"> 11</p>
</div>
<div class="question">
<p>Сколько г в кг?</p>
<p><input type="checkbox" class="wrong" value="10000"> 10000</p>
<p><input type="checkbox" class="wrong" value="100"> 100</p>
<p><input type="checkbox" class="correct" value="1000"> 1000</p>
</div>
<div class="question">
<p>Сколько музыкантов в квинтете?</p>
<p><input type="checkbox" class="wrong" value="Шесть"> Шесть</p>
<p><input type="checkbox" class="wrong" value="Три"> Три</p>
<p><input type="checkbox" class="correct" value="Пять"> Пять</p>
</div>
<p><input type="submit" class="questionsubmit" value="Проверить"></p>
</form>