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

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 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【/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, 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:

{
  "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【/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 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 (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:

// 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 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 (lines 26-40) automatically serves the correct file based on navigator.language.

4. Handle the Three-Question Limit (Optional)

By default, 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:

// 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	Lists all available quizzes; determines locale via getFileByLocale and loads the translation JSON	quiz-app/src/components/QuizzesComponent.vue
QuizComponent.vue	Renders a single quiz, iterates over q.quiz[currentQuestion], handles answer selection and scoring	quiz-app/src/components/QuizComponent.vue
router/index.js	Defines the /quiz/:id route that maps to QuizComponent.vue	quiz-app/src/router/index.js
en.json (and other locales)	Master data source containing the quizzes array; edit this to customize content	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 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 (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 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 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. 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 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 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.

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