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>