# How to Customize the Vue.js Quiz Application with New Questions in Microsoft's AI For Beginners

> Easily customize the Vue.js quiz app from Microsofts AI For Beginners by adding new questions. Modify JSON files in the translations directory, no Vue code needed. Get started now.

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

---

**Add or edit quiz questions by modifying JSON files in the `etc/quiz-app/src/assets/translations/` directory—no Vue code changes required.**

The Microsoft AI For Beginners repository includes a Vue.js 2 quiz application located in `etc/quiz-app`. This application powers interactive assessments for each lesson and is designed for straightforward content customization. By understanding how the **translation module** feeds data to the **Quiz component**, you can add new questions, create entire lessons, or support additional languages without touching the underlying Vue logic.

## Where Quiz Data Lives

The quiz application separates content from presentation. All question data resides in the translation layer, not in the component itself.

### The Translation Module ([`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js))

This file aggregates locale-specific quiz collections into a single `messages` object. It imports JSON files from language subdirectories and exports them for Vue I18n consumption.

```javascript
import englishQuizzes from './en';
import spanishQuizzes from './es';
// Additional locales imported here

const messages = {
  en: englishQuizzes,
  es: spanishQuizzes
};

export default messages;

```

### Lesson JSON Files (`src/assets/translations/{locale}/lesson-*.json`)

Each lesson file contains a `quizzes` array. Every quiz object follows this structure:

- `id` — unique identifier for routing
- `title` — displayed quiz heading
- `quiz` — array of question objects (maximum 3 questions typical)
- `complete` — success message shown upon completion
- `error` — feedback message for incorrect answers

Each question object contains:
- `questionText` — the question string
- `answerOptions` — array of objects with `answerText` and `isCorrect` boolean

## Adding New Questions to an Existing Lesson

To customize the Vue.js quiz application with new questions, locate the target lesson file and extend its `quizzes` array.

### Step 1: Open the Lesson JSON File

Navigate to [`etc/quiz-app/src/assets/translations/en/lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/assets/translations/en/lesson-1.json) (or your target locale and lesson number).

### Step 2: Add a New Quiz Object

```json
{
  "quizzes": [
    {
      "id": "lesson-1-quiz-1",
      "title": "Introduction to AI",
      "quiz": [
        {
          "questionText": "What does AI stand for?",
          "answerOptions": [
            { "answerText": "Artificial Intelligence", "isCorrect": true },
            { "answerText": "Automated Interface", "isCorrect": false },
            { "answerText": "Advanced Integration", "isCorrect": false }
          ]
        },
        {
          "questionText": "Which field is NOT commonly associated with AI?",
          "answerOptions": [
            { "answerText": "Machine Learning", "isCorrect": false },
            { "answerText": "Blockchain Consensus", "isCorrect": true },
            { "answerText": "Natural Language Processing", "isCorrect": false }
          ]
        }
      ],
      "complete": "Well done! You completed this quiz.",
      "error": "Oops, try again."
    }
  ]
}

```

### Step 3: Verify Dynamic Loading

The `Quiz` component ([`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue)) automatically reads the updated data on the next page load. In its `created` or mounted lifecycle, it accesses:

```javascript
// From Quiz.vue - internal implementation
const locale = this.$root.$i18n.locale || this.$route.query.locale;
this.questions = this.messages[locale];

```

No rebuild or code modification is necessary for content changes.

## Creating a New Lesson File

To fully customize the Vue.js quiz application with new questions for an unsupported topic, create a new lesson JSON file.

### Step 1: Create the Lesson File

Create [`etc/quiz-app/src/assets/translations/en/lesson-12.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/assets/translations/en/lesson-12.json) (or any unused lesson number):

```json
{
  "quizzes": [
    {
      "id": "lesson-12-quiz-1",
      "title": "AI Ethics Fundamentals",
      "quiz": [
        {
          "questionText": "What is algorithmic bias?",
          "answerOptions": [
            { "answerText": "Systematic and repeatable errors in a system", "isCorrect": true },
            { "answerText": "Random noise in training data", "isCorrect": false },
            { "answerText": "Fast computation of algorithms", "isCorrect": false }
          ]
        }
      ],
      "complete": "Excellent! You've mastered AI ethics basics.",
      "error": "That's not quite right. Review the material and try again."
    }
  ]
}

```

### Step 2: Register in the Translation Index

Update [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) to import and expose the new lesson:

```javascript
import englishQuizzes from './en';
import englishLesson12 from './en/lesson-12.json';

// Merge with existing lessons
const messages = {
  en: {
    ...englishQuizzes,
    ...englishLesson12
  }
};

```

## Adding Support for a New Language

The quiz application supports multiple locales through the same JSON structure.

### Step 1: Create Locale Directory and Files

```bash
mkdir -p etc/quiz-app/src/assets/translations/fr

```

Create [`etc/quiz-app/src/assets/translations/fr/lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/assets/translations/fr/lesson-1.json):

