TypeScript Tutorial: Building a Simple Interactive Web-Based Quiz Game with Timer

Written by

learnmodernjavascript

in

Are you ready to dive into the world of TypeScript and build something fun and engaging? In this tutorial, we’ll create a web-based quiz game that not only tests your knowledge but also incorporates a timer to add an extra layer of challenge. This project is perfect for beginners and intermediate developers looking to sharpen their TypeScript skills while creating an interactive application.

Why Build a Quiz Game?

Quiz games are an excellent way to learn new concepts and reinforce existing ones. They’re also a fantastic project for practicing programming skills. Building a quiz game allows you to:

  • Understand and apply fundamental TypeScript concepts.
  • Work with HTML, CSS, and JavaScript (with TypeScript).
  • Manage user input and interactions.
  • Handle game logic and state.
  • Gain experience in web development project structure.

Moreover, the addition of a timer introduces a dynamic element, making the game more exciting and teaching you how to manage time-based events in your code.

Setting Up Your Development Environment

Before we start coding, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (or yarn): Used for managing project dependencies and running the development server.
  • TypeScript compiler (tsc): This will transpile your TypeScript code into JavaScript.
  • A code editor (VS Code, Sublime Text, etc.): To write your code. VS Code is highly recommended with the TypeScript extension.
  • Basic understanding of HTML, CSS, and JavaScript: Although this tutorial focuses on TypeScript, some familiarity with these technologies is helpful.

Installation:

  1. Install Node.js: Download and install it from the official website (nodejs.org). npm comes bundled with Node.js.
  2. Create a Project Directory: Create a new directory for your project (e.g., quiz-game).
  3. Initialize npm: Open your terminal, navigate to your project directory, and run npm init -y. This creates a package.json file.
  4. Install TypeScript: Run npm install typescript --save-dev. This installs TypeScript as a development dependency.
  5. Initialize TypeScript: Run npx tsc --init. This creates a tsconfig.json file, which configures the TypeScript compiler.

Your directory structure should look something like this:

quiz-game/
├── node_modules/
├── package.json
├── tsconfig.json
└── src/
    └── index.ts

Project Structure and Core Files

Let’s define the core files and their roles:

  • index.html: The main HTML file that structures the quiz game’s user interface.
  • style.css: Contains the CSS styles for the game’s visual appearance.
  • index.ts: The main TypeScript file where we’ll write the game logic.
  • tsconfig.json: The TypeScript compiler configuration.

We will start by creating these files in our project directory. Inside the src directory, create index.ts. Create index.html and style.css at the root level of your project directory.

Writing the HTML (index.html)

Let’s create the basic HTML structure for our quiz game. This will include the quiz questions, answer options, a timer, a score display, and a submit button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Quiz Game</h1>
        <div id="quiz-container">
            <div id="question"></div>
            <div id="options"></div>
            <div id="timer">Time Left: <span id="time-left">60</span></div>
            <button id="submit-button">Submit</button>
            <div id="score">Score: <span id="score-value">0</span></div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

This HTML provides the basic layout. Notice the IDs, which we will use to target elements with our TypeScript code.

Styling with CSS (style.css)

Now, let’s add some basic styling to make our quiz game visually appealing. You can customize these styles to match your preferences.

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

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#question {
    font-size: 1.2em;
    margin-bottom: 15px;
}

#options {
    margin-bottom: 20px;
}

#options label {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#options label:hover {
    background-color: #eee;
}

#options input[type="radio"] {
    margin-right: 5px;
}

#timer {
    font-size: 1.1em;
    margin-bottom: 10px;
}

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

#score {
    margin-top: 15px;
    font-weight: bold;
}

This CSS provides a basic style for the quiz game’s elements, including the container, question display, answer options, timer, and score.

Writing the TypeScript Code (index.ts)

This is where the magic happens! Let’s write the TypeScript code for the game logic. We’ll start by defining the questions, answer options, and the core game functions.


// Define the structure for a question
interface Question {
    question: string;
    options: string[];
    correctAnswer: number; // Index of the correct answer in the options array
}

