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>