使用 javascript 計算總分

Question

我正在創建一個測驗。 我的測驗分為 4 個部分，總共有 50 個問題。 有一個分數和問題計數器，但我想在測驗跳到下一部分時繼續問題計數器和分數，最后我需要一個總分。 我不是 Javascript 的專家。我只是一個初學者。 所以請幫我解決這個問題。

 const choices = Array.from(document.getElementsByClassName("choice-text")); const progressText = document.getElementById("progressText"); const scoreText = document.getElementById("score"); const progressBarFull = document.getElementById("progressBarFull"); let currentQuestion = {}; let acceptingAnswers = false; let score = 0; let questionCounter = 0; let availableQuesions = []; let questions = [ { question: "Inside which HTML element do we put the JavaScript??", choice1: "<script>", choice2: "<javascript>", choice3: "<js>", choice4: "<scripting>", answer: 1 }, { question: "What is the correct syntax for referring to an external script called 'xxx.js'?", choice1: "<script href='xxx.js'>", choice2: "<script name='xxx.js'>", choice3: "<script src='xxx.js'>", choice4: "<script file='xxx.js'>", answer: 3 }, { question: " How do you write 'Hello World' in an alert box?", choice1: "msgBox('Hello World');", choice2: "alertBox('Hello World');", choice3: "msg('Hello World');", choice4: "alert('Hello World');", answer: 4 } ]; //CONSTANTS const CORRECT_BONUS = 10; const MAX_QUESTIONS = 3; startGame = () => { questionCounter = 0; score = 0; availableQuesions = [...questions]; getNewQuestion(); }; getNewQuestion = () => { if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { localStorage.setItem("mostRecentScore", score); //go to the end page return window.location.assign("/end.html"); } questionCounter++; progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; //Update the progress bar progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; 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 lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Quick Quiz - Play</title> <link rel="stylesheet" href="app.css" /> <link rel="stylesheet" href="game.css" /> </head> <body> <div class="container"> <div id="game" class="justify-center flex-column"> <div id="hud"> <div id="hud-item"> <p id="progressText" class="hud-prefix"> Question </p> <div id="progressBar"> <div id="progressBarFull"></div> </div> </div> <div id="hud-item"> <p class="hud-prefix"> Score </p> <h1 class="hud-main-text" id="score"> 0 </h1> </div> </div> <h2 id="question">What is the answer to this questions?</h2> <div class="choice-container"> <p class="choice-prefix">A</p> <p class="choice-text" data-number="1">Choice 1</p> </div> <div class="choice-container"> <p class="choice-prefix">B</p> <p class="choice-text" data-number="2">Choice 2</p> </div> <div class="choice-container"> <p class="choice-prefix">C</p> <p class="choice-text" data-number="3">Choice 3</p> </div> <div class="choice-container"> <p class="choice-prefix">D</p> <p class="choice-text" data-number="4">Choice 4</p> </div> </div> </div> <script src="game.js"></script> </body> </html>

Answer 1

如果您的測驗包含或持續貫穿多個頁面，並且您想在這些頁面之間進行通信，那么您可以使用localStorage

當您完成測驗的一部分時，或者即使您沒有完成，只需將 localStorage 的值設置為分數，並在頁面加載時或一般情況下閱讀它



incrementScore = num => {
   if(typeof(localStorage.getItem("score") != "number"))
       localStorage.setItem("score", 0)
  score = localStorage.getItem("score")
  score += num;
  scoreText.innerText = score;
};

使用 javascript 計算總分

問題描述

1 個解決方案

解決方案1
0 2020-08-21 17:34:26

使用 javascript 計算總分

問題描述

1 個解決方案

解決方案1 0 2020-08-21 17:34:26

解決方案1
0 2020-08-21 17:34:26