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

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, the routing layer in src/router/index.js, and the UI component hierarchy anchored by App.vue and Quiz.vue.

Installation Steps

Navigate to the quiz application directory and install dependencies using the npm scripts defined in etc/quiz-app/package.json.

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.

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 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.

npm run build

This invokes the Vue CLI build command configured in 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:

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, 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 bootstraps the Vue instance, registers the vue-i18n plugin, and mounts the application to the DOM.

Routing Layer

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 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 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 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 captures this ID and passes it to the 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 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 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 for deploying to Azure Static Web Apps, which provides automated builds and global CDN distribution directly from your GitHub repository.

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