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

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:

[
  {
    "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 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:

{
  "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:

{
  "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) 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 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 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). 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).

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}