Build a Simple TypeScript-Powered Interactive Code Quiz App

Written by

learnmodernjavascript

in

Are you a beginner or intermediate developer looking to boost your TypeScript skills? Do you want to learn by doing, building something practical and engaging? In this comprehensive tutorial, we’ll dive into the world of TypeScript by creating a simple yet powerful interactive code quiz application. This project will not only solidify your understanding of TypeScript fundamentals but also introduce you to concepts like DOM manipulation, event handling, and basic application architecture. By the end of this tutorial, you’ll have a fully functional code quiz app, ready to challenge your knowledge and serve as a foundation for more complex projects.

Why Build a Code Quiz App?

Building a code quiz app is an excellent way to learn TypeScript for several reasons:

  • Practical Application: You’ll apply TypeScript concepts to solve real-world problems.
  • Engagement: The interactive nature keeps you motivated and provides immediate feedback.
  • Skill Development: You’ll enhance your problem-solving abilities and learn to think like a developer.
  • Portfolio Piece: A functional app demonstrates your skills to potential employers or clients.

Prerequisites

Before we begin, make sure you have the following:

  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these languages will be helpful.
  • Node.js and npm (or yarn) installed: These are necessary for managing project dependencies and running the development server.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor you prefer.
  • TypeScript installed globally (optional): You can install it using `npm install -g typescript`. However, we’ll also install it locally in our project.

Setting Up the Project

Let’s start by setting up our project directory and installing the necessary dependencies.

  1. Create a Project Directory: Create a new directory for your project, for example, `code-quiz-app`.
  2. Initialize npm: Navigate to your project directory in your terminal and run `npm init -y`. This creates a `package.json` file.
  3. Install TypeScript: Install TypeScript and a few other packages as devDependencies:
    • `npm install –save-dev typescript ts-node @types/node`
  4. Create TypeScript Configuration: Create a `tsconfig.json` file in your project root. This file configures the TypeScript compiler. You can generate a basic one by running `npx tsc –init`. The generated file includes several options; we will modify some of them. Here’s a recommended configuration: 
    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}
    • `target`: Specifies the JavaScript version to compile to (e.g., “es5”, “es6”, “esnext”).
    • `module`: Specifies the module system to use (e.g., “commonjs”, “esnext”).
    • `outDir`: Specifies the output directory for the compiled JavaScript files.
    • `esModuleInterop`: Enables interoperability between CommonJS and ES modules.
    • `forceConsistentCasingInFileNames`: Enforces consistent casing in file names.
    • `strict`: Enables strict type checking.
    • `skipLibCheck`: Skips type checking of declaration files (e.g., .d.ts files).
    • `include`: Specifies the files to be included in the compilation.
  5. Create Project Folders: Create `src` folder at the root level of your project, and inside of it, create `index.ts` file.
  6. Create HTML File: Create an `index.html` file in the root directory. This will be the structure of our quiz app.

Building the HTML Structure

Let’s create the basic HTML structure for our quiz app. Open `index.html` and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Quiz App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="quiz-container">
        <div id="quiz">
            <h2 id="question"></h2>
            <div id="answers"></div>
            <button id="next-button">Next Question</button>
            <div id="score"></div>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for our quiz. It includes a title, a container for the quiz itself, a place to display the question, answer options, a button to navigate to the next question, and a space to show the score. It also links to a `style.css` file (which we’ll create later) and a JavaScript file (`dist/index.js`), which will be generated from our TypeScript code.

Styling with CSS

Let’s add some basic styling to make our quiz app look presentable. Create a `style.css` file in your project root and add the following CSS:

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

.quiz-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 80%;
    max-width: 600px;
}

#question {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

#answers {
    margin-bottom: 20px;
}

.answer-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    text-align: left;
}

.answer-button:hover {
    background-color: #f0f0f0;
}

#next-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

#next-button:hover {
    background-color: #3e8e41;
}

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

