如何在JavaScript测验中开发用户得分功能

核心问题修复说明 #

1. 获取选中的答案 #

userScore函数中未正确利用点击事件对象e，需通过e.target.textContent获取点击按钮上的答案文本。

2. 判断答案正误与计分 #

• 原题目数组缺少正确答案标记，需给每个题目对象添加correctAnswer字段；
• 需根据当前questionIndex获取对应题目的正确答案，而非直接访问myQuestions.answers；
• 测验结束（时间耗尽或题目做完）时，要将最终得分展示到页面。

修改后的JavaScript代码 #

var startQuizBtn = document.getElementById("start-quiz");

startQuizBtn.onclick = function() {
  console.log('button click')
  showQuestions();
  setTime();
};

var timeEl = document.querySelector(".time");
var scoreEl = document.getElementById("score");
var secondsLeft = 15;
var scoreCounter = 0;
var questionIndex = 0;

// 启动定时器
function setTime() {
  var timerInterval = setInterval(function() {
    secondsLeft--;
    timeEl.textContent = secondsLeft;

    if (secondsLeft <= 0) {
      clearInterval(timerInterval);
      showFinalResults();
    }

  }, 1000);
}

// 题目数组（新增correctAnswer字段标记正确答案）
var myQuestions = [{
    question: "Javascript是一门_______语言?",
    answers: ["面向对象", "基于对象", "过程式", "以上都不是"],
    correctAnswer: "面向对象"
  },
  {
    question: "以下哪个关键字用于在Javascript中定义变量?",
    answers: ["var", "bar", "jar", "bob"],
    correctAnswer: "var"
  },
  {
    question: "以下哪个方法用于在Javascript中获取HTML元素?",
    answers: ["targetElement", "thatOneElement", "getElementById", "idElement"],
    correctAnswer: "getElementById"
  },
];

// 展示题目
function showQuestions() {
  startQuizBtn.style.display = "none";
  var quizAnswers = document.getElementById("answers");
  var questionh3 = document.getElementById("questions");

  // 清空上一题内容
  questionh3.textContent = myQuestions[questionIndex].question;
  quizAnswers.innerHTML = "";

  myQuestions[questionIndex].answers.forEach(function(q) {
    var li = document.createElement("li");
    var answerBtn = document.createElement("button");
    
    li.appendChild(answerBtn);
    quizAnswers.appendChild(li);
    
    answerBtn.textContent = q;
    answerBtn.style.padding = "10px";
    li.style.listStyle = "none";
    li.style.margin = "5px 0";
    
    // 绑定单个点击事件，避免重复绑定
    answerBtn.addEventListener("click", function(e) {
      userScore(e);
      checkAnswer();
    });
  })
}

// 计分逻辑
function userScore(e) {
  var selectedAnswer = e.target.textContent;
  var currentQuestion = myQuestions[questionIndex];
  
  if (selectedAnswer === currentQuestion.correctAnswer) {
    scoreCounter++;
    scoreEl.textContent = "当前得分: " + scoreCounter;
  } else {
    // 答错扣时间
    secondsLeft -= 10;
    scoreEl.textContent = "当前得分: " + scoreCounter + "（答错扣10秒）";
  }
}

// 切换下一题
function checkAnswer() {
  questionIndex++;
  // 判断是否做完所有题目
  if (questionIndex >= myQuestions.length) {
    showFinalResults();
    return;
  }
  showQuestions();
}

// 展示最终结果
function showFinalResults() {
  var quizContainer = document.getElementById("quiz-container");
  // 清空题目区域
  quizContainer.innerHTML = "";
  
  var resultTitle = document.createElement("h2");
  resultTitle.textContent = "测验结束！";
  var resultText = document.createElement("p");
  resultText.textContent = "你的最终得分是: " + scoreCounter + "/" + myQuestions.length;
  
  quizContainer.appendChild(resultTitle);
  quizContainer.appendChild(resultText);
}

修改后的HTML代码 #

<div class="wrapper">
  <header>
    <h1>代码测验挑战</h1>
    <p id="quiz-rules">欢迎参加Javascript基础知识测验！回答问题来测试你的Javascript水平。本测验有时间限制，答错一题会被扣10秒时间。点击下方按钮开始测验。</p>
  </header>
  <div id="quiz-container">
    <div id="start-button-container">
      <button id="start-quiz">开始测验</button>
    </div>
    <h2 class="time">15</h2>
    <h3 id="questions"></h3>
    <ul id="answers"></ul>
    <div id="score"></div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Badminton