TypeScript: Building a Simple Quiz Application

Written by

learnmodernjavascript

in

Quizzes are everywhere. From personality tests on social media to educational assessments in schools, they’re a versatile tool for engaging users and evaluating knowledge. But have you ever considered building your own? In this tutorial, we’ll dive into the world of TypeScript and create a simple yet functional quiz application. This project is perfect for beginners and intermediate developers looking to solidify their TypeScript skills and learn about object-oriented programming, data structures, and event handling.

Why TypeScript?

Before we jump into the code, let’s talk about why we’re using TypeScript. TypeScript is a superset of JavaScript that adds static typing. This means you can define the types of variables, function parameters, and return values. This helps catch errors early in the development process, makes your code more readable, and provides better autocompletion and refactoring capabilities. In short, TypeScript makes your code more robust and easier to maintain.

What We’ll Build

Our quiz application will:

  • Present a series of questions.
  • Allow the user to select an answer for each question.
  • Track the user’s score.
  • Provide feedback at the end.

It’s a straightforward project, but it will give you a solid foundation in TypeScript and front-end development principles.

Setting Up the Project

Let’s get started! First, make sure you have Node.js and npm (Node Package Manager) installed on your system. Then, create a new project directory and navigate into it using your terminal.

mkdir quiz-app
cd quiz-app

Next, initialize a new npm project:

npm init -y

This command creates a package.json file, which will manage our project dependencies. Now, let’s install TypeScript:

npm install typescript --save-dev

The --save-dev flag indicates that this is a development dependency, meaning it’s only needed during development.

After installing TypeScript, we need to create a tsconfig.json file. This file tells the TypeScript compiler how to compile your TypeScript code. Run the following command:

npx tsc --init

This command generates a tsconfig.json file with a lot of default settings. You can customize these settings to fit your project’s needs. For our project, the default settings will work fine. However, you might want to uncomment and modify the outDir setting to specify where the compiled JavaScript files should be placed. For example, you could set it to "outDir": "./dist".

Writing the Code

Now, let’s write some code! Create a file named index.ts in your project directory. This is where we’ll write the main logic for our quiz application.

Defining the Question Interface

First, let’s define an interface for our questions. An interface is a way to define the structure of an object. This helps us ensure that our questions have the correct properties.

// index.ts
interface Question {
  question: string;
  options: string[];
  correctAnswer: number;
}

This interface defines three properties:

  • question: The text of the question (a string).
  • options: An array of strings representing the answer choices.
  • correctAnswer: The index of the correct answer in the options array (a number).

Creating the Questions Array

Next, let’s create an array of Question objects. This will hold all the questions for our quiz.

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,
  },
];

Here, we define three questions. Each question has a question text, four answer options, and the index of the correct answer (remember, arrays are zero-indexed).

Implementing the Quiz Logic

Now, let’s write the core quiz logic. We’ll create a function to render each question and handle user input.

function renderQuestion(question: Question, questionIndex: number): string {
  let optionsHTML = "";
  question.options.forEach((option, index) => {
    optionsHTML += `
      <li>
        <input type="radio" id="q${questionIndex}-option${index}" name="question${questionIndex}" value="${index}">
        <label for="q${questionIndex}-option${index}">${option}</label>
      </li>
    `;
  });

  return `
    <div class="question">
      <p>${question.question}</p>
      <ul>
        ${optionsHTML}
      </ul>
    </div>
  `;
}

This renderQuestion function takes a Question object and its index as input. It generates the HTML for a single question, including the question text and answer options as radio buttons. The function iterates over the options, creating a radio button and a label for each one.

Next, we create the showQuiz function that is responsible for displaying all questions and processing the quiz.

function showQuiz() {
  let quizHTML = "";
  questions.forEach((question, index) => {
    quizHTML += renderQuestion(question, index);
  });

  const quizContainer = document.getElementById("quiz-container");
  if (quizContainer) {
    quizContainer.innerHTML = quizHTML;
    const submitButton = document.createElement("button");
    submitButton.textContent = "Submit Quiz";
    submitButton.addEventListener("click", calculateScore);
    quizContainer.appendChild(submitButton);
  }
}

The showQuiz function iterates through the questions array and calls the renderQuestion function for each question. The generated HTML is appended to a container element with the ID “quiz-container”. A submit button is created and added to the container. The calculateScore function is assigned to the submit button’s click event.

Let’s define the calculateScore function:

function calculateScore() {
  let score = 0;
  questions.forEach((question, questionIndex) => {
    const selectedAnswer = document.querySelector(`input[name="question${questionIndex}"]:checked`);
    if (selectedAnswer) {
      const userAnswer = parseInt(selectedAnswer.value);
      if (userAnswer === question.correctAnswer) {
        score++;
      }
    }
  });

  showResult(score);
}

The calculateScore function iterates through the questions and checks the user’s selected answers. It retrieves the selected answer for each question using document.querySelector. If an answer is selected, it compares the selected answer with the correct answer. The score is incremented if the answers match. Finally, the showResult function is called to display the result.

