how to display score on different html page after clicking a button on different page

Question

I'm building a small quiz app, and want to display the user score on a different html page immediately the user finished answering the questions. what am getting right now the user finish answering the questions the in which the score is suppose to display loads and open without the score displayed. `

 <body>
    <div class="quiz-title">
        <h1>JS Quiz</h1>
    </div>
    <div class="container">
        <h2 id="score-board">00</h2>
        <div id="questions"></div>
        <div id="answers">
        </div>

<button type="submit"class="nbtn">Play</button>

    </div>

<script src="quiz.js"></script>
<!-- <script type="text/javascript" src="quiz1.js"></script> -->
</body>
the page to display the score
<body>
    <h2 id="score-board">00</h2>
    <div>
        <button id="play-btn">play</button>
    </div>
    
<script  src="quiz.js"></script>
<!-- <script type="text/javascript" src="quiz1.js"></script> -->
</body>

var questionElement = document.getElementById('questions');
    var answerElement = document.getElementById('answers');
    var scoreBoard = document.querySelector('#score-board');
    const state = {
    currentQuestionIndex: 0,
    score: 0
 };

var questions = [
{ question: " 1. javaScript is an....... language?",
    answers: [ "object-oriented", "object-based", "procedural", "none of the above"],
    correct: 1
    
},
{ question: " 2.which of the following keywords is used a define variable in javaScript",
    answers: [ "var", "let", "both A and B", "none of the above"],
    correct: 2

  
}, 
{
    question: "3. which of the following methods is used to HTML elements using javaScript",
    answers: ["getElementsById", "getElementByClassName", "both A and B", "none of the above"] ,
    correct: 2
    
}
];


function showQuestion(questionIndex){
    const question = questions[questionIndex];
    let qDiv = document.createElement('div');
    let p = document.createElement('p');
    questionElement.innerHTML = "";
    answerElement.innerHTML = "";

    p.textContent = question.question;
    qDiv.appendChild(p);
    questionElement.appendChild(qDiv);
    
    
    question.answers.forEach((answers, answerIndex) =>{
        const $input = document.createElement('input');
        const $label = document.createElement('label');
        $label.appendChild($input);
        
        $label.appendChild(document.createTextNode(answers));
        $input.name = `question${questionIndex}`;
        $input.type = 'radio';
        $input.value = answerIndex;
        answerElement.append($label);

        // if ($input.checked === false) {
        //  console.log('select answer');

        // } else{
        //  showQuestion(state.currentQuestionIndex);
        // }

    });
    
};
showQuestion(0);

var nBtn = document.querySelector('.nbtn');
nBtn.addEventListener('click', function(){
         state.currentQuestionIndex += 1;
        if (state.currentQuestionIndex === questions.length) {
             removeLastQuestion();
             scorePage();
             showScores();
    } else{
        
        showQuestion(state.currentQuestionIndex)
    }   
});


const $answers = document.getElementById("answers");
$answers.addEventListener("change", (event) => {
  const currentQuestion = questions[state.currentQuestionIndex];
  const selectedAnswerIndex = Number(event.target.value);
  const correctAnswerIndex = currentQuestion.correct;
  const isCorrect = selectedAnswerIndex === correctAnswerIndex;
  state.score += isCorrect ? 1 : 0;

  // if (isCorrect) {
  //    var scoreBoard = document2.querySelector('.score-board');
  //     // scoreBoard.textContent = state.score;
  //    // console.log("correct answer");
  // } else {
  //    var scoreBoard = document.querySelector('.score-board');
  //    // scoreBoard.textContent = state.score += 0;
  //    // console.log("wrong answer");
  // }
});


function showScores() {
    if (state.currentQuestionIndex === questions.length) {
        scoreBoard.innerHTML = `${state.score}/${questions.length}`
    }   
}



function removeLastQuestion(){
         if (state.currentQuestionIndex > questions.length - 1) {
             questionElement.innerHTML = "";
             answerElement.innerHTML = "";
     }  
}




function scorePage() {
    if (state.currentQuestionIndex > questions.length -1) {
        window.location.href = 'index23.html';
     // scoreBoard = document.querySelector('#score-board');
     // scoreBoard.innerText = `${state.score}/${questions.length}`;
        
    }

}

// const playBtn = document.querySelector('#play-btn');
// playBtn.addEventListener('click', showQuestion);


`

how to display score on different html page after clicking a button on different page

0 Answers0