simple quiz

<!--Simple quiz with login form and cookies to remember the user name-->

<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>