CODEWITHSUNDEEP
javascript
Lubo Masura
Lubo Masura

Reputation: 1053

JS - Quiz redirect users to pages depends of their quiz score

I have a simple question for you. I have my HTML quiz based in .js. I have set the questions etc. What is my problem is that after you finish your quiz you are redirected to the end.html page.

I need to create 2 ways of redirecting to the end.html based on your quiz score. Users who are above 80 points score need to be redirected to success.html and users under 80 points need to be redirected to fail.html

My code is here

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 && score > 80 ) {
//go to the end page
return window.location.assign("/success.html");
} else if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS && 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();

This is the part of code which I have tried to use for redirection but It is only redirecting to success html.

getNewQuestion = () => {
if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS && score > 80 ) {
//go to the end page
return window.location.assign("/success.html");
} else if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS && score < 80 ){
    return window.location.assign("/fail.html");
}

Thank you for all your answers to help me find a solution

Upvotes: 1

Views: 312

Answers (1)

Jason Goemaat
Jason Goemaat

Reputation: 29234

Look into operator precedence. Using || is a popular shortcut in javascript. If the first value is true, it doesn't even bother executing the rest of the expression. availableQuestions.length is probably 0 at this point so it will always execute the first statement block.

for (let i = 0; i < 8; i++) {
  let a = ((i >> 2) & 1) > 0;
  let b = ((i >> 1) & 1) > 0;
  let c = ((i >> 0) & 1) > 0;
  console.log(`${a} || ${b} && ${c} is ${a || b && c}`);
}

Sounds like you don't need that first condition at all. From your comment, I would recommend starting with the condition that the game is over (questionCounter >= MAX_QUESTIONS) and checking the score inside that condition:

if (questionCount >= MAX_QUESTIONS) {
  if (score >= 80) {
    return window.location.assign("/uspel.html");
  } else {
    return window.location.assign("/neuspel.html");
  }
}

Upvotes: 3

Related Questions