// Quiz questions
const questions: Question[] = [
    {
        question: "What is the capital of France?",
        options: ["Berlin", "Madrid", "Paris", "Rome"],
        correctAnswer: 2,
    },
    {
        question: "What is 2 + 2?",
        options: ["3", "4", "5", "6"],
        correctAnswer: 1,
    },
    {
        question: "Which planet is known as the Red Planet?",
        options: ["Earth", "Mars", "Jupiter", "Venus"],
        correctAnswer: 1,
    },
];

// Get DOM elements
const questionElement = document.getElementById("question") as HTMLDivElement;
const optionsElement = document.getElementById("options") as HTMLDivElement;
const submitButton = document.getElementById("submit-button") as HTMLButtonElement;
const timeLeftElement = document.getElementById("time-left") as HTMLSpanElement;
const scoreElement = document.getElementById("score-value") as HTMLSpanElement;

// Game variables
let currentQuestionIndex: number = 0;
let score: number = 0;
let timeLeft: number = 60;
let timerInterval: number | undefined;

// Function to display a question
function displayQuestion() {
    const currentQuestion = questions[currentQuestionIndex];
    if (!questionElement || !optionsElement) {
        console.error('Missing DOM elements for question display.');
        return;
    }

    questionElement.textContent = currentQuestion.question;
    optionsElement.innerHTML = ""; // Clear previous options

    currentQuestion.options.forEach((option, index) => {
        const label = document.createElement("label");
        const radio = document.createElement("input");
        radio.type = "radio";
        radio.name = "answer";
        radio.value = index.toString();

        label.appendChild(radio);
        label.appendChild(document.createTextNode(option));
        optionsElement.appendChild(label);

        radio.addEventListener("change", () => {
            // Handle radio button selection (optional)
        });
    });
}

// Function to start the timer
function startTimer() {
    timerInterval = setInterval(() => {
        if (timeLeft > 0) {
            timeLeft--;
            if (timeLeftElement) {
                timeLeftElement.textContent = timeLeft.toString();
            }
        } else {
            endGame();
        }
    }, 1000);
}

// Function to check the answer
function checkAnswer() {
    const selectedAnswer = document.querySelector('input[name="answer"]:checked') as HTMLInputElement | null;

    if (!selectedAnswer) {
        alert("Please select an answer.");
        return;
    }

    const answerIndex = parseInt(selectedAnswer.value, 10);
    const correctAnswerIndex = questions[currentQuestionIndex].correctAnswer;

    if (answerIndex === correctAnswerIndex) {
        score++;
        if (scoreElement) {
            scoreElement.textContent = score.toString();
        }
    }

    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
        displayQuestion();
    } else {
        endGame();
    }
}

// Function to end the game
function endGame() {
    clearInterval(timerInterval);
    if (questionElement) {
        questionElement.textContent = "Game Over!";
    }
    if (optionsElement) {
        optionsElement.innerHTML = "";
    }
    if (submitButton) {
        submitButton.disabled = true; // Disable the submit button
    }
    alert(`Game Over! Your score: ${score}`);
}

// Event listeners
submitButton?.addEventListener("click", checkAnswer);

// Initialize the game
function initializeGame() {
    displayQuestion();
    startTimer();
}

initializeGame();

Let’s break down the code:

  1. Interfaces and Data Structure: We define a Question interface to structure our quiz questions. This ensures consistency and type safety. We then create an array of questions, each containing the question text, answer options, and the index of the correct answer.
  2. DOM Element Selection: We select the necessary HTML elements using their IDs to manipulate them with JavaScript. We use the as HTML... syntax for type assertion, making sure TypeScript knows the type of the element.
  3. Game Variables: We initialize game variables like currentQuestionIndex, score, timeLeft, and timerInterval.
  4. displayQuestion() Function: This function displays the current question and its answer options. It dynamically creates radio button inputs for each answer option.
  5. startTimer() Function: This function sets up the timer using setInterval(). It updates the timeLeft and calls endGame() when the timer reaches zero.
  6. checkAnswer() Function: This function checks the user’s selected answer, updates the score, and moves to the next question. It also handles the game over condition.
  7. endGame() Function: This function clears the timer, displays a game over message, disables the submit button, and displays the final score.
  8. Event Listeners: We attach an event listener to the submit button to call the checkAnswer() function when the button is clicked.
  9. initializeGame() Function: This function initializes the game by displaying the first question and starting the timer.

Compiling and Running the Code

