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

> Learn to configure the Vue.js quiz application in AI For Beginners. Follow simple steps to install dependencies, modify settings, add translations, and build your app.

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

---

**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`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue), adding translation JSON files to `src/assets/translations/`, and adjusting route definitions in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue), which provides the navigation bar and locale selector, and [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) file defines the Vue 2.x ecosystem dependencies including `vue`, `vue-router`, and `vue-i18n`.

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

```javascript
// 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');

```

```html
<!-- 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json), [`lesson-2.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) to import the new language files.
4. Extend the `<select>` element in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) with a new `<option>` tag for the language.

```javascript
// 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component dynamically loads the appropriate lesson data by combining the current locale with the route parameter `id`.

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

```javascript
// 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.

```bash
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) and [`README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json)), then import these files in [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js). Finally, add the language code as a new `<option>` in the locale selector within [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json)) to render the specific questions for that module.