How to Run the Vue.js Quiz Application Locally for Assessment

Clone the microsoft/AI-For-Beginners repository, navigate to the etc/quiz-app directory, run npm install followed by npm run serve, and open http://localhost:8080 to launch the development server with hot-reload enabled.

The quiz application bundled with Microsoft's AI For Beginners curriculum is a Vue 2.x single-page application designed to deliver pre- and post-lecture assessments. Running this application locally allows educators and contributors to preview quiz content, validate localization files, and test functionality before deployment. This guide covers the complete setup process using the official source code from the GitHub repository.

Prerequisites

Before starting, ensure you have Node.js (version 12.x or higher recommended) and npm installed on your system. The project uses the Vue CLI service (@vue/cli-service) to manage the build pipeline, which requires a functional Node environment.

Local Setup Instructions

1. Clone the Repository and Navigate to the Quiz App

First, clone the AI-For-Beginners 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 quiz application resides in the etc/quiz-app/ subdirectory of the main repository.

2. Install Dependencies

Execute npm install to read the package.json file and download all required dependencies, including Vue ^2.6.11, vue-router, vue-i18n, and the Vue CLI service:

npm install

This command installs the exact runtime and development dependencies specified in the lock file, ensuring compatibility with the project's webpack configuration.

3. Start the Development Server

Run the following command to compile the application and start the Vue CLI development server:

npm run serve

By default, this serves the application on http://localhost:8080 with hot-module replacement enabled. Any changes you make to source files will automatically trigger a browser refresh.

4. Build for Production (Optional)

To generate optimized static files for deployment, execute:

npm run build

This command bundles the application using webpack and outputs the production-ready files to the dist/ directory, containing minified HTML, CSS, and JavaScript assets suitable for hosting on Azure Static Web Apps or similar platforms.

Application Architecture Overview

Understanding the key files in the etc/quiz-app/src/ directory helps when customizing quizzes or debugging localization issues.

Entry Point and Vue Configuration

The file src/main.js bootstraps the Vue 2.x instance, installs the vue-router and vue-i18n plugins, and mounts the application to the DOM element with id="app" defined in public/index.html. This serves as the primary initialization sequence for the single-page application.

Routing Configuration

The src/router/index.js file configures Vue-Router with declarative routes mapping URLs to components:

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

This setup maintains SPA-friendly navigation without page refreshes.

Quiz Component and Localization System

The src/components/Quiz.vue file implements the core quiz logic, handling question rendering, answer validation, and progress tracking. It dynamically loads localized content from JSON files stored in src/assets/translations/<language>/lesson-<n>.json. The src/assets/translations/index.js aggregates these files for consumption by the vue-i18n plugin, enabling multilingual support for the assessment materials.

Available NPM Scripts

The package.json defines three primary scripts for development workflow:

• npm run serve – Compiles and hot-reloads for development at localhost:8080
• npm run build – Compiles and minifies for production to the dist/ folder
• npm run lint – Executes ESLint with the Vue essential preset, automatically fixing trivial style issues

Accessing Specific Lesson Quizzes

Once the development server is running, navigate to http://localhost:8080/#/ to view the home screen. Select your desired lesson from the UI to render the Quiz.vue component with the appropriate translation JSON loaded. The language selector in App.vue allows you to switch between available localizations to verify translations across different languages.

Summary

• Location: The quiz application is located in etc/quiz-app/ within the microsoft/AI-For-Beginners repository.
• Installation: Run npm install to install Vue 2.x, Vue Router, Vue i18n, and build tools.
• Development: Execute npm run serve to start the local server on localhost:8080 with hot-reload.
• Architecture: Entry point is src/main.js, routing is handled in src/router/index.js, and quiz data resides in src/assets/translations/.
• Production: Use npm run build to generate static files in dist/ for deployment.

Frequently Asked Questions

What port does the development server use by default?

The Vue CLI development server runs on port 8080 by default when you execute npm run serve. You can access the application immediately at http://localhost:8080 without additional configuration.

Which Vue.js version does the quiz application use?

According to the package.json in etc/quiz-app/, the application targets Vue 2.6.11 (specified as ^2.6.11 in dependencies). This is a Vue 2.x single-page application utilizing the Options API and Vue Router 3.x.

Where are the quiz questions and answers stored?

Quiz content is stored as JSON files in src/assets/translations/<language>/lesson-<n>.json. The Quiz.vue component imports these files dynamically based on the selected lesson and current language settings managed by vue-i18n.

Can I run the quiz application in production mode locally?

Yes. Running npm run build generates production-optimized static files in the dist/ directory. You can serve these files locally using any static file server (such as npx serve dist or Python's http.server) to test the production build behavior before deployment.

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