This CSS styles the layout, fonts, and appearance of the quiz elements, making the app more user-friendly.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will power our quiz app. Open `src/index.ts` and start by importing the necessary elements from the DOM and defining the types for our data.

// src/index.ts
const questionElement = document.getElementById('question') as HTMLHeadingElement;
const answersElement = document.getElementById('answers') as HTMLDivElement;
const nextButton = document.getElementById('next-button') as HTMLButtonElement;
const scoreElement = document.getElementById('score') as HTMLDivElement;

interface Question {
    question: string;
    answers: string[];
    correctAnswerIndex: number;
}

let currentQuestionIndex = 0;
let score = 0;
let questions: Question[] = [
    {
        question: 'What is TypeScript?',
        answers: [
            'A programming language', 
            'A JavaScript framework', 
            'A database management system',
            'A version control system'
        ],
        correctAnswerIndex: 0
    },
    {
        question: 'What is the primary benefit of using TypeScript?',
        answers: [
            'Improved performance',
            'Type checking and enhanced code maintainability',
            'Faster compilation times',
            'Automatic code generation'
        ],
        correctAnswerIndex: 1
    },
    {
        question: 'Which keyword is used to declare a variable in TypeScript?',
        answers: [
            'var', 
            'let', 
            'const', 
            'All of the above'
        ],
        correctAnswerIndex: 3
    },
    {
        question: 'What is a TypeScript interface used for?',
        answers: [
            'Defining functions', 
            'Creating objects', 
            'Specifying the structure of an object',
            'Handling errors'
        ],
        correctAnswerIndex: 2
    },
    {
        question: 'What does the `any` type in TypeScript represent?',
        answers: [
            'A specific type (e.g., string, number)', 
            'A type that can be anything',
            'A type that cannot be assigned', 
            'A boolean type'
        ],
        correctAnswerIndex: 1
    }
];

Here, we define an interface `Question` to represent the structure of our questions. We also initialize variables to keep track of the current question index, the score, and our array of questions. Now, let’s create a function to display the current question and its answers.

function displayQuestion() {
    const currentQuestion = questions[currentQuestionIndex];
    if (!currentQuestion) {
        // Quiz finished
        displayScore();
        return;
    }

    questionElement.textContent = currentQuestion.question;
    answersElement.innerHTML = ''; // Clear previous answers

    currentQuestion.answers.forEach((answer, index) => {
        const button = document.createElement('button');
        button.classList.add('answer-button');
        button.textContent = answer;
        button.addEventListener('click', () => selectAnswer(index));
        answersElement.appendChild(button);
    });
}

This `displayQuestion` function retrieves the current question from the `questions` array, updates the question text, clears any previous answer options, and then dynamically creates answer buttons. Each button has an event listener that calls the `selectAnswer` function when clicked.

Let’s define the `selectAnswer` function:

function selectAnswer(selectedIndex: number) {
    const currentQuestion = questions[currentQuestionIndex];

    if (selectedIndex === currentQuestion.correctAnswerIndex) {
        score++;
    }

    currentQuestionIndex++;
    displayQuestion();
}

The `selectAnswer` function checks if the selected answer is correct. If it is, the score is incremented. Then, it increments the `currentQuestionIndex` to move to the next question and calls `displayQuestion` to load the next question.

Finally, let’s create the `displayScore` function and attach an event listener to the “Next” button:

function displayScore() {
    questionElement.textContent = 'Quiz Completed!';
    answersElement.innerHTML = '';
    scoreElement.textContent = `Your score: ${score} / ${questions.length}`;
    nextButton.style.display = 'none';
}

nextButton.addEventListener('click', () => {
    currentQuestionIndex++;
    displayQuestion();
});

// Initialize the quiz
displayQuestion();

The `displayScore` function displays the final score when the quiz is over. The “Next” button’s event listener moves to the next question when clicked, or, if at the end of the question array, it displays the quiz score. The `displayQuestion()` function is called at the end to display the first question.

Compiling and Running the App

