If one is keen to know about their knowledge while being very entertained, then building up a quiz application that is heavily interactive would be a very wonderful idea. This article shall guide you in building up a Timer-based Quiz App using HTML, CSS, and JavaScript. This app loads questions dynamically, keeps track of the time, and provides feedback based on the user’s answers.
Features of Quiz App:
Dynamic questions: Using JavaScript, questions are added in a dynamic manner, thereby making them easy to update and scale upon.
Countdown timer: Once participants can see the countdown timer, there will be no excuses anymore.
Responsive design: Built with Bootstrap, hence fully responsive and working seamlessly across all devices.
Feedback: Users will receive feedback immediately once they have submitted the quiz.
Code breakdown:
What you see here is the entire code of the application, and each part of the code is well explained.
HTML Structure:
The HTML section provides the foundation of the application, including the container for the quiz and timer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App with Timer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%232c3e50%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.card%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20rgba(255%2C%20255%2C%20255%2C%200.1)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20backdrop-filter%3A%20blur(10px)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%201rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header text-center">
<h2 style="color: #fff;">Quiz App</h2>
<div id="timer" class="badge bg-danger fs-5">Time Left: <span id="time-left">30</span> seconds</div>
</div>
<div class="card-body">
<form id="quiz-form">
<div id="quiz-questions">
<!-- Questions will be dynamically added here -->
</div>
<div class="text-center mt-4">
<button type="submit" class="btn btn-primary">Submit</button><br><br>
</div>
</form>
<div id="feedback" class="mt-4 text-center" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.3.0%2Fdist%2Fjs%2Fbootstrap.bundle.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
JavaScript Logic:
The JavaScript code handles loading questions, starting the timer, and evaluating answers. This makes the app dynamic and interactive.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20const%20questions%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%7B%20question%3A%20%22What%20is%20the%20capital%20of%20France%3F%22%2C%20options%3A%20%5B%22Berlin%22%2C%20%22Madrid%22%2C%20%22Paris%22%2C%20%22Lisbon%22%5D%2C%20answer%3A%20%22Paris%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20question%3A%20%22What%20is%205%20%2B%203%3F%22%2C%20options%3A%20%5B%225%22%2C%20%228%22%2C%20%2210%22%2C%20%2215%22%5D%2C%20answer%3A%20%228%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%20question%3A%20%22Which%20planet%20is%20known%20as%20the%20Red%20Planet%3F%22%2C%20options%3A%20%5B%22Earth%22%2C%20%22Mars%22%2C%20%22Jupiter%22%2C%20%22Saturn%22%5D%2C%20answer%3A%20%22Mars%22%20%7D%2C%0A%20%20%20%20%5D%3B%0A%0A%20%20%20%20const%20quizContainer%20%3D%20document.getElementById(%22quiz-questions%22)%3B%0A%20%20%20%20const%20timerElement%20%3D%20document.getElementById(%22time-left%22)%3B%0A%20%20%20%20const%20feedback%20%3D%20document.getElementById(%22feedback%22)%3B%0A%20%20%20%20let%20timeLeft%20%3D%2030%3B%0A%20%20%20%20let%20timer%3B%0A%0A%20%20%20%20function%20startTimer()%20%7B%0A%20%20%20%20%20%20%20%20timer%20%3D%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20timeLeft--%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20timerElement.textContent%20%3D%20timeLeft%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(timeLeft%20%3C%3D%200)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clearInterval(timer)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20submitQuiz()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%201000)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20loadQuestions()%20%7B%0A%20%20%20%20%20%20%20%20questions.forEach((q%2C%20index)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20questionDiv%20%3D%20document.createElement(%22div%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20questionDiv.className%20%3D%20%22mb-4%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20questionDiv.innerHTML%20%3D%20%60%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cwp-p%20class%3D%22fw-bold%22%3E%24%7Bindex%20%2B%201%7D.%20%24%7Bq.question%7D%3C%2Fwp-p%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%7Bq.options.map((option%2C%20i)%20%3D%3E%20%60%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22form-check%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20class%3D%22form-check-input%22%20type%3D%22radio%22%20name%3D%22question%24%7Bindex%7D%22%20id%3D%22question%24%7Bindex%7Doption%24%7Bi%7D%22%20value%3D%22%24%7Boption%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%20class%3D%22form-check-label%22%20for%3D%22question%24%7Bindex%7Doption%24%7Bi%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24%7Boption%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%60).join('')%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%60%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20quizContainer.appendChild(questionDiv)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20submitQuiz()%20%7B%0A%20%20%20%20%20%20%20%20clearInterval(timer)%3B%0A%0A%20%20%20%20%20%20%20%20let%20score%20%3D%200%3B%0A%20%20%20%20%20%20%20%20questions.forEach((q%2C%20index)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20selectedOption%20%3D%20document.querySelector(%60input%5Bname%3D%22question%24%7Bindex%7D%22%5D%3Achecked%60)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(selectedOption%20%26%26%20selectedOption.value%20%3D%3D%3D%20q.answer)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20score%2B%2B%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20feedback.style.display%20%3D%20%22block%22%3B%0A%20%20%20%20%20%20%20%20feedback.textContent%20%3D%20%60Your%20score%20is%20%24%7Bscore%7D%20out%20of%20%24%7Bquestions.length%7D%60%3B%0A%20%20%20%20%20%20%20%20feedback.className%20%3D%20%22alert%20alert-info%22%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20document.getElementById(%22quiz-form%22).addEventListener(%22submit%22%2C%20(event)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20event.preventDefault()%3B%0A%20%20%20%20%20%20%20%20submitQuiz()%3B%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20window.onload%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20loadQuestions()%3B%0A%20%20%20%20%20%20%20%20startTimer()%3B%0A%20%20%20%20%7D%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
This Quiz App demonstrates how HTML, CSS, and JavaScript can be used together to create a responsive and interactive user experience. By understanding these concepts, you can expand the functionality, add more features, or style the application to suit your needs.
