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

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 and src/components/Quiz.vue, and extending routing logic in 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, 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 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 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, 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 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 with a structure mirroring the existing English and Spanish modules:

// 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:

// 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 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 to modify the navigation bar appearance:

/* 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:

<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:

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:

// 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 to include a new data property and bind it to the router view:

<!-- 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:

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

<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.
• Visual customization happens within scoped style blocks in src/App.vue and individual components like the navigation bar.
• Routing changes require updates to 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 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, 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 file that exports an array of quiz objects following the same structure as en/index.js. Import this module into src/assets/translations/index.js, add it to the messages object, and update the locale selector in 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. 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), then import and register it in 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.

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