TypeScript Tutorial: Building a Simple Interactive Code Quiz

Written by

learnmodernjavascript

in

Are you a developer looking to sharpen your TypeScript skills? Do you want to create interactive web applications that are both engaging and educational? This tutorial will guide you through building a simple, yet effective, interactive code quiz using TypeScript. We’ll cover the fundamentals, from setting up your project to implementing features like question display, answer validation, scoring, and feedback. By the end, you’ll have a functional code quiz and a solid understanding of how to build interactive elements in your TypeScript projects. This project is ideal for beginners and intermediate developers who want to practice and solidify their TypeScript knowledge in a practical, hands-on manner.

Why Build a Code Quiz?

Code quizzes are a fantastic way to reinforce your understanding of programming concepts. They provide immediate feedback, allowing you to identify areas where you excel and areas where you need more practice. Building a code quiz offers several benefits:

  • Practical Application: You’ll apply TypeScript concepts in a real-world scenario.
  • Interactive Learning: Create an engaging learning experience for yourself or others.
  • Skill Enhancement: Practice coding, debugging, and problem-solving.
  • Portfolio Piece: Showcase your TypeScript skills to potential employers or clients.

Project Setup: Getting Started

Before we dive into the code, let’s set up our project. We’ll need Node.js and npm (or yarn) installed on your system. If you haven’t already, download and install them from the official Node.js website. We’ll use a simple HTML file to display our quiz, and TypeScript will be compiled to JavaScript to run in the browser.

1. Create a Project Directory

Create a new directory for your project and navigate into it using your terminal:

mkdir code-quiz
cd code-quiz

2. Initialize npm

Initialize a new npm project:

npm init -y

This command creates a package.json file, which will manage our project dependencies.

3. Install TypeScript

Install TypeScript as a development dependency:

npm install --save-dev typescript

4. Create TypeScript Configuration

Create a tsconfig.json file to configure the TypeScript compiler. Run the following command:

npx tsc --init

This command generates a tsconfig.json file with default settings. You can customize this file to control how TypeScript compiles your code. Here’s a basic configuration you can start with:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}
  • target: Specifies the JavaScript version to compile to (ES5 is widely compatible).
  • module: Specifies the module system (CommonJS is suitable for this project).
  • outDir: Specifies the output directory for compiled JavaScript.
  • rootDir: Specifies the root directory of your TypeScript source files.
  • strict: Enables strict type checking.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • include: Specifies the files and directories to include in the compilation.

5. Create Project Directories and Files

Create the following directory structure and files:

code-quiz/
├── src/
│   ├── index.ts
│   └── quiz.ts
├── dist/
├── index.html
├── package.json
├── tsconfig.json
└── README.md
  • src/index.ts: The main entry point for our quiz logic.
  • src/quiz.ts: Where we’ll define our quiz questions and related functions.
  • dist/: This directory will hold the compiled JavaScript files.
  • index.html: The HTML file that will display our quiz.

Building the Quiz Logic (src/quiz.ts)

Let’s start by defining our quiz questions and the core quiz logic. In src/quiz.ts, we’ll create an array of questions, each with a question text, an array of answer choices, and the correct answer.

// src/quiz.ts

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

const questions: Question[] = [
    {
        question: "What is the result of 2 + 2?",
        answers: ["3", "4", "5", "6"],
        correctAnswer: 1,
    },
    {
        question: "Which language is TypeScript based on?",
        answers: ["Java", "C++", "JavaScript", "Python"],
        correctAnswer: 2,
    },
    {
        question: "What keyword is used to declare a variable in TypeScript?",
        answers: ["let", "const", "var", "all of the above"],
        correctAnswer: 3,
    },
];

export { questions };

In this code:

  • We define a Question interface to represent the structure of each question.
  • We create an array called questions containing our quiz data. Each question has a question string, an array of possible answers, and the index of the correct answer.
  • We export the questions array to use it in index.ts.

Implementing the Quiz Interface (src/index.ts)

Now, let’s create the interactive elements in our HTML and connect them to the quiz logic. We’ll start with the HTML structure and then write the corresponding TypeScript code in src/index.ts.

HTML Structure (index.html)

