How to Set Up the Vue.js Quiz Application Locally: Complete Setup Guide

Clone the repository, run npm install and npm run serve to start the Vue.js quiz application on localhost:8080.

The Vue.js quiz application in Microsoft's AI-For-Beginners repository delivers interactive pre- and post-lecture quizzes for the curriculum. Setting up this Vue 2.x single-page application locally requires only a few steps, whether you want to contribute, customize quizzes, or test localization changes.

Prerequisites and Repository Structure

Before you begin, ensure you have Node.js (version compatible with Vue CLI 4.x) and npm installed. The quiz application lives in the etc/quiz-app/ directory, separate from the main lesson content.

Key architectural layers include:

• package.json – Defines build scripts (serve, build, lint) and pins Vue 2.6.11 with vue-router and vue-i18n
• src/main.js – Bootstraps the Vue instance, installs routing and internationalization plugins
• src/router/index.js – Configures SPA routes (/ → Home, * → 404)
• src/App.vue – Root component with language selector and <router-view>
• src/components/Quiz.vue – Core quiz logic with question rendering and progress tracking
• src/assets/translations/ – JSON files for localized quiz content per lesson

Step-by-Step Local Setup

Follow these commands to get the Vue.js quiz application running locally:

1. Clone and Navigate to the Project

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

2. Install Dependencies

npm install

This reads package.json and installs Vue 2.6.11, vue-router, vue-i18n, @vue/cli-service, and development tooling including ESLint and Babel. The exact versions are locked for reproducible builds.

3. Start the Development Server

npm run serve

The Vue CLI dev server launches at http://localhost:8080 with hot-reload enabled. Changes to any Vue component or translation file refresh instantly in the browser.

4. Access the Quiz Interface

Navigate to http://localhost:8080/#/ to load Home.vue. Select any lesson from the UI to render the Quiz.vue component, which dynamically loads the appropriate translation JSON from src/assets/translations/<lang>/lesson-<n>.json.

5. Build for Production (Optional)

npm run build

Webpack bundles the application into static files in dist/, ready for deployment to Azure Static Web Apps or any static hosting platform.

6. Lint and Fix Code Style

npm run lint

Executes ESLint with the Vue-essential preset, auto-fixing trivial formatting issues.

Customizing Quizzes and Localization

The Vue.js quiz application supports multiple languages through vue-i18n. To modify quiz content:

• Edit JSON files in src/assets/translations/<lang>/lesson-<n>.json
• Add new languages by creating translation folders and registering them in src/assets/translations/index.js
• Update src/App.vue to include new language options in the selector dropdown

The Quiz.vue component automatically re-renders when translation data changes, making localization testing straightforward during development.

Troubleshooting Common Issues

Issue	Solution
Port 8080 already in use	Run npm run serve -- --port 8081 to specify an alternative port
Dependencies fail to install	Delete node_modules/ and package-lock.json, then run npm install again
Translation files not loading	Verify JSON syntax in src/assets/translations/ and check browser console for 404 errors
Hot-reload not working	Ensure you're editing files within src/ and not the built dist/ folder

Summary

• Clone the Microsoft/AI-For-Beginners repository and enter etc/quiz-app/
• Install dependencies with npm install to get Vue 2, router, and i18n
• Develop using npm run serve for hot-reload at localhost:8080
• Build production assets with npm run build for deployment
• Customize quizzes by editing translation JSON files in src/assets/translations/

Frequently Asked Questions

What version of Vue does the quiz application use?

The quiz application uses Vue 2.6.11 as specified in package.json. This is pinned alongside vue-router for SPA navigation and vue-i18n for localization. The project uses @vue/cli-service 4.x for build tooling rather than Vite or Vue 3.

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

No—you need the full repository clone because the quiz application references lesson metadata and translation files from the broader AI-For-Beginners curriculum structure. However, you can perform a shallow clone with git clone --depth 1 to reduce download size if you only need the latest version.

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

Create a new folder under src/assets/translations/ with your language code (e.g., es/ for Spanish), add translated lesson-0.json through lesson-24.json files mirroring the existing structure, then import and register the locale in src/assets/translations/index.js. Finally, add the language option to the dropdown in src/App.vue.

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