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

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)

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.

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 (or your target locale and lesson number).

Step 2: Add a New Quiz Object

{
  "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) automatically reads the updated data on the next page load. In its created or mounted lifecycle, it accesses:

// 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 (or any unused lesson number):

{
  "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 to import and expose the new lesson:

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

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

Create etc/quiz-app/src/assets/translations/fr/lesson-1.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:

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 component tracks currentQuestion in its data. Add a progress indicator:

<!-- 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:

// 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	Core component rendering questions and handling interactions
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	Route definitions including quiz id parameter
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 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
• UI modifications are optional: The component works without code changes, but 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 (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 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 component does not implement explicit error handling for missing quiz data—ensure all referenced locales are registered in 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 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.

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