We learned HTML, JavaScript, and one JavaScript internationalization framework in class. As our final group project, we chose a web game from Github to internationalize and localize. Our goal was to test if we could apply what we had learned to a new project and at the same time learn something new on our own.

Project Description

This game is called Guess the Money. It was originally designed for gamers in the U.S. Therefore, money amounts and dates were originally presented in the U.S. format. Our group would internationalize the game first so that it would be ready to change for gamers outside the U.S. Then, we would localize the game into simplified Chinese and Italian. All of this was carried out by using two JavaScript internationalization frameworks.

This is what our game originally looked like.

There are three elements that need to be internationalized and localized: text (strings), dates, and numbers for the amount of money.

Processes

String Internationalization & Localization

There are many user-facing strings (text) in the web game. If we localized the game without doing internationalization first, a translator would have to go through the code and translate each string. This is time-consuming, and translators typically don’t know how to navigate through code to find strings. In order to make translation process easier, separate files containing only source-target string pairs should be created for translators so that they can focus on translating. Here is where the 24 Ways framework comes in.

This is what the function looks like.

This is some of our source (English) strings.

The way it works is that we wrapped all of the source strings with this function.

When the game is run and the user changes the language, this function will go to the correct target language file to retrieve the corresponding target strings.

By doing that, every time this game needs to be translated into a new language. Translators will only get a file containing the source language, and they can start translating the strings right in the file and send it back when they are done. There is no need to look at code.

Date Internationalization & Localization

Not all countries in the world display dates in the same way, so this game needs to display them differently for gamers from different countries. In this project, the ECMAScript Internationalization API framework is used. Instead of displaying the date directly, another function is used to format the date first.

As shown in the screenshot, the date is stored into a variable called a, and the .toLocaleDateString method is called on a  to  format the date correctly. Another variable code is used here to determine in which country’s format we want to display. Then, the correct date will be stored in a variable called b.

Number Internationalization & Localization

Like dates, the way of displaying numbers change from country to country, so does the symbol for money. Therefore, simply putting numbers in the code is not an option. As with the dates, numbers need to be passed into a function for formatting.

As shown above, the number we want to format and variable code are passed into the function for determining the format. Another variable cur is also used to determine the symbol of the currency. All three variables together tell the function the correct way to display the amount of money.

Dynamically Changing the Content

After preparing the three elements for the change of language, it’s time to put everything together. With the two source-target language files (English to Italian and English to simplified Chinese) ready, the last step is to add code to distinguish which language has been selected.

As shown in the screenshot, the chosen language will be stored in a variable called currentLanguage. Next, if statements will be used to decide what the variables code and cur should be set to. For example, in the case of currentLanguage equal to “en-us,” code and cur will be set to “en-us” and “USD.” Throughout the game, all elements will be displayed according to the U.S. conventions.

The following is screenshots of the game in English, simplified Chinese, and Italian respectively. All of the elements can be changed dynamically.

After this project, I:

1. Am more familiar with how 24 Ways works.
2. Learned a new JavaScript localization framework.
3. Reinforced the knowledge of how to link the language switcher with other elements in JavaScript so that they can be changed in real time.
4. Learned the importance of internationalization. We localized our game into two different languages: simplified Chinese and Italian. If we had not internationalized the original version first, it would have taken us much more time to localize the game.
5. Clearly understand the difference between = and ==. The former one is used when we are assigning values. The latter means equal to, which is used for determining if two values are the same or not.

Here is the Guess the Money web game files. Feel free to play around!