TypeScript Tutorial: Building a Simple Web-Based Interactive Quiz

Written by

learnmodernjavascript

in

Quizzes are a fantastic way to engage users, test knowledge, and provide immediate feedback. In today’s digital landscape, web-based quizzes are more popular than ever. Whether it’s for educational purposes, marketing, or just plain fun, building your own can be incredibly rewarding. This tutorial will guide you through creating a simple, yet functional, interactive quiz application using TypeScript, a superset of JavaScript that adds static typing.

Why TypeScript?

TypeScript offers several advantages that make it ideal for this project:

  • Type Safety: TypeScript helps catch errors early in the development process by enforcing type checking. This reduces the likelihood of runtime errors and makes your code more robust.
  • Improved Code Readability: With type annotations, your code becomes easier to understand and maintain, especially as the project grows.
  • Enhanced Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error highlighting, making development faster and more efficient.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, allowing you to write cleaner and more concise code.

Project Setup

Before we dive into the code, let’s set up our project. You’ll need Node.js and npm (Node Package Manager) installed on your system. If you don’t have them, download and install them from the official Node.js website.

1. **Create a Project Directory:**

mkdir interactive-quiz
cd interactive-quiz

2. **Initialize npm:**

npm init -y

This command creates a `package.json` file in your project directory.

3. **Install TypeScript:**

npm install typescript --save-dev

The `–save-dev` flag indicates that TypeScript is a development dependency.

4. **Create a `tsconfig.json` file:**

npx tsc --init

This command generates a `tsconfig.json` file, which configures the TypeScript compiler. You can customize this file to control how your TypeScript code is compiled. For this tutorial, we’ll keep the default settings, but you can explore options like `target`, `module`, and `strict` to tailor your project.

5. **Create a `src` directory:**

mkdir src

This directory will hold our TypeScript source files.

Coding the Quiz

Now, let’s start writing the code for our interactive quiz. We’ll break it down into logical components to make it easier to understand and maintain. Let’s start with a file named `src/quiz.ts`.

1. **Define the Question Interface:**

First, we’ll define an interface to represent a question. This interface will specify the structure of each question object. Open `src/quiz.ts` and add the following code:

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 within the `options` array (a number).

2. **Create the Quiz Data:**

Next, let’s create an array of `Question` objects that will make up our quiz. Add the following code to `src/quiz.ts`:

const quizData: 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", "Venus", "Jupiter"],
    correctAnswer: 1,
  },
];

This array contains three questions with their respective options and the index of the correct answer. You can easily add more questions to expand the quiz.

3. **Implement the Quiz Logic:**

Now, let’s write the core quiz logic. This involves displaying questions, handling user input, and providing feedback. Add the following code to `src/quiz.ts`:

let currentQuestionIndex = 0;
let score = 0;

function displayQuestion() {
  const question = quizData[currentQuestionIndex];
  if (!question) {
    displayResult(); // If no question is found, display the results.
    return;
  }

  const questionElement = document.getElementById("question")!; // Non-null assertion operator
  questionElement.textContent = question.question;

  const optionsElement = document.getElementById("options")!;
  optionsElement.innerHTML = ""; // Clear previous options

  question.options.forEach((option, index) => {
    const button = document.createElement("button");
    button.textContent = option;
    button.addEventListener("click", () => selectAnswer(index));
    optionsElement.appendChild(button);
  });
}

function selectAnswer(selectedIndex: number) {
  const question = quizData[currentQuestionIndex];
  if (selectedIndex === question.correctAnswer) {
    score++;
  }

  currentQuestionIndex++;
  displayQuestion(); // Move to the next question
}

function displayResult() {
  const quizContainer = document.getElementById("quiz-container")!;
  quizContainer.innerHTML = `<h2>You scored ${score} out of ${quizData.length}!</h2>`;
}

// Initial display of the first question
window.onload = () => {
  displayQuestion();
};

Let’s break down this code:

  • currentQuestionIndex: Tracks the current question being displayed.
  • score: Keeps track of the user’s score.
  • displayQuestion(): This function is responsible for displaying the current question and its options. It retrieves the question from the quizData array, updates the question text in the HTML, and creates buttons for each answer option. When an option is clicked, the selectAnswer() function is called.
  • selectAnswer(selectedIndex: number): This function checks if the selected answer is correct. If it is, the score is incremented. Then, it moves to the next question by incrementing currentQuestionIndex and calling displayQuestion().
  • displayResult(): This function displays the user’s final score after all questions have been answered.
  • window.onload: This ensures that displayQuestion() is called when the page has finished loading.

