使用 javascript 计算总分

Question

I am creating a quiz.我正在创建一个测验。 My quiz is divided in 4 parts and I have 50 questions total.我的测验分为 4 个部分，总共有 50 个问题。 There is a score and question counter, but I want to continue the question counter and score when the quiz jumped to the next part and I need a total score at the end.有一个分数和问题计数器，但我想在测验跳到下一部分时继续问题计数器和分数，最后我需要一个总分。 I am not expert in Javascript. I am just a beginner.我不是 Javascript 的专家。我只是一个初学者。 So Please help me with the solution.所以请帮我解决这个问题。

 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

If your quiz contains or lasts throughout multiple pages and you want to communicate between those pages then you can use localStorage如果您的测验包含或持续贯穿多个页面，并且您想在这些页面之间进行通信，那么您可以使用localStorage

When you're done with one part of the quiz, or even if you're not, just set the value of localStorage to the score, and read it on page load, or in general当您完成测验的一部分时，或者即使您没有完成，只需将 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