# How to Set Up and Run the Quiz Application for AI for Beginners

> Learn to set up and run the AI for Beginners quiz application. Follow simple steps to clone the repo, install dependencies, and launch the Vue 2 app on your local machine.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: getting-started
- Published: 2026-08-28

---

**You can set up and run the AI for Beginners quiz application by cloning the repository, navigating to `etc/quiz-app/`, running `npm install`, and starting the development server with `npm run serve` to access the Vue 2 application at `http://localhost:8080`.**

The quiz application is a lightweight, interactive learning tool bundled with Microsoft's **AI-For-Beginners** repository. Located in the `etc/quiz-app/` directory, this Vue 2 single-page application allows learners to test their knowledge across multiple lessons with support for English and Spanish locales. Setting it up requires only Node.js and npm to run the Vue CLI scaffold locally.

## Prerequisites and Project Structure

Before installing, ensure you have **Node.js** (version 12 or higher recommended) and **npm** installed. The application resides in a dedicated subdirectory separate from the main lesson content.

- **Repository root**: `microsoft/AI-For-Beginners`
- **Application path**: `etc/quiz-app/`
- **Framework**: Vue 2 with Vue CLI service
- **Key dependencies**: `vue-router` for SPA navigation, `vue-i18n` for multilingual support

The architecture consists of three integrated layers: the Vue CLI build system defined in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json), the routing layer in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js), and the UI component hierarchy anchored by [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) and [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue).

## Installation Steps

Navigate to the quiz application directory and install dependencies using the npm scripts defined in [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json).

```bash
cd etc/quiz-app
npm install

```

This command installs the Vue CLI service, webpack dev server, and all runtime dependencies including `vue-i18n` and `vue-router`. The process may take a few minutes depending on your network speed.

## Running the Development Server

Start the local development server with hot-module replacement enabled to automatically reload the browser when you modify source files.

```bash
npm run serve

```

Once the compilation completes, open your browser to `http://localhost:8080`. The terminal will display the exact local and network URLs if the port differs. The application supports live reloading, meaning changes to components in `src/components/` or translation files trigger immediate updates without manual refresh.

## Accessing Specific Quizzes

The router in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) implements history mode and maps dynamic routes to individual quiz files.

- **Home page**: `http://localhost:8080/`
- **Specific quiz**: `http://localhost:8080/quiz/0` (replace `0` with the desired quiz ID)

To force a specific language locale, append the `loc` query parameter:

```

http://localhost:8080/quiz/0?loc=es

```

This overrides the default English (`en`) setting and loads Spanish translations from `src/assets/translations/es/`.

## Building for Production

When you are ready to deploy, generate optimized static assets to the `dist/` folder.

```bash
npm run build

```

This invokes the Vue CLI build command configured in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json), outputting minified JavaScript, CSS, and HTML files suitable for hosting on Azure Static Web Apps or any static file server. To ensure code quality before building, run the linter:

```bash
npm run lint

```

This command auto-fixes ESLint errors in the Vue single-file components according to the project's style rules.

## Architecture Overview

Understanding the codebase structure helps when customizing quiz content or adding new language support.

### Vue CLI Scaffold

The build pipeline is orchestrated by [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json), which defines scripts for `serve`, `build`, and `lint`. The Vue CLI service abstracts webpack configuration, providing a standardized development environment with hot reloading and production bundling. The entry point [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) bootstraps the Vue instance, registers the `vue-i18n` plugin, and mounts the application to the DOM.

### Routing Layer

[`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) configures a Vue Router instance using **history mode**, enabling clean URLs without hash fragments. The route table includes:

- A root path (`/`) rendering the home view
- Dynamic segments (`/quiz/:id`) that pass quiz identifiers as route parameters
- A wildcard catch-all route redirecting unknown paths to a `NotFound` component

This configuration ensures deep linking to specific lessons works correctly.

### UI Components and Internationalization

**[`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue)** serves as the root layout component, rendering the navigation bar and a language selector bound to `$root.$i18n.locale`. When users select a different language from the dropdown, the two-way binding immediately updates the active locale across all child components.

**[`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue)** handles the core quiz logic. It loads localized JSON data from `src/assets/translations/` based on the current route parameter and locale. This component manages question navigation, answer validation, and displays completion or error states depending on user interaction. Translation files follow a strict naming convention where each lesson has a corresponding JSON file in both the `en/` and `es/` subdirectories.

## Summary

- Navigate to `etc/quiz-app/` and run `npm install` to prepare the environment.
- Use `npm run serve` to start the development server at `localhost:8080` with hot reloading.
- Access specific quizzes via `/quiz/:id` routes and append `?loc=es` to switch languages.
- Execute `npm run build` to generate production assets in the `dist/` folder.
- The application architecture relies on Vue CLI for tooling, [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) for SPA routing, and `vue-i18n` for managing English and Spanish content in `src/assets/translations/`.

## Frequently Asked Questions

### What are the system requirements to run the AI for Beginners quiz application?

You need Node.js version 12 or higher and npm installed on your machine. The application is a client-side Vue 2 app that runs entirely in the browser, so no backend server or database is required. All quiz data is served as static JSON files from the `src/assets/translations/` directory.

### How do I run a specific quiz by ID?

Navigate to `http://localhost:8080/quiz/0` where the number represents the specific quiz identifier. The dynamic route defined in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) captures this ID and passes it to the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component, which then loads the corresponding JSON file from the translations folder. Replace `0` with any valid quiz number available in the repository.

### Can I add additional languages beyond English and Spanish?

Yes, the `vue-i18n` implementation in [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) supports adding new locales. Create a new subdirectory under `src/assets/translations/` (for example, `fr/` for French), add translated JSON files matching the English structure, and update the language selector in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to include the new locale code. The application will automatically load the appropriate files when users select the new language.

### How do I deploy the quiz application to production?

First run `npm run build` to generate the static files in the `dist/` folder. You can then deploy these files to any static hosting service. The repository includes specific guidance in [`etc/quiz-app/README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/README.md) for deploying to **Azure Static Web Apps**, which provides automated builds and global CDN distribution directly from your GitHub repository.