# How to Customize the Quiz Application Vue.js Frontend in Microsoft AI-For-Beginners

> Learn how to customize the Vue.js frontend for the quiz application in the Microsoft AI-For-Beginners repository. Easily modify translations, styles, and routing.

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

---

**The quiz front-end in the microsoft/AI-For-Beginners repository is a Vue 2 application located in `etc/quiz-app/` that you can customize by editing locale files in `src/assets/translations/`, styling components in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) and [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue), and extending routing logic in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js).**

The microsoft/AI-For-Beginners repository includes a lightweight quiz application built with Vue 2 to help learners test their knowledge of artificial intelligence concepts. Located in the `etc/quiz-app/` directory, this single-page application uses **vue-i18n** for internationalization and **Vue-Router** for client-side navigation. Its component-based architecture makes it straightforward to modify quiz behavior, appearance, and content to fit your specific teaching scenario or branding requirements.

## Understanding the Application Architecture

The quiz application follows a standard Vue 2 project structure with clear separation of concerns across five key areas.

### Root Instance and Main Entry Point

The application boots from [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js), which instantiates the Vue root instance and injects the router and i18n locale handling plugins. This file serves as the orchestration layer that wires together the application's core dependencies before mounting to the DOM.

### App Component and Layout

[`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) provides the shell layout, including the navigation bar, locale selector dropdown, and the `<router-view>` placeholder where individual pages render. This component manages the global `locale` data property and propagates it to all child components via `$root.$i18n.locale`.

### Quiz Component Logic

The [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) file contains the core quiz functionality, rendering questions, tracking progress through the `currentQuestion` index, and handling user interactions via the `handleAnswerClick` method. It accesses localized quiz data through the computed property `currLocale`, which pulls from the translation assets based on the active locale.

### Routing and Translations

Vue-Router runs in history mode (`mode: 'history'`) inside [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js), mapping URLs like `/quiz/:id` to the Quiz component using `this.$route.params.id`. The actual quiz content—questions, answer options, and success messages—resides in [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js) and its locale-specific submodules, which export plain JavaScript objects consumed by the `questions[currLocale]` iteration logic.

## Customizing Internationalization and Content

The application supports multiple languages through modular translation files. Each locale exports a JavaScript array containing quiz objects with nested question structures.

### Adding a New Locale

To add support for French, create [`src/assets/translations/fr/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/fr/index.js) with a structure mirroring the existing English and Spanish modules:

```javascript
// src/assets/translations/fr/index.js
export default [
  {
    title: "Quiz Français",
    quizzes: [
      {
        id: "french-quiz-1",
        title: "Première Question",
        quiz: [
          {
            questionText: "Quelle est la capitale de la France ?",
            answerOptions: [
              { answerText: "Paris", isCorrect: true },
              { answerText: "Lyon", isCorrect: false },
              { answerText: "Marseille", isCorrect: false },
            ],
          },
        ],
      },
    ],
    complete: "Bravo ! Vous avez terminé.",
    error: "Réponse incorrecte, essayez encore.",
  },
];

```

Then register the locale in the main translations index:

```javascript
// src/assets/translations/index.js
import englishQuizzes from './en';
import spanishQuizzes from './es';
import frenchQuizzes from './fr';

const messages = {
  en: englishQuizzes,
  es: spanishQuizzes,
  fr: frenchQuizzes,
};

export default messages;

```

Finally, add `<option value="fr">French</option>` to the locale selector in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to expose the new language in the UI.

## Modifying Styles and UI Components

All styling uses scoped CSS within single-file components, allowing you to change the look and feel without affecting other parts of the application.

### Updating the Navigation Bar

Edit the `<style>` block in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to modify the navigation bar appearance:

```css
/* Inside src/App.vue */
nav {
  background-color: #0d3b66;
  padding: 1.2em;
}

nav a {
  color: #faf0e6;
}

.title {
  font-size: 2rem;
}

```

