TypeScript Tutorial: Building a Simple Web-Based Quiz App

Written by

learnmodernjavascript

in

Quizzes are a fantastic way to engage users, assess knowledge, and provide interactive experiences. From educational platforms to marketing websites, the ability to create and deploy quizzes is a valuable skill for any web developer. This tutorial will guide you through building a simple, yet functional, web-based quiz application using TypeScript, a powerful superset of JavaScript that adds static typing.

Why TypeScript?

Before we dive in, let’s address the elephant in the room: why TypeScript? While JavaScript is the language of the web, TypeScript offers several advantages that can significantly improve your development workflow:

  • Type Safety: TypeScript allows you to define the types of your variables, function parameters, and return values. This helps catch errors early in the development process, reducing the likelihood of runtime bugs.
  • Improved Code Readability: Types make your code easier to understand and maintain. They act as self-documenting elements, clarifying the expected data structures and function behavior.
  • Enhanced Developer Experience: TypeScript provides better autocompletion, refactoring, and error checking in your IDE, leading to a more productive coding experience.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, even if they’re not yet fully supported by all browsers, by transpiling your code into a compatible version.

Project Setup

Let’s get started by setting up our project. We’ll use Node.js and npm (Node Package Manager) to manage our dependencies and build our application. If you don’t have Node.js and npm installed, you can download them from the official Node.js website.

  1. Create a Project Directory: Create a new directory for your project and navigate into it using your terminal:
mkdir quiz-app
cd quiz-app
  1. Initialize npm: Initialize a new npm project by running the following command. This will create a package.json file, which will store your project’s metadata and dependencies. You can accept the defaults by pressing Enter for each prompt, or customize as desired.
npm init -y
  1. Install TypeScript: Install TypeScript as a development dependency:
npm install --save-dev typescript
  1. Create a TypeScript Configuration File: Create a tsconfig.json file in your project’s root directory. This file tells the TypeScript compiler how to compile your code. You can generate a basic one using the following command:
npx tsc --init

This command creates a tsconfig.json file with many configuration options. We’ll customize it later, but for now, it’s a good starting point.

  1. Create Project Folders: Create two folders: src for your source code and dist to store the compiled JavaScript files.
mkdir src dist

Writing the Quiz Application in TypeScript

Now, let’s write the core logic of our quiz application. We’ll create a simple quiz with multiple-choice questions.

1. Create the Question Interface

First, we’ll define an interface to represent a question. This interface will ensure that all our questions have a consistent structure.

Create a file named src/question.ts and add the following code:

// src/question.ts

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

export default Question;

This interface defines the structure of a question: a question string, an array of options, and the index of the correct answer.

2. Create the Quiz Class

Next, we’ll create a Quiz class to manage the quiz logic. This class will handle loading questions, tracking the user’s score, and providing feedback.

Create a file named src/quiz.ts and add the following code:

// src/quiz.ts
import Question from './question';

class Quiz {
  questions: Question[];
  currentQuestionIndex: number = 0;
  score: number = 0;

  constructor(questions: Question[]) {
    this.questions = questions;
  }

  getCurrentQuestion(): Question | undefined {
    return this.questions[this.currentQuestionIndex];
  }

  answerQuestion(answerIndex: number): boolean {
    const currentQuestion = this.getCurrentQuestion();
    if (!currentQuestion) {
      return false; // Quiz over
    }

    if (answerIndex === currentQuestion.correctAnswer) {
      this.score++;
      return true;
    }
    return false;
  }

  nextQuestion(): boolean {
    this.currentQuestionIndex++;
    return this.currentQuestionIndex < this.questions.length;
  }

  getScore(): number {
    return this.score;
  }

  get totalQuestions(): number {
    return this.questions.length;
  }
}

export default Quiz;

This class has the following key components:

  • questions: An array of Question objects.
  • currentQuestionIndex: The index of the current question.
  • score: The user’s current score.
  • constructor: Initializes the quiz with an array of questions.
  • getCurrentQuestion(): Returns the current question.
  • answerQuestion(answerIndex: number): Checks if the selected answer is correct and updates the score. Returns true if the answer was correct, false otherwise.
  • nextQuestion(): Advances to the next question. Returns true if there are more questions, false otherwise.
  • getScore(): Returns the user’s score.
  • totalQuestions: Returns the total number of questions.

