JSON Format for Structuring Quiz Questions in the Microsoft AI-For-Beginners Quiz-Src System

The quiz system in microsoft/AI-For-Beginners uses a hierarchical JSON structure with a top-level metadata object containing quizzes arrays, where each quiz has an id, title, and a quiz array of question objects with questionText and answerOptions fields.

The AI-For-Beginners repository, a comprehensive curriculum for learning artificial intelligence, implements an interactive quiz system to reinforce learning objectives. The quiz data lives in the etc/quiz-app/src/assets/translations/ directory and follows a strictly defined JSON schema that the Vue-based frontend consumes. Understanding this JSON format for structuring quiz questions is essential for contributors adding new lessons or translating existing content.

Top-Level Quiz Container Structure

Each JSON file represents a complete quiz module. The root is an array containing one object with three metadata fields plus the quizzes array:

Field	Type	Purpose
title	string	Display title for the entire quiz collection
complete	string	Success message shown upon completion
error	string	Failure message for incorrect submissions
quizzes	array	Collection of individual quiz objects

As defined in etc/quiz-app/src/assets/translations/en/lesson-1.json, this structure allows multiple related quizzes to coexist in a single file while sharing common feedback messages.

Individual Quiz Object Schema

Every element in the quizzes array requires two identifiers and one content container:

• id — numeric identifier for routing and state management
• title — human-readable quiz name displayed in the UI
• quiz — array of question objects

The Quiz.vue component uses id for keying and title for section headers when rendering the quiz interface.

Question and Answer Format

Each question object inside the quiz array contains exactly two fields:

Field	Type	Description
questionText	string	The prompt presented to learners
answerOptions	array	Possible responses with correctness flags

Every object in answerOptions must specify:

• answerText — the visible choice text
• isCorrect — boolean indicating whether selecting this option counts as correct

At least one answerOption must have isCorrect: true. Multiple correct answers are technically supported by the schema, though the standard implementation in Quiz.vue handles single-select validation.

Complete JSON Example from lesson-1.json

The canonical implementation appears in etc/quiz-app/src/assets/translations/en/lesson-1.json:

[
  {
    "title": "AI for Beginners: Quizzes",
    "complete": "Congratulations, you completed the quiz!",
    "error": "Sorry, try again",
    "quizzes": [
      {
        "id": 101,
        "title": "Introduction to AI: Pre Quiz",
        "quiz": [
          {
            "questionText": "Sample question?",
            "answerOptions": [
              { "answerText": "Option A", "isCorrect": false },
              { "answerText": "Option B", "isCorrect": true }
            ]
          }
        ]
      }
    ]
  }
]

This file directly feeds the quiz rendering pipeline without transformation.

How Quiz.vue Consumes the JSON Structure

The etc/quiz-app/src/components/Quiz.vue component imports JSON assets and navigates the nested structure through three levels of iteration:

import lesson1 from '@/assets/translations/en/lesson-1.json'

export default {
  data() {
    return {
      quizData: lesson1[0]
    }
  },
  methods: {
    checkAnswer(option) {
      return option.isCorrect
    }
  }
}

The template traversal matches the JSON hierarchy exactly:

<div v-for="quiz in quizData.quizzes" :key="quiz.id">
  <h2>{{ quiz.title }}</h2>
  <div v-for="q in quiz.quiz" :key="q.questionText">
    <p>{{ q.questionText }}</p>
    <ul>
      <li v-for="opt in q.answerOptions" :key="opt.answerText">
        <button @click="answer = checkAnswer(opt)">
          {{ opt.answerText }}
        </button>
      </li>
    </ul>
  </div>
</div>

The isCorrect boolean drives immediate feedback without server round-trips.

Files Defining and Consuming the Quiz Format

File Path	Responsibility
etc/quiz-app/src/assets/translations/en/lesson-1.json	Canonical JSON schema implementation
etc/quiz-app/src/components/Quiz.vue	Parses JSON, renders UI, validates selections
etc/quiz-app/src/router/index.js	Routes to quiz views using dynamic id parameters
etc/quiz-app/src/main.js	Registers translation assets and bootstraps Vue instance

Translation and Localization Pattern

The translations directory structure enables multilingual support. Each language folder contains identically-named JSON files (e.g., lesson-1.json) following the same schema. The main.js entry point configures Vue I18n to load the appropriate translation asset based on user locale, with English (en) as the fallback.

Summary

• Top level: Array with single object containing title, complete, error, and quizzes array
• Quiz level: Each quiz has id, title, and quiz array of questions
• Question level: Required questionText string and answerOptions array
• Answer level: Required answerText and boolean isCorrect flag
• Validation: Quiz.vue evaluates isCorrect directly for instant feedback

Frequently Asked Questions

What happens if I omit the isCorrect field in an answer option?

The Quiz.vue component will evaluate option.isCorrect as undefined, which is falsy. This causes the answer to always register as incorrect, breaking the quiz logic. Every answerOptions element must explicitly set isCorrect to true or false.

Can a question have multiple correct answers?

Yes. The JSON schema supports multiple answerOptions with isCorrect: true. However, the standard Quiz.vue implementation evaluates each click independently without enforcing "select all that apply" behavior. Custom validation logic would be required for multi-select scoring.

Where should new quiz files be placed to follow repository conventions?

Add new JSON files to etc/quiz-app/src/assets/translations/en/ following the lesson-{N}.json naming pattern. For additional languages, create parallel directories (e.g., es/, fr/) with identical filenames. The router in index.js dynamically loads these based on lesson routing parameters.

How does the quiz system handle scoring and progress tracking?

The current implementation in Quiz.vue provides immediate per-question feedback through the checkAnswer method but does not persist aggregate scores across sessions. Progress tracking would require extending the component's state management or integrating with a backend service beyond the static JSON delivery mechanism.

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