Create a simple HTML structure to display the quiz questions, answer choices, and feedback. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Quiz</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        .question {
            margin-bottom: 15px;
        }
        .answer {
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        #feedback {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="quiz-container">
        <div id="question-container">
            <h2 id="question"></h2>
            <div id="answers"></div>
        </div>
        <button id="submit-button">Submit</button>
        <div id="feedback"></div>
        <div id="score">Score: 0</div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML includes:

  • A title and basic styling.
  • A quiz-container div to hold the entire quiz.
  • A question-container div for the question and answer choices.
  • An h2 element with the id question to display the question text.
  • A div with the id answers to hold the answer choices.
  • A button with the id submit-button to submit the answer.
  • A div with the id feedback to display feedback to the user.
  • A div with the id score to display the user’s score.
  • A script tag to include the compiled JavaScript file (dist/index.js).

TypeScript Implementation (src/index.ts)

Now, let’s write the TypeScript code that interacts with the HTML elements and quiz data. In src/index.ts, we’ll:

  • Import the questions from quiz.ts.
  • Keep track of the current question and the user’s score.
  • Display the current question and answer choices.
  • Handle the user’s answer selection.
  • Provide feedback and update the score.
// src/index.ts
import { questions } from './quiz';

const questionElement = document.getElementById('question') as HTMLHeadingElement;
const answersElement = document.getElementById('answers') as HTMLDivElement;
const submitButton = document.getElementById('submit-button') as HTMLButtonElement;
const feedbackElement = document.getElementById('feedback') as HTMLDivElement;
const scoreElement = document.getElementById('score') as HTMLDivElement;

let currentQuestionIndex = 0;
let score = 0;

function displayQuestion() {
    const currentQuestion = questions[currentQuestionIndex];
    questionElement.textContent = currentQuestion.question;
    answersElement.innerHTML = ''; // Clear previous answers

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

function checkAnswer(selectedAnswerIndex: number) {
    const currentQuestion = questions[currentQuestionIndex];
    if (selectedAnswerIndex === currentQuestion.correctAnswer) {
        feedbackElement.textContent = 'Correct!';
        feedbackElement.style.color = 'green';
        score++;
        scoreElement.textContent = `Score: ${score}`;
    } else {
        feedbackElement.textContent = `Incorrect. The correct answer was: ${currentQuestion.answers[currentQuestion.correctAnswer]}`;
        feedbackElement.style.color = 'red';
    }

    // Move to the next question
    currentQuestionIndex++;

    // Check if the quiz is over
    if (currentQuestionIndex < questions.length) {
        displayQuestion();
    } else {
        displayFinalScore();
    }
}

function displayFinalScore() {
    questionElement.textContent = 'Quiz Completed!';
    answersElement.innerHTML = '';
    submitButton.style.display = 'none';
    feedbackElement.textContent = `You scored ${score} out of ${questions.length}!`
}

// Initial display
displayQuestion();

Explanation of the TypeScript code:

  • We import the questions array from quiz.ts.
  • We get references to the HTML elements using document.getElementById.
  • We initialize currentQuestionIndex to 0 and score to 0.
  • displayQuestion():
    • Fetches the current question from the questions array.
    • Sets the question text in the question element.
    • Clears any previous answer choices.
    • Creates buttons for each answer choice and adds click event listeners that call checkAnswer().
    • Appends the answer buttons to the answers element.
  • checkAnswer(selectedAnswerIndex: number):
    • Gets the current question.
    • Checks if the selected answer is correct.
    • Provides feedback to the user (correct or incorrect).
    • Updates the score if the answer is correct.
    • Increments currentQuestionIndex to move to the next question.
    • If there are more questions, calls displayQuestion() to display the next question.
    • If the quiz is over, calls displayFinalScore().
  • displayFinalScore():
    • Displays a message indicating the quiz is over.
    • Hides the submit button.
    • Displays the user’s final score.
  • We call displayQuestion() to display the first question when the page loads.

Compiling and Running the Quiz

Now that we have our TypeScript code and HTML, let’s compile the TypeScript code into JavaScript and run the quiz in the browser.

1. Compile TypeScript

Open your terminal and navigate to your project directory. Run the following command to compile your TypeScript code:

tsc

This command will use the tsconfig.json file to compile the TypeScript files in the src directory into JavaScript files in the dist directory.

2. Open in Browser

Open the index.html file in your web browser. You should see the first question of your code quiz. Clicking on the answer choices should provide feedback and allow you to progress through the quiz.

Adding More Features

Once you have a working quiz, you can enhance it with additional features to make it more engaging and user-friendly. Here are some ideas:

  • Timer: Add a timer to limit the time for each question or the entire quiz.
  • Question Types: Support different question types, such as multiple-choice, true/false, and fill-in-the-blank.
  • Randomization: Randomize the order of questions and/or answer choices.
  • Progress Bar: Display a progress bar to show the user’s progress through the quiz.
  • Styling: Improve the quiz’s appearance with CSS to make it visually appealing.
  • User Interface: Improve the user interface with better button styling and more intuitive feedback.
  • Local Storage: Save the user’s score to local storage so they can track their progress over time.

Common Mistakes and How to Fix Them

When building a code quiz, you might encounter some common mistakes. Here are a few and how to fix them:

  • Incorrect Paths: Ensure that the paths in your HTML file (e.g., the script tag) and tsconfig.json (e.g., outDir, rootDir) are correct. A common mistake is using the wrong paths, which will prevent the compiled JavaScript from loading or the TypeScript compiler from finding your source files.
  • Type Errors: TypeScript’s type system can help you catch errors early. Make sure you use types correctly (e.g., in the Question interface and when retrieving HTML elements). If you see type errors in your IDE or during compilation, carefully read the error messages and fix the type mismatches.
  • Event Listener Issues: When adding event listeners (e.g., to answer buttons), make sure the event listeners are attached correctly and that the functions they call are defined properly. Ensure that the correct context is used (e.g., using arrow functions to bind this or using .bind(this)).
  • Incorrect Answer Logic: Double-check the logic in your checkAnswer() function to ensure it correctly compares the user’s selected answer with the correct answer.
  • Missing Elements: Verify that all the necessary HTML elements are present in your HTML file and that you are correctly referencing them in your TypeScript code using document.getElementById().
  • Compilation Errors: If you encounter compilation errors, carefully examine the error messages from the TypeScript compiler. The error messages will usually point you to the line of code and the type of error.

Key Takeaways and Best Practices

Building a code quiz is an excellent way to learn and practice TypeScript. Here are some key takeaways and best practices:

  • Modularity: Structure your code into logical modules (e.g., quiz.ts for quiz data and index.ts for the main application logic) to improve readability and maintainability.
  • Types: Leverage TypeScript’s strong typing system to catch errors early and improve code quality.
  • HTML Structure: Keep your HTML simple and well-organized to make it easier to manage the quiz’s appearance and functionality.
  • Event Handling: Use event listeners to handle user interactions effectively.
  • Error Handling: Implement error handling to gracefully handle unexpected situations (e.g., missing data, invalid user input).
  • Testing: Consider writing unit tests to ensure that your quiz logic works correctly.
  • Code Comments: Add comments to explain your code and make it easier for others (and yourself) to understand.
  • Clean Code: Write clean, readable code with consistent formatting to improve maintainability.

FAQ

Here are some frequently asked questions about building a code quiz with TypeScript:

  1. Can I use a framework like React or Angular for this quiz?

    Yes, you can certainly use frameworks like React or Angular to build your code quiz. However, this tutorial focuses on a simpler approach using plain JavaScript and TypeScript to help you understand the fundamentals of building interactive web applications.

  2. How can I add more questions to the quiz?

    Simply add more objects to the questions array in quiz.ts. Make sure each object follows the Question interface, which includes a question string, an array of answer choices, and the index of the correct answer.

  3. How do I deploy this quiz online?

    You can deploy your quiz to a web server or a platform like GitHub Pages or Netlify. You’ll need to upload the HTML file, the compiled JavaScript file (dist/index.js), and any other assets (e.g., CSS files) to the server. Make sure the paths in your HTML file are correct so that the JavaScript file is loaded properly.

  4. How can I style the quiz?

    You can style the quiz using CSS. You can add CSS styles directly in the <style> tags in your index.html file or create a separate CSS file and link it to your HTML file. You can style the elements by using the CSS classes and IDs that you’ve added in the HTML (e.g., .answer, #question).

  5. How can I handle different question types (e.g., multiple-choice, true/false)?

    You can extend the Question interface to include a type property to distinguish between different question types. Then, you can modify your displayQuestion() and checkAnswer() functions to handle each question type accordingly. For example, you might render different HTML elements or use different validation logic based on the question type.

Building this interactive code quiz provides a great foundation for understanding how to use TypeScript to create engaging and educational web applications. This is just the starting point; you can continuously add new features, refine the interface, and expand the quiz’s content to improve the user experience. By experimenting with different features, you’ll gain valuable experience in TypeScript development and further solidify your understanding of web development concepts. This project is a valuable addition to any developer’s portfolio, showcasing your ability to create interactive and functional web applications.

More posts