创建每次选择正确答案时都会增加的分数

Posted 2023-03-27

【中文标题】创建每次选择正确答案时都会增加的分数

【英文标题】：Creating a score that will go up every time a correct answer is selected

【发布时间】：2022-01-20 02:14:51

【问题描述】：

所以我有一个使用 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:悬停 边框颜色：黑色； .btn.正确 --hue: var(--hue-正确); 颜色：绿色； .btn. 错误 --hue: var(--hue-wrong); .start-btn, .next-btn 字体大小：1.5rem； 字体粗细：粗体； 填充：10px 20px； . 控制 显示：弯曲； 证明内容：中心； 对齐项目：居中； 。隐藏 显示：弯曲；

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

HTML

测验应用程序 BBS经济 定义 测试 资源 社区 搜索 我 题 答案 1 答案 2 答案 3 答案 4 开始 下一个

【参考方案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>