4. **Create the HTML Structure:**

Now, let’s create the HTML structure for our quiz. Create a file named `index.html` in the root of your project directory 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>Interactive Quiz</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }
    #quiz-container {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 5px;
    }
    #question {
      font-size: 1.2em;
      margin-bottom: 10px;
    }
    button {
      display: block;
      margin-bottom: 5px;
      padding: 10px 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f9f9f9;
      cursor: pointer;
    }
    button:hover {
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div id="quiz-container">
    <h2>Quiz Time!</h2>
    <div id="question"></div>
    <div id="options"></div>
  </div>
  <script src="./dist/quiz.js"></script>
</body>
</html>

This HTML file includes the basic structure for the quiz, including a container div for the quiz, a div to display the question, and a div to display the answer options. It also includes a link to your compiled JavaScript file (`dist/quiz.js`).

5. **Compile the TypeScript Code:**

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

tsc

This command will create a `dist` directory (if it doesn’t already exist) and place a compiled `quiz.js` file inside it. This file is what your HTML will use to run the quiz.

6. **Run the Quiz:**

Open `index.html` in your web browser. You should see the first question of the quiz. Click on the answer options to navigate through the quiz. At the end, you’ll see your score.

Common Mistakes and Solutions

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check the file paths in your HTML and JavaScript. Make sure the paths to your JavaScript file (`dist/quiz.js`) are correct.
  • Typos: TypeScript helps catch typos, but they can still happen. Carefully check your code for any typos, especially in variable names and function names.
  • Incorrect Indexing: Make sure your `correctAnswer` values in the `quizData` array correctly match the index of the correct option in the `options` array. Remember that array indices start at 0.
  • Missing Event Listeners: Ensure that your button click event listeners are correctly attached to the answer option buttons.
  • Scope Issues: Be mindful of variable scope. Ensure that variables you are using in your functions are accessible. If you encounter scope issues, consider using `let` or `const` to declare variables within the appropriate scope.

Enhancements

Here are some ways you can enhance your quiz:

  • Add more question types: You can extend the `Question` interface to support different question types, such as multiple-choice, true/false, fill-in-the-blank, or image-based questions.
  • Implement a timer: Add a timer to the quiz to make it more challenging.
  • Provide feedback: Give users immediate feedback after they answer each question, indicating whether they were correct or incorrect.
  • Add a scoring system: Implement a more sophisticated scoring system, such as awarding points based on the difficulty of the question or the time taken to answer.
  • Store the quiz data in a separate file: For larger quizzes, consider storing the quiz data in a separate JSON file and loading it dynamically.
  • Improve the UI: Enhance the user interface with CSS to make the quiz more visually appealing and user-friendly.
  • Add a restart button: Allow users to restart the quiz after they have finished.
  • Use a framework: Consider using a front-end framework like React, Angular, or Vue.js for more complex quiz applications.

Key Takeaways

  • You have successfully created a basic interactive quiz using TypeScript.
  • You’ve learned how to define interfaces, work with arrays, and handle user input.
  • You understand the basic structure of a web-based quiz application.
  • You can now expand on this foundation and add more features to create a more sophisticated quiz application.

FAQ

  1. Can I use this quiz on my website? Yes, you can. This is a basic example, but you can adapt and expand it for your own website.
  2. How do I add more questions? Simply add more objects to the `quizData` array in `src/quiz.ts`.
  3. What if I want to change the styling? Modify the CSS within the `<style>` tags in `index.html`.
  4. How can I deploy this quiz? You can deploy this quiz on any web hosting platform that supports HTML, CSS, and JavaScript. You’ll need to upload the `index.html`, the `dist/quiz.js` file, and any other assets (like images) to your hosting provider.
  5. How can I make the quiz responsive? Use CSS media queries to adjust the layout and styling of the quiz for different screen sizes.

Building a web-based quiz with TypeScript is a great way to learn about web development and TypeScript fundamentals. As you continue to experiment and add more features, you’ll gain a deeper understanding of these technologies. The flexibility of TypeScript, combined with the power of web technologies, opens up a world of possibilities for creating engaging and interactive online experiences. Remember, the key is to start simple, experiment, and gradually build upon your knowledge. With each iteration, you’ll become more proficient and confident in your ability to create web applications that are both functional and user-friendly. Keep exploring, keep learning, and enjoy the process of bringing your ideas to life.

More posts