# How to Run the AI‑For‑Beginners Quiz Application Locally: A Complete Setup Guide

> Learn how to run the AI-For-Beginners quiz application locally. Follow this guide to clone the repo, install Node.js, and start the dev server for a seamless setup.

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

---

**To run the quiz application locally, clone the repository, install Node.js 14+, run `npm install` in `etc/quiz-app/`, then start the dev server with `npm run serve` and open `http://localhost:8080`.**

The `microsoft/AI-For-Beginners` repository includes an interactive **quiz application** built as a Vue 2 single‑page app. Located under `etc/quiz-app`, this application delivers pre‑ and post‑lecture quizzes to reinforce concepts from the AI curriculum. This guide walks through the exact steps to run the quiz application locally based on the official source code implementation.

## Prerequisites for Running the Quiz Application

Before starting, ensure your environment meets the following requirements:

- **Node.js 14 or higher** – The Vue CLI service and build tools require a modern Node runtime.
- **npm** – Comes bundled with Node.js to manage dependencies.
- **Git** – To clone the repository.

Verify your Node version:

```bash
node --version

```

## Step‑by‑Step: How to Run the Quiz Application Locally

### 1. Clone the Repository and Navigate to the Quiz App

First, download the source code and enter the quiz application directory:

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

```

The `etc/quiz-app/` folder contains all application source files, configuration, and dependencies as defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json).

### 2. Install Dependencies

Run npm to install all required packages:

```bash
npm install

```

This command reads [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) and pulls in:

- `vue@^2.6.11` – Core Vue framework
- `vue-router@^3.4.9` – Client‑side routing
- `vue-i18n@^8.28.2` – Internationalization support
- `core-js` – Polyfills for modern JavaScript features
- `@vue/cli-service` – Development server and build toolchain

### 3. Start the Development Server

Launch the local development environment:

```bash
npm run serve

```

This executes `vue-cli-service serve`, which:

- Compiles Vue single‑file components
- Watches files for hot‑reload during development
- Serves the application at `http://localhost:8080` (default port)

### 4. Open the Application in Your Browser

Navigate to `http://localhost:8080` to view the quiz home page.

To access a specific lesson directly, use the route pattern defined in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js):

```

http://localhost:8080/#/lesson/5

```

The Vue Router maps this URL to the `Quiz` component, loading the corresponding quiz data from `src/assets/translations/`.

## Understanding the Application Architecture

Knowing the file structure helps when customizing or debugging the quiz application.

### Core Application Files

| File | Purpose |
|------|---------|
| [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) | Bootstraps the Vue instance, registers `vue-router` and `vue-i18n` plugins, mounts to DOM element `#app` |
| [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) | Root component providing global layout, navigation bar, and `<router-view>` outlet |
| [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) | Defines routes: Home (`/`), lesson quizzes (`/lesson/:id`), and 404 fallback |
| [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) | Main quiz UI: renders questions, handles answer selection, validates responses, displays results |
| `src/assets/translations/en/lesson-*.json` | JSON files containing quiz questions and answers for each curriculum lesson |

### Multilingual Quiz Content

The `vue-i18n` plugin loads translation files from `src/assets/translations/`. The development server automatically serves these JSON assets, enabling immediate testing of quiz content changes without rebuilding.

## Optional: Build for Production

To generate a static bundle for deployment:

```bash
npm run build

```

This creates optimized files in `dist/` suitable for hosting on any static file server.

## Troubleshooting Common Issues

| Problem | Solution |
|---------|----------|
| Port 8080 already in use | Specify an alternative port: `npm run serve -- --port 3000` |
| `npm install` fails with permission errors | Use a Node version manager (nvm) or run with proper user permissions; avoid `sudo npm` |
| Quiz content not appearing | Verify JSON files exist in `src/assets/translations/en/` and contain valid lesson data |
| Hot‑reload not working | Ensure your firewall allows WebSocket connections to the dev server |

## Summary

- **Clone and navigate** to `etc/quiz-app/` within the repository.
- **Install dependencies** with `npm install` to fetch Vue 2, Vue Router, Vue I18n, and build tools.
- **Start local development** via `npm run serve` and access at `http://localhost:8080`.
- **Route directly to lessons** using `/#/lesson/{id}` patterns handled by [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js).
- **Customize quiz content** by editing JSON files in `src/assets/translations/` with changes reflected immediately.
- **Build for production** using `npm run build` when ready to deploy.

## Frequently Asked Questions

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

Node.js 14 or higher is required. The Vue CLI service and modern JavaScript dependencies in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) rely on features available in Node 14+. Earlier versions may cause compatibility errors during `npm install` or when running the development server.

### Where are the quiz questions stored in the source code?

Quiz content resides in `src/assets/translations/en/lesson-*.json` files. Each JSON file corresponds to a curriculum lesson and contains question text, answer options, and correct answer indicators. The `vue-i18n` plugin loads these dynamically based on the current route.

### Can I run the quiz application without cloning the entire repository?

Yes, but you must still obtain the `etc/quiz-app/` directory contents. You can download just that folder via GitHub's sparse checkout feature or download the ZIP archive and extract only the quiz‑app subdirectory. However, cloning the full repository ensures you have all curriculum materials alongside the quizzes.

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

Create a new subdirectory under `src/assets/translations/` (e.g., `es/` for Spanish), copy the lesson JSON files, and translate the content. Then register the new locale in the Vue I18n configuration within [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js). The application will automatically serve the appropriate translations based on browser language detection or user selection.