Issues with displaying Javascript objects in an HTML page

user_14812291 0
Viewed 65

I'm trying to create a quiz game using Javascript. The issue I'm having is that the Js objects of questions and answers are not getting displayed in my HTML page. My main issue lies with the showQuestions function. Any help will be greatly appreciated. Many thanks in advance.

Please find below my code.

 const startButton = document.getElementById("start");
 const timerEl = document.getElementById("timer");
 const questionEl = document.getElementById("question");
 const ul = document.getElementById("answers");
 const resultEl = document.getElementById("result");
 let currentQuestionIndex = 0;
 let seconds = 60;
 let interval;

 const questions = [{
     question: "How many megabytes are there in 1 Gigabytes?",
     answers: [{
         answer: "1000",
         isCorrect: false
       },
       {
         answer: "100",
         isCorrect: false
       },
       {
         answer: "10,000",
         isCorrect: true
       }

     ],
   },
   {
     question: "what is C#?",
     answers: [{
         answer: "A procedural language",
         isCorrect: false
       },
       {
         answer: "An object-oriented language",
         isCorrect: true
       },
       {
         answer: "a functional programming language",
         isCorrect: false
       }

     ],
   },

   {
     question: "What do you call a group of memory location containing the same data type?",
     answers: [{
         answer: "A loop",
         isCorrect: false
       },
       {
         answer: "Data structure",
         isCorrect: false
       },
       {
         answer: "Array",
         isCorrect: true
       }
     ],
   },

   {
     question: "In C++ which keyword must you use to display and anser on the screen?",
     answers: [{
         answer: "printf",
         isCorrect: true
       },
       {
         answer: "printout",
         isCorrect: false
       },
       {
         answer: "msgout",
         isCorrect: false
       }
     ],
   },

   {
     question: "Which keyword do you use in C# to declare variables?",
     answers: [{
         answer: "let",
         isCorrect: false
       },
       {
         answer: "Dim",
         isCorrect: true
       },
       {
         answer: "var",
         isCorrect: false
       }
     ],
   },
 ];


 function startTimer() {
   timerEl.textContent = seconds;
   interval = setInterval(function() {
     seconds--;
     timerEl.textContent = seconds;
     if (seconds === 0) {
       clearInterval(interval);
     }
     //renderTime is called here once every second
   }, 1000);
 }

 function onButtonClick() {
   const value = this.getAttribute("value");
   if (value === "true") {
     resultEl.textContent = "correct";
   } else {
     resultEl.textContent = "incorrect";
   }
   currentQuestionIndex++;
   if (currentQuestionIndex === questions.length) {
     questionEl.textContent = "FINISH";
   } else {
     showQuestions(questions[currentQuestionIndex]);
   }
 }

 function showQuestions(question) {

   questionEl.textContent = question.question;

   //Loop through each questions and answers
   question.answers.forEach((currentAnswer) => {


     const li = document.createElement("li");
     const button = document.createElement("button");
     button.setAttribute("value", currentAnswer.isCorrect);
     button.textContent = currentAnswer.answer;
     button.addEventListener("click", onButtonClick);
     li.appendChild(button);
     ul.appendChild(li);
   })
 }

 function startGameQuiz() {
   startTimer();
   showQuestions(questions[currentQuestionIndex]);
 }
 startButton.addEventListener("click", startGameQuiz);
<html>
    <header class="header">
        <strong>
            <a>010101</a>
        </strong>
        <span id="timer" class="quizzTimer">Time: 0</span>
    </header>
    <body>
        <h1>Computer Science Quiz</h1>
        <br>
            <h5>
                <p>Welcome to  the Computer Science quiz session.</p>
            </h5>
            <!--Display questions and answers-->
            <div id="quiz"></div>
            <button id="start">Start quiz</button>
            <div id="result"></div>
        </body>
        <script src="script.js"></script>
    </html>

display object html javascript
2 Answers
const startButton = document.getElementById("start");
const timerEl = document.getElementById("timer");
const questionEl = document.getElementById("question"); 
const ul = document.getElementById("answers");
const resultEl = document.getElementById("result");

As long as you don't have in your page elements with the above id's, you cannot refer on them. For example your questionE1 constant is always null as there is no element in your page with this id.

user_51788640

Your HTML tags should be like this:

    <div id="quiz"></div>
    <button id="start">Start quiz</button>
    <div id="question"></div>
    <ul id="answers"></ul>
    <div id="result"></div>

the missing tags are question & answers which gives an error in js side, so it prevent your questions from being displayed, but it's not the only error in your code, I tried it, you have to clear the list once the user respond to a question.

Please find attached a screen shot.

Good Luck!

execution screen shot

user_114420980
Related