Internationalization (i18n) in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the i18n function from Remix.

Remix

import { [1] } from "remix";

Drag options to blanks, or click blank then click option'

Ai18n

Bjson

CuseTranslation

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated functions like 'json' or 'Link'.

Using 'useTranslation' which is from other libraries.

The i18n function is imported from Remix to handle internationalization.

2fill in blank

medium

Complete the code to get the user's locale from the request headers.

Remix

const locale = request.headers.get([1]);

Drag options to blanks, or click blank then click option'

A"Authorization"

B"Content-Type"

C"Accept-Language"

D"User-Agent"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Content-Type' which is about data format.

Using 'Authorization' which is for security tokens.

The Accept-Language header tells the server the user's preferred language.

3fill in blank

hard

Fix the error in the translation function call to get the correct message.

Remix

const message = i18n.t([1]);

Drag options to blanks, or click blank then click option'

A"welcome_message"

Bwelcome_message

C"welcomeMessage"

DwelcomeMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Passing variables without quotes causing errors.

Using camelCase instead of snake_case keys.

Translation keys should be strings, so they need quotes.

4fill in blank

hard

Fill both blanks to create a translations object filtering only English messages.

Remix

const englishMessages = Object.fromEntries(Object.entries(translations).filter(([[1], [2]]) => [1] === "en"));

Drag options to blanks, or click blank then click option'

Alang

Bmessage

Ckey

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping key and value names.

Using generic names like 'key' and 'value' without context.

The filter destructures entries into language code and message, then filters for English ('en').

5fill in blank

hard

Fill all three blanks to create a loader that returns translations for the detected locale.

Remix

export async function loader({ request }) {
  const locale = request.headers.get([1]) || "en";
  const translations = await getTranslations([2]);
  return json({ messages: translations[[3]] });
}

Drag options to blanks, or click blank then click option'

A"Accept-Language"

Blocale

D"Content-Language"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong header names.

Not using the locale variable consistently.

The loader gets the locale from the 'Accept-Language' header, fetches translations for that locale, and returns them as JSON.