# How to Customize Quiz Questions in the Vue 3 Quiz-App: A Complete Guide

> Learn to customize quiz questions in your Vue 3 quiz-app by editing JSON translation files. No Vue code changes needed for easy customization. Get started today!

- Repository: [Microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tags: how-to-guide
- Published: 2026-02-27

---

**To customize quiz questions in the Vue 3 quiz-app, edit the JSON translation files in `quiz-app/src/assets/translations/`—no Vue code changes required.**

The microsoft/Web-Dev-For-Beginners repository includes a Vue 3 quiz application that renders interactive questions for learners. If you need to customize quiz questions in the Vue 3 quiz-app—whether to add new topics, update existing content, or support additional languages—you only need to modify the underlying JSON data files.

## Where Quiz Data Is Stored

The quiz-app loads every quiz and its questions from a set of JSON translation files located in `quiz-app/src/assets/translations/`. At runtime, the [`QuizzesComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizzesComponent.vue) component selects the correct file based on the browser’s locale (`navigator.language`) and exposes the list of quizzes through the computed property `questions` mapped to `this.file.quizzes`【/cache/repos/github.com/microsoft/Web-Dev-For-Beginners/main/quiz-app/src/components/QuizzesComponent.vue#L24-L55】.

The default English data lives in [`en.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/en.json)【/cache/repos/github.com/microsoft/Web-Dev-For-Beginners/main/quiz-app/src/assets/translations/en.json#L1-L15】. Additional locale files (e.g., [`fr.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/fr.json), [`es.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/es.json)) follow the same schema and are automatically selected by the `getFileByLocale` helper (lines 26-40 in both components).

## The JSON Schema for Quiz Questions

Each quiz entry follows a strict schema. When you customize quiz questions in the Vue 3 quiz-app, you must preserve this structure:

```json
{
  "id": <number>,
  "title": "<human-readable title>",
  "quiz": [
    {
      "questionText": "<question string>",
      "answerOptions": [
        { "answerText": "<option>", "isCorrect": "true|false" },
        ...
      ]
    },
    ...
  ]
}

```

Key constraints:

- **ID uniqueness**: The `id` field must be unique across all quizzes; it drives the router parameter `/quiz/:id`.
- **String boolean**: The `isCorrect` field must be the string `"true"` or `"false"`, not a boolean primitive. The component compares against the string `"true"` in [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue)【/cache/repos/github.com/microsoft/Web-Dev-For-Beginners/main/quiz-app/src/components/QuizComponent.vue#L46-L53】.
- **Three-question limit**: By default, [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) restricts quizzes to exactly three questions via the hard-coded check `if (nextQuestion < 3)` in the `handleAnswerClick` method (lines 13-21).

## Step-by-Step Guide to Customizing Questions

### 1. Edit Existing Quiz Questions

To modify existing content, open [`quiz-app/src/assets/translations/en.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/assets/translations/en.json) (or your target locale) and locate the quiz by its `id`. Update the `questionText` or `answerOptions` arrays directly. Save the file and reload the development server (`npm run dev`); the changes appear immediately.

### 2. Add a New Custom Quiz

Append a new object to the `quizzes` array in your JSON file:

```json
// quiz-app/src/assets/translations/en.json
{
  "id": 99,
  "title": "Custom Quiz – Vue Basics",
  "quiz": [
    {
      "questionText": "What does the `v-bind` directive do?",
      "answerOptions": [
        { "answerText": "Binds a JavaScript expression to an HTML attribute", "isCorrect": "true" },
        { "answerText": "Creates a new Vue component", "isCorrect": "false" },
        { "answerText": "Runs a CSS animation", "isCorrect": "false" }
      ]
    },
    {
      "questionText": "Which lifecycle hook runs *after* the component is mounted?",
      "answerOptions": [
        { "answerText": "created", "isCorrect": "false" },
        { "answerText": "mounted", "isCorrect": "false" },
        { "answerText": "onMounted (Composition API)", "isCorrect": "true" }
      ]
    },
    {
      "questionText": "How can you pass a prop named `msg` from a parent to a child?",
      "answerOptions": [
        { "answerText": "`<Child :msg=\"'Hello'\"/>`", "isCorrect": "true" },
        { "answerText": "`<Child msg='Hello'/>` (without colon)", "isCorrect": "false" },
        { "answerText": "You cannot pass props in Vue 3", "isCorrect": "false" }
      ]
    }
  ]
}

```

Ensure the `id` is unique. The new quiz automatically appears on the home page and is accessible at `/quiz/99`.

### 3. Create Translations for Other Languages

To support additional locales, duplicate an existing JSON file and rename it to the target locale code (e.g., [`fr.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/fr.json) for French). Translate the `title`, `questionText`, and `answerText` values while preserving the `id` and `isCorrect` fields. Place the file in `quiz-app/src/assets/translations/`. The `getFileByLocale` helper in [`QuizzesComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizzesComponent.vue) (lines 26-40) automatically serves the correct file based on `navigator.language`.

### 4. Handle the Three-Question Limit (Optional)

By default, [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) enforces exactly three questions via `if (nextQuestion < 3)` in `handleAnswerClick` (lines 13-21). To support variable-length quizzes, modify the condition to use the quiz array length:

```javascript
// In quiz-app/src/components/QuizComponent.vue, handleAnswerClick method
// Replace: if (nextQuestion < 3)
if (nextQuestion < q.quiz.length) {
  this.currentQuestion = nextQuestion;
} else {
  this.complete = true;
}

```

This change allows the component to handle any number of questions defined in your JSON file.

## Key Files and Their Roles

| File | Role | Location |
|------|------|----------|
| [`QuizzesComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizzesComponent.vue) | Lists all available quizzes; determines locale via `getFileByLocale` and loads the translation JSON | [`quiz-app/src/components/QuizzesComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/components/QuizzesComponent.vue) |
| [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) | Renders a single quiz, iterates over `q.quiz[currentQuestion]`, handles answer selection and scoring | [`quiz-app/src/components/QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/components/QuizComponent.vue) |
| [`router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/router/index.js) | Defines the `/quiz/:id` route that maps to [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) | [`quiz-app/src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/router/index.js) |
| [`en.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/en.json) (and other locales) | Master data source containing the `quizzes` array; edit this to customize content | [`quiz-app/src/assets/translations/en.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/assets/translations/en.json) |

