Finished implementing info box + i18n

In moodle mode, if moodle language is between the available languages for ifractions, it is selected - otherwise, it is en_US by default

assets/lang/en_US

@@ -3,30 +3,45 @@ aux_rectangle=Auxiliar Rectangles
 circle=Circles
 continue=Continue
 custom_game=CUSTOMIZE THE CURRENT GAME
-difficulty=Difficulties
+difficulties=Difficulties
+difficulty=Difficulty
 empty_name=You forgot to type your name
-s2_error_msg=You should select a smaller portion than it's full size
+equals=Equality
 game=GAME
 game_mode=Game Modes
 good_job=Good Job
+infoBox_circleOne=<li>Flight themed, in this game the character is a child who wants to fly in a balloon to get to school.</li><li>This game represents a fraction like portion of a circle (arc). Thus, the selected arcs must be proportional to the path to be traversed.</li><li>The mathematical operations with fractions represented in this game are: addition (child going to the right) and subtraction (child going to the left), besides of both operations at the same level.</li>
+infoBox_diff=Choose game difficulty. When <b>higher value</b>, <b>higher overall difficulty</b> of the levels in the level map.
+infoBox_diff_aux=<b>About the level map:</b> Each game created generates 4 levels (illustrated as positions on a map) in ascending order of difficulty, based on that choice of difficulty.
+infoBox_diff_obs=<i>Note: Difficulty 1 only uses integers.</i>
+infoBox_misc_label=Choose whether or not the game should display fraction value.
+infoBox_misc_rect=Choose whether or not the game should show auxiliary blocks.
+infoBox_mode=Choose a variation of the current game:
+infoBox_mode_c1_A=Select the balloon position.
+infoBox_mode_c1_B=Select the arcs.
+infoBox_mode_s1_A=Select a portion of the soil.
+infoBox_mode_s1_B=Select a portion of the blocks.
+infoBox_mode_s2_A=Largest number of subdivisions in top rectangle.
+infoBox_mode_s2_B=Largest number of subdivisions in bottom rectangle.
+infoBox_oper=Choose the math operation involving fractions to be covered in the current game. <i>Different games cover different operations.<i>
+infoBox_squareOne=<li>With a rural theme, in this game the character is a tractor who wants to push a bunch of blocks in order to fill an open hole in the farm's grass.</li><li>This game represents a fraction as a portion of a rectangle. Thus, the blocks taken by the tractor must be equivalent to the hole in the ground.</li><li>The math operations with fractions represented in this game are: addition (tractor going right) and subtraction (tractor going left).</li>
+infoBox_squareTwo=<li>In this game the character is a child who wants to walk to school.</li><li>This game represents a fraction like portion of a rectangle. Thus, two rectangles with different subdivisions are shown and the player must select equivalent portions.</li><li>The mathematical operation represented in this game is equality of fractions.</li>
 insert_name=ENTER YOUR NAME
 loading=LOADING
 menu_title=SELECT GAME
+minus=Subtraction
+mixed=Sum and Subtraction
 nav_back=GO BACK
 nav_help=SEE SOLUTION
-nav_menu=MAIN MENU
 nav_lang=LANGUAGE SELECTION
+nav_menu=MAIN MENU
 operation=Operations
+operation_math=Math Operations
+plus=Sum
 ready=READY
 retry=Try again
+s2_error_msg=You should select a smaller portion than it's full size
 show=Show
 square=Quadrangles
 title=Fractions
 welcome=Hi
-infoBox_squareOne=.
-infoBox_squareTwo=.
-infoBox_circleOne=.
-infoBox_mode=.
-infoBox_oper=.
-infoBox_diff=.
-infoBox_misc=.

index.html

@@ -109,9 +109,7 @@ www.usp.br/line
 
     <div class="panel panel-primary">
 
-      <div class="panel-heading">
-        iFractions game :: by LInE
-      </div>
+      <div class="panel-heading">iFractions game :: by LInE</div>
 
       <div class="panel-body">
 
@@ -126,17 +124,12 @@ www.usp.br/line
         <!-- Display fps in debugmode -->
         <div id="display-fps"></div>
 
-
-
         <!-- The Modal -->
         <div id="myModal" class="modal">
-
-          <!-- Modal content -->
           <div class="modal-content">
             <span class="close">&times;</span>