3. Create the Question Data

Let’s create some sample questions for our quiz. Create a file named src/questionsData.ts and add the following code:

// src/questionsData.ts
import Question from './question';

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: 'What is the highest mountain in the world?',
    options: ['K2', 'Mount Everest', 'Kangchenjunga', 'Lhotse'],
    correctAnswer: 1,
  },
];

export default questions;

This file exports an array of Question objects, which will be used to populate our quiz.

4. Create the Main Application File

Now, let’s create the main application file that will orchestrate the quiz. Create a file named src/app.ts and add the following code:


// src/app.ts
import Quiz from './quiz';
import questions from './questionsData';

const quiz = new Quiz(questions);

function displayQuestion() {
    const question = quiz.getCurrentQuestion();
    if (!question) {
        displayScore();
        return;
    }

    const questionElement = document.getElementById('question') as HTMLHeadingElement;
    questionElement.textContent = question.question;

    const optionsElement = document.getElementById('options') as HTMLDivElement;
    optionsElement.innerHTML = ''; // Clear previous options

    question.options.forEach((option, index) => {
        const button = document.createElement('button');
        button.textContent = option;
        button.addEventListener('click', () => {
            const isCorrect = quiz.answerQuestion(index);
            displayFeedback(isCorrect);
            if (quiz.nextQuestion()) {
                displayQuestion();
            } else {
                displayScore();
            }
        });
        optionsElement.appendChild(button);
    });
}

function displayFeedback(isCorrect: boolean) {
    const feedbackElement = document.getElementById('feedback') as HTMLParagraphElement;
    feedbackElement.textContent = isCorrect ? 'Correct!' : 'Incorrect!';
    feedbackElement.style.color = isCorrect ? 'green' : 'red';
    setTimeout(() => {
        feedbackElement.textContent = '';
    }, 1500);
}

function displayScore() {
    const scoreElement = document.getElementById('score') as HTMLParagraphElement;
    scoreElement.textContent = `You scored ${quiz.getScore()} out of ${quiz.totalQuestions}!`;
}

// Initialize the quiz

function initializeQuiz() {
    const appContainer = document.getElementById('app');
    if (!appContainer) {
        console.error('Could not find the app container element.');
        return;
    }

    appContainer.innerHTML = `
        <h2 id="question"></h2>
        <div id="options"></div>
        <p id="feedback"></p>
        <p id="score"></p>
    `;
    displayQuestion();
}

// Wait for the DOM to load before initializing
document.addEventListener('DOMContentLoaded', initializeQuiz);

This file does the following:

  • Imports the Quiz class and the question data.
  • Creates a new Quiz instance.
  • Defines functions to display the question, provide feedback, and display the score.
  • Uses the DOM to dynamically update the content of the quiz.
  • Initializes the quiz when the DOM is loaded.

5. Create the HTML File

Create an index.html file in your project’s root directory with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        #options button {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="dist/app.js"></script>
</body>
</html>

This HTML file provides the basic structure for our quiz application and includes a link to the compiled JavaScript file (dist/app.js).

Compiling and Running the Application

Now that we have our TypeScript files and HTML file, we need to compile the TypeScript code into JavaScript that the browser can understand. We’ll also need to serve the HTML and JavaScript files so that we can view our quiz in a web browser.

1. Compile the TypeScript Code

Open your terminal and run the following command to compile your TypeScript code:

npx tsc

This command will use the tsconfig.json file to compile the TypeScript files (.ts) in your src directory and output the corresponding JavaScript files (.js) into the dist directory. If you get any errors, double-check your code for typos and ensure that your tsconfig.json file is configured correctly.

2. Serve the Application

To view our quiz in a web browser, we need to serve the HTML and JavaScript files. We can use a simple static server for this. There are many options for this, but we’ll use a very simple one called serve. Install it globally with:

npm install -g serve

Once installed, navigate to your project directory in your terminal and run the following command:

serve -s .

