javascript - 重新开始测验的功能

Question

需要对我的代码进行修复，以允许用户重新启动测验、隐藏先前的结果并重新列出答案数据。这是小提琴https://jsfiddle.net/Daryl13/p047yx91/11/。

就目前而言，以前的结果作为测验结果仍然可行。任何帮助将不胜感激。

function endQuiz() {
    console.log("Scores were ", answerData);
    document.getElementById("question").style.display = "none";
    document.getElementById("quiz-img").style.display = "none";
    document.getElementById("result").style.display = "block";
    // Sort the scores in descending order and check the top 2 character types
    const sortedScores = Object.entries(answerData).sort((type1, type2) => type2[1] - type1[1]);
    myTypes = [sortedScores[0][0]];
    if (sortedScores[1][1] === sortedScores[0][1]) myTypes.push(sortedScores[1][0]);
    let result = '';
    if (myTypes.length === 1) result = "You are a " + myTypes[0];
    else result = "You could either be a " + myTypes.join(" or a ");
    document.querySelector("#result .result-text").innerHTML = result;
    document.querySelector(".result-image").innerHTML=''; 
    myTypes.forEach(t => {
    let src='';
    if (t === "warlock")  src = 'warlock.jpg';
    else if (t === "titan") src = 'titan.jpg';
    else if (t === "hunter") src = 'hunter.jpg';
    if (src) document.querySelector(".result-image").innerHTML += `<img src="assets/images/pages/${t}3.png" />`;
  });
    restart();
  }

  function restart() {
      beginQuiz.innerText = "Restart";
      document.getElementById("intro").style.display = "block";
      document.getElementById("result").style.display = "block";
      currentQuestion = 0;
      answerData = {
        Warlock: 0,
        Hunter: 0,
        Titan: 0
      };
      updateQuestion()

标签： javascripthtml

Answer 1

由于您使用与开始测验相同的按钮来重新启动，因此您可以在 beginQuiz 函数中清除结果，如下所示，您还必须在测验结果标题中添加一个 id 以定位和清除，然后再次设置标题当您显示结果时：

索引.html

<h2 id="result-header">Quiz Results</h2>

脚本.js

function startQuiz() {
  document.querySelector('#result .result-text').innerHTML = ''; // here
  document.querySelector('.result-image').innerHTML = ''; // here
  document.getElementById('result-header').innerHTML = ''; // here
  document.getElementById('intro').style.display = 'none';
  document.getElementById('question').style.display = 'block';
  shuffledQuestions = questions.sort(() => Math.random() - 0.5);
  currentQuestion = 0;
  choiceButtonsHandler();
  updateQuestion();
}

function endQuiz() {
  console.log('Scores were ', answerData);
  document.getElementById('question').style.display = 'none';
  document.getElementById('quiz-img').style.display = 'none';
  document.getElementById('result').style.display = 'block';
  // Sort the scores in descending order and check the top 2 character types
  const sortedScores = Object.entries(answerData).sort(
    (type1, type2) => type2[1] - type1[1],
  );
  myTypes = [sortedScores[0][0]];
  if (sortedScores[1][1] === sortedScores[0][1])
    myTypes.push(sortedScores[1][0]);
  let result = '';
  if (myTypes.length === 1) result = 'You are a ' + myTypes[0];
  else result = 'You could either be a ' + myTypes.join(' or a ');
  document.querySelector('#result .result-text').innerHTML = result;
  document.getElementById('result-header').innerHTML = 'Quiz Results'; // here
  document.querySelector('.result-image').innerHTML = '';
  myTypes.forEach((t) => {
    let src = '';
    if (t === 'warlock') src = 'warlock.jpg';
    else if (t === 'titan') src = 'titan.jpg';
    else if (t === 'hunter') src = 'hunter.jpg';
    if (src)
      document.querySelector(
        '.result-image',
      ).innerHTML += `<img src="assets/images/pages/${t}3.png" />`;
  });
  restart();
}

并且只restart()在您的endQuiz()功能中单击重新启动按钮

更新：啊，我看到你的答案数据和覆盖引用了两个不同的东西：

const answerData = { // can use const here since object properties are mutable
  // one object, with names as keys, scores as values
  warlock: 0,
  hunter: 0,
  titan: 0,
};

function restart() {
  beginQuiz.innerText = 'Restart';
  document.getElementById('intro').style.display = 'block';
  document.getElementById('result').style.display = 'block';
  currentQuestion = 0;
  answerData = { // casing must match in order to overwrite
    warlock: 0,
    hunter: 0,
    titan: 0,
  };
  updateQuestion();
}