Home ยป Interactive Quiz App with Timer Using HTML & CSS and JavaScript

Interactive Quiz App with Timer Using HTML & CSS and JavaScript

Quiz App

Creating an engaging and interactive quiz application can be a great way to test knowledge and provide entertainment. In this article, we will guide you through building a Quiz App with a Timer using HTML, CSS, and JavaScript. This app dynamically loads questions, tracks time, and provides feedback based on user answers.

Features of the Quiz App:

  1. Dynamic Questions: Questions are added dynamically using JavaScript, making it easy to update and scale.
  2. Countdown Timer: A visible timer ensures participants are aware of the time constraints.
  3. Responsive Design: Built with Bootstrap, the app is fully responsive and works seamlessly on all devices.
  4. Immediate Feedback: Users receive instant feedback after submitting the quiz.

Code Breakdown:

Below is the complete code for the application. Each section of the code is explained in detail.

 

 

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="&lt;style&gt;" title="&lt;style&gt;" />
</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="&lt;script&gt;" title="&lt;script&gt;" />
</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="&lt;script&gt;" title="&lt;script&gt;" />

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.