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

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 that imports and re-exports all its lesson files:

// 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 imports each language module and exposes them through a unified messages object:

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:

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 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:

// 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 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 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, 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 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 file that re-exports your lesson JSON files, and import that module in 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.

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