How to Configure the Vue.js Quiz App for Local Development

To configure the Vue.js quiz app for local development, clone the microsoft/AI-For-Beginners repository, navigate to the etc/quiz-app/ directory, run npm install to install Vue 2.x dependencies, and execute npm run serve to start the development server at http://localhost:8080 with hot-reload enabled.

The quiz application serves as the interactive assessment layer for Microsoft's AI For Beginners curriculum, delivering pre- and post-lecture quizzes through a lightweight Vue 2.x single-page application. Located in the etc/quiz-app/ directory of the repository, this project leverages Vue Router for client-side navigation and Vue i18n for multi-language support. This guide walks through the exact steps to configure the Vue.js quiz app for local development, including dependency management, architecture overview, and production build preparation.

Step-by-Step Local Development Setup

Clone the Repository and Navigate

Begin by cloning the repository and changing into 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 the complete Vue.js project scaffolding, including package.json, the src/ source directory, and the public/ assets folder.

Install Dependencies

Execute the following command to install all required packages as defined in package.json:

npm install

This installs Vue 2.6.11 along with Vue Router, Vue i18n, and the @vue/cli-service development server. The package.json file defines three primary scripts—serve, build, and lint—that manage the development lifecycle using webpack and ESLint.

Launch the Development Server

Start the local development environment with hot-reload:

npm run serve

This command invokes the Vue CLI service, which processes src/main.js to bootstrap the application. The entry script creates the Vue instance, installs the router and i18n plugins, and mounts the app to the <div id="app"> element in public/index.html. The dev server runs at http://localhost:8080 by default, automatically reloading the browser when you modify source files.

Core Application Architecture

Understanding the project structure is essential for modifying quiz content or debugging localization issues.

Entry Point and Bootstrapping

The file src/main.js serves as the application entry point. It imports Vue, Vue Router, and Vue i18n, then creates the root Vue instance with the router and i18n configurations passed as options. Finally, it mounts the application to the DOM element with id app, making the entire component tree reactive.

Routing Configuration

The src/router/index.js file configures Vue-Router with declarative SPA routes: the root path / renders Home.vue, while the catch-all wildcard * renders NotFound.vue for undefined URLs. This setup enables navigation between lessons without page refreshes.

Localization and Quiz Data

Localized quiz content resides in src/assets/translations/<language>/lesson-<n>.json files, where each JSON contains the questions, options, and correct answers for a specific lesson. The src/assets/translations/index.js file aggregates these JSON files into a format consumable by vue-i18n during initialization.

The src/components/Quiz.vue component implements the core quiz logic, dynamically loading the appropriate translation file based on the current route and selected language. It handles question rendering, answer validation, and progress tracking. The root component src/App.vue provides the global layout, including a language selector that updates the vue-i18n locale and a <router-view> placeholder where routed components render.

Production Build Process

When preparing the application for deployment, generate optimized static assets:

npm run build

This command bundles the application with webpack, outputting minified HTML, CSS, and JavaScript files to the dist/ directory. These files are ready for deployment on static hosting platforms such as Azure Static Web Apps.

To check code quality and auto-fix trivial style issues before committing, run:

npm run lint

This executes ESLint with the Vue-essential preset as configured in the project settings.

Summary

• The quiz application is located in etc/quiz-app/ and requires Vue 2.x, Vue Router, and Vue i18n.
• Run npm install to install dependencies specified in package.json, including Vue ^2.6.11.
• Execute npm run serve to start the dev server at localhost:8080, bootstrapping from src/main.js.
• Quiz content is stored as JSON files in src/assets/translations/ and rendered by src/components/Quiz.vue.
• Use npm run build to create production-ready static files in the dist/ folder.

Frequently Asked Questions

What Node.js version is required to run the quiz app?

The Vue 2.x ecosystem used in this project typically requires Node.js 10.x or higher, though modern LTS versions (14.x and above) are recommended. The package.json does not explicitly pin a Node version in the provided source analysis, but the Vue CLI tooling requires a compatible Node environment to execute the serve and build scripts.

How do I modify quiz questions or add new lessons?

Edit the JSON files located in src/assets/translations/<lang>/lesson-<n>.json to update question text, answer options, or correct indices. Each lesson corresponds to a numbered JSON file. Save your changes and refresh the browser; the development server will hot-reload and display the updated content in the Quiz.vue component without requiring a restart.

Can I change the default development server port from 8080?

Yes. You can specify an alternative port using the --port flag. For example, run npm run serve -- --port 3000 to start the server on port 3000. This configuration only affects the local development environment and does not impact the production build output in dist/.

How does the application handle multiple languages?

The src/assets/translations/index.js file aggregates all language-specific JSON files and registers them with vue-i18n during initialization in src/main.js. The App.vue component includes a language selector that updates $i18n.locale, causing Quiz.vue to dynamically load the corresponding translation files without reloading the page. To add support for a new language, create a folder under src/assets/translations/ using the ISO language code and populate it with translated lesson JSON files.

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