TypeScript Tutorial: Build a Simple Interactive Quiz App

Written by

learnmodernjavascript

in

In the ever-evolving world of web development, creating engaging and interactive applications is key to capturing and retaining user interest. Quizzes, in particular, are a fantastic way to educate, entertain, and assess understanding. This tutorial will guide you through building a simple, yet effective, interactive quiz application using TypeScript. We’ll cover the core concepts, from setting up your development environment to implementing the logic behind question presentation, answer validation, and score tracking. By the end of this tutorial, you’ll have a solid understanding of how to use TypeScript to create dynamic and user-friendly web applications, and you’ll have a fully functional quiz app to show for it.

Why TypeScript for a Quiz App?

TypeScript, a superset of JavaScript, brings static typing to the language. This means you can define the types of variables, function parameters, and return values. This is incredibly beneficial for several reasons:

  • Early Error Detection: TypeScript catches potential errors during development, before you even run your code. This saves time and effort in debugging.
  • Improved Code Readability: Type annotations make your code easier to understand, especially when working on larger projects or collaborating with others.
  • Enhanced Code Maintainability: With types, refactoring and making changes to your code becomes much safer and less prone to introducing bugs.
  • Better Tooling: TypeScript provides better support for code completion, refactoring, and other features in your IDE (Integrated Development Environment).

For a quiz app, where you’ll be dealing with data structures like questions, answers, and scores, TypeScript’s type system is a perfect fit. It helps you ensure that your data is consistent and that your app behaves as expected.

Setting Up Your Development Environment

Before we dive into the code, you’ll need to set up your development environment. Here’s what you’ll need:

  • Node.js and npm (Node Package Manager): These are essential for running JavaScript and managing project dependencies. You can download them from nodejs.org.
  • TypeScript Compiler: Install it globally using npm: npm install -g typescript
  • A Code Editor: Choose your favorite code editor. Popular choices include Visual Studio Code (VS Code), Sublime Text, or Atom.

Once you have these installed, create a new project directory for your quiz app. Navigate into this directory in your terminal and initialize a new npm project using the command: npm init -y. This will create a package.json file, which will store your project’s metadata and dependencies.

Creating the Project Structure

Let’s create a basic project structure to organize our files:

quiz-app/
├── src/
│   ├── index.ts
│   └── quizData.ts
├── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js

Here’s what each file and directory will do:

  • src/index.ts: This will be the main entry point of our application. It will contain the logic for the quiz and the interaction with the HTML.
  • src/quizData.ts: This file will store our quiz questions and answers.
  • index.html: This is the HTML file that will display the quiz to the user.
  • tsconfig.json: This file configures the TypeScript compiler.
  • webpack.config.js: This file configures Webpack, a module bundler, to bundle our TypeScript code into a single JavaScript file that can be run in the browser.

Configuring TypeScript

To configure TypeScript, create a tsconfig.json file in the root of your project. Here’s a basic configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Let’s break down these options:

  • target: "es5": Specifies the JavaScript version to compile to. es5 is widely supported by browsers.
  • module: "commonjs": Specifies the module system to use. commonjs is commonly used with Node.js.
  • outDir: "./dist": Specifies the output directory for the compiled JavaScript files.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • strict: true: Enables strict type checking.
  • skipLibCheck: true: Skips type checking of declaration files (.d.ts files).
  • include: ["src/**/*"]: Specifies the files and directories to include in the compilation.

Setting Up Webpack

Webpack is a module bundler that will take our TypeScript files, transpile them into JavaScript, and bundle them into a single file that can be included in our HTML. Install Webpack and its CLI as dev dependencies:

npm install webpack webpack-cli --save-dev

Create a webpack.config.js file in the root of your project with the following configuration:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Explanation of the Webpack configuration:

  • entry: './src/index.ts': Specifies the entry point of your application.
  • module.rules: Defines the rules for how to handle different file types. In this case, we have a rule for .ts files, using ts-loader to transpile TypeScript.
  • resolve.extensions: Tells Webpack which file extensions to resolve.
  • output: Specifies the output file name and directory.

Creating the Quiz Data

Let’s create some sample quiz questions in src/quizData.ts. We’ll define a type for our questions to ensure consistency.


// src/quizData.ts

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

export const quizData: Question[] = [
  {
    question: "What is the capital of France?",
    options: ["Berlin", "Madrid", "Paris", "Rome"],
    correctAnswer: 2,
  },
  {
    question: "Which planet is known as the Red Planet?",
    options: ["Earth", "Mars", "Jupiter", "Venus"],
    correctAnswer: 1,
  },
  {
    question: "What is the largest mammal?",
    options: ["Elephant", "Blue Whale", "Giraffe", "Lion"],
    correctAnswer: 1,
  },
];

