How to make simple HTML CSS JavaScript Quiz App

Hello Tech Lovers! 

“How do I make a JavaScript quiz?” is one of the most common questions asked by people learning web development, and for good reason. Quizzes are fun! They’re a great way of learning about new subjects, and they allow you to engage your audience with something fun and playful.

javascript quiz app


index.html


<!DOCTYPE html>
<html lang="en-US">
<head>
<title>fiverr.com/skill_master18</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<meta name="HandheldFriendly" content="true">
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body style="background-image: linear-gradient(to right, #92ee92, #ffffff, #92ee92);">
<div class='container'>
<div class='marksDiv'> Marks: <span id='marks'>0</span></div>
<div id='question'></div>
<div class='text1'>Click correct answer from the choices below</div>
<div class='buttons'>
<button class='choices' id='choice1' value='' onclick='validateAns(this)'>Option 1</button> 
<button class='choices' id='choice2' value='' onclick='validateAns(this)'>Option 2</button>
<button class='choices' id='choice3' value='' onclick='validateAns(this)'>Option 3</button>
<button class='choices' id='choice4' value='' onclick='validateAns(this)'>Option 4</button>
</div>
<button id='startButton' onclick='start()'>Start Quiz</button>
<div class='timeDiv'>Time Remaining : <span id="time">02:00</span></div>
</div>
</body>
</html>


Click Here to get Style.CSS code...


javascript.js


var qNumber = 0;
var score = 0;
var correctAns;
function start()
{
  var element = document.getElementById("startButton");
  if(element.innerHTML == "Start Quiz")
  {
  startQuiz();
  }
  else if(element.innerHTML == "Reset")
  {
   document.location.reload(true);
              alert("Quiz Ended Your Score Is : " + score + "/" + qNumber);
  }
}
function startQuiz()
{
  if(qNumber==0)
  {
  timeTrigger();
  }
      var answer=Question();
  correctAns = answer;
  var array = choices(answer);
  var shuffledArr = shuffleOptions(array);
  var element = document.getElementById("choice1");
element.innerHTML = shuffledArr[0];
element.value=shuffledArr[0];
var element = document.getElementById("choice2");
element.innerHTML = shuffledArr[1];
element.value=shuffledArr[1];
var element = document.getElementById("choice3");
element.innerHTML = shuffledArr[2];
element.value=shuffledArr[2];
var element = document.getElementById("choice4");
element.innerHTML = shuffledArr[3];
element.value=shuffledArr[3];
var element = document.getElementById("startButton");
    element.innerHTML = "Reset";
}

function Question()
{
// show question
        var element = document.getElementById("question");
var num1 = Math.floor(Math.random() * 10) + 1;
var num2 = Math.floor(Math.random() * 10) + 1;
        element.innerHTML = num1 + " + " + num2;
return num1+num2;
}

function choices(answer)
{
var arr = ["option1","option2","option3","option4"];
var dValue;
arr[0] = answer;
for(var x = 1; x < 4; x++)
{
dValue = Math.floor(Math.random() * 5) + 1;
if(dValue % 2 == 0)
{
arr[x] = answer - dValue;
     }
else
{
arr[x] = answer + dValue;
}
}
    return arr;
}

function shuffleOptions(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
  document.location.reload(true);
alert("TimeOut Your Score Is : " + score + "/" + qNumber);
        }
    }, 1000);
}

function timeTrigger() {
    var twoMinutes = 60 * 2,
        display = document.querySelector('#time');
    startTimer(twoMinutes, display);
}
 
function validateAns(e)
{
              qNumber++;
if(e.value==correctAns)
{
score++;
var element=document.getElementById("marks");
element.innerHTML = score;
startQuiz();
}
else{
   startQuiz();
}
}

Post a Comment

0 Comments