# How Quiz Translations Are Managed Across 50+ Languages in AI-For-Beginners

> Discover how the AI-For-Beginners repo manages quiz translations for over 50 languages using static JSON files and an automated CI pipeline for seamless multilingual content.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: internals
- Published: 2026-08-06

---

**The quiz application manages multilingual content through static JSON files organized by language code, aggregated via a central registry module, and synchronized automatically via the co-op-translator CI pipeline.**

The microsoft/AI-For-Beginners repository serves educational content to a global audience by implementing a file-based translation system for its interactive quiz components. Rather than relying on runtime translation APIs, the application bundles all quiz translations as version-controlled static assets that load instantly and work offline. This architecture supports 50+ languages while maintaining consistency between lesson content across all locales.

## Static JSON File Structure

The translation files reside in `etc/quiz-app/src/assets/translations/`, following a hierarchical folder structure where each language maintains its own isolated directory. Every lesson receives a dedicated JSON file containing questions, answer options, and metadata specific to that language.

The directory layout follows this pattern:

```

etc/quiz-app/
└─ src/
   └─ assets/
      └─ translations/
         ├─ en/
         │   ├─ lesson-1.json
         │   ├─ lesson-2.json
         │   └─ ...
         ├─ es/
         │   ├─ lesson-1.json
         │   └─ ...
         └─ ...

```

Each `lesson-<n>.json` file stores the complete quiz data for that specific lesson in the target language, including question text, multiple-choice options, and the correct answer identifier.

## Centralized Language Registration

Two levels of JavaScript modules aggregate these JSON files into a consumable structure for the Vue application. First, each language folder contains an [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js) that imports and re-exports all its lesson files:

```js
// etc/quiz-app/src/assets/translations/en/index.js
import lesson1 from './lesson-1.json';
import lesson2 from './lesson-2.json';
import lesson3 from './lesson-3.json';

export default {
  lesson1,
  lesson2,
  lesson3,
  // ...
};

```

Second, the central registry at [`etc/quiz-app/src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/assets/translations/index.js) imports each language module and exposes them through a unified `messages` object:

```js
import englishQuizzes from './en';
import spanishQuizzes from './es';
// ... additional imports

const messages = {
  en: englishQuizzes,
  es: spanishQuizzes,
  // ... additional language codes
};

export default messages;

```

This registry pattern enables the application to access any translation via a predictable key structure: `messages[languageCode][lessonKey]`.

## Runtime Language Resolution

At runtime, Vue components import the centralized `messages` object and implement a fallback mechanism to ensure usability even when specific translations are missing. The application detects the user's locale, normalizes it to a two-letter language code, and retrieves the appropriate lesson data.

The following pattern demonstrates how the quiz loader resolves content with automatic fallback to English:

```js
import messages from '@/assets/translations';

function getQuizData(lang, lessonId) {
  const locale = messages[lang] ? lang : 'en';
  const lessonKey = `lesson${lessonId}`;
  return messages[locale][lessonKey];
}

// Usage example: Loading lesson 3 for the current UI language
const userLang = navigator.language.slice(0, 2); // e.g., "fr", "de"
const lessonData = messages[userLang]?.lesson3
                 ?? messages.en.lesson3;        // fallback to English

console.log(lessonData.question);
console.log(lessonData.options);

```

## Automated Translation Workflow

Adding a new language requires no changes to the application logic. The repository includes a **co-op-translator** configuration at [`translations/.co-op-translator.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/translations/.co-op-translator.json) that integrates with the CI pipeline. This tool automatically generates new language folders from the English source files, ensuring that every lesson stays synchronized across all supported languages.

When the pipeline runs, it creates the necessary folder structure, duplicates the JSON file organization, and populates the content with translated strings, ready for review and commit.

## Adding Support for New Languages

To extend quiz translations to an additional language, follow the modular import pattern established in the codebase. First, create a new language folder with the appropriate ISO code and lesson JSON files. Then register the language in the central index:

```js
// etc/quiz-app/src/assets/translations/index.js
import englishQuizzes from './en';
import spanishQuizzes from './es';
import portugueseQuizzes from './pt'; // New language

const messages = {
  en: englishQuizzes,
  es: spanishQuizzes,
  pt: portugueseQuizzes,   // ← new entry
};

export default messages;

```

Because the system uses static imports, the new language becomes available immediately after rebuilding the application bundle.

## Summary

- **Static file storage**: Each language maintains isolated JSON files under `etc/quiz-app/src/assets/translations/<lang>/`, with one file per lesson.
- **Centralized registry**: The [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js) modules aggregate language-specific content into a unified `messages` object accessible throughout the Vue application.
- **Automatic fallback**: The runtime resolver defaults to English when a requested language or specific lesson translation is unavailable.
- **CI automation**: The `co-op-translator` configuration in [`translations/.co-op-translator.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/translations/.co-op-translator.json) automates the generation of new language folders from English sources.
- **Zero-config additions**: New languages require only a folder with JSON files and a single import statement in the central registry.

## Frequently Asked Questions

### Where are the quiz translation files stored in the repository?

All quiz translations live under `etc/quiz-app/src/assets/translations/`. Each language code (such as `en`, `es`, or `fr`) has its own subdirectory containing JSON files named [`lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json), [`lesson-2.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-2.json), and so on. These files contain the complete question text, answer options, and correct answer identifiers for each lesson in that specific language.

### How does the quiz application handle missing translations for specific languages?

The application implements a runtime fallback mechanism in the Vue components. When loading quiz data, the code checks if the requested language exists in the `messages` object. If `messages[lang]` is undefined or the specific lesson key is missing, the application automatically falls back to `messages.en` (English) to ensure the quiz remains functional for all users regardless of translation completion status.

### What is the co-op-translator and how does it manage quiz translations?

The **co-op-translator** is a CI pipeline tool configured in [`translations/.co-op-translator.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/translations/.co-op-translator.json) that automates the creation and synchronization of translation files. When triggered, it reads the English source files from the `en/` directory and generates corresponding JSON files for all other supported languages, maintaining the same file structure and ensuring that new lessons or edits propagate across the entire 50+ language set without manual copying.

### Can I add a new language to the quiz application without modifying the Vue components?

Yes. The architecture supports adding new languages by only modifying the translation registry files. Create a new folder under `etc/quiz-app/src/assets/translations/` with the ISO language code, add the [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js) file that re-exports your lesson JSON files, and import that module in [`etc/quiz-app/src/assets/translations/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/assets/translations/index.js). No changes to the Vue component logic are required because the components reference the centralized `messages` object dynamically.