实现按难度筛选的测验题单题展示与提交评分功能

我正在开发一款测验应用，可根据difficulty关键字从题目数组中筛选题目。目前选择难度后会展示该难度下的所有题目列表，我希望改为每次仅显示一道题目，提交答案后完成评分并切换至下一题。

现有代码 #

HTML 代码 #

<div id="difficulty">
  <input type="radio" name="difficulty" id="easy-diff" value="easy"> easy<br>
  <input type="radio" name="difficulty" id="medium-diff" value="medium"> medium<br>
  <input type="radio" name="difficulty" id="hard-diff" value="hard"> hard<br>
</div><br>

<div id="question-holder" class="hide">
  <div id="question-counter"></div>
  <div id="score-counter"></div>
  <p id="post"></p>
  <div class="quiz">
    <p id="question">Question placement</p>
    <ul>
      <li><label for="a" id="a-answer">possible answer</label><input type="radio" name="answer" id="a" class="answer"></li>
      <li><label for="b" id="b-answer">possible answer</label><input type="radio" name="answer" id="b" class="answer"></li>
      <li><label for="c" id="c-answer">possible answer</label><input type="radio" name="answer" id="c" class="answer"></li>
      <li><label for="d" id="d-answer">possible answer</label><input type="radio" name="answer" id="d" class="answer"></li>
    </ul>
  </div>
  <button id="submit" class="btn">Submit</button>
</div>

JavaScript 代码 #

let questionHolder = document.getElementById("question-holder");
let scoreContainer = document.getElementById("score-container")
let answers = document.querySelectorAll(".answer");
let easyDifficulty = document.getElementById("easy-diff");
let mediumDifficulty = document.getElementById("medium-diff");
let hardDifficulty = document.getElementById("hard-diff");
let difficulty = document.getElementById("difficulty");
let difficultyLevel = "";
let questionCounter = 1;
let maxQuestion = 10
let currentQuiz = 0;
let score = 0;
let questionE1 = document.getElementById("question")
let a_answer = document.getElementById("a-answer");
let b_answer = document.getElementById("b-answer");
let c_answer = document.getElementById("c-answer");
let d_answer = document.getElementById("d-answer");
let submitBtn = document.getElementById("submit");
let questions = [{
    question: `Al Pacino starred in the 1975 film Dog Day Afternoon that is the true story of a bank robbery gone bad. Where did the attempted robbery take place?`,
    a: `Chicago`,
    b: `Los Angeles`,
    c: `Boston`,
    d: `New York`,
    answer: `d`,
    difficulty: `hard`
  },

  {
    question: `Al Pacino and Robert De Niro have starred in a total of four movies together, can you name the film that they first shared screen time in?`,
    a: `Righteous Kill`,
    b: `Heat`,
    c: `The Godfather Part II`,
    d: `The Irishman`,
    answer: `b`,
    difficulty: `hard`
  },

  {
    question: `Al Pacino plays as Alphonse "Big Boy" Caprice in which 1990 film that is based on a comic strip that is actively running today?`,
    a: `Flash Gordon`,
    b: `The Phantom`,
    c: `Popeye`,
    d: `Dick Tracy`,
    answer: `d`,
    difficulty: `medium`
  },

  {
    question: `Al Pacino starred alongside which actor in The Devil's Advocate, that is known for films such as Point Break, Speed and The Matrix?`,
    a: `Keanu Reeves`,
    b: `Patrick Swayze`,
    c: `Jeff Daniels`,
    d: `Joe Pantoliano`,
    answer: `a`,
    difficulty: `medium`
  },
  {
    question: `Al Pacino starred as which character in the 1983 film Scarface?`,
    a: `Indiana Jones`,
    b: `James Bond`,
    c: `Tony Montana`,
    d: `Harry Potter`,
    answer: `c`,
    difficulty: `easy`
  },
  {
    question: `What is the name of the film that Al pacino has won his first and only Academy Award?`,
    a: `Dog Day Afternoon`,
    b: `The Godfather Part II`,
    c: `Serpico`,
    d: `Scent of a Woman`,
    answer: `d`,
    difficulty: `easy`

  }
]

let pickDifficulty = () => {
  if (easyDifficulty.checked) {
    difficultyLevel = "easy";
  } else if (mediumDifficulty.checked) {
    difficultyLevel = "medium";
  } else if (hardDifficulty.checked) {
    difficultyLevel = "hard";
  }
}
displayQuestion()

function displayQuestion() {

  let currentQuestion = questions[currentQuiz];
  questionE1.innerText = currentQuestion.question
  a_answer.innerText = currentQuestion.a
  b_answer.innerText = currentQuestion.b
  c_answer.innerText = currentQuestion.c
  d_answer.innerText = currentQuestion.d

  deselectAnswer()
}

difficulty.addEventListener("change", (evt) => {
  pickDifficulty()
  const filteredQuestions = questions.filter(question => question.difficulty === difficultyLevel)

  const quiztemplate = document.querySelectorAll('.quiz')
  const quizparent = quiztemplate[0].parentNode
  quiztemplate.forEach((qq => quizparent.removeChild(qq)))


  filteredQuestions.forEach((quiz) => {
    const quizquestion = quizparent.appendChild(quiztemplate[0].cloneNode(true));
    quizquestion.querySelector("#question").innerText = quiz.question
    quizquestion.querySelector("#a-answer").innerText = quiz.a
    quizquestion.querySelector("#b-answer").innerText = quiz.b
    quizquestion.querySelector("#c-answer").innerText = quiz.c
    quizquestion.querySelector("#d-answer").innerText = quiz.d
  })
}, true);

function selectedAnswer() {

  let answer = undefined;

  answers.forEach(answers => {
    if (answers.checked) {
      answer = answers.id;
    }
  })

  return answer
}

function deselectAnswer() {
  answers.forEach(answers => {
    answers.checked = false;
  });
}

function nextQuestion() {

  let answer = selectedAnswer();

  if (answer) {
    if (answer === quizquestion[currentQuiz].answer) {
      score++;
      document.getElementById('score-counter').innerHTML = `<h3>Score:${score} / ${maxQuestion}</h3>`
      giveMe.play();
    }

    currentQuiz++;
    if (currentQuiz < filteredQuestions.length) {
      displayQuestion();
      increaseQuestionCounter();
    } else endQuiz()
  }
}
submitBtn.addEventListener('click', nextQuestion);

内容的提问来源于stack exchange，提问作者Huey O'Brien