How to Set Up the Vue.js Quiz Application for Local Development

To set up the Vue.js quiz application for local development, clone the microsoft/AI-For-Beginners repository, navigate to etc/quiz-app, install dependencies with npm install, and launch the dev server using npm run serve.

The quiz application is a Vue 2.x single-page app located in the etc/quiz-app directory of the microsoft/AI-For-Beginners curriculum. It delivers pre- and post-lecture quizzes using Vue Router for navigation and Vue I18n for multilingual support. To customize quiz content or modify the UI, you must first set up the Vue.js quiz application for local development on your machine.

Step-by-Step Local Development Setup

Clone the Repository and Navigate to the Quiz App

First, clone the repository and change into the quiz application directory:

git clone https://github.com/microsoft/AI-For-Beginners.git
cd AI-For-Beginners/etc/quiz-app

The etc/quiz-app folder contains the complete Vue project scaffolding, including package.json and the src/ directory.

Install Dependencies

Run npm install to install the runtime and development dependencies defined in package.json:

npm install

This command installs Vue 2.6.11, vue-router, vue-i18n, and the Vue CLI service (@vue/cli-service) along with ESLint and Babel configurations. The package.json defines three primary scripts: serve for development, build for production, and lint for code quality.

Start the Development Server

Launch the hot-reload development server with:

npm run serve

By default, the Vue CLI dev server starts at http://localhost:8080. This command compiles the application and watches for file changes, automatically reloading the browser when you modify components.

Application Architecture Overview

Understanding the key files helps troubleshoot issues during local development.

Entry Point and Vue Instance Configuration

In src/main.js, the application creates a Vue instance, installs the router and internationalization plugins, and mounts to the DOM element <div id="app"> defined in public/index.html:

// src/main.js - Bootstrapping logic
new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

This file initializes the app's core dependencies before rendering the root App.vue component.

Routing and Layout

The src/router/index.js file configures Vue Router with declarative routes:

• / maps to Home.vue
• * (catch-all) maps to NotFound.vue

The src/App.vue component provides the root layout, including a language selector driven by vue-i18n and a <router-view> placeholder where page components render based on the current route.

Quiz Logic and Localization

The src/components/Quiz.vue file implements the core quiz functionality, including question rendering, answer validation, and progress tracking. It pulls localized content from JSON files stored in src/assets/translations/<lang>/lesson-<n>.json. The src/assets/translations/index.js aggregates these files for consumption by vue-i18n, enabling the app to switch languages dynamically without reloading.

Production Build Process

When ready to deploy, generate optimized static files using:

npm run build

This command invokes the Vue CLI webpack configuration to bundle the application into the dist/ directory, producing minified HTML, CSS, and JavaScript assets ready for hosting on platforms like Azure Static Web Apps.

Summary

• Clone the microsoft/AI-For-Beginners repository and navigate to etc/quiz-app.
• Install dependencies via npm install to fetch Vue 2.x, Vue Router, and Vue I18n.
• Develop locally using npm run serve, which starts a hot-reload server at localhost:8080.
• Modify quiz content in src/assets/translations/ or UI logic in src/components/Quiz.vue.
• Build for production with npm run build, outputting static files to dist/.

Frequently Asked Questions

What Node.js version is required to run the quiz application?

The application uses Vue CLI 4.x and requires Node.js version 10.x or higher. The package.json specifies dependencies compatible with Vue 2.6.11, which runs on most modern Node LTS versions.

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

Create a new folder under src/assets/translations/ using the language code (e.g., es for Spanish), then add lesson-1.json files following the existing structure. Update src/assets/translations/index.js to import and register the new locale with vue-i18n.

Can I run the quiz app without cloning the entire AI-For-Beginners repository?

While the quiz app is self-contained within etc/quiz-app, it relies on relative paths and the repository structure for asset resolution. You must clone the full repository to ensure all dependencies and build configurations resolve correctly.

How do I debug the Quiz.vue component in isolation?

Start the dev server with npm run serve, then navigate to http://localhost:8080/#/ to load the Home route. Select a lesson from the UI to render the Quiz.vue component with live data. You can use Vue DevTools browser extension to inspect the component state and props in real-time.

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