Old school D3 from simpler times

All examples By author By category About

KacieW

Full window Github gist

simple quiz

<div id="startPage">
  <h1>Simple Quiz</h1>
  <p>Please select only one choice</p>
  <form id="loginForm" action="" autocomplete="off">
    <input type="text" id="username" placeholder="User Name" autocomplete="off" required>
    <input type="password" id="password" placeholder='Password' required>
    <input type="submit" id="login" value="Login">
  </form>
  <div id="displayUserName"></div>
  <button id="start">Start</button>
</div>

<div class="wrapper" id="wrapper">
  <div class="questions" id="questions"></div>
  <div class="choices">
    <input type="radio" class="ch" id="1" name="option" value="0">
    <label class="option-descript" for="1"></label>
    <input type="radio" class="ch" id="2" name="option" value="1">
    <label class="option-descript" for="2"></label>
    <input type="radio" class="ch" id="3" name="option" value="2">
    <label class="option-descript" for="3"></label>
    <input type="radio" class="ch" id="4" name="option" value="3">
    <label class="option-descript" for="4"></label>
  </div>
  <div class="btn">
    <input type="button" id="prev" value="Previous">
    <input type="button" id="next" value="Next">
  </div>
</div>

<div id="resultPage">
</div>

<script>
$(document).ready(function() {
  var allQuestions = [{
    question: "1. Who is Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 1
  }, {
    question: "2. How are you?",
    choices: ["Not bad.", 'So so.', 'Very good.', 'Not sure.'],
    correctAnswer: 2
  }, {
    question: "3. How is the weather?",
    choices: ["sunny", 'Cloudy', 'Rainy', 'Windy'],
    correctAnswer: 2
  }, {
    question: "4. Where are you from?",
    choices: ['West', "East", "North", "South"],
    correctAnswer: 3
  }];
  var correct = [];//to store correct answers
  allQuestions.forEach(function(item) {
    correct.push(item.correctAnswer)
  });//push correct answers to the array.
  var currentPage = -1;
  var startbtn = document.getElementById("start");
  var loginbtn = document.getElementById("login");
  var startPage = document.getElementById("startPage");
  var wrapper = document.getElementById("wrapper");
  var questions = document.getElementById("questions");
  var radiobtn = document.getElementsByClassName("ch");
  var optionDescript = document.getElementsByClassName("option-descript");
  var prevbtn = document.getElementById("prev");
  var nextbtn = document.getElementById("next");
  var resultArr = [];//to store user's answers
  startbtn.addEventListener('click', showNext);//btn to start
  nextbtn.addEventListener('click', showNext);//btn for next question
  prevbtn.addEventListener('click', showPrev);//btn for prev question

checkCookie();//check if it is a return user by cookies.
  storeLocalStorage();//use LocalStorage to store userName.
  //check for cookies
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 60 * 1000));//set expired time
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

function checkCookie() {
    $('#loginForm').hide(); //hide login form
    var user = getCookie("username"); //get cookie
    if (user != "") { //有cookies, show start button to start quiz right way.
      $('#start').fadeIn('slow');
      $('#displayUserName').append("Welcome again " + user);
    } else {//no cookie, show login form for new user to login.
      $('#loginForm').show();
      $('#loginForm').on('click', '#login', function(ev) {//after clicking the login button, show the start button to start.
        ev.preventDefault();//prevent submit to the server at this time
        $(this).parent().fadeOut('slow', function() {
          $('#start').fadeIn('slow');
        });
        user = document.getElementById("username").value;//get the user name from the input form
        setCookie("username", user, 1);
        $('#displayUserName').append("Welcome " + user);
      });
    }
  }
  //end of cookie checking
  //store user name by localstorage
  function storeLocalStorage() { 
    if (typeof(Storage) !== "undefined") {
      var username = document.getElementById("username");
      var myUserName = username.value;
      localStorage.setItem("username", myUserName);
    } else {
      alert("Sorry!");
    }
  }
	
//start the real quiz
  function getAnswer() {//get the user's answer from the radio btu she selected.
    var tempChoiceValue = null;
    for (var j = 0; j < radiobtn.length; j++) {
      if (radiobtn[j].checked) {
        tempChoiceValue = radiobtn[j].value;
      }
      radiobtn[j].checked = false;//clear all the btns ready for next question to display.
    }
    return tempChoiceValue;
  }

function showNext(ev) {//show next question
    var userAnswer = getAnswer();//get the user's answer before move it to the next question
    currentPage++;
    startPage.style.display = "none";//hide the startPage
    wrapper.style.display = "block";//show the question page
    if (currentPage > 0) {//not the startpage
      resultArr[currentPage - 1] = userAnswer;//put user's answer to the resultArr
    }
    if (currentPage > 0 && (userAnswer === null)) {//not start page and user's answer didn't select anything
      currentPage--;
      alert("Please select one");
      return;//stop the code
    } else {
      if (currentPage == 0) {//for startpage, hide the prev button
        prevbtn.style.display = "none";
      } else {
        prevbtn.style.display = "inline-block";//show prev btn
      }
      if (currentPage == 3) {//if it is the last question page, change the btn value from "next" to "submit"
        this.value = "Submit";
        this.style.backgroundColor = "red";
        this.style.border = "none";
      }
      if (currentPage == 4) { //show the result
        this.onclick = showResult();
      }
    }
    //display the questions and choices
    questions.innerHTML = allQuestions[currentPage].question;
    for (var i = 0; i < optionDescript.length; i++) {
      optionDescript[i].innerHTML = allQuestions[currentPage].choices[i];
    }
    //store the user's answer for nav back and force with btns
    restorePreviousAnswer();
  }

var restorePreviousAnswer = function() {
    if (resultArr[currentPage] != null) {
      radiobtn[resultArr[currentPage]].checked = true;
    }
  };

function showPrev() {//show the prev question
    var userAnswer = getAnswer();
    if (userAnswer != null) {
      resultArr[currentPage] = userAnswer;
    }
    currentPage = currentPage - 1;
    if (currentPage == 0) {
      prevbtn.style.display = "none";//hide the prev btn for the start page
    }
    if (currentPage != 3) {//change btn value to 'next' if it is not the last question page
      nextbtn.value = "Next";
      nextbtn.style.backgroundColor = "#a653f4";
    }
    //show questions and choices
    questions.innerHTML = allQuestions[currentPage].question;
    for (var i = 0; i < optionDescript.length; i++) {
      optionDescript[i].innerHTML = allQuestions[currentPage].choices[i];
    }
    restorePreviousAnswer();
  }
//page to show the result
  var resultPage = document.getElementById("resultPage");
  function showResult() {
    wrapper.style.display = "none";//hide the questions pages.
    var temp = 0;
    var h2 = document.createElement("h2");
    for (var q = 0; q < correct.length; q++) {
      if (resultArr[q] == correct[q]) {//calculate the score
        temp++;
      }
    }
    var h2Text = document.createTextNode("Your score is: " + temp + "/" + correct.length);
    h2.appendChild(h2Text);
    resultPage.appendChild(h2);
  }
});

</script>