In this code:

  • We define an interface Question to clearly specify the structure of each question. This interface has properties for the question text, an array of answer options, and the index of the correct answer.
  • We create an array called quizData that stores our quiz questions, each adhering to the Question interface.

Building the Quiz Logic

Now, let’s write the core logic for our quiz in src/index.ts. This will involve displaying questions, handling user input, checking answers, and keeping track of the score.


// src/index.ts
import { quizData, Question } from './quizData';

const questionContainer = document.getElementById('question-container') as HTMLDivElement | null;
const optionsContainer = document.getElementById('options-container') as HTMLDivElement | null;
const scoreDisplay = document.getElementById('score') as HTMLSpanElement | null;
const nextButton = document.getElementById('next-button') as HTMLButtonElement | null;

let currentQuestionIndex: number = 0;
let score: number = 0;

function displayQuestion() {
  if (!questionContainer || !optionsContainer) {
    console.error('Question container or options container not found.');
    return;
  }

  const currentQuestion: Question = quizData[currentQuestionIndex];

  questionContainer.textContent = currentQuestion.question;
  optionsContainer.innerHTML = ''; // Clear previous options

  currentQuestion.options.forEach((option, index) => {
    const button = document.createElement('button');
    button.textContent = option;
    button.addEventListener('click', () => checkAnswer(index));
    optionsContainer.appendChild(button);
  });

  // Initially hide the next button
  if (nextButton) {
    nextButton.style.display = 'none';
  }
}

function checkAnswer(selectedIndex: number) {
  const currentQuestion: Question = quizData[currentQuestionIndex];

  if (selectedIndex === currentQuestion.correctAnswer) {
    score++;
    if (scoreDisplay) {
      scoreDisplay.textContent = score.toString();
    }
    alert('Correct!');
  } else {
    alert('Incorrect!');
  }

  // Show the next button after an answer is selected
  if (nextButton) {
    nextButton.style.display = 'block';
  }

  // Disable the answer buttons after an answer is selected
  if (optionsContainer) {
    const buttons = optionsContainer.querySelectorAll('button');
    buttons.forEach(button => {
      button.disabled = true;
    });
  }
}

function nextQuestion() {
  currentQuestionIndex++;
  if (currentQuestionIndex  {
        button.disabled = false;
      });
    }
  } else {
    // Quiz finished
    alert(`Quiz finished! Your score: ${score} / ${quizData.length}`);
    // Optionally, reset the quiz or display a different message
    resetQuiz();
  }
}

function resetQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  if (scoreDisplay) {
    scoreDisplay.textContent = '0';
  }
  displayQuestion();
}

// Event listener for the next button
if (nextButton) {
  nextButton.addEventListener('click', nextQuestion);
}

// Initial display
displayQuestion();

Let’s break down the code:

  • Importing Data: We import the quizData and the Question interface from ./quizData.
  • DOM Element Selection: We select the HTML elements we’ll be interacting with: the question container, the options container, the score display, and the next button. The as HTMLDivElement | null syntax is a type assertion and handles the possibility that the element might not be found.
  • Variables: We initialize currentQuestionIndex to track the current question and score to track the user’s score.
  • displayQuestion() Function:
    • This function is responsible for displaying the current question and its answer options.
    • It retrieves the current question from the quizData array.
    • It clears any previous options from the options container.
    • It dynamically creates buttons for each answer option and attaches a click event listener to each button. When a button is clicked, the checkAnswer() function is called.
  • checkAnswer(selectedIndex: number) Function:
    • This function is called when the user clicks an answer option.
    • It compares the selected answer index with the correct answer index for the current question.
    • If the answer is correct, it increments the score and updates the score display.
    • It provides feedback to the user via an alert (you can improve this with better UI elements).
    • It shows the “Next” button.
    • It disables the answer buttons after an answer is selected.
  • nextQuestion() Function:
    • This function handles moving to the next question.
    • It increments the currentQuestionIndex.
    • If there are more questions, it calls displayQuestion() to display the next question.
    • If the quiz is finished, it displays the final score and optionally resets the quiz.
    • It hides the “Next” button for new questions and re-enables the answer buttons.
  • resetQuiz() Function: Resets the quiz to its initial state.
  • Event Listener: We attach an event listener to the “Next” button, so when it is clicked, the next question is displayed.
  • Initial Display: Finally, we call displayQuestion() to display the first question when the page loads.

