quiz3.html

<div id="quiz"></div>
<button id="submit">Submit Quiz</button>
<div id="results"></div>
<button id="main" onclick="document.location='mainpage2.html'">Back to main page</button>

<style>
  body{
	font-size: 20px;
	font-family: sans-serif;
	color: #333;
}
.question{
	font-weight: 600;
}
.answers {
  margin-bottom: 20px;
}
.answers label{
  display: block;
}
#main{
	font-family: sans-serif;
	font-size: 20px;
	background-color: #279;
	color: #fff;
	border: 0px;
	border-radius: 3px;
	padding: 20px;
	cursor: pointer;
	margin-bottom: 20px;
}
#main:hover{
	background-color: #38a;
}
#submit{
	font-family: sans-serif;
	font-size: 20px;
	background-color: #279;
	color: #fff;
	border: 0px;
	border-radius: 3px;
	padding: 20px;
	cursor: pointer;
	margin-bottom: 20px;
}
#submit:hover{
	background-color: #38a;
}
</style>


<script>
(function(){
  function buildQuiz(){
    // variable to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach(
      (currentQuestion, questionNumber) => {

        // variable to store the list of possible answers
        const answers = [];

        // and for each available answer...
        for(letter in currentQuestion.answers){

          // ...add an HTML radio button
          answers.push(
            `<label>
              <input type="radio" name="question${questionNumber}" value="${letter}">
              ${letter} :
              ${currentQuestion.answers[letter]}
            </label>`
          );
        }

        // add this question and its answers to the output
        output.push(
          `<div class="question"> ${currentQuestion.question} </div>
          <div class="answers"> ${answers.join('')} </div>`
        );
      }
    );

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join('');
  }

  function showResults(){

    // gather answer containers from our quiz
    const answerContainers = quizContainer.querySelectorAll('.answers');

    // keep track of user's answers
    let numCorrect = 0;

    // for each question...
    myQuestions.forEach( (currentQuestion, questionNumber) => {

      // find selected answer
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      // if answer is correct
      if(userAnswer === currentQuestion.correctAnswer){
        // add to the number of correct answers
        numCorrect++;

        // color the answers green
        answerContainers[questionNumber].style.color = 'lightgreen';
      }
      // if answer is wrong or blank
      else{
        // color the answers red
        answerContainers[questionNumber].style.color = 'red';
      }
    });

    // show number of correct answers out of total
    //resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
    if (numCorrect < 4) {
      resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length} 
      Better luck next time! Refresh this page to try again. Try reviewing some of the tabs on the main page to help you learn!`;
    }
    else if (numCorrect == 4) {
      resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length} 
      Nice work! Almost perfect, try again?`;
    }
    else if (numCorrect == 5) {
      resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length} 
      Wow! You're an expert! Maybe it's time for you to start doing your own research!`;
    }
  }

  const quizContainer = document.getElementById('quiz');
  const resultsContainer = document.getElementById('results');
  const submitButton = document.getElementById('submit');
  const myQuestions = [
    {
      question: "Which of the following is NOT a source of renewable energy?",
      answers: {
        a: "Tidal", 
        b: "Geothermal",
        c: "Biomass",
        d: "Natural gas"
      },
      correctAnswer: "d"
    },
    {
      question: "What is the technical name for a solar panel?",
      answers: {
        a: "Photoelectric cell",
        b: "Photovoltaic cell",
        c: "Photosynthesis cell",
        d: "Photosensitive cell"
      },
      correctAnswer: "b"
    },
    {
      question: "Which chemical is most widely used as a basis for rechargeable batteries?",
      answers: {
        a: "Lithium",
        b: "Nickel",
        c: "Cadmium",
        d: "Lead"
      },
      correctAnswer: "a"
    },
    {
      question: "What is the technical term for 'energy per unit of electricity'?",
      answers: {
        a: "Current",
        b: "Voltage",
        c: "Power",
        d: "Force"
      },
      correctAnswer: "b"
    },
    {
      question: "How much of Australia's electricity was supplied by solar power in 2019?",
      answers: {
        a: "21%", 
        b: "7%",
        c: "6%",
        d: "0.8%"
      },
      correctAnswer: "c"
    }
  ];

  // Kick things off
  buildQuiz();

  // Event listeners
  submitButton.addEventListener('click', showResults);
})();
</script>