```json
{
  "quizzes": [
    {
      "id": "lesson-1-quiz-1",
      "title": "Introduction à l'IA",
      "quiz": [
        {
          "questionText": "Que signifie IA ?",
          "answerOptions": [
            { "answerText": "Intelligence Artificielle", "isCorrect": true },
            { "answerText": "Interface Automatisée", "isCorrect": false },
            { "answerText": "Intégration Avancée", "isCorrect": false }
          ]
        }
      ],
      "complete": "Félicitations ! Vous avez terminé ce quiz.",
      "error": "Réessayez."
    }
  ]
}

```

### Step 2: Register the Locale

Update [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js):

```javascript
import frenchQuizzes from './fr';

const messages = {
  en: englishQuizzes,
  es: spanishQuizzes,
  fr: frenchQuizzes
};

```

Users can now access French quizzes via `?locale=fr` or default locale configuration.

## Optional UI Customizations

While customizing the Vue.js quiz application with new questions requires no code changes, you may want to modify the presentation layer.

### Display Question Progress

The [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component tracks `currentQuestion` in its data. Add a progress indicator:

```html
<!-- In src/components/Quiz.vue, within the template -->
<div class="progress-bar">
  <span>Question {{ currentQuestion + 1 }} of {{ quiz.quiz.length }}</span>
  <div class="progress-fill" :style="{ width: (currentQuestion + 1) / quiz.quiz.length * 100 + '%' }"></div>
</div>

```

### Modify Answer Validation Behavior

The `handleAnswerClick` method controls quiz flow:

```javascript
// From src/components/Quiz.vue
handleAnswerClick(answerOption) {
  if (answerOption.isCorrect) {
    this.currentQuestion++;
    if (this.currentQuestion >= this.quiz.quiz.length) {
      this.completed = true;
    }
  } else {
    this.showError = true;
    setTimeout(() => this.showError = false, 2000);
  }
}

```

Adjust timing, error display, or scoring logic here if your use case demands different behavior.

## Key Files Reference

| File | Purpose |
|------|---------|
| [`etc/quiz-app/src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/components/Quiz.vue) | Core component rendering questions and handling interactions |
| [`etc/quiz-app/src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/assets/translations/index.js) | Locale aggregation and export hub |
| `etc/quiz-app/src/assets/translations/{locale}/lesson-*.json` | Actual quiz content per language and lesson |
| [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) | Route definitions including quiz `id` parameter |
| [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) | Vue 2 dependencies and build scripts |

## Summary

- **Quiz content is data-driven**: All questions live in JSON files under `src/assets/translations/`, not in Vue components
- **Adding questions requires editing JSON only**: Extend existing lesson files or create new ones following the established schema
- **The [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component auto-discovers changes**: It reads from `this.$root.$i18n.locale` and renders the corresponding `quizzes` array
- **New languages need two steps**: Create locale directory with JSON files, then register in [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js)
- **UI modifications are optional**: The component works without code changes, but [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) is available for customization when needed

## Frequently Asked Questions

### Do I need to rebuild the Vue application after adding new quiz questions?

No. The quiz application reads JSON files at runtime. Save your changes to the lesson file and refresh the browser—the new questions appear immediately. Only modifications to [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) (adding new locales) or Vue component files require a rebuild.

### What is the maximum number of questions per quiz?

The JSON structure imposes no hard limit, but the Microsoft AI For Beginners repository typically uses 3 questions per quiz for pedagogical consistency. You can extend the `quiz` array with as many question objects as needed; the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component's `handleAnswerClick` method iterates until completion regardless of array length.

### How does the quiz application handle missing translations?

If `this.$root.$i18n.locale` references a key absent from the `messages` object, Vue I18n falls back to the default locale. The [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component does not implement explicit error handling for missing quiz data—ensure all referenced locales are registered in [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) to prevent empty quiz renders.

### Can I use images or markdown in question text?

The current implementation in [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) renders `questionText` and `answerText` as plain strings without additional processing. To support rich content, you would need to modify the component to use `v-html` (with sanitization) or integrate a markdown parser—neither is present in the base implementation.