Почему неправильно перемешиваются элементы в массиве?
Как перемешать все массивы в объекте?
Создал игру викторину, все практический идеально, за исключением того что что все вопросы попадаются в естественном порядке. Применил конструкцию shuffle(questionsDat); Но вопросы вообще перестали отображаться.
spoiler
<!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> |
<!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), варианты ответа пропадают таким же образом.
Дополнительно:
В консоль заглядывали?
Там должна быть ошибка, потому что, насколько я помню, функции shuffle в javascript нет.
Какие конструкции использовать, что бы изменить порядок в массиве
Ответ на этот вопрос найти очень просто:
https://yandex.ru/search/?text=javascript+как+пере...
Вот тут представлено решение: https://stackoverflow.com/questions/2450954/how-to...
- Решение тоже оказалась актуальным.
1. Где декларация функции shuffle?
2. Чего вы ожидали от вызова shuffle(questionsDat);?
Даже если допустить, что функция у вас где-то есть, то что этот вызов должен сделать? В теории функция shuffle может напрямую изменить входящий массив, но обычно так никто не делает, обычно все идут по пути иммутабельности. Т.е. вам нужно использовать то, что возвращает shuffle.
Если хотите мутировать исходный массив, можно взять Array.sort и Math.random.
questionsDat.sort(() => .5 - Math.random())
- Представления о работе конструкциий shuffle(); я имел только от одного сайта ( https://learn.javascript.ru/task/shuffle ). Спасибо большое за подробное разъяснение ответа
Ответы:
В js нет встроенной функции shuffle. Поэтому вам необходимо её декларировать
Например, так
function shuffle(array) { array.sort(() => Math.random() - 0.5); } |
function shuffle(array) { array.sort(() => Math.random() - 0.5); }
Но в таком алгоритме вероятность выпадения различных комбинаций не равна. Поэтому стоит использовать тасование Фишера — Йетса
function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } |
function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } }
Такой способ дает вам также прирост в скорости выполнения
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с перемешиванием элементов в массиве может возникать по разным причинам. Вот несколько возможных причин и способы их решения:
1. Неправильное использование функций сортировки: Если вы используете функции сортировки, такие как `sort()`, `asort()`, `ksort()` и т.д., убедитесь, что вы правильно используете их и передаете правильные параметры. Например, если вам нужно отсортировать массив чисел, используйте `sort()` вместо `asort()`, который сортирует ассоциативный массив по значениям.
2. Неправильное использование циклов: Если вы используете циклы для перемешивания элементов массива, убедитесь, что ваш код написан правильно. Например, если вы используете цикл `for`, убедитесь, что вы правильно задаете условие завершения цикла и корректно инкрементируете счетчик.
3. Неправильное использование функций перемешивания: Если вы используете функции перемешивания, такие как `shuffle()`, `array_rand()` и т.д., убедитесь, что вы правильно используете их и передаете правильные параметры. Например, если вы используете `shuffle()`, убедитесь, что вы передаете ссылку на массив, а не его копию.
4. Неправильное использование ключей массива: Если ваши ключи массива имеют значения, которые могут привести к неправильному порядку (например, строки вместо чисел), это также может вызвать перемешивание элементов. Убедитесь, что ваши ключи массива уникальны и имеют правильный формат.
Прежде чем приступить к решению проблемы с перемешиванием элементов в массиве, убедитесь, что вы понимаете причину этой проблемы. Проверьте свой код на наличие ошибок и убедитесь, что вы используете правильные методы сортировки и перемешивания. Если после этого проблема остается, обратитесь за помощью к сообществу разработчиков, чтобы получить дополнительную поддержку.