How to Customize Quiz Questions and Add New Ones in ML-For-Beginners

You customize quiz questions and add new ones by editing the JSON translation files in quiz-app/src/assets/translations/ (such as en.json), where each quiz is defined as an object with a unique id, title, and array of questions, requiring no modifications to the Vue 3 core code.

The ML-For-Beginners repository includes a Vue 3 single-page quiz application that stores all question data in localization JSON files rather than a database. This architecture allows contributors to customize existing quizzes or add entirely new ones by simply editing translation files, with changes reflected immediately via hot-reload.

Understanding the Quiz Data Architecture

The quiz system relies on Vue-I18n to load quiz data from translation JSON files. The Quiz.vue component retrieves the current locale's quiz array via this.$t('quizzes') and filters for the object matching the route parameter id.

Key architectural files:

• quiz-app/src/assets/translations/en.json – Stores English quiz content as a JSON array under the quizzes key.
• quiz-app/src/assets/translations/index.js – Aggregates all locale files into a messages object exported to Vue-I18n.
• quiz-app/src/components/Quiz.vue – Renders quizzes by matching this.$route.params.id to the quiz object's id field.
• quiz-app/src/router/index.js – Defines the dynamic route /quiz/:id that handles all quiz permalinks.

How to Customize Existing Quiz Questions

To modify an existing question or answer option, edit the corresponding translation file directly.

1. Open quiz-app/src/assets/translations/en.json (or your target locale).
2. Locate the quizzes array and find the object with the matching id.
3. Edit the questionText, answerOptions, or title fields as needed.
4. Save the file. The Vue development server hot-reloads the changes immediately.

Example: Updating answer options in en.json

{
  "questionText": "What is the technical difference between classical ML and deep learning?",
  "answerOptions": [
    { "answerText": "classical ML was invented first", "isCorrect": "false" },
    { "answerText": "the use of neural networks", "isCorrect": "true" },
    { "answerText": "deep learning requires less data", "isCorrect": "false" }
  ]
}

How to Add New Quiz Questions

Adding a new quiz requires appending a new object to the quizzes array with a unique integer id.

1. Open quiz-app/src/assets/translations/en.json.
2. Scroll to the end of the quizzes array.
3. Add a comma after the last quiz object, then insert your new quiz object.
4. Ensure the id is unique (typically the next integer after the highest existing id).
5. Include a title and a quiz array containing question objects with questionText and answerOptions.

Example: Adding a new quiz with id 31

{
  "id": 31,
  "title": "Custom Quiz: Advanced Data Preprocessing",
  "quiz": [
    {
      "questionText": "Which technique handles missing numerical values?",
      "answerOptions": [
        { "answerText": "Mean imputation", "isCorrect": "true" },
        { "answerText": "One-hot encoding", "isCorrect": "false" },
        { "answerText": "Label encoding", "isCorrect": "false" }
      ]
    },
    {
      "questionText": "What is the purpose of feature scaling?",
      "answerOptions": [
        { "answerText": "To normalize feature ranges", "isCorrect": "true" },
        { "answerText": "To increase dataset size", "isCorrect": "false" },
        { "answerText": "To remove outliers", "isCorrect": "false" }
      ]
    }
  ]
}

After saving, the quiz becomes immediately available at /quiz/31.

Adding Support for New Languages

To localize quizzes for additional languages, create a new translation file and register it in the aggregation index.

1. Create a new file in quiz-app/src/assets/translations/ (e.g., es.json for Spanish).
2. Copy the structure from en.json and translate all title, questionText, and answerText values.
3. Open quiz-app/src/assets/translations/index.js.
4. Import the new JSON file and add it to the messages object.

Example: Registering Spanish locale in index.js

import es from './es.json';

const messages = {
  en: en[0],
  fr: fr[0],
  es: es[0]  // Added Spanish support
};

The app will now serve the Spanish quiz data when the locale is switched to es.

Summary

• Quiz data lives in JSON translation files (en.json, etc.) inside quiz-app/src/assets/translations/, not in a database or Vue components.
• The id field connects the URL route /quiz/:id to the specific quiz object; ensure uniqueness when adding new quizzes.
• Modify existing questions by editing questionText and answerOptions directly in the JSON array.
• Add new quizzes by appending objects to the quizzes array with unique IDs, titles, and question lists.
• Localize content by creating new locale files and registering them in index.js without touching routing or display logic.

Frequently Asked Questions

How do I find the correct ID for a new quiz?

Check the highest existing id value in quiz-app/src/assets/translations/en.json (or your target locale file) and use the next integer. The router automatically handles any numeric ID passed to /quiz/:id, so uniqueness is the only requirement.

Can I add images or rich media to quiz questions?

The current JSON schema in en.json only supports text fields (questionText, answerText). To add images or HTML content, you would need to modify quiz-app/src/components/Quiz.vue to render additional fields or process markdown/HTML in the question text.

Do I need to rebuild the app after editing quiz JSON files?

No. If running the development server (npm run dev or npm run serve), Vue's hot-reload will detect changes to the JSON files in src/assets/translations/ and refresh the quiz content immediately. For production builds, you must redeploy the updated files.

Why does my new quiz return a blank page?

This typically happens when the id in your URL does not match any id in the current locale's quizzes array, or when the JSON syntax is invalid (missing comma, unmatched brackets). Verify the route parameter matches the integer id in the JSON file and validate the JSON structure using a linter.

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