TORONTO KIDS COMPUTER CLUB | javascript
20345
post-template-default,single,single-post,postid-20345,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-7.6.2,wpb-js-composer js-comp-ver-6.8.0,vc_responsive

javascript

26 Feb javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script type="text/javascript" src="./scripts/jsb-global.js"></script>
  <script type="text/javascript" src="./scripts/solar_quiz.js"></script>

  <title>Document</title>
</head>
<body>
  <div class='quiz-container' id='quiz'>
    <div class='quiz-body'>
      <h2 id='question'>Question Text:</h2>
      <ul>
        <li>
          <input type="radio" id='a' name='answer' class='answer'>
          <label for="a" id='a_text'>Question</label>
        </li>
        <li>
          <input type="radio" id='b' name='answer' class='answer'>
          <label for="b" id='b_text'>Question</label>
        </li>
        <li>
          <input type="radio" id='c' name='answer' class='answer'>
          <label for="c" id='c_text'>Question</label>
        </li>
        <li>
          <input type="radio" id='d' name='answer' class='answer'>
          <label for="d" id='d_text'>Question</label>
        </li>
      </ul>
    </div>
    <button id='submit'>Submit</button>
  </div>
</body>
</html>















const quizData = [
  {
    question: 'Which planet is the smallest in the solar sytem?',
    a: 'Mars',
    b: 'Uranus',
    c: 'Neptune',
    d: 'Mercury',
    correct: 'd',
  },
  {
    question: 'Which planet is the largest in the solar sytem?',
    a: 'Mars',
    b: 'Jupiter',
    c: 'Neptune',
    d: 'Saturn',
    correct: 'b',
  },
  {
    question: 'Which planet is the closest to the sun?',
    a: 'Mercury',
    b: 'Jupiter',
    c: 'Venus',
    d: 'Saturn',
    correct: 'a',
  },
];

var oQuiz;
var aAnswers;
var oQuestion;
var a_text;
var b_text;
var c_text;
var d_text;
var oSubmit;

var currentQuiz = 0;
var score = 0

addEvent(window, "load", initialize);

function initialize()
{
  oQuiz = document.getElementById('quiz');
  aAnswers = document.querySelectorAll('.answer');
  oQuestion = document.getElementById('question');
  a_text = document.getElementById('a_text');
  b_text = document.getElementById('b_text');
  c_text = document.getElementById('c_text');
  d_text = document.getElementById('d_text');
  oSubmit = document.getElementById('submit');

  loadQuiz();
  oSubmit.onclick = answerQuestion;
}

function loadQuiz(){
  for (var i=0; i<aAnswers.length; i++) {
    aAnswers[i].checked = false;
  }

  var currentQuestion = quizData[currentQuiz];
  oQuestion.innerText = currentQuestion.question;
  a_text.innerText = currentQuestion.a;
  b_text.innerText = currentQuestion.b;
  c_text.innerText = currentQuestion.c;
  d_text.innerText = currentQuestion.d;
}

function answerQuestion(){
  var answer;
  for (var i=0; i<aAnswers.length; i++) {
    if (aAnswers[i].checked == true){
      answer = aAnswers[i].id;
    }
  }

  if (answer){
    if (answer == quizData[currentQuiz].correct){
      score ++;
    }
    currentQuiz++;
    if (currentQuiz < quizData.length){
      loadQuiz();
    }
    else{
      oQuiz.innerHTML = '<h2>You answered correctly at '+score+'/'+quizData.length+ ' questions.</h2> <button onclick="location.reload()">Reload</button>';
    }

  }
}
No Comments

Post A Comment