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

> Explore the Vue 2 SPA architecture of the AI for Beginners quiz app. Learn about its vue-router, vue-i18n, and three-layer component structure for dynamic, localized quizzes.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: architecture
- Published: 2026-08-28

---

**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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.

```javascript
// 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/main.js) file serves as the application entry point, instantiating the Vue instance and registering global plugins. This layer imports the root [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) component, the router configuration, and the `vue-i18n` plugin to create a fully configured application instance.

```javascript
// 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) through route-specific components like [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) and [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue).

## Component Structure and Data Flow

### Root Component and Localization

[`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.

```html
<!-- 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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:

```javascript
// 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) and [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/router/index.js)** – Defines the three primary routes and navigation guards
- **[`main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/main.js)** – Bootstraps the Vue instance with i18n and router dependencies
- **[`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue)** – Root component providing navigation and locale selection
- **[`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue)** – Core quiz component handling question display and answer validation
- **[`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue)** – Static landing page for the application root
- **[`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/main.js). Content resides in `src/assets/translations/` as language-specific JSON files. The [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.