Creating quiz with javascript and html, but my javascript quiz content does not appear in html

Question

I am currently creating a timed quiz with 10 questions by using arrays.

I managed to create a timer in HTML with JS, but somehow, my quiz (arrays in js file) does not show up in the html.

I double checked that there is no bug in my code, all variables are declared, and I made sure that I correctly linked my javascript file in the html code.

The following is the javascript section... ( I did not post my quiz questions)

var myQuestions = [
    { ~~~~~ my questions go here }
]



function generateQuiz(questions, quizContainer, resultsContainer, submitButton){

    function showQuestions(questions, quizContainer){
        //storing the answers
        var output = [];
        var answers;

        // by using for loops.
        for(var i=0; i<questions.length; i++){

            answers = [];

                for(letter in questions[i].answers){

                    // radio buttion in html
                    answers.push(
                        '<label>'
                            + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                            + letter + ': '
                            + questions[i].answers[letter]
                        + '</label>'
                    );
                }

            // add the Q&A to results
            output.push(
                '<div class="question">' + questions[i].question + '</div>'
                + '<div class="answers">' + answers.join('') + '</div>'
            );
        }

        // join to html 
        quizContainer.innerHTML = output.join('');
    }



    // --------- showing results 

    function showResults(questions, quizContainer, resultsContainer){

        // collect answer containers quiz
        var answerContainers = quizContainer.querySelectorAll('.answers');

        // count correct/wrong answers
        var userAnswer = '';
        var numCorrect = 0;

        for(var i=0; i<questions.length; i++){


            userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;

            // if/else loop 
            // correct answer, answer will display in green and # of correct answer will added
            // wrong answer, answer will display in red
            if(userAnswer===questions[i].correctAnswer){

                numCorrect++;
                answerContainers[i].style.color = 'lightgreen';
            }
            else{
                answerContainers[i].style.color = 'red';
            }
        }

        // show number of correct answers out of total
        resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
    }

    // --------- declare variables and display in html

    var quizContainer = document.getElementById('quiz');
    var resultsContainer = document.getElementById('results');
    var submitButton = document.getElementById('submit');


    generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);


    // --------- showing results on submit

    submitButton.onclick = function(){
        showResults(questions, quizContainer, resultsContainer);
    }

and in the html, I only posted the following:

<form method="POST" name="javaInterviewQuiz">
        <div id="time"><h4>Time left = <span id="timer"></span></h4></div>

        <div id="quiz"></div>
        <button id="submit">Get Results</button>
        <div id="results"></div>

</form>

I was expecting the timer to show up in the top (which it did), but my question section just does not show up.

Just as if I did not put any code there.

What errors were logged in the console (as in F12, console tab)? If you copied from another source just post the link because your post too long hence too difficult to read. You should post your code as a minimal reproducible example. — zer00ne
– zer00ne, Commented Apr 18, 2019 at 5:54

Pratyush Sharma · Accepted Answer · 2019-04-18 06:13:50Z

You declared inner functions but never called them. You can take them out and write them like this.

var myQuestions = [

]

function showQuestions(questions, quizContainer) {
    //storing the answers
    var output = [];
    var answers;

    // by using for loops.
    for (var i = 0; i < questions.length; i++) {

        answers = [];

        for (letter in questions[i].answers) {

            // radio buttion in html
            answers.push(
                '<label>'
                + '<input type="radio" name="question' + i + '" value="' + letter + '">'
                + letter + ': '
                + questions[i].answers[letter]
                + '</label>'
            );
        }

        // add the Q&A to results
        output.push(
            '<div class="question">' + questions[i].question + '</div>'
            + '<div class="answers">' + answers.join('') + '</div>'
        );
    }

    // join to html 
    quizContainer.innerHTML = output.join('');
}

function showResults(questions, quizContainer, resultsContainer) {

    // collect answer containers quiz
    var answerContainers = quizContainer.querySelectorAll('.answers');

    // count correct/wrong answers
    var userAnswer = '';
    var numCorrect = 0;

    for (var i = 0; i < questions.length; i++) {


        userAnswer = (answerContainers[i].querySelector('input[name=question' + i + ']:checked') || {}).value;

        // if/else loop 
        // correct answer, answer will display in green and # of correct answer will added
        // wrong answer, answer will display in red
        if (userAnswer === questions[i].correctAnswer) {

            numCorrect++;
            answerContainers[i].style.color = 'lightgreen';
        }
        else {
            answerContainers[i].style.color = 'red';
        }
    }

    // show number of correct answers out of total
    resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
}

// --------- declare variables and display in html

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

showQuestions(myQuestions, quizContainer);
// generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);


// --------- showing results on submit

submitButton.onclick = function () {
    showResults(questions, quizContainer, resultsContainer);
}

Erdem Savasci · Accepted Answer · 2019-04-18 06:24:15Z

I see that you are using nested functions and didn't call 'showQuestions' method at first. Also, you are trying to call 'showResults' from onclick event that is initialized outer scope of the nested functions. You can try as below;

var myQuestions = [{
  question: "What does 'Lorem ipsum dolor' mean?",
  answers: ['Nothing', 'Something'],
  correctAnswer: '1'
}];

function generateQuiz(questions, quizContainer, resultsContainer, submitButton) {

  function showQuestions(questions, quizContainer) {
    //storing the answers
    var output = [];
    var answers;

    // by using for loops.
    for (var i = 0; i < questions.length; i++) {

      answers = [];

      for (let letter in questions[i].answers) {

        // radio buttion in html
        answers.push(
          '<label>' +
          '<input type="radio" name="question' + i + '" value="' + letter + '">' +
          letter + ': ' +
          questions[i].answers[letter] +
          '</label>'
        );
      }

      // add the Q&A to results
      output.push(
        '<div class="question">' + questions[i].question + '</div>' +
        '<div class="answers">' + answers.join('') + '</div>'
      );
    }

    // join to html 
    quizContainer.innerHTML = output.join('');
  }



  // --------- showing results 

  function showResults(questions, quizContainer, resultsContainer) {

    // collect answer containers quiz
    var answerContainers = quizContainer.querySelectorAll('.answers');

    // count correct/wrong answers
    var userAnswer = '';
    var numCorrect = 0;

    for (var i = 0; i < questions.length; i++) {


      userAnswer = (answerContainers[i].querySelector('input[name=question' + i + ']:checked') || {}).value;

      // if/else loop 
      // correct answer, answer will display in green and # of correct answer will added
      // wrong answer, answer will display in red
      if (userAnswer === questions[i].correctAnswer) {

        numCorrect++;
        answerContainers[i].style.color = 'lightgreen';
      } else {
        answerContainers[i].style.color = 'red';
      }
    }

    // show number of correct answers out of total
    resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
  }

  // --------- showing results on submit

  submitButton.onclick = function() {
    showResults(questions, quizContainer, resultsContainer);
  }

  showQuestions(questions, quizContainer);
}

// --------- declare variables and display in html

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');


generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

<form method="POST" name="javaInterviewQuiz">
  <div id="time">
    <h4>Time left = <span id="timer"></span></h4>
  </div>

  <div id="quiz"></div>
  <button id="submit">Get Results</button>
  <div id="results"></div>

</form>

This code snippet is intended to give a little insight.

Collectives™ on Stack Overflow

Creating quiz with javascript and html, but my javascript quiz content does not appear in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related