-            <div id='infobox-content'></div>
+            <div id='infobox-content'></div> <!-- Modal content -->
           </div>
-
         </div>
 
       </div>

js/circleOne.js

@@ -463,7 +463,7 @@
   /* CALLED BY EVENT HANDLER */
 
   /**
-   * (in gameModeType 'B')
+   * (in gameModeType 'B') <br>
    * 
    * Function called when cursor is over a valid circle
    * 
@@ -479,7 +479,7 @@
   },
 
   /**
-   * (in gameModeType 'B')
+   * (in gameModeType 'B') <br>
    * 
    * Function called when cursor is out of a valid circle
    */
@@ -493,7 +493,7 @@
   },
 
   /**
-   * (in gameModeType 'B')
+   * (in gameModeType 'B') <br>
    * 
    * Function called when player clicked over a valid circle
    * 
@@ -584,7 +584,7 @@
   /* METADATA FOR GAME */
 
   /**
-   * Saves players data after level ends - to be sent to database
+   * Saves players data after level ends - to be sent to database <br>
    * 
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
    * @see /php/squareOne.js

js/customMenu.js

@@ -53,28 +53,28 @@ const customMenuState = {
       let offsetW = 600 / 6;
       let offsetH, infoIcon;
 
-      // Label 'Game Mode'
+      // Label 'Game Modes'
       game.add.text(x + offsetW - 12, y, game.lang.game_mode, textStyles.h2_blue_2);
 
-      infoIcon = game.add.image(x + 2 * offsetW - 30, y - 40, 'info', 0.5, 0.6);
+      infoIcon = game.add.image(x + 2 * offsetW - 30, y - 40, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameMode';
       this.menuIcons.push(infoIcon);
 
-      // Label 'Operation'
+      // Label 'Operations'
       game.add.text(x + 3 * offsetW, y, game.lang.operation, textStyles.h2_blue_2);
 
-      infoIcon = game.add.image(x + 4 * offsetW - 30, y - 40, 'info', 0.5, 0.6);
+      infoIcon = game.add.image(x + 4 * offsetW - 30, y - 40, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameOperation';
       this.menuIcons.push(infoIcon);
 
-      // Label 'Difficulty'
-      game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);
+      // Label 'Difficulties'
+      game.add.text(x + 5 * offsetW, y, game.lang.difficulties, textStyles.h2_blue_2);
 
-      infoIcon = game.add.image(x + 6 * offsetW - 30, y - 40, 'info', 0.5, 0.6);
+      infoIcon = game.add.image(x + 6 * offsetW - 30, y - 40, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameDifficulty';
@@ -94,7 +94,7 @@ const customMenuState = {
       // Label 'Show Fractions / Auxiliar rectangles'
       game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
 
-      infoIcon = game.add.image(x + 6 * offsetW + 20, y + 102, 'info', 0.5, 0.6);
+      infoIcon = game.add.image(x + 6 * offsetW + 20, y + 102, 'info', 0.5, 0.4);
       infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       infoIcon.id = 'gameMisc';
@@ -235,29 +235,91 @@ const customMenuState = {
       }
 
       this.infoBoxContent = {
+
         gameMode: {
-          title: '<b>' + game.lang.game_mode + '</b>',
-          body: game.lang.infoBox_mode,
-          img: '' // '<center> <img width=300 src="./assets/img/info-box/s1-A.png"> <img width=300 src="./assets/img/info-box/s1-B.png"> </center>'
+          squareOne: {
+            title: '<b>' + game.lang.game_mode + '</b>',
+            body: game.lang.infoBox_mode,
+            img: '<table> <tr> <td> <b>A)</b> ' + game.lang.infoBox_mode_s1_A +
+              ' </td> <td> <b>B)</b> ' + game.lang.infoBox_mode_s1_B +
+              ' </td> </tr> <tr> <td> <img width=100% src="'+game.image['s1-A-h'].src+'"> ' +
+              ' </td> <td> <img width=100% src="'+game.image['s1-B-h'].src+'"> </td> </tr> <table>'
+          },
+          circleOne: {
+            title: '<b>' + game.lang.game_mode + '</b>',
+            body: game.lang.infoBox_mode,
+            img: '<table> <tr style="border-bottom: 5px solid white"> <td width=70%> <img width=100% src="'+game.image['c1-A-h'].src+'">' +
+            ' </td> <td> &nbsp; <b>A)</b> ' + game.lang.infoBox_mode_c1_A +
+            ' </td> </tr> </tr> <td> <img width=100% src="'+game.image['c1-B-h'].src+'"> ' +
+            ' </td> <td> &nbsp; <b>B)</b> ' + game.lang.infoBox_mode_c1_B +'</td> </tr> <table>'
+          },
+          squareTwo: {
+            title: '<b>' + game.lang.game_mode + '</b>',
+            body: game.lang.infoBox_mode,
+            img: '<center> <table> <tr> <td> <b>A)</b> ' + game.lang.infoBox_mode_s2_A +
+            ' </td> <td> <b>B)</b> ' + game.lang.infoBox_mode_s2_B +
+            ' </td> </tr> <tr> <td> <img width=98% src="'+game.image['s2-A-h'].src+'"> ' +
+            ' </td> <td> <img width=98% src="'+game.image['s2-B-h'].src+'"> </td> </tr> <table> </center>'
+          }
         },
+
         gameOperation: {
-          title: '<b>' + game.lang.operation + '</b>',
+          title: '<b>' + game.lang.operation_math + '</b>',
           body: game.lang.infoBox_oper,
-          img: '<center> <img width=50 src="./assets/img/info-box/operation_plus.png"> ' + game.lang.plus +
-            ' <img width=50 src="./assets/img/info-box/operation_minus.png"> ' + game.lang.minus +
-            ' <img width=50 src="./assets/img/info-box/operation_mixed.png"> ' + game.lang.mixed +
-            ' <img width=50 src="./assets/img/info-box/operation_equals.png"> ' + game.lang.equals + ' </center>',
+          img: '<center> <table> <tr style="border-bottom: 5px solid white"> <td> <img width=50 src="'+game.image['operation_plus'].src+'"> ' + game.lang.plus +
+            ' </td> <td> <img width=50 src="'+game.image['operation_mixed'].src+'"> ' + game.lang.mixed +
+            ' </td> </tr> <tr> <td><img width=50 src="'+game.image['operation_minus'].src+'"> ' + game.lang.minus +
+            ' &nbsp; </td> <td> <img width=50 src="'+game.image['operation_equals'].src+'"> ' + game.lang.equals + ' </td> </tr> <table> <center>',
         },
+
         gameDifficulty: {
-          title: '<b>' + game.lang.difficulty + '</b>',
-          body: game.lang.infoBox_diff,
-          img: '<center> <img width=150 src="./assets/img/info-box/dif-1.png"><img width=150 src="./assets/img/info-box/dif-5.png">'
+          squareOne: {
+            title: '<b>' + game.lang.difficulties + '</b>',
+            body: game.lang.infoBox_diff + '<br>' + game.lang.infoBox_diff_obs,
+            img: '<table> <tr> <td> <b>' + game.lang.difficulty + ':</b> 1' +
+            ' </td> <td> <b>' + game.lang.difficulty + ':</b> 3'+
+            ' </td> </tr> <tr> <td> <img width=100% src="'+game.image['s1-diff-1'].src+'"> ' +
+            ' </td> <td style="border-left: 4px solid white"> <img width=100% src="'+game.image['s1-diff-3'].src+'"> </td> </tr> </table> <br>' +
+            game.lang.infoBox_diff_aux + '<center> <img width=50% src="'+game.image['map-s1'].src+'"> </center>'
+          },
+          circleOne: {
+            title: '<b>' + game.lang.difficulties + '</b>',
+            body: game.lang.infoBox_diff + '<br>' + game.lang.infoBox_diff_obs,
+            img: '<center> <table> <tr> <td style="border-right: 4px solid white"> <b>' + game.lang.difficulty + ':</b> 1' +
+            ' </td> <td> <b>' + game.lang.difficulty + ':</b> 5'+
+            ' </td> </tr> <tr> <td> <img width=100% src="'+game.image['c1-diff-1'].src+'"> ' +
+            ' </td> <td style="border-left: 4px solid white"> <img width=100% src="'+game.image['c1-diff-5'].src+'"> </td> </tr> </table> <center> <br>' +
+            game.lang.infoBox_diff_aux + '<center> <img width=50% src="'+game.image['map-c1s2'].src+'"> </center>'
+          },
+          squareTwo: {
+            title: '<b>' + game.lang.difficulties + '</b>',
+            body: game.lang.infoBox_diff,
+            img: '<table> <tr> <td> <b>' + game.lang.difficulty + ':</b> 1' +
+            ' </td> <td> <b>' + game.lang.difficulty + ':</b> 5'+
+            ' </td> </tr> <tr> <td> <img width=100% src="'+game.image['s2-diff-1'].src+'"> ' +
+            ' </td> <td style="border-left: 4px solid white"> <img width=100% src="'+game.image['s2-diff-5'].src+'"> </td> </tr> </table> <br>' +
+            game.lang.infoBox_diff_aux + '<center> <img width=50% src="'+game.image['map-c1s2'].src+'"> </center>'
+          },
         },
+
         gameMisc: {
-          title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-          body: game.lang.infoBox_misc,
-          img: '' //'<center> <img width=300 src="./assets/img/info-box/c1-A.png"> <img width=300 src="./assets/img/info-box/c1-B.png"> </center>',
+          squareOne: {
+            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+            body: game.lang.infoBox_misc_label,
+            img: '<center> <img width=80% src="'+game.image['s1-label'].src+'"> </center>',
+          },
+          circleOne: {
+            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+            body: game.lang.infoBox_misc_label,
+            img: '<center> <img width=60% src="'+game.image['c1-label'].src+'"> </center>',
+          },
+          squareTwo: {
+            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+            body: game.lang.infoBox_misc_rect,
+            img: '<center> <img width=100% src="'+game.image['s2-label'].src+'"> </center>',
+          }
         }
+
       };
 
       // ------------- EVENTS
@@ -275,9 +337,11 @@ const customMenuState = {
   func_showInfoBox: function (icon) {
     self.infoBox.style.display = 'block';
 
-    let msg = '<h3>' + self.infoBoxContent[icon.id].title + '</h3>'
-      + '<p>' + self.infoBoxContent[icon.id].body + '</p>'
-      + self.infoBoxContent[icon.id].img;
+    const element = (icon.id == 'gameOperation') ? self.infoBoxContent[icon.id] : self.infoBoxContent[icon.id][gameTypeString];
+
+    let msg = '<h3>' + element.title + '</h3>'
+      + '<p>' + element.body + '</p>'
+      + element.img;
 
     document.getElementById('infobox-content').innerHTML = msg;
   },

js/gameMechanics.js

@@ -574,7 +574,7 @@ const game = {
    */
   render: {
     queue: [], // [Not directly used] Media queue to be rendered by the current state
-    /** [Not directly used] 
+    /** [Not directly used] <br>
      * Renders image on canvas
      * 
      * @param {object} cur current media in media queue
@@ -601,7 +601,7 @@ const game = {
       context.globalAlpha = 1;
       if (cur.rotate && cur.rotate != 0) context.restore();
     },
-    /** [Not directly used] 
+    /** [Not directly used] <br>
      * Renders spritesheet on canvas
      * 
      * @param {object} cur current media in media queue
@@ -632,7 +632,7 @@ const game = {
       context.globalAlpha = 1;
       if (cur.rotate && cur.rotate != 0) context.restore();
     },
-    /** [Not directly used] 
+    /** [Not directly used] <br>
      * Renders text on canvas
      * 
      * @param {object} cur current media in media queue
@@ -656,7 +656,7 @@ const game = {
       context.globalAlpha = 1;
       if (cur.rotate && cur.rotate != 0) context.restore();
     },
-    /**[Not directly used] 
+    /**[Not directly used] <br>
      * Renders geometric shapes
      * 
      * @namespace
@@ -874,7 +874,7 @@ const game = {
       canvas.addEventListener(name, func);
       game.event._list.push([name, func]);
     },
-    /** [Not directly used] 
+    /** [Not directly used] <br>
      * Clear list of events
      */
     clear: function () {
@@ -885,7 +885,7 @@ const game = {
     },
   },
 
-  /** [Not directly used] 
+  /** [Not directly used] <br>
    * Game loop - Handles repetition of function update() and sprite animation <br>
    * After the media queue is filled in create(), the game loop starts <br>
    * It calls update() iteratively and rerenders the screen
@@ -899,7 +899,7 @@ const game = {
     waitingToStart: undefined, // [Not directly used]
     startTime: 0, // [Not directly used]
     duration: 1000 / 60, // [Not directly used] 1000: 1 second | 60: expected frames per second
-    /** [Not directly used] 
+    /** [Not directly used] <br>
      * Start game loop
      * 
      * @param {object} state current state
@@ -916,14 +916,14 @@ const game = {
       }
     },
     /**
-     * [Not directly used] 
+     * [Not directly used] <br>
      * Stop game loop
      */
     stop: function () {
       if (game.loop.status == 'on') game.loop.status = 'ending';
     },
     /**
-     * [Not directly used] 
+     * [Not directly used] <br>
      * Execute game loop
      */
     _run: function () {
@@ -947,7 +947,7 @@ const game = {
       }
     },
     /**
-     * [Not directly used] 
+     * [Not directly used] <br>
      * Resets game loop values 
      */
     _clear: function () {
@@ -1007,7 +1007,7 @@ const game = {
       });
     },
     /**
-     * [Not directly used] 
+     * [Not directly used] <br>
      * Executes animation
      */
     _run: function () {
@@ -1026,7 +1026,7 @@ const game = {
       game.animation.count++;
     },
     /**
-     * [Not directly used] 
+     * [Not directly used] <br>
      * Clear animation queue <br><br>
      * 
      * game.animation.clear()
@@ -1083,7 +1083,7 @@ const game = {
       else game.state._create();
     },
     /**
-     * [Not directly used] 
+     * [Not directly used] <br>
      * Encapsulate create() function in the current state
      */
     _create: function () {

js/globals.js

@@ -1,6 +1,6 @@
-/*
-LInE - Free Education, Private Data.
+// LInE - Free Education, Private Data.
 
+/*
 ..................................................... 
 ...............square....................circle...... }				        	} (gameShape)
 .........../...........\....................|........ } game (gameType)
@@ -18,9 +18,23 @@ LInE - Free Education, Private Data.
 ..................................................... 
 */
 
+/**
+ * Turns console messages ON/OFF (for debug purposes only)
+ * @type {boolean}
+ */
+const debugMode = false;
+// MOODLE MODIF.
+/**
+ * defines if the game is suposed to run online or on moodle <br>
+ * - if true, on moodle <br>
+ * - if false, online
+ */
+const moodle = false;
+
 const medSrc = 'assets/img/'; // Base directory for media
 const defaultWidth = 900; // Default width for the Canvas
 const defaultHeight = 600; // Default height for the Canvas
+
 /**
  * HTMLCanvasElement : Canvas where all the game elements are rendered.
  * 
@@ -76,27 +90,31 @@ let gameOperationType;
  */
 let gameDifficulty;
 /**
- * Turns console messages ON/OFF (for debug purposes only)
+ * Turns displaying the fraction labels on levels ON/OFF
  * @type {boolean}
  */
-const debugMode = false;
-// MOODLE MODIF.
+let fractionLabel = true;
 /**
- * defines if the game is suposed to run online or on moodle
- * if true, on moodle
- * if false, online
+ * Character position on the map, aka game levels (1..4: valid; 5: end)
+ * @type {number}
  */
-const moodle = false;
+let mapPosition;
 /**
- * Turns game audio ON/OFF
+ * When true, the character can move to next position in the map
  * @type {boolean}
  */
-let audioStatus = false;
+let mapMove;
 /**
- * Turns displaying the fraction labels on levels ON/OFF
+ * Number of finished levels in the map
+ * @type {number}
+ */
+let completedLevels;
+
+/**
+ * Turns game audio ON/OFF
  * @type {boolean}
  */
-let fractionLabel = true;
+let audioStatus = false;
 /**
  * Player's name
  * @type {string}
@@ -114,21 +132,6 @@ let langstring;
  * @type {object}
  */
 let self;
-/**
- * Character position on the map, aka game levels (1..4: valid; 5: end)
- * @type {number}
- */
-let mapPosition;
-/**
- * When true, the character can move to next position in the map
- * @type {boolean}
- */
-let mapMove;
-/**
- * Number of finished levels in the map
- * @type {number}
- */
-let completedLevels;
 
 /**
  * Metadata for all games
@@ -268,7 +271,6 @@ const textStyles = {
   p_blue: { font: '14px Arial,sans-serif', fill: colors.darkBlue, align: 'center' } // Fractions
 };
 
-// List of media URL
 /**
  * List of URL for all media in the game.<br>
  * Divided: 1st by the state that loads the media / 2nd by the media type.
@@ -333,6 +335,31 @@ const url = {
       ['game0', medSrc + 'levels/squareOne.png'], // Square I
       ['game1', medSrc + 'levels/circleOne.png'], // Circle I
       ['game2', medSrc + 'levels/squareTwo.png'], // Square II
+      // Info box icons
+      ['c1-A', medSrc + 'info_box/c1-A.png'],
+      ['c1-A-h', medSrc + 'info_box/c1-A-h.png'],
+      ['c1-B-h', medSrc + 'info_box/c1-B-h.png'],
+      ['c1-diff-1', medSrc + 'info_box/c1-diff-1.png'],
+      ['c1-diff-5', medSrc + 'info_box/c1-diff-5.png'],
+      ['c1-label', medSrc + 'info_box/c1-label.png'],
+      ['map-c1s2', medSrc + 'info_box/map-c1s2.png'],
+      ['map-s1', medSrc + 'info_box/map-s1.png'],
+      ['s1-A', medSrc + 'info_box/s1-A.png'],
+      ['s1-A-h', medSrc + 'info_box/s1-A-h.png'],
+      ['s1-B-h', medSrc + 'info_box/s1-B-h.png'],
+      ['s1-diff-1', medSrc + 'info_box/s1-diff-1.png'],
+      ['s1-diff-3', medSrc + 'info_box/s1-diff-3.png'],
+      ['s1-label', medSrc + 'info_box/s1-label.png'],
+      ['s2', medSrc + 'info_box/s2.png'],
+      ['s2-A-h', medSrc + 'info_box/s2-A-h.png'],
+      ['s2-B-h', medSrc + 'info_box/s2-B-h.png'],
+      ['s2-diff-1', medSrc + 'info_box/s2-diff-1.png'],
+      ['s2-diff-5', medSrc + 'info_box/s2-diff-5.png'],
+      ['s2-label', medSrc + 'info_box/s2-label.png'],
+      ['operation_plus', medSrc + 'info_box/operation_plus.png'],
+      ['operation_minus', medSrc + 'info_box/operation_minus.png'],
+      ['operation_mixed', medSrc + 'info_box/operation_mixed.png'],
+      ['operation_equals', medSrc + 'info_box/operation_equals.png'],
     ],
     sprite: [
       // Game modes
@@ -400,8 +427,8 @@ const navigationIcons = {
 
   /**
    * Add navigation icons.<br>
-   * The icons on the left are ordered from left to right.
-   * The icons on the right are ordered from right to left.
+   *  * The icons on the left are ordered from left to right. <br>
+   *  * The icons on the right are ordered from right to left.
    * 
    * @param {boolean} leftIcon0 1st left icon 
    * @param {boolean} leftIcon1 2nd left icon

js/integrationFunctions.js

@@ -1,6 +1,5 @@
 // MOODLE MODIF.
-
-console.log("integrationFunctions.js: start.");
+if (debugMode) console.log("(integrationFunctions.js start)");
 
 const moodleVar = {
   hits: [0,0,0,0],
@@ -8,7 +7,7 @@ const moodleVar = {
   time: [0,0,0,0]
 }
 
-let getParameterByName = function (name) {
+function getParameterByName (name) {
   var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
   return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
 }
@@ -22,9 +21,9 @@ const iLMparameters = {
 };
 
 function getAnswer() {
-  console.log("integrationFunctions.js: start getAnswer()");
+  if (debugMode) console.log("(integrationFunctions.js) start getAnswer()");
   let str = '';
-  if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // professor
+  if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // student - sending results
     str += 'gameTypeString:' + gameTypeString
       + '\ngameShape:' + gameShape
       + '\ngameModeType:' + gameModeType
@@ -32,7 +31,7 @@ function getAnswer() {
       + '\ngameDifficulty:' + gameDifficulty
       + '\nfractionLabel:' + fractionLabel
       + '\nresults:';
-    for (let i = 0; i < moodleVar.hits.length; i++) {
+    for (let i = 0; i < moodleVar.hits.length; i++) { // professor - creating new assignment
       str += '{level:' + (i + 1)
         + ',hits:' + moodleVar.hits[i]
         + ',errors:' + moodleVar.errors[i]
@@ -44,11 +43,9 @@ function getAnswer() {
       alert("Erro: Você precisa escolher pelo menos um jogo");
       return x;
     }
-
     moodleVar.hits = [0, 0, 0, 0];
     moodleVar.errors = [0, 0, 0, 0];
     moodleVar.time = [0, 0, 0, 0];
-
     str += 'gameTypeString:' + gameTypeString
       + '\ngameShape:' + gameShape
       + '\ngameModeType:' + gameModeType
@@ -56,16 +53,18 @@ function getAnswer() {
       + '\ngameDifficulty:' + gameDifficulty
       + '\nfractionLabel:' + fractionLabel;
   }
-  console.log("-----------------");
-  console.log(str); 
-  console.log("-----------------");
 
-  console.log("integrationFunctions.js: end getAnswer()");
+  if (debugMode) {
+    console.log(str); 
+    console.log("(integrationFunctions.js) end getAnswer()");
+  }
+
   return str;
 }
 
 function getEvaluation() {
-  if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // aluno
+  if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // student
+    // TODO - evaluation method
     const nota = 1;
     parent.getEvaluationCallback(nota);
     return nota;
@@ -81,20 +80,22 @@ function decodificaArquivo(text) {
       const chave = newline[0].replace(/^\s+|\s+$/g, '');
       const valor = newline[1].replace(/^\s+|\s+$/g, '');
       gameInfo[chave.trim()] = valor.trim();
-    } catch (Error) { if (debugMode) console.log('Sintax error'); }
+    } catch (Error) { console.error('Sintax error'); }
   });
+  // update global variables
   gameTypeString = gameInfo['gameTypeString'];
   gameShape = gameInfo['gameShape'];
   gameModeType = gameInfo['gameModeType'];
   gameOperationType = gameInfo['gameOperationType'];
   gameDifficulty = parseInt(gameInfo['gameDifficulty']);
   fractionLabel = gameInfo['fractionLabel'];
-  console.log("decodificaArquivo:", gameTypeString, gameShape, gameModeType, gameOperationType, gameDifficulty, fractionLabel);
-  mapPosition = 0; // Map position
-  mapMove = true; // Move no next point
-  completedLevels = 0; // Reset the game progress when entering a new level
+  if (debugMode) console.log("(integrationFunctions.js) decodificaArquivo() :", gameTypeString, gameShape, gameModeType, gameOperationType, gameDifficulty, fractionLabel);
+  // Reset global variables to default values
+  mapPosition = 0; 
+  mapMove = true;
+  completedLevels = 0;
 
-  if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // aluno
+  if (iLMparameters.iLM_PARAM_SendAnswer == 'false') { // student
     iLMparameters.return_get_answer = 1;
     iLMparameters.iLM_PARAM_ActivityEvaluation = ((mapPosition == 4) ? 1 : 0);
     iLMparameters.iLM_PARAM_ArchiveContent = text;
@@ -103,16 +104,16 @@ function decodificaArquivo(text) {
     iLMparameters.iLM_PARAM_ArchiveContent = text;
   }
 
-  game.state.start('customMenu');
+  game.state.start('customMenu'); // calls custom menu after updating game variables
 }
 
 function getiLMContent() {
   const url = iLMparameters.iLM_PARAM_Assignment;
   if (iLMparameters.iLM_PARAM_Assignment == null) {
-    console.log("integrationFunctions.js: getiLMContent(): NAO existe arquivo FRC para ser carregado (iLMparameters.iLM_PARAM_Assignment vazio), finalize.");
+    console.log("(integrationFunctions.js) getiLMContent(): NAO existe arquivo FRC para ser carregado (iLMparameters.iLM_PARAM_Assignment vazio), finalize.");
     return;
   }
-  console.log("integrationFunctions.js: getiLMContent(): tenta pegar arquivo de " + url);
+  if (debugMode) console.log("(integrationFunctions.js) getiLMContent(): tenta pegar arquivo de " + url);
   let gameFile = new XMLHttpRequest();
   gameFile.open("GET", url, true);
   gameFile.send();
@@ -123,7 +124,7 @@ function getiLMContent() {
       decodificaArquivo(text);
     }
   }
-  console.log("integrationFunctions.js: getiLMContent(): final");
+  if (debugMode) console.log("(integrationFunctions.js) getiLMContent(): final");
 }
 
-console.log("integrationFunctions.js: end.");
+if (debugMode) console.log("(integrationFunctions.js start)");

js/menu.js

@@ -71,7 +71,7 @@ const menuState = {
         this.menuIcons.push(icon);
 
         // "more information" button
-        infoIcon = game.add.image(x + 70, defaultHeight / 2 - 70 - 80, 'info', 0.6, 0.6);
+        infoIcon = game.add.image(x + 70, defaultHeight / 2 - 70 - 80, 'info', 0.6, 0.4);
         infoIcon.anchor(0.5, 0.5);
         infoIcon.iconType = 'infoIcon';
         infoIcon.id = icon.gameType;
@@ -98,18 +98,18 @@ const menuState = {
       this.infoBoxContent = {
         squareOne: {
           title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.square + ' I',
-          body: game.lang.infoBox_squareOne,
-          img: '<center> <img width=300 src="./assets/img/info-box/s1-A.png"> <img width=300 src="./assets/img/info-box/s1-B.png"> </center>'
-        },
-        squareTwo: {
-          title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.square + ' II',
-          body: game.lang.infoBox_squareTwo,
-          img: '<center> <img width=400 src="./assets/img/info-box/s2.png"> </center>',
+          body: '<ul>' + game.lang.infoBox_squareOne + '</ul>',
+          img: '<center> <img width=60% src="'+game.image['s1-A'].src+'"./assets/img/info_box/s1-A.png"> </center>'
         },
         circleOne: {
           title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.circle + ' I',
-          body: game.lang.infoBox_circleOne,
-          img: '<center> <img width=300 src="./assets/img/info-box/c1-A.png"> <img width=300 src="./assets/img/info-box/c1-B.png"> </center>',
+          body: '<ul>' + game.lang.infoBox_circleOne + '</ul>',
+          img: '<center> <img width=80% src="'+game.image['c1-A'].src+'"> </center>',
+        },
+        squareTwo: {
+          title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.square + ' II',
+          body: '<ul>' + game.lang.infoBox_squareTwo + '</ul>',
+          img: '<center> <img width=80% src="'+game.image['s2'].src+'"> </center>',
         }
       };
 

js/preMenu.js

@@ -1,7 +1,3 @@
-/**
- LInE - Free Education, Private Data
- */
-
 /**
  * BOOT STATE: First state called. Loads main media
  * @namespace
@@ -28,7 +24,15 @@ const bootState = {
     // MOODLE MODIF.
     if (moodle) {
       loadLangState.firstTime = false;
-      langString = 'pt_BR';
+      const moodleLang = iLMparameters.lang;
+      switch (moodleLang) {
+        case 'en' : langString = 'en_US'; break;
+        case 'pt' : langString = 'pt_BR'; break;
+        case 'fr' : langString = 'fr_FR'; break;
+        case 'es' : langString = 'es_PE'; break;
+        case 'it' : langString = 'it_IT'; break;
+        default: langString = 'en_US';
+      }
       game.state.start('loadLang');
     } else {
       game.state.start('lang');
@@ -36,7 +40,6 @@ const bootState = {
   }
 };
 
-
 /**
  * LANGUAGE STATE: the player can choose a preferred language for the text to be displayed in the game
  * 
@@ -144,7 +147,6 @@ const langState = {
   }
 };
 
-
 /**
  * LOADING LANGUAGE STATE: Loads selected language to be able to translate the game text 
  * 
@@ -176,8 +178,6 @@ const loadLangState = {
   }
 };
 
-
-
 /**
  * NAME STATE: asks for player's name
  * 

js/squareOne.js

@@ -656,7 +656,7 @@ const squareOne = {
   /* METADATA FOR GAME */
 
   /**
-   * Saves players data after level ends - to be sent to database
+   * Saves players data after level ends - to be sent to database <br>
    *
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
    * @see /php/save.php

js/squareTwo.js

@@ -451,7 +451,7 @@ const squareTwo = {
   /* METADATA FOR GAME */
 
   /**
-   * Saves players data after level ends - to be sent to database
+   * Saves players data after level ends - to be sent to database <br>
    *
    * Attention: the "line_" prefix data table must be compatible to data table fields (MySQL server)
    * @see /php/save.php