Перенаправление пользователей JS — Quiz на страницы зависит от их оценки в тесте

#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 😀 🙂