As part of my studies this semester, I took a class called Website Localization. Throughout the course, I learned how to localize content for foreign audiences using a variety of programs including WordPress, Drupal, EasyLing, and some entry level programming languages. For the final project showcase, my team (including Rebecca Guttentag and Ian Keller) decided to tackle localizing a personality quiz into multiple languages. This endeavor required JavaScript, HTML, CSS, CAT tools such as Memsource, and Trello, a workflow management tool. We snatched the base code from codepen and proceeded to alter the quiz from multiple angles.
Initial Quiz and Code
First, we changed the content to have a more international flavor. Settling on the theme “Should You Work in America or Japan?” my team came up with 12 questions. The answer choices ranged from strongly disagree to strongly agree, and each choice was assigned a numerical value which determined the results. We decided to localize the quiz into Japanese (a language of study for all team members) and Chinese using machine translation and human editors.
One of the initial steps to prepare the files for translation was to isolate all of the strings in the JavaScript file. I took on this task and compiled them into a word document. The next step was to concatenate the strings, which would allow them to be called forth in the desired language post-translation. This work (as well as all subsequent work involving code) was carried out in Brackets. I combed through the JavaScript file and concatenated the strings by separating them from other elements in the code. The process was fairly repetitive, but some trial and error was required to successfully concatenate strings ending in \ or ‘.
Concatenated Strings in Brackets
After Rebecca hid all text not to be translated in the word document containing the strings, I created a Memsource project and ran the document through MT, making target files in Chinese and Japanese. Rebecca and I edited the Japanese text, and we used a native Chinese speaker to proofread the Chinese text. With our translation and edits completed, we could move on to actually putting the quiz together.
Memsource MT
Based on a drop-down language switcher I had used for a previous class assignment, I added a similar language switcher into the code. This required HTML, CSS, and JavaScript file edits. A problem we ran into with the language switcher was that it would not work going between the Chinese or Japanese pages. After much strife and troubleshooting, I found a fix for the issue. I placed the initial English index.html file into its own en-us folder, forcing all links in the language switcher to follow the same path. This unanticipated problem was caused by adding a third language to the switcher. During similar assignments in class, we had only used two languages, so we had not dealt with the scenario of subfolders having to call to one another.
Edited code to fix language switcher
Language Selector CSS
Ian handled the CSS for our project, creating a background image, formatting fonts, and adding borders. I assisted in the CSS for the language switcher, which we found appeared differently based on browser. In Chrome, various aspects of the switcher’s CSS (background color, positioning) would not show up correctly, while it would work perfectly in Firefox. I edited the CSS to force the language switcher to appear the same in both Chrome and Firefox by changing the background color and forcing the position of the switcher to the right side of the screen.
As a final touch for our project, I uploaded our personality quiz to a webhost (tlmcreate). This attempt led to a problem caused by the previous fixing of a different problem. By placing the index.html file for each language into a language subfolder, the website version was unable to call forth an initial file to run and load the site. This issue was solved by another workaround. I created a new index.html that contained a button linking to the en-us version of the quiz. Once clicked, users can access the quiz and also use the language switcher to choose their preferred language.
A video demo of the completed localized personality quiz can be viewed below, or you can try out the quiz yourself by clicking here!