# How to Add New Quiz Questions to AI for Beginners Using JSON Templates

> Easily add new quiz questions to AI for Beginners using JSON templates. Follow this guide to update lesson JSON files and enhance the app's learning experience.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-01

---

**To add new quiz questions to the AI for Beginners app, edit the language-specific JSON files in `etc/quiz-app/src/assets/translations/<lang>/lesson-<n>.json` by inserting question objects that follow the established schema into the appropriate `quiz` array, then restart the development server to see changes immediately.**

The **microsoft/AI-For-Beginners** repository includes a Vue 2 quiz application located in the `etc/quiz-app` directory. All quiz content is stored as structured JSON templates rather than hardcoded in the application logic, allowing contributors to add new quiz questions by simply editing translation files. This guide explains exactly how to modify these JSON files to extend the curriculum with custom assessments.

## Understanding the Quiz JSON Schema

The quiz system relies on a strict JSON structure stored in `src/assets/translations/<lang>/lesson-<n>.json`. Each file contains an array with metadata and a nested `quizzes` array that holds individual quiz sections.

The schema hierarchy follows this pattern:

```json
[
  {
    "title": "AI for Beginners: Quizzes",
    "complete": "Message shown on completion",
    "error": "Message shown on error",
    "quizzes": [
      {
        "id": 101,
        "title": "Introduction to AI: Pre Quiz",
        "quiz": [
          {
            "questionText": "What is AI?",
            "answerOptions": [
              {"answerText": "Option A", "isCorrect": false},
              {"answerText": "Option B", "isCorrect": true}
            ]
          }
        ]
      }
    ]
  }
]

```

The Vue components in `etc/quiz-app/src/components/` dynamically render content by iterating over the `quizzes[*].quiz[*]` arrays, displaying questions in the exact order they appear in the JSON.

## Step-by-Step Guide to Adding Quiz Questions

### Locate the Correct Lesson File

Navigate to `etc/quiz-app/src/assets/translations/` and select the language directory (e.g., `en` for English or `es` for Spanish). Choose the lesson file that corresponds to the curriculum module you want to update, such as [`lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json) for the first lesson. The application uses the route parameter to determine which file to load, matching the lesson number to the filename.

### Insert New Question Objects

To add questions to an existing quiz, locate the quiz object by its `id` (for example, ID `101` for the pre-quiz) and append new objects to its `quiz` array. Each question requires a `questionText` string and an `answerOptions` array containing objects with `answerText` and boolean `isCorrect` properties.

For example, to add a question about supervised learning to the existing pre-quiz:

```json
{
  "questionText": "Which of the following is a classic example of a supervised learning task?",
  "answerOptions": [
    { "answerText": "Clustering customers into segments", "isCorrect": false },
    { "answerText": "Predicting house prices from historical data", "isCorrect": true },
    { "answerText": "Generating new artwork with GANs", "isCorrect": false }
  ]
}

```

### Create New Quiz Sections

To add an entirely new quiz section rather than appending to an existing one, insert a new object into the root `quizzes` array with a unique numeric `id`:

```json
{
  "id": 301,
  "title": "Introduction to AI: Bonus Quiz",
  "quiz": [
    {
      "questionText": "What does the acronym 'AI' stand for?",
      "answerOptions": [
        { "answerText": "Artificial Intelligence", "isCorrect": true },
        { "answerText": "Automated Interface", "isCorrect": false },
        { "answerText": "Advanced Infrastructure", "isCorrect": false }
      ]
    },
    {
      "questionText": "Which AI sub-field focuses on learning from data without explicit programming?",
      "answerOptions": [
        { "answerText": "Symbolic AI", "isCorrect": false },
        { "answerText": "Machine Learning", "isCorrect": true },
        { "answerText": "Expert Systems", "isCorrect": false }
      ]
    }
  ]
}

```

### Validate and Test

After editing, validate your JSON syntax to prevent parsing errors. Run `npm run serve` from the `etc/quiz-app` directory (as defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json)) to start the development server. The application reads the JSON files at runtime, so changes appear immediately upon saving without requiring a rebuild of the Vue components. The static route configuration in [`public/routes.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/public/routes.json) ensures the SPA correctly serves the lesson paths.

## Supporting Multiple Languages

Because the quiz content is decoupled from the application logic through the translation file structure, you must update each language-specific file to maintain parity. Edit [`lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json) in the `en` directory for English speakers, and replicate your changes in the corresponding `es`, `zh`, or other language directories to ensure all learners can access the new assessments.

## Summary

- **Edit JSON template files** located at `etc/quiz-app/src/assets/translations/<lang>/lesson-<n>.json` to add quiz content without modifying Vue code.
- **Follow the strict schema**: Each question requires `questionText` and an `answerOptions` array with `answerText` and `isCorrect` boolean fields.
- **Maintain array order**: Questions display sequentially based on their position in the `quiz` array.
- **Support localization**: Update JSON files for each target language (`en`, `es`, etc.) to ensure global accessibility.
- **Test locally**: Run `npm run serve` in the `etc/quiz-app` directory to verify new questions render correctly before committing.

## Frequently Asked Questions

### Do I need to modify Vue components to add new quiz questions?

No. The quiz application dynamically loads content from JSON translation files at runtime. As long as you follow the established JSON schema in `src/assets/translations/<lang>/lesson-<n>.json`, the existing Vue components will automatically render new questions without any code changes to the application logic.

### What is the correct format for answer options in the JSON template?

Each answer option must be an object containing two properties: `answerText` (a string containing the option text) and `isCorrect` (a boolean indicating whether this option is the correct answer). The `answerOptions` array must contain at least one object with `"isCorrect": true` for the question to have a valid correct answer.

### How do I add a quiz for a new lesson that doesn't exist yet?

Create a new JSON file following the naming convention `lesson-<n>.json` in the appropriate language directory (e.g., [`src/assets/translations/en/lesson-99.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/en/lesson-99.json)). Ensure the file contains the root array structure with `title`, `complete`, `error`, and `quizzes` properties. The application uses route parameters to determine which lesson file to load, so filename consistency with the lesson numbering scheme is critical.

### Why aren't my new quiz questions appearing in the app?

Verify that your JSON syntax is valid and that you saved the file in the correct language directory. The application may cache JSON files, so restart the development server with `npm run serve` if changes don't appear immediately. Also confirm that the lesson number in your browser route matches the filename (e.g., `/lesson/1` loads [`lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json)).