Now that we have our code, let’s compile it and run it.

  1. Compile TypeScript: Open your terminal in the project directory and run tsc. This will compile your index.ts file into index.js.
  2. Serve the Files: You can use a simple HTTP server to serve your files. One easy way is to use the serve package. Install it globally with npm install -g serve. Then, navigate to your project directory and run serve. This will typically serve your files on http://localhost:5000.
  3. Open in Browser: Open your web browser and navigate to the URL provided by serve (e.g., http://localhost:5000). You should see your quiz game!

If you encounter any errors, check the browser’s developer console (usually by pressing F12) for error messages. Also, double-check your code for any typos or syntax errors.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Typos: Typos are a frequent source of errors. Carefully check your code for any spelling mistakes, especially in variable names and HTML element IDs.
  • Incorrect Element Selection: Make sure you are selecting the correct HTML elements. Use the browser’s developer tools to inspect the HTML and verify the IDs.
  • Type Errors: TypeScript helps prevent type errors. Make sure you are using the correct types for your variables and function parameters. Carefully review the console for any type-related errors.
  • Scope Issues: Be mindful of variable scope. If a variable is defined inside a function, it’s only accessible within that function. If you need to access a variable from multiple functions, declare it outside the functions (but inside the file).
  • Incorrect Event Handling: Ensure that your event listeners are correctly attached to the elements and that the event handler functions are defined correctly.
  • Missing Semicolons: While TypeScript is generally lenient, it’s good practice to use semicolons to avoid potential parsing issues.
  • Incorrect Paths: Double-check the paths in your HTML <script> and <link> tags to ensure they point to the correct files.

Enhancements and Next Steps

This is a basic quiz game. Here are some ideas for enhancements:

  • Add More Question Types: Support multiple-choice questions, true/false questions, and fill-in-the-blank questions.
  • Improve the UI/UX: Add more visual elements, such as progress bars, animations, and feedback messages to enhance the user experience.
  • Implement a Scoring System: Give different points for different question difficulties.
  • Add a Leaderboard: Store and display high scores.
  • Use Local Storage: Save the user’s score and progress.
  • Improve Error Handling: Add more robust error handling to handle unexpected situations gracefully.
  • Add Sound Effects: Play sound effects for correct and incorrect answers.
  • Use a Framework: Consider using a framework like React, Angular, or Vue.js to build more complex and scalable applications. This can provide structure, component reusability, and other advantages.
  • Fetch Questions from an API: Instead of hardcoding the questions, fetch them from an API to make your game more dynamic.

Key Takeaways

  • TypeScript enhances JavaScript by adding static typing, making your code more robust and easier to maintain.
  • Interfaces provide a way to define the structure of your data.
  • Understanding DOM manipulation is crucial for creating interactive web applications.
  • Event listeners are essential for handling user interactions.
  • The setInterval() function is useful for implementing timers and other time-based features.
  • Practice is key! The more you code, the better you’ll become.

FAQ

  1. How do I debug TypeScript code?
    • Use the browser’s developer tools (Console tab) to check for errors and log messages.
    • Use a debugger in your code editor (e.g., VS Code) to step through your code and inspect variables.
    • Make sure your tsconfig.json file is configured correctly. Consider setting sourceMap to true to enable debugging of the original TypeScript code in the browser.
  2. Why is it important to use types in TypeScript?
    • Types help catch errors early in the development process, improving code quality.
    • Types make your code more readable and maintainable.
    • Types enable better code completion and refactoring in your code editor.
  3. How can I improve the performance of my quiz game?
    • Optimize your code for efficiency. Avoid unnecessary computations.
    • Minimize DOM manipulations. Update the DOM only when necessary.
    • Use CSS transitions and animations sparingly.
    • Consider using a virtual DOM (e.g., with React, Vue, or Angular) for more efficient updates.
  4. What are some good resources for learning more about TypeScript?
    • The official TypeScript documentation: typescriptlang.org
    • Online courses on platforms like Udemy, Coursera, and freeCodeCamp.
    • Books on TypeScript.
    • The TypeScript community on Stack Overflow and other forums.

Building this quiz game is a great starting point. As you continue to learn and practice, you’ll gain confidence in your TypeScript skills and be able to tackle more complex projects. Remember to experiment, try new things, and have fun!

More posts