Architecture of the Vue.js Quiz Application in AI for Beginners

The Vue.js quiz application in Microsoft's AI for Beginners repository is a single-page Vue 2.x application using Vue Router for navigation and Vue-I18n for multilingual support, with a component-driven architecture where all quiz content is stored in JSON translation files.

The quiz application serves as an interactive learning tool within the Microsoft AI-For-Beginners educational repository. Built with Vue 2.x, it demonstrates a clean separation of concerns between presentation logic and content management. Understanding the architecture of the Vue.js quiz application in AI for Beginners reveals how lightweight educational tools can leverage JSON-driven content and Vue's reactivity system to deliver multilingual quiz experiences without backend dependencies.

High-Level Application Structure

The application follows a classic Vue single-page application (SPA) pattern with three core architectural layers: the root instance, routing layer, and view components.

Root Instance and Entry Point

src/main.js bootstraps the entire application. It creates the Vue instance, installs the Vue Router and Vue-I18n plugins, and mounts the application to the DOM element with id app. This file serves as the composition root, wiring together all external dependencies before the App component takes over rendering.

Top-Level Layout Component

src/App.vue provides the shell layout for the entire application. It contains a navigation bar with a locale selector dropdown, a dynamic title derived from translation files, and the <router-view> outlet where page components render. The locale selector uses a v-model binding to a locale data property, which syncs to the root i18n instance via this.$root.$i18n.locale.

Routing Layer

src/router/index.js defines the navigation structure using Vue Router. It configures three routes:

1. The home path (/) rendering Home.vue
2. A dynamic quiz path (/quiz/:id) rendering the Quiz component
3. A catch-all wildcard (*) rendering NotFound.vue for 404 handling

Component Hierarchy and Data Flow

The architecture implements a unidirectional data flow where JSON translation files serve as the single source of truth for all quiz content.

Home View and Quiz Listing

src/views/Home.vue acts as the landing page. It accesses the translation messages through the i18n instance and iterates over questions[currLocale] to generate a list of available quizzes. Each quiz renders as a <router-link> element navigating to the specific quiz ID:

<!-- Home.vue creates router links -->
<router-link :to="`quiz/${quiz.id}`">{{ quiz.title }}</router-link>

Quiz Component Logic

src/components/Quiz.vue handles the interactive quiz experience. It extracts the quiz identifier from $route.params.id, retrieves the corresponding question data from the translation JSON, and manages the quiz state. The component tracks currentQuestion index, complete status, and error states through Vue's reactive data system.

The handleAnswerClick method implements the core quiz logic:

handleAnswerClick(isCorrect) {
  this.error = false
  const next = this.currentQuestion + 1
  if (isCorrect) {
    if (next < 3) this.currentQuestion = next
    else this.complete = true
  } else {
    this.error = true
  }
}

Error Handling

src/views/NotFound.vue provides a simple 404 page for unmatched routes, ensuring graceful degradation when users access invalid quiz IDs or non-existent paths.

Internationalization Architecture

The application implements a data-first architecture where all UI content, including quiz questions and answers, lives outside the component code.

Translation File Structure

Content resides in src/assets/translations/ as JSON files organized by lesson and language. The src/assets/translations/index.js file aggregates these messages and exposes them to Vue-I18n. Each language pack contains quiz titles, questions, answer options, and completion messages.

Runtime Locale Switching

The locale selector in App.vue binds to a local locale data property. When changed, the component updates this.$root.$i18n.locale, triggering reactive updates across all components. This architecture allows switching between English (en) and Spanish (es) without page reloads:

<select v-model="locale">
  <option>en</option>
  <option>es</option>
</select>

Static Assets and Build Configuration

The public/ directory contains index.html, which provides the mounting point for the Vue application, and routes.json, which mirrors the router configuration for compatibility with static-site generators.

Summary

• The application uses Vue 2.x with Vue Router and Vue-I18n plugins for a single-page architecture
• Component-driven design separates layout (App.vue), views (Home.vue, NotFound.vue), and interactive components (Quiz.vue)
• JSON translation files in src/assets/translations/ serve as the single source of truth for all quiz content and questions
• Dynamic routing via /quiz/:id enables direct linking to specific lessons while the catch-all route handles 404s
• Reactive locale switching updates the entire UI without page reloads by modifying this.$root.$i18n.locale

Frequently Asked Questions

What version of Vue does the AI for Beginners quiz application use?

The application is built as a Vue 2.x single-page application according to the source code in src/main.js. It utilizes the Vue Router for client-side navigation and Vue-I18n for internationalization support, following the Vue 2 Options API patterns evident in the component structure.

Where is the quiz content stored in the repository?

All quiz content resides in JSON translation files located under src/assets/translations/. These files contain lesson-specific questions, answer options, and titles for each supported language. The Quiz.vue component dynamically loads this content based on the route parameter id and current locale, making the application entirely data-driven.

How does the application handle navigation between different quizzes?

Vue Router manages navigation through the configuration in src/router/index.js. The Home.vue view generates <router-link> elements that navigate to /quiz/:id routes. The Quiz.vue component then extracts the id from $route.params.id to display the appropriate quiz content from the translation data.

Can the quiz application support additional languages beyond English and Spanish?

Yes, the architecture supports adding new languages by extending the JSON files in src/assets/translations/ with new language keys and updating the locale selector in src/App.vue to include the new language options. Vue-I18n automatically makes the new translations available throughout the application via the reactive locale system.

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