## Summary

- **Data-driven architecture**: The Vue 3 quiz-app loads all content from JSON translation files in `quiz-app/src/assets/translations/`, making it possible to customize quiz questions without modifying Vue components.
- **JSON schema**: Each quiz requires a unique numeric `id`, a `title`, and a `quiz` array containing objects with `questionText` and `answerOptions` (where `isCorrect` must be the string `"true"` or `"false"`).
- **Locale support**: The `getFileByLocale` helper automatically selects the appropriate JSON file based on `navigator.language`, enabling multi-language support through file duplication and translation.
- **Question limits**: By default, [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) enforces a three-question limit via `if (nextQuestion < 3)`; modify this to `q.quiz.length` to support variable-length quizzes.
- **Hot reloading**: Changes to JSON files are reflected immediately during development (`npm run dev`) and require no component code changes unless altering quiz logic.

## Frequently Asked Questions

### How do I add a new quiz without modifying Vue code?

Append a new quiz object to the `quizzes` array in [`quiz-app/src/assets/translations/en.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/quiz-app/src/assets/translations/en.json) (or your target locale file). Ensure the `id` is unique, provide a `title`, and populate the `quiz` array with at least one question object containing `questionText` and `answerOptions`. The [`QuizzesComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizzesComponent.vue) automatically detects the new entry and displays it on the home page.

### Why must `isCorrect` be a string instead of a boolean?

The [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) performs a strict equality check against the string `"true"` (e.g., `answer.isCorrect === "true"`). Using a boolean `true` or `false` would fail this strict equality check, causing scoring errors. Always use the string values `"true"` or `"false"` in your JSON files.

### Can I create quizzes with more than three questions?

Yes, but you must modify the hard-coded limit in [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue). The default `handleAnswerClick` method checks `if (nextQuestion < 3)` to enforce exactly three questions. Change this condition to `if (nextQuestion < q.quiz.length)` to support any number of questions defined in your JSON file. No other code changes are necessary.

### How does the app handle multiple languages?

The app uses a locale-detection helper called `getFileByLocale` (found in [`QuizzesComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizzesComponent.vue) lines 26-40) that matches `navigator.language` against available JSON files in `quiz-app/src/assets/translations/`. To add a new language, copy an existing translation file, rename it to the locale code (e.g., [`de.json`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/de.json) for German), translate the content, and place it in the translations folder. The app automatically serves the correct file based on the user's browser settings.