How the Vue.js Quiz Application Integrates with the AI for Beginners Curriculum

The Vue.js quiz application integrates with the AI for Beginners curriculum through lesson-level URL linking, dynamic Vue Router paths, and locale-aware JSON data files that render self-contained assessments without backend dependencies.

The microsoft/AI-For-Beginners repository ships a standalone Vue.js quiz application located in etc/quiz-app/ that delivers interactive assessments across 50 lessons. This integration bridges theoretical AI concepts with practical knowledge checks by connecting Markdown lesson content directly to a multilingual, client-side quiz interface. The Vue.js quiz application integrates with the AI for Beginners curriculum via static deployment and dynamic routing, allowing learners to launch quizzes directly from lesson pages without server-side processing.

Lesson-Level Linking from Markdown Content

Each lesson in the curriculum contains standardized Markdown notes that hyperlink to the quiz application. These links pass lesson identifiers and locale parameters through the URL, creating a seamless transition from reading material to assessment.

In lessons/0-course-setup/setup.md, the curriculum references the quiz app with a specific URL pattern that includes the lesson identifier and language code:

> **A note about quizzes**: All quizzes are contained [in this app](https://red-field-0a6ddfd03.1.azurestaticapps.net/), for 50 total quizzes of three questions each.  
> They are linked from within the lessons, e.g.:

[Start Lesson 1 Quiz](https://red-field-0a6ddfd03.1.azurestaticapps.net/quiz/lesson-1?loc=en)

This linking strategy ensures that learners access the exact quiz segment corresponding to their current lesson, with the ?loc=en query parameter enforcing language consistency between the lesson content and quiz interface.

Dynamic Route Configuration

The Vue Router configuration in etc/quiz-app/src/router/index.js handles incoming lesson links through parameterized routing. The router maps URL patterns to components using history mode for clean URLs compatible with static hosting.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Quiz from '@/components/Quiz.vue';
import NotFound from '@/views/NotFound.vue';
Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/quiz/:id', name: 'Quiz', component: Quiz },
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
  ]
});

The /quiz/:id route captures the lesson identifier from the URL (e.g., lesson-1) and passes it as a route parameter to the Quiz component. This dynamic routing enables a single component instance to serve all 50 lesson quizzes based on the URL segment.

Locale-Aware Content Delivery

The Quiz component in etc/quiz-app/src/components/Quiz.vue implements internationalization by detecting the current locale from the Vue i18n root instance and loading corresponding translation files. Quiz data resides in etc/quiz-app/src/assets/translations/<locale>/lesson-<n>.json files.

export default {
  name: 'Quiz',
  data() {
    return {
      currentQuestion: 0,
      complete: false,
      error: false,
      route: '',
      locale: '',
    };
  },
  computed: {
    questions() { return messages; },
    currLocale() { return this.$root.$i18n.locale; }
  },
  created() {
    this.route = this.$route.params.id;               // e.g., "lesson-1"
    this.locale = this.$route.query.loc || 'en';      // fallback to English
  },
  methods: {
    handleAnswerClick(isCorrect) {
      this.error = false;
      if (isCorrect) {
        if (this.currentQuestion < 2) this.currentQuestion++;
        else this.complete = true;
      } else this.error = true;
    }
  }
};

The component extracts the lesson ID via this.$route.params.id and the locale via this.$route.query.loc, then selects the appropriate JSON translation file. This architecture supports multilingual delivery without duplicating application logic.

Self-Contained Deployment Model

The quiz application operates as a fully client-side Single Page Application (SPA) requiring no backend API. All question data, validation logic, and state management execute within the browser, enabling deployment to static hosting services like Azure Static Web Apps.

• No server dependencies: The application processes all quiz logic, scoring, and progression within the Vue component layer
• Static file serving: Translation JSON files and build assets deploy as static content
• Local development: Developers can run the quiz locally using npm run serve without configuring databases or API endpoints

This self-contained architecture ensures the Vue.js quiz application integrates with the AI for Beginners curriculum as a portable, zero-maintenance assessment tool that scales globally through CDN distribution.

Summary

• The curriculum links to quizzes using parameterized URLs (/quiz/lesson-1?loc=en) embedded in lesson Markdown files like lessons/0-course-setup/setup.md
• Vue Router in etc/quiz-app/src/router/index.js maps /quiz/:id paths to the Quiz component, extracting lesson identifiers from URL parameters
• The Quiz component dynamically loads locale-specific JSON files from etc/quiz-app/src/assets/translations/ based on the loc query parameter and $root.$i18n.locale
• The application runs entirely client-side with no backend requirements, supporting deployment to Azure Static Web Apps or local development via npm run serve
• Each quiz contains three questions, with 50 total quizzes covering the complete AI curriculum

Frequently Asked Questions

Where is the Vue.js quiz application located in the repository?

The quiz application resides in the etc/quiz-app/ directory at the root of the microsoft/AI-For-Beginners repository. This folder contains the complete Vue.js source code, including components, router configuration, translation assets, and build tooling.

How does the quiz application handle multiple languages?

The application uses Vue i18n for internationalization. The Quiz component reads the locale from this.$root.$i18n.locale and the loc URL query parameter, then loads corresponding JSON files from etc/quiz-app/src/assets/translations/<locale>/lesson-<n>.json. This allows the same quiz interface to present questions in any supported language without code changes.

What URL pattern connects lessons to specific quizzes?

Lessons link to quizzes using the pattern /quiz/:id?loc=<locale>, where :id represents the lesson identifier (e.g., lesson-1) and loc specifies the language code. The Vue Router captures the ID via $route.params.id to load the appropriate quiz data.

Is a backend server required to run the quiz application?

No backend server is required. The quiz application functions as a static Single Page Application where all question data resides in JSON files, and all validation logic executes client-side within the Vue component. This enables deployment to static hosting platforms like Azure Static Web Apps or local execution via npm run serve.

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