Countdown Timer In JavaScript For Quiz
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of countdown timer in JavaScript for quiz, as we know countdown timer is updating countdowns for particular timing, here we are going to displaying questions for particular seconds only by using setInterval(), setTimeout() methods.
For each 10 seconds we changing questions and ending quiz game after time up and seconds timer also displayed on screen.
Step By Step Guide On Countdown Timer In JavaScript For Quiz :-
As we seen above with the help of those methods we gets result of quiz game with some questions for countdown timer in seconds.
The setInterval() method offered on the window and worker interfaces, repeatedly calls a function or executes a code snippet with a fixed time delay between each call.
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval() method.
Method setTimeout() is used to do some process after time limit gone.
<!DOCTYPE html>
<html>
<head>
<title>COUNTDOWN FOR QUIZ</title>
<style>
#q2{
display: none;
}
</style>
</head>
<body>
<H3>COUNTDOWN TIMER FOR QUIZ</H3>
<P>EACH QUESTION HAVE ONLY 10 SECONDS</P>
<div id="demo"></div>
<div id="q1">1. WHICH LANGUAGE USED FOR FRONT END DEVELOPING?
<input type="radio" name="" id="1">HTML
<input type="radio" name="" id="1">C++
</div>
<div id="q2">
2. WHICH LANGUAGE USED FOR BACK END DEVELOPING?
<input type="radio" name="" id="1">HTML
<input type="radio" name="" id="1">SQL
</div>
<button onclick="fun()">Start</button>
<script>
function fun(){
setInterval(function(){
date=new Date();
let s=date.getSeconds();
document.getElementById('demo').innerHTML=s;
},1000);
setTimeout(() => {
document.getElementById("q1").style.display="none";
document.getElementById("q2").style.display="block";
},10000);
setTimeout(() => {
document.getElementById("q1").style.display="none";
document.getElementById("q2").style.display="none";
document.getElementById('demo').innerHTML="TIME UP";
},20000);
setTimeout(() => {
document.getElementById('demo').style.display="none";
},21000);
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h3 tag for display heading ‘COUNTDOWN TIMER FOR QUIZ’ on webpage then we defined p tag for give instruction for user about quiz, div tag with id ‘demo’ for appends result seconds timer on webpage.
- Using div tags ‘q1,q2’ we defined two questions with options and button ‘Start’ defined for start the quiz timer when user clicks on it.
- In script file we defined function fun() within that we used setInterval() method with waiting time as ‘1 second’ so within this method what we had done will updated for each 1 seconds.
- Here we created date object ‘date’ by using this we collected current seconds and stored on variable ‘s’ and updated for each seconds then we appended result in timer on div element by id ‘demo’ for displaying timer on webpage.
- In first setTimeout method we sets waiting time as 10 seconds (10000) after reach 10sec we hiding first question by id ‘q1’ display property value set to ‘none’ and initially we hidden question 2 ‘q2’ so we sets it display property to ‘block’ for visible to user.
- After finished 20seconds we hiding both questions by second setTimeout method with their display property sets to ‘none’ and timer value changed to ‘TIME UP’ string.
- Lastly using setTimeout method when it reach 21sec we sets timer display property also ‘none’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create quiz game with countdown timer in seconds on webpage using javascript.
When we executing this program on browser we can see headline, instructions of this program with first quiz and start button when user clicks on it current time seconds retrieved from server and displayed on webpage then when it reach 10 seconds quiz 1 will hidden and quiz 2 will appear after 10 seconds both quiz will disappeared ‘TIME UP’ message will appear for instruct user.
After 1second timer also disappeared so user need to choose their options within timing because it will not wait for user response.
I hope this tutorial on countdown timer in JavaScript for quiz helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