Now that we have written our TypeScript code, let’s compile it and run the application.

  1. Compile the TypeScript code: In your terminal, navigate to your project directory and run `npx tsc`. This command compiles your TypeScript code into JavaScript and places the output in the `dist` directory.
  2. Open `index.html` in your browser: Open the `index.html` file in your preferred web browser. You should see the first question of your quiz.
  3. Test the quiz: Click on the answer options, and the quiz should update to the next question, and the score should be tracked.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a TypeScript quiz app:

  • Incorrect DOM Element Selection:
    • Mistake: Selecting the wrong DOM elements or not selecting them at all, leading to errors.
    • Fix: Use `document.getElementById` correctly and ensure you have the correct IDs in your HTML. Also, use type assertions (`as HTML…`) to help TypeScript understand the element types.
  • Type Errors:
    • Mistake: Not defining types correctly or mixing data types, leading to unexpected behavior.
    • Fix: Carefully define interfaces and types for your data. Enable strict mode in your `tsconfig.json` to catch type errors early.
  • Incorrect Event Handling:
    • Mistake: Not attaching event listeners correctly or having event listeners that do not function as intended.
    • Fix: Ensure your event listeners are correctly attached to the right elements and that your event handler functions are properly defined and called.
  • Logic Errors:
    • Mistake: Incorrectly implementing the quiz logic (e.g., scoring, question progression).
    • Fix: Carefully review your code logic. Use console logs to debug and trace the execution flow.
  • Compilation Errors:
    • Mistake: Errors related to the `tsconfig.json` configuration or TypeScript syntax.
    • Fix: Double-check your `tsconfig.json` settings and ensure your TypeScript code is valid. Run the TypeScript compiler (`npx tsc`) to identify and resolve errors.

Enhancements and Next Steps

Once you’ve built the basic quiz app, consider these enhancements:

  • Add more questions: Expand the quiz with more questions to test different concepts.
  • Implement a timer: Add a timer to make the quiz more challenging.
  • Improve the UI: Enhance the visual design of the app to make it more appealing.
  • Add feedback: Provide immediate feedback on whether the user’s answer is correct or not.
  • Use local storage: Allow users to save their scores and track their progress.
  • Add different question types: Implement multiple-choice, true/false, and fill-in-the-blank question types.
  • Use a framework: Consider using a framework like React, Angular, or Vue.js for more complex applications.

Key Takeaways

  • You’ve learned how to set up a TypeScript project, including configuring `tsconfig.json` and installing necessary dependencies.
  • You’ve gained experience working with HTML, CSS, and JavaScript, manipulating the DOM, and handling events.
  • You’ve understood how to define interfaces and types in TypeScript to ensure code correctness.
  • You’ve created a functional, interactive code quiz app that you can expand and customize.
  • You’ve learned how to debug and fix common errors.

FAQ

Here are some frequently asked questions:

  1. How do I add more questions?

    Simply add more objects to the `questions` array in your `index.ts` file, making sure each object follows the `Question` interface.

  2. How can I style the app?

    You can customize the appearance of the app by modifying the CSS in the `style.css` file. Experiment with different colors, fonts, and layouts.

  3. How can I make the quiz more interactive?

    You can add features like a timer, feedback on correct/incorrect answers, and different question types. This would involve adding more JavaScript functionality.

  4. What is the purpose of `tsconfig.json`?

    The `tsconfig.json` file configures the TypeScript compiler. It specifies how TypeScript code should be compiled, including the target JavaScript version, module system, and output directory.

  5. How do I handle different question types?

    You can extend the `Question` interface to include a `type` property (e.g., “multiple-choice”, “true-false”) and modify the `displayQuestion` function to render different UI elements based on the question type. You will also have to modify the selectAnswer function to account for the answer type.

Creating this code quiz application provides a solid foundation for understanding TypeScript and its practical applications. The ability to build interactive applications is a valuable skill in modern web development. By continuing to experiment, enhance, and learn from your projects, you’ll be well on your way to mastering TypeScript and becoming a more proficient developer.

More posts