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

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:

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:

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.

2. Install Dependencies

Run npm to install all required packages:

npm install

This command reads 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:

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:

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	Bootstraps the Vue instance, registers vue-router and vue-i18n plugins, mounts to DOM element #app
src/App.vue	Root component providing global layout, navigation bar, and <router-view> outlet
src/router/index.js	Defines routes: Home (/), lesson quizzes (/lesson/:id), and 404 fallback
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:

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.
• 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 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. The application will automatically serve the appropriate translations based on browser language detection or user selection.

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