The Palos Publishing Company

Categories We Write About

Build a timed quiz application

Written by

Bernardo Palos

in

To build a timed quiz application, you can use various technologies such as HTML, CSS, and JavaScript for the frontend, and optionally a backend (Node.js, PHP, etc.) if you need to store user data, scores, or quiz results persistently.

Here’s a simple example of a timed quiz app that can be run directly in the browser using HTML, CSS, and JavaScript:

Step 1: HTML Structure

Create a file named index.html for the HTML structure.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timed Quiz</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="quiz-container">
        <h1>Quiz Application</h1>
        <div id="question-container">
            <p id="question"></p>
            <div id="options-container"></div>
        </div>
        <div id="timer-container">
            <p>Time Left: <span id="timer">30</span> seconds</p>
        </div>
        <button id="next-button" onclick="nextQuestion()">Next Question</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Create a file named styles.css for basic styling.

css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

#quiz-container {
    width: 500px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#question-container {
    margin-bottom: 20px;
}

#options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:disabled {
    background-color: #ddd;
}

#timer-container {
    margin-top: 20px;
}

Step 3: JavaScript Logic

Create a file named script.js for the logic behind the quiz and timer.

javascript
const questions = [
    {
        question: "What is the capital of France?",
        options: ["Paris", "London", "Berlin", "Madrid"],
        correctAnswer: "Paris"
    },
    {
        question: "What is 2 + 2?",
        options: ["3", "4", "5", "6"],
        correctAnswer: "4"
    },
    {
        question: "Which language is used for web development?",
        options: ["Java", "Python", "JavaScript", "C#"],
        correctAnswer: "JavaScript"
    }
];

let currentQuestionIndex = 0;
let timer = 30;
let timerInterval;
let score = 0;

function startTimer() {
    timerInterval = setInterval(function () {
        if (timer > 0) {
            timer--;
            document.getElementById("timer").textContent = timer;
        } else {
            clearInterval(timerInterval);
            alert("Time's up!");
            nextQuestion();
        }
    }, 1000);
}

function displayQuestion() {
    const currentQuestion = questions[currentQuestionIndex];
    document.getElementById("question").textContent = currentQuestion.question;
    const optionsContainer = document.getElementById("options-container");
    optionsContainer.innerHTML = "";
    currentQuestion.options.forEach(option => {
        const button = document.createElement("button");
        button.textContent = option;
        button.onclick = () => checkAnswer(option);
        optionsContainer.appendChild(button);
    });
}

function checkAnswer(selectedAnswer) {
    const currentQuestion = questions[currentQuestionIndex];
    if (selectedAnswer === currentQuestion.correctAnswer) {
        score++;
    }
    disableOptions();
}

function disableOptions() {
    const options = document.querySelectorAll("#options-container button");
    options.forEach(button => button.disabled = true);
    document.getElementById("next-button").disabled = false;
}

function nextQuestion() {
    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
        displayQuestion();
        resetTimer();
    } else {
        clearInterval(timerInterval);
        alert(`Quiz Finished! Your score: ${score}/${questions.length}`);
    }
}

function resetTimer() {
    timer = 30;
    document.getElementById("timer").textContent = timer;
    clearInterval(timerInterval);
    startTimer();
    document.getElementById("next-button").disabled = true;
}

document.addEventListener("DOMContentLoaded", () => {
    displayQuestion();
    startTimer();
});

Explanation:

  1. HTML Structure:

    • Contains the question, answer options, and a timer.

    • A “Next Question” button to move to the next question.

  2. CSS Styling:

    • A clean and simple layout with a timer at the top and questions below it.

    • Buttons for selecting answers and transitioning to the next question.

  3. JavaScript Logic:

    • The questions array holds all the quiz questions with their options and correct answers.

    • The startTimer function initializes a countdown timer for each question (30 seconds in this case).

    • The displayQuestion function displays the current question and options.

    • The checkAnswer function checks if the selected answer is correct.

    • The nextQuestion function moves to the next question and resets the timer.

    • The disableOptions function disables the answer buttons once a selection is made.

Features:

  • Timer: Each question is given 30 seconds to answer.

  • Score: User’s score is tracked based on correct answers.

  • Quiz Completion: Once all questions are answered, the final score is displayed.

  • Next Question Button: Only enabled after answering a question.

Step 4: Test It

You can simply open the index.html file in a browser to see the quiz in action.

This is a very basic version of a timed quiz application. You can enhance it by adding features like:

  • Showing the correct answer when the time runs out.

  • Storing results on the backend or locally.

  • Adding a progress bar or sound effects.

Let me know if you need additional features or help integrating this with a backend!

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About