How to Configure the Vue.js Quiz Application in AI For Beginners

The Vue.js quiz application in microsoft/AI-For-Beginners is configured by installing dependencies in etc/quiz-app, modifying internationalization settings in src/App.vue, adding translation JSON files to src/assets/translations/, and adjusting route definitions in src/router/index.js before building with npm run build.

The microsoft/AI-For-Beginners repository includes an interactive quiz application built with Vue 2.x to help learners test their knowledge of AI concepts. Located under the etc/quiz-app directory, this single-page application supports multiple languages and dynamic routing. Learning how to configure the Vue.js quiz application in AI For Beginners enables educators to customize quiz content, add new language packs, and deploy the app to production environments.

Architecture Overview

The quiz application follows a three-layer architecture that separates concerns between bootstrapping, navigation, and user interface logic.

The entry point at etc/quiz-app/src/main.js initializes the Vue instance and registers the Vue Router and Vue I18n plugins. The routing layer in src/router/index.js maps URLs to components, handling the home page (/), individual quizzes (/quiz/:id), and 404 catch-all routes. The UI and internationalization layer consists of src/App.vue, which provides the navigation bar and locale selector, and src/components/Quiz.vue, which renders the actual quiz questions based on the selected language and lesson ID.

Step-by-Step Configuration Guide

Install Dependencies

Begin by navigating to the quiz application directory and installing the required packages. The package.json file defines the Vue 2.x ecosystem dependencies including vue, vue-router, and vue-i18n.

cd etc/quiz-app
npm install

This command installs all necessary dependencies and prepares the development environment.

Configure the Default Locale

The application defaults to English (en) through the Vue I18n plugin initialized in src/main.js. The locale can be changed dynamically via the dropdown in the navigation bar or by appending ?loc=<code> to the URL (for example, ?loc=es for Spanish).

In src/App.vue, the data.locale property controls the current language setting. When a user selects a different language, the component updates the root i18n instance via this.$root.$i18n.locale, triggering a reactive update across all translated components.

// etc/quiz-app/src/main.js – Vue bootstrap with i18n
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
const i18n = new VueI18n({ locale: 'en', fallbackLocale: 'en' });

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

<!-- src/App.vue – locale selector -->
<select v-model="locale">
  <option>en</option>
  <option>es</option>
  <!-- add more <option> tags for new languages -->
</select>

Add New Language Packs

Translation files reside in src/assets/translations/<lang>/, where each language folder contains one JSON file per lesson (for example, lesson-1.json, lesson-2.json). To add support for a new language:

1. Create a new directory under src/assets/translations/ using the language code (such as fr for French or de for German).
2. Add lesson JSON files following the existing naming convention.
3. Update src/assets/translations/index.js to import the new language files.
4. Extend the <select> element in src/App.vue with a new <option> tag for the language.

// Adding a new language (e.g., French) – src/assets/translations/fr/index.js
import lesson1 from './lesson-1.json';
import lesson2 from './lesson-2.json';
export default { lesson1, lesson2 };

The Quiz.vue component dynamically loads the appropriate lesson data by combining the current locale with the route parameter id.

// Example of loading a lesson in Quiz.vue (simplified)
export default {
  data() {
    return { questions: [] };
  },
  created() {
    const id = this.$route.params.id;
    const locale = this.$i18n.locale;
    this.questions = messages[locale][`lesson-${id}`];
  }
};

Configure Routes

The router configuration in src/router/index.js uses HTML5 history mode (mode: 'history') and reads process.env.BASE_URL to determine the base deployment path. The route definitions map specific paths to Vue components:

• / renders the Home component
• /quiz/:id renders the Quiz component, passing the lesson ID as a route parameter
• /:pathMatch(.*)* catches all undefined routes and renders a NotFound component

// src/router/index.js – route definitions
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 }
  ]
});

Build for Production

When configuration is complete, compile the application for production using the npm build script. This generates optimized static assets in the dist/ directory.

npm run build

For Azure Static Web Apps deployment, the repository includes a GitHub Actions workflow that automates the build process and deploys the contents of the dist/ folder. No API keys or server-side configuration are required for the client-side application.

Summary

• The quiz application resides in etc/quiz-app and uses Vue 2.x with Vue Router and Vue I18n.
• Install dependencies with npm install inside the etc/quiz-app directory.
• Configure default locales and language switching in src/App.vue through the data.locale property.
• Add new translations by creating JSON files in src/assets/translations/<lang>/ and updating the index file and locale selector.
• Modify routing behavior in src/router/index.js, which uses HTML5 history mode and environment-based base URLs.
• Build production assets with npm run build and deploy the dist/ folder to any static hosting service.

Frequently Asked Questions

Where is the quiz application located in the repository?

The quiz application is located in the etc/quiz-app directory of the microsoft/AI-For-Beginners repository. This directory contains the complete Vue 2.x single-page application including the src/ folder with components, the public/ folder with static assets, and configuration files like package.json and README.md.

How do I add a new language to the quiz?

To add a new language, create a folder under src/assets/translations/ using the appropriate language code (such as fr for French or de for German). Add lesson JSON files following the existing naming pattern (for example, lesson-1.json), then import these files in src/assets/translations/index.js. Finally, add the language code as a new <option> in the locale selector within src/App.vue.

What Vue version does the quiz application use?

The quiz application uses Vue 2.x, specifically utilizing the Options API and Vue Router with HTML5 history mode. The entry point in src/main.js initializes the Vue instance with the VueI18n plugin for internationalization support, and the codebase follows Vue 2 patterns for component structure and reactivity.

How does the quiz load different lessons?

The Quiz.vue component extracts the lesson ID from the route parameter :id via this.$route.params.id. It then retrieves the corresponding JSON data from the current locale's translation bundle stored in src/assets/translations/, matching the ID to the appropriate lesson file (such as lesson-1.json) to render the specific questions for that module.

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