How to Set Up the Vue.js Quiz Application: Complete Local Development Guide

Clone the repository, run npm install in etc/quiz-app/, then npm run serve to start the Vue 2 dev server at localhost:8080.

The AI For Beginners curriculum includes a Vue.js quiz application for pre- and post-lecture assessments. This lightweight Vue 2.x single-page application (SPA) delivers interactive quizzes while supporting multiple languages through vue-i18n. Learning how to set up the Vue.js quiz application locally enables you to contribute translations, modify quiz logic, or integrate the app into custom deployments.

Prerequisites and System Requirements

Before setting up the Vue.js quiz application, ensure you have:

• Node.js (version compatible with Vue CLI 4.x, typically 12.x or higher)
• npm or yarn package manager
• Git for cloning the repository

The project is explicitly pinned to Vue 2.6.11 as specified in etc/quiz-app/package.json, so you do not need Vue 3 compatibility.

Step-by-Step Setup Instructions

1. Clone the Repository and Navigate to the Quiz App

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

The quiz application resides in the etc/quiz-app/ subdirectory, separate from the main curriculum content.

2. Install Dependencies

npm install

This command reads package.json and installs:

• Runtime: vue@^2.6.11, vue-router, vue-i18n@^8.21.1
• Build tooling: @vue/cli-service, webpack, Babel
• Code quality: ESLint with Vue essential preset

The dependency tree is locked to maintain reproducible builds across environments.

3. Start the Development Server

npm run serve

The Vue CLI dev server launches at http://localhost:8080 with hot-reload enabled. Changes to .vue files in src/ automatically refresh the browser.

In package.json, this script maps to:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

4. Build for Production (Optional)

npm run build

This triggers webpack bundling and outputs static files to dist/:

• Minified JavaScript bundles with hash fingerprints
• Extracted CSS
• index.html with injected asset references

The dist/ folder is deployment-ready for platforms like Azure Static Web Apps or GitHub Pages.

5. Lint and Auto-Fix Code

npm run lint

ESLint runs with the Vue essential preset, automatically fixing trivial style violations where possible.

Application Architecture Overview

Understanding the file structure helps you navigate when you set up the Vue.js quiz application for development or customization:

Layer	Purpose	Key File Path
Bootstrapping	Vue instance creation with i18n and router	src/main.js
Routing	SPA navigation mapping	src/router/index.js
Layout	Root component with language selector	src/App.vue
Quiz Logic	Question rendering, validation, progress	src/components/Quiz.vue
Localization	Per-lesson quiz content in JSON	src/assets/translations/<lang>/lesson-<n>.json

Entry Point: src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './assets/translations'

Vue.config.productionTip = false

new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

This file initializes the Vue 2 instance, mounting to <div id="app"> in public/index.html.

Routing Configuration: src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '*', component: () => import('../views/NotFound.vue') }
]

export default new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

The router uses hash mode (#/ URLs) for compatibility with static hosting. Routes map / to Home.vue and catch-all * to NotFound.vue.

Quiz Component: src/components/Quiz.vue

This component implements the core quiz experience:

1. Loads localized question data from vue-i18n messages
2. Renders questions with radio button answers
3. Validates selections and tracks completion progress
4. Emits results for parent components to consume

Quiz content is not hardcoded—it resolves dynamically based on the selected language and lesson number.

Localization System

Translation files follow this structure:

src/assets/translations/
├── index.js          # i18n configuration

├── en/
│   ├── lesson-1.json
│   ├── lesson-2.json
│   └── ...
├── es/
├── pt-br/
└── ...

Each lesson-<n>.json contains an array of question objects with question, choices, answer, and explanation fields. Adding a new language requires:

1. Creating a language subfolder
2. Copying and translating lesson JSON files
3. Registering the locale in src/assets/translations/index.js

Verifying Your Setup

After running npm run serve, verify functionality by checking:

1. Homepage loads at http://localhost:8080/#/
2. Language selector in the header switches between available locales
3. Quiz renders when selecting any lesson—questions appear in the chosen language
4. Answer validation works—submitting answers shows correct/incorrect feedback

Troubleshooting Common Issues

Port 8080 already in use

npm run serve -- --port 8081

Or set PORT=8081 as an environment variable before the command.

Missing quiz content

Ensure translation files exist in src/assets/translations/ for your selected language. The app gracefully falls back but may show empty quizzes if JSON files are malformed.

Build failures

Delete node_modules/ and package-lock.json, then re-run npm install to resolve dependency conflicts.

Summary

• Navigate to etc/quiz-app/ within the cloned AI For Beginners repository
• Run npm install to install Vue 2.6.11 and supporting dependencies
• Execute npm run serve for local development with hot-reload at localhost:8080
• Use npm run build to generate production-ready static files in dist/
• Modify quiz content in src/assets/translations/ or logic in src/components/Quiz.vue

Frequently Asked Questions

What Vue version does the quiz application use?

The quiz application uses Vue 2.6.11 as specified in package.json. This is a deliberate choice for stability and compatibility with the existing vue-i18n@^8.x and vue-router@^3.x ecosystem used throughout the application.

Can I deploy the quiz app to static hosting?

Yes. Running npm run build generates a dist/ folder containing HTML, CSS, and JavaScript bundles. These static assets deploy to any static host including Azure Static Web Apps, GitHub Pages, Netlify, or Vercel without requiring a Node.js server runtime.

How do I add a new language to the quiz?

Create a new folder under src/assets/translations/ with your language code (e.g., de/ for German). Copy the JSON structure from an existing language, translate the content, then import and register the locale in src/assets/translations/index.js. The language selector in App.vue will automatically include your new option.

Where is the quiz answer data stored?

Answer data resides in src/assets/translations/<lang>/lesson-<n>.json files alongside the question text. Each JSON object includes an answer field indicating the correct choice index. This colocation simplifies content management but means answers are visible to determined users inspecting network requests or source files.

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