The showResult function is defined as follows:

function showResult(score: number) {
  const totalQuestions = questions.length;
  const resultContainer = document.getElementById("result-container");
  if (resultContainer) {
    resultContainer.innerHTML = `
      <p>You scored ${score} out of ${totalQuestions}!</p>
    `;
  }
}

The showResult function displays the user’s score. It retrieves the total number of questions and the HTML container for displaying the result. It then updates the content of the container with the score.

Adding Event Listeners

Finally, let’s call the showQuiz function when the page loads:

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

This code adds an event listener to the document that listens for the “DOMContentLoaded” event. This event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. When this event occurs, the showQuiz function is called to render the quiz.

HTML Structure

We need some basic HTML to display our quiz. Create an index.html file in your project 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>
    .question {
      margin-bottom: 20px;
      border: 1px solid #ccc;
      padding: 10px;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div id="quiz-container"></div>
  <div id="result-container"></div>
  <script src="index.js"></script>
</body>
</html>

This HTML structure includes:

  • A basic HTML structure with a title and a simple style for the questions and answers.
  • Two div elements with the IDs “quiz-container” and “result-container”. The quiz questions will be displayed in “quiz-container”, and the result will be displayed in “result-container”.
  • A script tag that links to our compiled JavaScript file (index.js).

Compiling and Running the Code

Now, let’s compile our TypeScript code into JavaScript. Open your terminal and run the following command in your project directory:

tsc

This command will use the TypeScript compiler to transpile your index.ts file into a index.js file, which is the JavaScript code that the browser will execute. If you configured the outDir in your tsconfig.json, the index.js file will be in the specified directory.

To run the application, open index.html in your web browser. You should see the quiz questions displayed, and you should be able to select answers and submit the quiz. If you encounter any errors, check the browser’s developer console for helpful messages.

Common Mistakes and How to Fix Them

When working with TypeScript, and front-end development in general, you might encounter a few common mistakes. Here are some of them and how to fix them:

Type Errors

TypeScript’s type system is designed to catch errors before runtime. If you see type errors in your editor or during compilation, it means you’re trying to perform an operation on a value that’s not compatible with its type. For example, you might be trying to add a string to a number. The fix is to ensure that the types are compatible. You can do this by:

  • Using type annotations to explicitly define the types of variables and function parameters.
  • Using type assertions to tell the compiler that you know a value’s type. (Use with caution!)
  • Using type guards to narrow the type of a variable within a conditional block.

Incorrect DOM Manipulation

When working with the DOM (Document Object Model), it’s easy to make mistakes. Common issues include:

  • Incorrectly selecting elements (e.g., using the wrong ID or class name).
  • Trying to modify an element that doesn’t exist.
  • Using the wrong properties or methods to manipulate the element.

To fix these issues:

  • Double-check your element selectors to ensure they’re correct.
  • Check if an element exists before trying to modify it.
  • Consult the MDN Web Docs for the correct properties and methods to use.

Event Handling Issues

Event handling can be tricky. Common mistakes include:

  • Not attaching event listeners correctly.
  • Not preventing default behavior when necessary.
  • Incorrectly handling event delegation.

To fix these issues:

  • Ensure you’re attaching event listeners to the correct elements and that you’re using the correct event types.
  • Use event.preventDefault() to prevent default browser behavior (e.g., form submission).
  • Use event delegation when you have many similar elements and want to avoid attaching multiple event listeners.

Key Takeaways

In this tutorial, we’ve covered the basics of building a quiz application with TypeScript. You’ve learned how to:

  • Set up a TypeScript project.
  • Define interfaces to structure your data.
  • Write functions to render HTML and handle user interactions.
  • Use event listeners to respond to user actions.
  • Compile TypeScript code into JavaScript.

This is a foundational project that can be extended in many ways. You could add features like:

  • Different question types (e.g., multiple-choice, true/false, fill-in-the-blank).
  • Scoring systems.
  • Timers.
  • User interfaces.
  • Integration with a backend to fetch questions from a database.

FAQ

1. How do I add more questions to the quiz?

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

2. How can I style the quiz?

You can add CSS styles to the index.html file within the <style> tags, or you can link to an external CSS file. Customize the styles to change the appearance of the quiz.

3. How do I handle different question types?

You’ll need to modify the Question interface to include a type property (e.g., “multiple-choice”, “true-false”, “fill-in-the-blank”). Then, modify the renderQuestion function to render different HTML based on the question type. You will also need to update the logic for calculating the score.

4. How can I deploy this quiz online?

You can deploy the quiz by uploading the index.html, index.js (or compiled JavaScript file), and any CSS files to a web server or a platform like Netlify or GitHub Pages.

Further Exploration

Building this quiz application provides a solid foundation. Consider exploring these next steps to deepen your knowledge. Experiment with different question types, improve the styling, or add a scoring system. Consider integrating the quiz with a backend to fetch questions from a database, making it dynamic and scalable. The world of front-end development is vast, and there’s always something new to learn.

More posts