Creating the HTML Structure

Now, let’s create the HTML file (index.html) to structure our quiz app. This HTML will contain the elements for displaying the question, answer options, score, and the “Next” button.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Quiz App</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #quiz-container {
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      padding: 10px 20px;
      margin: 5px;
      font-size: 16px;
      cursor: pointer;
    }
    #next-button {
      display: none; /* Initially hide the next button */
    }
  </style>
</head>
<body>
  <div id="quiz-container">
    <h2>Quiz Time!</h2>
    <div id="question-container"></div>
    <div id="options-container"></div>
    <p>Score: <span id="score">0</span></p>
    <button id="next-button">Next</button>
  </div>
  <script src="dist/bundle.js"></script>
</body>
</html>

Key elements of the HTML:

  • <div id="quiz-container">: This is the main container for the quiz.
  • <div id="question-container">: This is where the question text will be displayed.
  • <div id="options-container">: This is where the answer options (buttons) will be displayed.
  • <p>Score: <span id="score">0</span></p>: This displays the user’s score.
  • <button id="next-button">Next</button>: This is the button that the user clicks to proceed to the next question. It’s initially hidden.
  • <script src="dist/bundle.js"></script>: This includes the bundled JavaScript file that Webpack generates.

Building and Running the App

Now that we have all the pieces in place, let’s build and run our quiz app. In your terminal, navigate to your project directory and run the following commands:

  1. Build the project: npx webpack
  2. Open index.html in your browser: You can simply double-click the index.html file to open it in your browser. Alternatively, you can run a simple web server (like the one provided by VS Code’s Live Server extension) to serve the HTML.

You should now see the first question of your quiz displayed. Clicking an answer should provide feedback, and clicking “Next” should move to the next question.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building TypeScript applications, along with tips on how to avoid them:

  • Incorrect File Paths: Double-check your file paths in your imports and Webpack configuration. Typos are a frequent source of errors. Use relative paths (e.g., ./src/quizData) correctly.
  • Type Errors: TypeScript will help you catch many errors, but make sure you understand the error messages. They often point directly to the line of code causing the issue. Hover over variables and function calls in your IDE to see their types.
  • DOM Element Selection Issues: Make sure your HTML elements have the correct IDs and that you’re selecting them using the correct methods (e.g., document.getElementById()). Use type assertions (e.g., as HTMLDivElement) to help TypeScript understand the type of the element. Check the console for errors if elements aren’t found.
  • Incorrect Event Listener Attachments: Ensure your event listeners are correctly attached to the appropriate elements. Make sure you’re not trying to attach an event listener to an element that doesn’t exist yet (e.g., before it’s created dynamically).
  • Asynchronous Operations: If you’re fetching data from an API or performing other asynchronous operations, make sure you handle them correctly (e.g., using async/await or Promises) and that you’re using the correct types for the data you receive.

Enhancements and Next Steps

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

  • Improve the UI: Use CSS to style the quiz and make it more visually appealing. Consider using a CSS framework like Bootstrap or Tailwind CSS to speed up the process.
  • Add More Question Types: Support different question types, such as multiple-choice questions with images, true/false questions, and fill-in-the-blank questions.
  • Implement Timer: Add a timer to the quiz to make it more challenging.
  • Add User Interface Elements: Add features such as progress bars, and feedback messages.
  • Store Results: Implement functionality to store the user’s score, either locally (using localStorage) or on a server.
  • Add API Integration: Fetch quiz questions from an external API.
  • Improve Error Handling: Add more robust error handling to catch and handle potential issues.
  • Use a Framework: Consider using a framework like React, Vue, or Angular to build more complex and scalable quiz applications.

Key Takeaways

This tutorial has walked you through creating a simple interactive quiz app using TypeScript. You’ve learned how to set up a TypeScript project, define data structures with interfaces, handle user input, and manage the quiz flow. You’ve seen the advantages of TypeScript, such as early error detection and improved code readability. You now have a solid foundation for building more complex and interactive web applications using TypeScript.

The journey of a thousand lines of code begins with a single step. Embrace the learning process, experiment with different features, and don’t be afraid to make mistakes – that’s how you learn and grow as a developer. Keep exploring, keep building, and remember that with each project, you’re not just writing code; you’re crafting solutions and bringing ideas to life. The skills you’ve gained here are transferable to a wide range of web development projects, opening doors to new possibilities and challenges. The world of TypeScript and web development is vast and exciting, and your adventure has just begun.

More posts