Как перемешать все массивы в объекте?
Создал игру викторину, все практический идеально, за исключением того что что все вопросы попадаются в естественном порядке.
Применил конструкцию shuffle(questionsDat); Но вопросы вообще перестали отображаться.
<!DOCTYPE html>
<html>
<head>
<title>sss</title>
<style>
/* Стили для оформления */
.question {
font-weight: bold;
}
.options {
list-style-type: none;
padding: 0;
}
.option {
cursor: pointer;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="quiz">
<div id="question-container">
<p id="question" class="question"></p>
<ul id="options" class="options">
</ul>
</div>
<p id="result"></p>
<button id="next-btn">Next question</button>
</div>
<script>
const questionsDat = [
{
"number": 1,
"question": "What is the purpose of night inspections for overhead power transmission lines?",
"options": [" To visually check the condition of overhead line elements", " To assess the quality of work of electricians", " To measure the insulation resistance of insulators", " To perform emergency measures after accidents"],
"answer": " To visually check the condition of overhead line elements"
},
{
"number": 2,
"question": "How often are day inspections, the main type of inspections, carried out for overhead power transmission lines?",
"options": [" Weekly", " Monthly", " Biannually", " Annually"],
"answer": " Monthly"
}
];
shuffle(questionsDat);
let currentQuestion = 0;
let score = 0;
let quizCompleted = false;
const questionElement = document.getElementById('question');
const optionsList = document.getElementById('options');
const resultElement = document.getElementById('result');
const nextButton = document.getElementById('next-btn');
function displayQuestion() {
const current = questionsDat[currentQuestion];
questionElement.textContent = `${current.number}. ${current.question}`;
optionsList.innerHTML = '';
current.options.forEach((option, index) => {
const li = document.createElement('li');
li.textContent = option;
li.classList.add('option');
li.addEventListener('click', () => checkAnswer(index));
optionsList.appendChild(li);
});
}
function showFinalScore() {
resultElement.textContent = `Тест завершен. Итоговый счет: ${score} из ${questionsDat.length}`;
}
function checkAnswer(selectedIndex) {
const current = questionsDat[currentQuestion];
if (!quizCompleted)
{
if (current.options[selectedIndex] === current.answer) {
resultElement.textContent = 'Right!';
score++;
setTimeout(() => {
resultElement.textContent = '';
nextButton.style.display = 'none';
currentQuestion = (currentQuestion + 1) % questionsDat.length;
displayQuestion();
}, 500);
} else {
resultElement.textContent = `False. Correct answer: ${current.answer}`;
nextButton.style.display = 'block';
}
optionsList.removeEventListener('click', checkAnswer);
}
else {
showFinalScore();
}
}
nextButton.addEventListener('click', () => {
resultElement.textContent = '';
nextButton.style.display = 'none';
currentQuestion = (currentQuestion + 1) % questionsDat.length;
displayQuestion();
});
if (currentQuestion === questionsDat.length - 1) {
// Если достигнут последний вопрос, завершаем тест
quizCompleted = true;
}
// Начать отображение вопросов
displayQuestion();
</script>
</body>
</html>
Почему обычная структура shuffle не работает? Какие конструкции использовать, чтобы изменить порядок в массиве в корректном его виде? Когда применяю конструкцию shuffle(current.options), варианты ответа пропадают таким же образом.
