創建一個分數，每次選擇正確答案時都會增加 go

Question

所以我有一個使用 HTML、CSS 和 javascript 創建的測驗。 我正在嘗試添加一個分數，但是當我在進入下一個問題時添加它時，它要么每次添加 4，要么不添加。 任何幫助表示贊賞

Javascript

 const startButton = document.getElementById('start-btn') const nextButton = document.getElementById('next-btn') const questionContainerElement = document.getElementById('question-container') const questionElement = document.getElementById('question') const answerButtonsElement = document.getElementById('answer-buttons') var score = 0 score = Number(score) let shuffledQuestions, currentQuestionIndex startButton.addEventListener('click', startGame) nextButton.addEventListener('click', () => { currentQuestionIndex++ setNextQuestion() }) function startGame() { startButton.classList.add('hide') shuffledQuestions = questions.sort(() => Math.random() -.5) currentQuestionIndex = 0 questionContainerElement.classList.remove('hide') setNextQuestion() } function setNextQuestion() { resetState() showQuestion(shuffledQuestions[currentQuestionIndex]) } function showQuestion(question) { questionElement.innerText = question.question question.answers.forEach(answer => { const button = document.createElement('button') button.innerText = answer.text button.classList.add('btn') if (answer.correct) { //button.dataset.correct = answer.correct answer.correct = Boolean(answer.correct) button.dataset.correct = answer.correct //mainbox.body.correct //$("mainbox").css("background-color","green"); } button.addEventListener('click', selectAnswer) answerButtonsElement.appendChild(button) }) } function resetState() { clearStatusClass(document.body) nextButton.classList.add('hide') while (answerButtonsElement.firstChild) { answerButtonsElement.removeChild(answerButtonsElement.firstChild) } } function selectAnswer(e) { const selectedButton = e.target const correct = selectedButton.dataset.correct setStatusClass(document.body, correct) Array.from(answerButtonsElement.children).forEach(button => { setStatusClass(button, button.dataset.correct) }) if (shuffledQuestions.length > currentQuestionIndex + 1) { nextButton.classList.remove('hide') } else { startButton.innerText = 'Restart' startButton.classList.remove('hide') window.alert("You have scored "+ score) score = 0; score = Number(score); } } function setStatusClass(element, correct) { clearStatusClass(element) if (correct) { element.classList.add('correct') } else { element.classList.add('wrong') } } function clearStatusClass(element) { element.classList.remove('correct') element.classList.remove('wrong') } const questions = [ { question: 'which is non-price factor?', answers: [ { text: 'income', correct: true }, { text: 'price ', correct: false } ] }, { question: 'which is merit good?', answers: [ { text: 'cigarette', correct: false }, { text: 'junk food ', correct: false }, { text: 'healthcare', correct: true }, { text: 'gambling', correct: false } ] }, { question: 'which one is not the type of market failure?', answers: [ { text: 'monopoly market', correct: false }, { text: 'oligopoly market', correct: true }, { text: 'demerit goods', correct: false }, { text: 'negative externality', correct: false } ] }, { question: 'Total profit = total revenue - total cost?', answers: [ { text: 'flase', correct: false }, { text: 'true', correct: true } ] } ]

樣式表

#topbox{ width: 100%; height: 70px; background-color: rgb(146, 182, 214); } u1 { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: rgb(153, 197, 218); } li { float: left; } li a { display:inline-block; padding: 20px; border: 1px solid rgb(243, 240, 240); background-color: rgb(153, 197, 218); color: white; text-align:center; position:relative; padding-bottom: 20px; font-size: 20pt; } #medianbox{ width: 100%; height: 73px; background-color:rgb(153, 197, 218); } #mainbox{ width: 100%; height: 100%; background-color: rgb(146, 182, 214); } *, *::before, *::after { box-sizing: border-box; font-family: Gotham Rounded; }.root { --hue-neutral: 200; --hue-wrong: 0; --hue-correct: 145; }.body { --hue: var(--hue-neutral); padding: 10000px; margin: 0; display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; background-color: hsl(var(--hue), 100%, 20%); }.body.correct { hue: var(--hue-correct); }.body.wrong { --hue: var(--hue-wrong); }.container { width: 800px; max-width: 80%; background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; }

.btn-grid { 顯示：網格； 網格模板列：重復（2，自動）； 間隙：10px； 邊距：20px 0； 顏色：藍色； }

.btn { --hue: var(--hue-neutral); 邊框：1px 實心 hsl(var(--hue), 100%, 30%); }.btn:hover { 邊框顏色：黑色； }.btn.correct { --hue: var(--hue-correct); 顏色：綠色； }.btn.wrong { --hue: var(--hue-wrong); }.start-btn, .next-btn { 字體大小：1.5rem; 字體粗細：粗體； 填充：10px 20px； }.controls { 顯示：彈性； 證明內容：中心； 對齊項目：居中； }.hide { 顯示：彈性； }

.p1 { font-family: "Times New Roman", Times, serif; 字體大小：26pt； }

HTML

測驗應用 BBS 經濟

定義

測試

資源

社區

搜索

我 問題 答案 1 答案 2 答案 3 答案 4 開始下一步

Answer 1

考慮一下，如果您只是創建一個簡單的練習測驗。

 var score_card = document.getElementById('score'); var score_no = 0; function Calculate(){ if (document.getElementById('Q1sol3').checked == true){ score_no+=1 } if (document.getElementById('Q2sol4').checked == true){ score_no+=1 } score_card.innerHTML = score_no; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <span>SCORE? <span id="score">0</span></span> <br> <section> <div id="Q1"> <span>What is your Fav Tag?</span><br> <input type="radio" name="Q1" id="Q1sol1"> <label for="Q1sol1">Body</label><br> <input type="radio" name="Q1" id="Q1sol2"> <label for="Q1sol2">Head</label><br> <input type="radio" name="Q1" id="Q1sol3"> <label for="Q1sol3">DIV</label><br> <input type="radio" name="Q1" id="Q1sol4"> <label for="Q1sol4">HTML</label><br> </div> <br> <div id="Q2"> <span>What is your Fav attribute:</span><br> <input type="radio" name="Q2" id="Q2sol1"> <label for="Q2sol1">src</label><br> <input type="radio" name="Q2" id="Q2sol2"> <label for="Q2sol2">href</label><br> <input type="radio" name="Q2" id="Q2sol3"> <label for="Q2sol3">style</label><br> <input type="radio" name="Q2" id="Q2sol4"> <label for="Q2sol4">id</label><br> </div> <br> <br> <input type="button" id="btn" onClick="Calculate()" style="background;green: color;white: padding;3px;" value="Submit"> </section> </body> </html>