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

> Easily run the Vue.js quiz application locally for assessment. Follow simple steps to clone the repo, install dependencies, and launch the development server at http://localhost:8080.

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

---

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

```bash
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) file and download all required dependencies, including Vue `^2.6.11`, `vue-router`, `vue-i18n`, and the Vue CLI service:

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

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

```bash
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/public/index.html). This serves as the primary initialization sequence for the single-page application.

### Routing Configuration

The [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) file configures Vue-Router with declarative routes mapping URLs to components:
- `/` routes to [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue)
- `*` (catch-all) routes to [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue)

This setup maintains SPA-friendly navigation without page refreshes.

### Quiz Component and Localization System

The [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component with the appropriate translation JSON loaded. The language selector in [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js), routing is handled in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.