This will start a local server, and you should see a message in your terminal indicating the address where your application is running (usually something like http://localhost:5000). Open this address in your web browser to see your quiz application.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when working with TypeScript and this quiz application:

  • Type Errors: TypeScript’s type checking can be strict. If you see type errors in your IDE or during compilation, it means you’re trying to assign a value of one type to a variable of a different type, or you’re calling a function with the wrong arguments. Carefully review the error messages and ensure your types match the expected types. For example, if you get an error like “Type ‘string’ is not assignable to type ‘number’”, you should check where you’re assigning a string to a variable that expects a number.
  • Incorrect File Paths: Make sure your file paths in import statements are correct. A common mistake is forgetting the .ts extension when importing TypeScript files. For example, import Question from './question.ts'; is correct, while import Question from './question'; might not work depending on your configuration.
  • DOM Manipulation Errors: When working with the DOM (Document Object Model), make sure you’re selecting the correct elements and that those elements exist in your HTML. Use the browser’s developer tools (usually opened by pressing F12) to inspect the HTML and verify that the elements you’re trying to manipulate are present.
  • Incorrect Answer Index: In the questionsData.ts file, the correctAnswer property in each question should be the index of the correct answer within the options array. Ensure that these indices are correct. A common mistake is to start counting from 1 instead of 0.
  • Compilation Errors: If you encounter compilation errors, double-check that you have installed TypeScript correctly (npm install --save-dev typescript) and that your tsconfig.json file is correctly configured. Make sure you’re running the compilation command (npx tsc) in the correct directory (the root of your project).

Enhancements and Next Steps

This is a basic quiz application, but there are many ways to enhance it:

  • Add More Question Types: Support different question types, such as true/false, fill-in-the-blank, and image-based questions.
  • Implement Timer: Add a timer to the quiz to make it more challenging.
  • Provide Feedback: Give more detailed feedback on the user’s answers, explaining why an answer is correct or incorrect.
  • Store Results: Save the user’s score and display high scores.
  • Improve Styling: Use CSS to style the quiz application and make it visually appealing.
  • Use a Framework: Consider using a framework like React, Angular, or Vue.js to build more complex and interactive quiz applications. These frameworks can make managing the UI and state easier, especially as the application grows.
  • Add Error Handling: Implement robust error handling to gracefully handle unexpected situations, such as network errors or invalid data.
  • Implement User Authentication: Allow users to create accounts and track their quiz performance over time.

Key Takeaways

  • TypeScript offers enhanced type safety and code readability compared to JavaScript.
  • Interfaces define the structure of objects, ensuring data consistency.
  • Classes encapsulate logic and data, making your code organized.
  • The DOM is manipulated to dynamically update the user interface.
  • You can compile TypeScript code to JavaScript using the TypeScript compiler.
  • Static servers are useful for serving the application on your local machine.

FAQ

  1. Can I use this quiz application with a different set of questions?
    Yes, you can easily modify the questionsData.ts file to include your own questions, options, and correct answers. Make sure the correctAnswer index corresponds to the correct option in the options array.
  2. How do I deploy this quiz application to the web?
    You can deploy the application to a web hosting service like Netlify, Vercel, or GitHub Pages. These services typically allow you to deploy static websites directly from your code repository. You’ll need to configure your deployment service to build and serve the contents of the dist directory.
  3. What if I get type errors?
    Type errors are common when starting with TypeScript. Carefully read the error messages provided by the TypeScript compiler or your IDE. They will usually point you to the line of code causing the issue and provide information about the expected type. Double-check your variable types, function parameter types, and return types to ensure they match the expected types.
  4. Can I use this quiz application with a database?
    Yes, you can extend this quiz application to fetch questions from a database. You would need to modify the questionsData.ts file or create a separate file to make API requests to a backend server. The backend server would handle retrieving questions from the database and returning them to the frontend.
  5. How can I style the quiz application?
    You can style the quiz application by adding CSS to the index.html file. You can either include inline styles within the <style> tags or link to an external CSS file. For more advanced styling, consider using a CSS framework like Bootstrap or Tailwind CSS.

Building this quiz app provides a solid foundation for understanding the core concepts of TypeScript and web development. The combination of strong typing, object-oriented principles, and DOM manipulation allows for creating robust and user-friendly web applications. By understanding these concepts, you’re well on your way to building more complex and interactive web experiences. As you continue to experiment and expand the functionality, you’ll gain valuable experience and refine your skills, paving the way for more sophisticated projects.

More posts