Making Bilingual Games with Help from jQuery 1

Making a bilingual game is more than twice the work of making an English-only game.
Not only do you need to have everything written in Spanish and English but you also need to create functions that make everything change from Spanish to English (and back again).

To add a layer of complexity, sometimes there are responses that occur to a player’s action in the game, so you have the text to the page being rewritten on the fly, and it needs to be rewritten in the correct language.  Let me give you a few tips here that will help if you ever decide to undertake such a foolhardy task.

1.  Use

$( document ).ready(function() {

  -- The rest of your code here ;

 });

This will, as the name implies, prevent the script from trying to execute before the document is ready. I have found often that when a script works fine in one browser and not in another it is because browsers are different (duh!) and it is not fully loaded in the non-working browser. Nine times out of ten, using this tip fixes the problem. The tenth time involves a lot more work to debug (and swearing).

2. Create two buttons with the ID eng_button and span_button for when the page is showing English and Spanish, respectively.  Give everything in English a class of “english” and every element in Spanish a class of “spanish” . When a button is clicked, it hides everything of one class and shows everything of the other. It also adds a class of whichever language you want to show to the element with ID ‘message_switch’. Initially, this element is empty. This bit of code is actually in an external file of common functions, since it is used everywhere, but I included it here for educational purposes.

3. Create a function that takes two arguments. One will be the English text and the other the Spanish text. In this case, a player selects a favorite animal and the game responds in Spanish or English. First, though, the elements relating to the survey question are removed, since there won’t be any need to see these again, and we want the player’s attention to be focused on the response. If the class of message_switch is “spanish” then the value of answer is the second argument passed, otherwise, it is the first argument.

4. For each element that can be selected (these happen to be pictures that you click to choose), you create an anonymous function that calls the function created in #3 and passes it the two arguments.

That’s it. Whole code is below. Don’t forget to include your links to jQuery above this.
<script type=”text/javascript”>
$( document ).ready(function() {

// Change the language ;
$("#eng_button").click(function(){
    $(".english").hide();
    $(".spanish").show();
    $("#message_switch").addClass("spanish");
   }) ;
$("#span_button").click(function(){
    $(".spanish").hide() ;
    $(".english").show();
    $("#message_switch").addClass("english");

}) ;

 function ans(resp, resp2){
 $(".hd").remove();
 if ($("#message_switch").hasClass("spanish")){
 var answer = resp2 ;
 }
 else {var answer = resp ;}
 $("#message_switch").text(answer);
 $("#message_switch").addClass("border");
 }

 $( "#elephant" ).click(function() {
 ans("I like elephants, too. I can't believe they're not more popular","Spanish spanish elephant");

 });
 $( "#lion" ).click(function() {
 ans("Well, the lion IS the king of the jungle.","Spanish lion lion spanish");

 });
 $( "#penguin" ).click(function() {
 ans("Seriously? Everybody likes penguins that much?","Spanish spanish");

 });
 
 });

</script>