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

> Learn to customize quiz questions and add new ones in ML-For-Beginners by editing JSON translation files. Enhance your learning experience without altering core code.

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

---

**You customize quiz questions and add new ones by editing the JSON translation files in `quiz-app/src/assets/translations/` (such as [`en.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/en.json)

```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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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

```json
{
  "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`](https://github.com/microsoft/ML-For-Beginners/blob/main/es.json) for Spanish).
2. Copy the structure from [`en.json`](https://github.com/microsoft/ML-For-Beginners/blob/main/en.json) and translate all `title`, `questionText`, and `answerText` values.
3. Open [`quiz-app/src/assets/translations/index.js`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/index.js)

```javascript
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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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`](https://github.com/microsoft/ML-For-Beginners/blob/main/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.