Javascript display questions and answers on html correctly and load next question of a quiz-CodePudding

I´m making a quiz with javascript and I have encountered a problem with few things. The quiz is works so that the user clicks the checkbox that has the correct answer.

My HTML form looks like this, so the correct answer is checked here in html part:

<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>

So in my JS I´m trying to get the questions and the answers to be displayed on html. My javascript looks like this:

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();

For some reason, the part that gets displayed is only the "correctAnswer:'b'" part and nothing else. I also have problem with "displaying only one question", so it always shows the last/latest question added to javascript.

I have tried to add a compeletely new div-element to html that would hold the answers, but it doesn´t work, it only shows the 'correctAnswer: b'- part. I have tried to use loops so that it would go through the questions one at a time so that it would only show the one that I want, but it didn´t work so I took it out, since I can´t get those things to display properly even without it.

Also for the other problem, displaying only question at a time and going to the other question after clicking a button, I have tried loops to go through the questions, but with no luck. This second problem (displaying one question etc.) is bigger so I will probably just do other post with better description of it, but if anyone happens to know a way with only this, I would be thankfullness.

I´m sorry for my english, but hopefully you will understand what I mean. If anyone knows how fix this I would be greatful. I have little experience with coding so things I do might not be correct. If you need more describing I will try.

CodePudding user response：

You can try the code below, it shows all the questions and answers as it's a demo for now, but you can improve it as you need, you are good to move forward!

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 ></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>