These changes apply instantly across all routes since the navigation renders within the root App component.

## Extending Functionality and Routing

You can add new pages, modify quiz flow logic, or inject custom data properties to integrate with external systems.

### Adding a New Route

To create an About page, first add the component at [`src/views/About.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/views/About.vue):

```vue
<template>
  <div class="about">
    <h1>About the Quiz App</h1>
    <p>This educational app was built for the AI-For-Beginners curriculum.</p>
  </div>
</template>

<script>
export default { name: "About" };
</script>

<style scoped>
.about { 
  text-align: center; 
  margin-top: 2rem; 
}
</style>

```

Then register the route in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js):

```javascript
import About from '@/views/About.vue';

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

```

Navigating to `/about` now renders the new component within the application layout.

### Adjusting Quiz Length and Logic

The default quiz limits users to three questions, enforced by a hard-coded check (`nextQuestion < 3`) in the `handleAnswerClick` method. To make this configurable, replace the literal with a data property:

```javascript
// src/components/Quiz.vue
export default {
  data() {
    return {
      currentQuestion: 0,
      complete: false,
      error: false,
      route: "",
      locale: "",
      maxQuestions: 5,
    };
  },
  methods: {
    handleAnswerClick(isCorrect) {
      this.error = false;
      const nextQuestion = this.currentQuestion + 1;
      
      if (isCorrect) {
        if (nextQuestion < this.maxQuestions) {
          this.currentQuestion = nextQuestion;
        } else {
          this.complete = true;
        }
      } else {
        this.error = true;
      }
    },
  },
};

```

You can expose `maxQuestions` through the translation payload to vary quiz length by locale or quiz type.

### Injecting Custom Props

To pass data such as a username from the root component to the quiz, modify [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to include a new data property and bind it to the router view:

```vue
<!-- src/App.vue -->
<script>
export default {
  data() {
    return {
      locale: "",
      username: "Guest",
    };
  },
};
</script>

<template>
  <router-view v-slot="{ Component }">
    <component :is="Component" :username="username" />
  </router-view>
</template>

```

Then accept and render the prop in [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue):

```javascript
// src/components/Quiz.vue
export default {
  props: {
    username: {
      type: String,
      default: "Guest",
    },
  },
};

```

```vue
<template>
  <div class="card">
    <p>Welcome, {{ username }}!</p>
  </div>
</template>

```

This pattern supports dynamic integration with authentication systems or user profile APIs.

## Summary

- The quiz front-end resides in `etc/quiz-app/` and uses Vue 2 with vue-i18n and Vue-Router in history mode.
- You can add new languages by creating locale modules in `src/assets/translations/` and registering them in [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js).
- Visual customization happens within scoped style blocks in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) and individual components like the navigation bar.
- Routing changes require updates to [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) and new view components in `src/views/`.
- Quiz logic, including question limits and scoring, is controlled in [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) through the `handleAnswerClick` method and data properties like `maxQuestions`.
- Props can be passed from the root App component through the router to enable dynamic user experiences.

## 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 source code, including components, routing configuration in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js), and translation assets.

### How do I add a new language to the quiz?

Create a new folder under `src/assets/translations/` (e.g., `fr/` for French) containing an [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js) file that exports an array of quiz objects following the same structure as [`en/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/en/index.js). Import this module into [`src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/index.js), add it to the `messages` object, and update the locale selector in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to include the new language option.

### Can I change the number of questions per quiz?

Yes. By default, the quiz limits sessions to three questions via a hard-coded check in the `handleAnswerClick` method within [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue). You can replace this literal value with a configurable data property such as `maxQuestions`, or adjust the logic to read the limit from the translation payload to support variable-length quizzes per locale.

### How do I add a new page to the quiz application?

Create a new Vue single-file component in `src/views/` (e.g., [`About.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/About.vue)), then import and register it in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) by adding a new route object to the routes array. The application's Vue-Router configuration will automatically render your component within the `<router-view>` outlet defined in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue).