Architecture of the Quiz Application in AI for Beginners: Vue 2 SPA Deep Dive

The quiz application in Microsoft's AI for Beginners is a Vue 2 single-page application using vue-router for navigation, vue-i18n for internationalization, and a three-layer component architecture to serve dynamic, localized quizzes.

The Microsoft AI-For-Beginners repository includes an interactive quiz application designed to test learners' understanding of artificial intelligence concepts. Built as a lightweight Vue 2 single-page application, this system demonstrates modern frontend architecture patterns while supporting multiple languages through JSON-based content management. Understanding the architecture of the quiz application in AI for Beginners reveals how open-source educational platforms balance simplicity with internationalization requirements.

Three-Layer Architecture Overview

The application organizes functionality into distinct architectural layers that separate concerns between routing, bootstrapping, and UI rendering. This structure enables straightforward extension of quiz content without modifying core application logic.

Routing and Navigation Layer

The routing layer maps URLs to specific views using vue-router defined in router/index.js. The router configuration creates three distinct routes: a home page at /, a dynamic quiz page at /quiz/:id, and a catch-all 404 page for unmatched paths.

// src/router/index.js (excerpt)
export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/quiz/:id', name: 'Quiz', component: Quiz },
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
  ]
});

The mode: 'history' setting enables clean URLs without hash fragments, while the dynamic :id parameter allows deep linking to specific quizzes.

Application Bootstrap Layer

The main.js file serves as the application entry point, instantiating the Vue instance and registering global plugins. This layer imports the root App.vue component, the router configuration, and the vue-i18n plugin to create a fully configured application instance.

// src/main.js (conceptual excerpt)
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import i18n from './i18n';

new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#app');

The bootstrap process registers VueI18n with a default locale of en before mounting the application to the DOM element with id app.

Component Hierarchy Layer

The presentation layer consists of Vue single-file components that handle UI rendering and user interaction. The hierarchy flows from the root App.vue through route-specific components like Quiz.vue and Home.vue.

Component Structure and Data Flow

Root Component and Localization

App.vue provides the application shell, including a navigation bar, locale selector, and the <router-view> placeholder for dynamic content. The component reads the loc query parameter (e.g., ?loc=es) during initialization to set the initial language, storing the selected locale in $root.$i18n.locale for global access.

<!-- src/App.vue (excerpt) -->
<nav>
  <router-link to="/">Home</router-link>
  <select v-model="locale">
    <option>en</option>
    <option>es</option>
  </select>
  <span class="title">{{ questions[locale][0].title }}</span>
</nav>

<router-view></router-view>

Quiz Component Logic

Quiz.vue renders when users navigate to /quiz/:id. This component manages the core quiz state through three reactive data properties: currentQuestion (tracking progress), complete (boolean indicating finish state), and error (boolean for incorrect answers). The component fetches quiz data from the i18n translation files, filtering by the current route's id parameter to display the appropriate content.

The handleAnswerClick method processes user interactions by validating answers and managing state transitions:

// src/components/Quiz.vue (excerpt)
methods: {
  handleAnswerClick(isCorrect) {
    this.error = false;
    if (isCorrect) {
      this.currentQuestion < 2
        ? this.currentQuestion++
        : (this.complete = true);
    } else {
      this.error = true;
    }
  }
}

The logic allows a maximum of three questions per quiz, advancing the index on correct answers and displaying error states for incorrect selections.

Internationalization and Content Management

Translation File Structure

All quiz content resides in src/assets/translations/, organized by language code (en, es, etc.). Each directory contains JSON files following the lesson-X.json naming convention, defining quiz titles, question text, and answer options.

The i18n plugin aggregates these files into a messages object imported by both App.vue and Quiz.vue. This architecture decouples content from application logic, allowing contributors to add new languages or lessons by creating additional JSON files without modifying JavaScript code.

Data Aggregation

The translation system leverages Vue I18n's message merging capabilities to provide localized content as JavaScript objects. Components access this data through the $t method or by directly referencing the messages object, enabling dynamic quiz generation based on the selected locale.

Key Implementation Files

Understanding the architecture of the quiz application in AI for Beginners requires familiarity with these specific source files:

• router/index.js – Defines the three primary routes and navigation guards
• main.js – Bootstraps the Vue instance with i18n and router dependencies
• App.vue – Root component providing navigation and locale selection
• Quiz.vue – Core quiz component handling question display and answer validation
• Home.vue – Static landing page for the application root
• NotFound.vue – Fallback view for 404 errors
• src/assets/translations/ – Directory containing localized JSON quiz definitions

Summary

• The quiz application uses a Vue 2 single-page application architecture with three distinct layers: routing, bootstrapping, and components.
• Internationalization is implemented via vue-i18n, with content stored in JSON files under src/assets/translations/ and managed through the root component's locale selector.
• Routing in router/index.js supports deep linking to specific quizzes via the /quiz/:id pattern, enabling direct access to lesson assessments.
• State management in Quiz.vue handles the question lifecycle through reactive properties (currentQuestion, complete, error) and the handleAnswerClick method.
• Extensibility is achieved through the translation file architecture, allowing new languages and quizzes to be added without modifying core application code.

Frequently Asked Questions

What technology stack does the AI for Beginners quiz application use?

The quiz application is built with Vue 2 as the frontend framework, utilizing vue-router for client-side navigation and vue-i18n for internationalization. The application uses standard JavaScript ES6+ syntax and organizes quiz content as static JSON assets, making it framework-agnostic regarding backend requirements since it runs entirely in the browser.

How does the quiz application handle multiple languages?

The application implements internationalization through the vue-i18n plugin configured in main.js. Content resides in src/assets/translations/ as language-specific JSON files. The App.vue component detects the loc query parameter to set the initial locale, storing the selection in $root.$i18n.locale. This value propagates to child components, which retrieve the appropriate translations from the aggregated messages object.

Where is the quiz data stored in the repository?

Quiz data is stored as JSON files in the src/assets/translations/ directory, organized by language code (e.g., en/, es/). Each lesson has a dedicated JSON file (e.g., lesson-01.json) containing the quiz title, questions, answer options, and correct answer indicators. This static file approach eliminates the need for a database and enables version control of quiz content.

How does the routing system work for individual quizzes?

The router defined in router/index.js uses a dynamic route pattern /quiz/:id to match quiz URLs. When a user navigates to a specific quiz, the :id parameter is passed to the Quiz.vue component as a route parameter. The component filters the available translation data by this ID to display the corresponding questions, enabling direct linking to any lesson assessment while maintaining a single component for all quiz variations.

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