Introduction

When it comes to translating websites for a client, a lot more goes into the process than manually editing every visible line of text. For every block of text you can find on a website, there are dozens of text strings lurking under the surface. From button labels to error messages, the localizer has to be careful to comb their code to make sure no string goes left untouched. 

To show this process, I teamed up with Justin Flaherty (MA Candidate in Translation) and Ian Keller (Advanced Entry MA Candidate in Localization) in order to tackle string localization across multiple languages through an entire Javascript application as a project for our Website Localization class. Keeping things simple but effective, we decided to use a code that would create a quiz similar to those found on sites such as Facebook and Buzzfeed. Every question would be a statement that the quiz-taker could chose an answer for based on the degree to which they agreed with it, ranging from “strongly agree” to “strongly disagree.”

A Lesson In Math

Our topic, we decided, would be a somewhat tongue-in-cheek quiz meant to determine which country the quiz taker would be best suited for working in, Japan or America. The code was arranged in such a way that the result possibilities were given a value each, with Japan being given the positive value, America being given the negative value, and an either-or result being given the value of 0 (note: no hard feelings to America being chosen for the negative value!). As a result, each statement was defined as either +1 or -1 depending on whether it skewed more Japanese or American. The five possible answers for each question were also given a value: -5 for “Strongly Disagree”, -3 for “Disagree”, 0 for “Neutral”, 3 for “Agree”, and 5 for “Agree”. Therefore, depending on the sway of the statement, the test-taker’s resulting points for the question would be based on a simple mathematical equation. For example, if the quiz-taker chose “Strongly Agree” to a more Japanese statement, their total point tally for that statement would look like this:

(+5 Strongly Agree)   x   (+1 Japanese Statement)         =         +5 Total Points

If the person answered with “Strongly Disagree” for the same statement however—making their answer more American-leaning—the math would instead look like this:

(-5 Strongly Disagree)   x   (+1 Japanese Statement)     =     -5 Total Points

Based on the skew of the test taker’s final tally of points towards either a positive or negative value, their final result would go one of three different directions. For a positive final tally, their result would be that they should work in Japan. For a negative final tally, their result would be to work in America. For a score of exactly zero, they would be told they could work in either country.

The Localization Process

With the hopes of making the quiz multilingual in three languages (English, Japanese, and Traditional Chinese), we first began by building the three basic foundations of the code: the HTML, the CSS, and the Javascript. The structure of the quiz was pulled from a Codepen tutorial provided by user Danube Phan, but as a team we decided to make our own cosmetic and content edits. The first division of labor was such that one of us was in charge of editing the CSS, one of us was in charge of isolating the strings, and one of us was in charge of creating the statements and descriptions that would suit our theme.

I took on the job of creating the campy quiz result descriptions in English, and once my colleague had isolated the strings from the HTML and Javascript, I used Word’s “hidden text” feature to take out all of the extraneous punctuation including the double quotes, commas, and the like. This was in order to help isolate just the text for the machine translation, done in Memsource in our case.

From there we moved onto the translation part of the quiz. As I mentioned before, we wanted to make the quiz available in three different languages. Since all three members of our team were fluent in English and Japanese, we wanted to include a language outside of our language pool for practice in MT collaboration. While we handled the edits for the Japanese translation, our colleague Jimmy Yang (MA Candidate in Translation) graciously offered his help in editing the Traditional Chinese translation. After all of our translations were deemed acceptable, we uploaded them into the code, adding a language switcher along the way.

A Slight Hitch In The Plan

At this point we ran into a slight problem with our language switcher. Pulling from previous assignments, we had designated our English page as the main index, with the Japanese and Chinese languages being secondary pages stored within their own language folders. This had worked fine for a project with two languages, but adding a third created a problem. Going from English to Japanese/Chinese and vice versa was simple enough, but going between Japanese and Chinese caused problems in the language switcher’s file paths.

Bringing it All Together

Once we edited the file paths and properly fixed the Javascript function, the language switcher worked without a hitch. With all of our strings solidly integrated once more, and all changes made to the HTML and CSS as well, the final process of setting the quiz into action proved to be a walk in the park.

https://www.youtube.com/watch?v=E96EGMmDohM&feature=youtu.be

If you’d like to try your hand at our quiz yourself, come give it a try at our RIJ Showcase Website!