Javascript 在 html 上正确显示问题和答案并加载测验的下一个问题

Question

我正在用 javascript 做一个测验，我遇到了一些问题。测验有效，因此用户可以单击具有正确答案的复选框。

我的 HTML 表单看起来像这样，所以在 html 部分检查正确答案:

<div id="kysymys"> <p id="kymysys"> </p> </div>
    <div id="answerit"></div>
    <div id="vastausformi">
        <form id="vastaukset"> 
            <label for="a">A)</label>
            <input type="radio" classname="box" name="box" id="check1" value="a" onclick="checkGuess(this.value)" /><br>
    
            <label for="b">B)</label>
            <input type="radio" classname="box" name="box" id="check2" value="b" onclick="checkGuess(this.value)" /><br>
             
            <label for="c">C)</label>
            <input type="radio" classname="box" name="box" id="check3" value="c" onclick="checkGuess(this.value)" /><br>
             
            <label for="d">D)</label>
            <input type="radio" classname="box" name="box" id="check4" value="d" onclick="checkGuess(this.value)" />
        </form>
    </div>

所以在我的 JS 中，我试图让问题和答案显示在 html 上。我的 javascript 看起来像这样:

const questions= {
  
  question: "Which city is the capital of Sweden?",
  vastaus:{
      a: 'Stockholm',
      b: 'Malmö',
      c: 'Göteborg',
      d: 'Helsingborg'
  },
  correctAnswer: 'a',

  
  question: "Which animal can be seen on the Porsche logo?",
  vastaus:{
      a:'Buffalo',
      b:'Horse',
      c:'Jaguar',
      d:'Deer'
  },
  correctAnswer:'b'
};



function showAnswers(){
  for (const vastaus in questions) {
  document.getElementById("answerit").innerHTML=`${vastaus}: ${questions.vastaus}`.toString();
}}
showAnswers();


function showQuestion(){
  
  for (const question in questions) {
    document.getElementById("kymysys").innerHTML = `${question}: ${questions[question]}`.toString();
    
}
}
  showQuestion();

出于某种原因，显示的部分只有“correctAnswer:'b'”部分，没有其他内容。我也有“只显示一个问题”的问题，所以它总是显示添加到 javascript 的最后一个/最新的问题。

我试图在 html 中添加一个全新的 div 元素来保存答案，但它不起作用，它只显示“correctAnswer: b”部分。我曾尝试使用循环，这样它就可以一次回答一个问题，这样它只会显示我想要的问题，但它没有用，所以我把它去掉了，因为我无法得到那些东西即使没有它也能正常显示。

还有另一个问题，一次只显示问题并在单击按钮后转到另一个问题，我尝试循环遍历这些问题，但没有成功。第二个问题(显示一个问题等)更大，所以我可能会写其他的帖子来更好地描述它，但如果有人碰巧知道只有这个的方法，我将不胜感激。

抱歉我的英语不好，但希望您能理解我的意思。如果有人知道如何解决这个问题，我将不胜感激。我没有编码经验，所以我做的事情可能不正确。如果您需要更多描述，我会尝试。

Answer 1

您可以尝试下面的代码，它显示了所有的问题和答案，因为它现在是一个演示，但您可以根据需要对其进行改进，您可以继续前进!

const questions = [
  {
    question: "Which city is the capital of Sweden?",
    vastaus: {
      a: "Stockholm",
      b: "Malmö",
      c: "Göteborg",
      d: "Helsingborg"
    },
    correctAnswer: "a"
  },

  {
    question: "Which animal can be seen on the Porsche logo?",
    vastaus: {
      a: "Buffalo",
      b: "Horse",
      c: "Jaguar",
      d: "Deer"
    },
    correctAnswer: "b"
  }
];
let index = 0;
function showAnswer(index) {
  if(index < questions.length && index >= 0){
    document.getElementsByClassName("answerit")[0].innerHTML =
      questions[index].question;
    document.getElementsByTagName("label")[0].textContent =
      "A)  " + questions[index].vastaus.a;
    document.getElementsByTagName("label")[1].textContent =
      "B)  " + questions[index].vastaus.b;
    document.getElementsByTagName("label")[2].textContent =
      "C)  " + questions[index].vastaus.c;
    document.getElementsByTagName("label")[3].textContent =
      "D)  " + questions[index].vastaus.d;
   }else{
    alert("The end!");
   }
}

showAnswer(index);

document.getElementById("next").addEventListener("click", function () {
  showAnswer(++index);
});

document.getElementById("prev").addEventListener("click", function () {
  showAnswer(--index);
});

<div id="kysymys">
  <p id="kymysys"> </p>
</div>
<div class="answerit"></div>
<div id="vastausformi">
  <form id="vastaukset">
    <label for="a">A)</label>
    <input type="radio" classname="box" name="box" id="check1" value="a" onclick="checkGuess(this.value)" /><br>

    <label for="b">B)</label>
    <input type="radio" classname="box" name="box" id="check2" value="b" onclick="checkGuess(this.value)" /><br>

    <label for="c">C)</label>
    <input type="radio" classname="box" name="box" id="check3" value="c" onclick="checkGuess(this.value)" /><br>

    <label for="d">D)</label>
    <input type="radio" classname="box" name="box" id="check4" value="d" onclick="checkGuess(this.value)" />
    <br />
    <input type="button" id="prev" value="Prev Question">
    <input type="button" id="next" value="Next Question">
  </form>
</div>