Quiz App Translation Files Location in Microsoft AI For Beginners

The translation files for the quiz app are located at etc/quiz-app/src/assets/translations/ in the Microsoft AI For Beginners repository.

This Vue-based educational application uses a structured JSON-based internationalization system. Each supported language maintains its own subdirectory containing lesson-specific translation files that power the multilingual quiz interface for learners worldwide.

Translation File Directory Structure

The quiz app organizes all translation files under a single root directory. The path from repository root is:

etc/quiz-app/src/assets/translations/

Within this folder, the structure follows a language-first, lesson-second hierarchy:

Level	Path Example	Contents
Root	translations/	Language subdirectories
Language	translations/en/	All English lesson files
Lesson	translations/en/lesson-1.json	UI strings for specific lesson

As implemented in microsoft/AI-For-Beginners, supported languages include en (English), es (Spanish), fr (French), and others. Each language folder contains identical sets of lesson files (lesson-1.json through the full curriculum) to ensure complete coverage.

Translation File Format and Examples

Each translation file is a plain JSON object mapping UI identifiers to localized strings. The structure remains consistent across languages for easy maintenance.

The English translation for lesson 1 resides at:

etc/quiz-app/src/assets/translations/en/lesson-1.json

And the equivalent Spanish version at:

etc/quiz-app/src/assets/translations/es/lesson-1.json

Both files share the same key structure—only the string values differ. This enables the Vue-I18n integration to switch languages seamlessly without modifying component logic.

How the Quiz App Loads Translation Files

The application dynamically imports translation files at runtime using Webpack's require.context. This approach allows lazy-loading of only the requested language while supporting the full lesson catalog.

import { createI18n } from 'vue-i18n'

// Dynamically import JSON files for the selected language
function loadLocaleMessages (locale) {
  const messages = {}
  const context = require.context(
    '@/assets/translations',
    true,
    /\.json$/
  )
  context.keys().forEach(key => {
    if (key.startsWith(`./${locale}/`)) {
      const lesson = key.match(/lesson-(\d+)\.json$/)[1]
      messages[`lesson${lesson}`] = context(key)
    }
  })
  return messages
}

const i18n = createI18n({
  locale: 'en',            // default language
  fallbackLocale: 'en',
  messages: loadLocaleMessages('en')
})

export default i18n

The loadLocaleMessages function scans etc/quiz-app/src/assets/translations/, filtering by the requested locale prefix. It parses lesson numbers from filenames and nests each translation file under a lessonN namespace for component access.

Accessing Translations in Vue Components

Once loaded, strings from any translation file are accessible via the $t helper in templates:

<template>
  <div>
    <h2>{{ $t('lesson1.title') }}</h2>
    <p>{{ $t('lesson1.description') }}</p>
  </div>
</template>

The dot-notation path corresponds to the nested structure created during loading: lesson{N}.{key} where {key} matches the JSON property name in the original file.

Adding New Languages to the Quiz App

To extend the translation file collection for additional languages:

1. Create a new subdirectory under etc/quiz-app/src/assets/translations/ using the ISO 639-1 language code (e.g., de for German, ja for Japanese).
2. Copy all lesson-N.json files from an existing language folder into the new directory.
3. Translate all string values while preserving key names exactly.
4. Update the Vue-I18n configuration to include the new locale in available options.

No code changes are required to components—the existing dynamic loading logic automatically discovers new language folders at build time.

Summary

• Location: All quiz app translation files live in etc/quiz-app/src/assets/translations/
• Structure: Language subdirectories (en/, es/, fr/) contain lesson-specific JSON files
• Runtime: Vue-I18n loads these files dynamically via require.context in main.js
• Access: Components reference keys using $t('lesson{N}.{key}') notation
• Extension: New languages require only adding a matching folder with translated JSON files

Frequently Asked Questions

How do I find which languages are currently supported?

Browse the etc/quiz-app/src/assets/translations/ directory in the repository. Each subfolder name represents a supported language code. The default configuration in main.js or i18n.js also lists explicitly configured locales.

Can I modify a translation without rebuilding the application?

No—the JSON files are bundled at build time through Webpack's require.context. Any changes to translation files require recompiling the Vue application to regenerate the asset manifest.

What happens if a translation key is missing in a specific language?

Vue-I18n falls back to the fallbackLocale (configured as 'en' in the source). If the key exists in English but not in the selected language, users see the English text rather than an error or empty string.

Are the translation files used for content other than the quiz interface?

The translation files in this location specifically localize the Vue quiz application UI elements—buttons, labels, instructions, and feedback messages. Course content and lesson text remain in the main repository's markdown files under the lessons/ directory.

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