#javascript
#javascript
Вопрос:
У меня к вам простой вопрос. У меня есть HTML-тест, основанный на .js. Я задал вопросы и т.д. Моя проблема в том, что после завершения теста вы перенаправляетесь на end.html страница.
Мне нужно создать 2 способа перенаправления на end.html на основе вашей оценки в тесте. Пользователи, набравшие более 80 баллов, должны быть перенаправлены на success.html и пользователи, набравшие менее 80 баллов, должны быть перенаправлены на fail.html
Мой код здесь
const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));
const questionCounterText = document.getElementById("questionCounter");
const scoreText = document.getElementById("score");
let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuesions = [];
let questions = [
{
question: "Otázka 1",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 1
},
{
question: "Otázka 2",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 3",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 4
},
{
question: "Otázka 4",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 5",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 6",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 7",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 8",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 9",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 10",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 11",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 12",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 13",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 14",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
{
question: "Otázka 15",
choice1: "1",
choice2: "2",
choice3: "3",
choice4: "4",
answer: 3
},
];
//CONSTANTS
const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 15;
startGame = () => {
questionCounter = 0;
score = 0;
availableQuesions = [...questions];
getNewQuestion();
};
getNewQuestion = () => {
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS amp;amp; score > 80 ) {
//go to the end page
return window.location.assign("/success.html");
} else if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS amp;amp; score < 80 ){
return window.location.assign("/fail.html");
}
questionCounter ;
questionCounterText.innerText = `${questionCounter}/${MAX_QUESTIONS}`;
const questionIndex = Math.floor(Math.random() * availableQuesions.length);
currentQuestion = availableQuesions[questionIndex];
question.innerText = currentQuestion.question;
choices.forEach(choice => {
const number = choice.dataset["number"];
choice.innerText = currentQuestion["choice" number];
});
availableQuesions.splice(questionIndex, 1);
acceptingAnswers = true;
};
choices.forEach(choice => {
choice.addEventListener("click", e => {
if (!acceptingAnswers) return;
acceptingAnswers = false;
const selectedChoice = e.target;
const selectedAnswer = selectedChoice.dataset["number"];
const classToApply =
selectedAnswer == currentQuestion.answer ? "correct" : "incorrect";
if (classToApply === "correct") {
incrementScore(CORRECT_BONUS);
}
selectedChoice.parentElement.classList.add(classToApply);
setTimeout(() => {
selectedChoice.parentElement.classList.remove(classToApply);
getNewQuestion();
}, 1000);
});
});
incrementScore = num => {
score = num;
scoreText.innerText = score;
};
startGame();
Это часть кода, которую я пытался использовать для перенаправления, но она перенаправляет только на успешный html.
getNewQuestion = () => {
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS amp;amp; score > 80 ) {
//go to the end page
return window.location.assign("/success.html");
} else if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS amp;amp; score < 80 ){
return window.location.assign("/fail.html");
}
Спасибо за все ваши ответы, которые помогут мне найти решение
Ответ №1:
Посмотрите на приоритет операторов. Использование ||
— популярный ярлык в javascript. Если первое значение равно true, это даже не беспокоит выполнение остальной части выражения. availableQuestions.length
на данный момент, вероятно, равно 0, поэтому он всегда будет выполнять первый блок оператора.
for (let i = 0; i < 8; i ) {
let a = ((i >> 2) amp; 1) > 0;
let b = ((i >> 1) amp; 1) > 0;
let c = ((i >> 0) amp; 1) > 0;
console.log(`${a} || ${b} amp;amp; ${c} is ${a || b amp;amp; c}`);
}
Похоже, вам вообще не нужно это первое условие. Исходя из вашего комментария, я бы рекомендовал начать с условия, что игра окончена ( questionCounter >= MAX_QUESTIONS
), и проверить счет внутри этого условия:
if (questionCount >= MAX_QUESTIONS) {
if (score >= 80) {
return window.location.assign("/uspel.html");
} else {
return window.location.assign("/neuspel.html");
}
}
Комментарии:
1. Хорошо, я новичок в JS, и я пытаюсь изменить существующее решение из бесплатно загруженного шаблона, и я все еще учусь. Можете ли вы попробовать изменить функцию, чтобы я мог понять, что вы имеете в виду, и попробовать, работает ли это? Большое вам спасибо!
2. Спасибо за вашу помощь, вы подали мне идею. Я нашел решение с удалением доступных вопросов. длина, которая была установлена в 0 и модифицировала мой код следующим образом
if (score >80 amp;amp; questionCounter >= MAX_QUESTIONS) { //go to the end page return window.location.assign("/uspel.html"); } else if (score < 80 amp;amp; questionCounter >= MAX_QUESTIONS ){ return window.location.assign("/neuspel.html"); }
3. Отлично! Поскольку они оба имеют дело с
questionCounter >= MAX_QUESTSIONS
, вы можете начать с этого как if и подсчитать количество баллов внутри этого блока инструкций. Добавление кода к моему ответу…4. Спасибо 🙂 надеюсь, что через некоторое время я стану лучше в js 😀 🙂