Справедливое предупреждение, вы, вероятно, воспользуетесь приведенным ниже кодом, но я справляюсь, насколько мне известно.
У меня есть файл JSON с несколькими вопросами, содержание которых приведено ниже:
{
"questions": [
{
"id": 1,
"question": "What is 2+2?",
"answers": [
{
"answer": "1"
},
{
"answer": "6"
},
{
"answer": "4"
}
],
"answer": 3
},
{
"id": 2,
"question": "What is a dog?",
"answers": [
{
"answer": "animal"
},
{
"answer": "object"
}
],
"answer": 1
}
]
}
Я получаю этот контент и отображаю его в виде викторины на слайдере. Для этого я использую следующее:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<link rel="stylesheet" href="slick/slick.css" type="text/css">
<link rel="stylesheet" href="slick/slick-theme.css" type="text/css">
<style type="text/css">
.answerCorrect {
color:green;
}
.answerIncorrect {
color:red;
}
</style>
</head>
<body>
<div id="quizPage">
<div id="quizSlider"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<script>
// Start the question slider
$.getJSON("quiz.json", function(data) {
var html = '';
console.log(data.questions);
$.each(data.questions, function(key, value){
correctAnswer = value.answer;
html += '<div id="'+value.id+'" class="quizItem">';
html += '<div class="quizQuestion">'+value.question+'</div>';
$.each(value.answers, function(index, question) {
answerIndex = index+1;
if(answerIndex == correctAnswer) { answerValidation = 'true'; } else { answerValidation = 'false'; }
html += '<div data-answerValidation="'+answerValidation+'" data-answerIndex="'+answerIndex+'" class="quizAnswer">'+question.answer+'</div>';
});
html += '</div>';
});
$('#quizSlider').html(html);
$('#quizSlider').slick();
});
$("#quizSlider").on( 'click', '.quizAnswer', function () {
validation = $( this ).attr( "data-answerValidation" );
console.log(validation);
if ($( this ).attr( "data-answerValidation" ) === 'true') {
$( this ).addClass('answerCorrect');
} else {
$( this ).addClass('answerIncorrect');
$( this ).siblings('[data-answerValidation="true"]').addClass('answerCorrect');
}
setTimeout(function(){ $('#quizSlider').slick('slickNext'); }, 1000);
});
</script>
</body>
</html>
Что мне нужно сделать, это сделать случайным образом порядок, в котором вопросы показываются пользователю каждый раз, когда они посещают страницу. Я видел способы получения одного случайного элемента, но не случайного выбора всего списка.