Browse Source

changes in the layout of the page
readme created for php file that manages connection to the database

laira 3 years ago
parent
commit
0310dc3f07
7 changed files with 108 additions and 69 deletions
  1. 3 38
      index.html
  2. 6 6
      js/circleOne.js
  3. 1 1
      js/globals.js
  4. 6 6
      js/squareOne.js
  5. 4 4
      js/squareTwo.js
  6. 78 0
      php/README.md
  7. 10 14
      php/save.php

+ 3 - 38
index.html

@@ -53,52 +53,17 @@
 		<div class="clearfix"></div>
 
 		<div class="panel panel-primary">
-		<div class="panel-heading">IFRACTIONS GAME</div>
+		<div class="panel-heading">iFractions game :: by LInE</div>
 			<div class="panel-body">
-				<!-- iFractions game -->
-				<canvas id="iFractions-canvas"></canvas>
-				<!-- Textbox to get player name -->
-				<div id="textbox" onsubmit="return false">
+				<canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->
+				<div id="textbox" onsubmit="return false"> <!-- Textbox to get player name -->
 					<input type="text" id="textbox-content" value="" size="13" maxlength="36">
 				</div>
-				
 			</div>
 		</div>
 
 		<div id="display-fps"><!-- Display fps in debugmode --></div>
 
-		<div class="panel panel-info">
-			<div class="panel-heading">TEAM</div>
-			<div class="panel-body text-center">
-				<ul>
-					<li><strong>BRAZIL:</strong> Le&ocirc;nidas de Oliveira Brand&atilde;o (IME-USP)</li>
-					<li><strong>PERU:</strong> Manuel Ibarra and Cristhian Serrano (EAPIIS-UNAMBA)</li>
-					<li><strong>FRANCE:</strong> Jean-Marc (MOCAH-UPMC)</li>
-				</ul>
-			</div>
-		</div>
-
-		<div class="panel panel-default">
-			<div class="panel-heading">BASED ON</div>
-			<div class="panel-body text-center">
-				<ul>
-					<li><strong>iLM </strong>(interactive Learning Modules) </li>
-					<li><strong>Six facets of Serious Game Design</strong>: Pedagogical Objectives; Domain Simulation;
-						Interactions with the Simulation;<br>Problems and Progression; Decorum and Conditions of Use.
-					</li>
-				</ul>
-			</div>
-		</div>
-
-		<div class="panel panel-danger">
-			<div class="panel-heading">TECHNOLOGY</div>
-			<div class="panel-body text-center">
-				<ul>
-					<li> We used <strong>HTML5</strong>, <strong>CSS</strong> and <strong>Javascript</strong></li>
-				</ul>
-			</div>
-		</div>
-
 	</div>
 
 	<!-- Load all js files -->

+ 6 - 6
js/circleOne.js

@@ -48,7 +48,7 @@ const circleOne = {
         this.result = false; // Game is correct
         this.count = 0;
 
-        this.divisorsList = ''; // Used in func_postScore
+        this.divisorsList = ''; // Used in postScore()
 
         let hasBaseDifficulty = false; // Will validate that level isnt too easy (has at least one '1/difficulty' fraction)         
 
@@ -131,7 +131,7 @@ const circleOne = {
 
             if (divisor == gameDifficulty) hasBaseDifficulty = true; // True if after for ends has at least 1 '1/difficulty' fraction
 
-            this.divisorsList += divisor + ','; // Add this divisor to the list of divisors (for func_postScore)
+            this.divisorsList += divisor + ','; // Add this divisor to the list of divisors (for postScore())
 
             // Set each circle direction
             let direction;
@@ -278,7 +278,7 @@ const circleOne = {
 
 
         if (!this.restart) {
-            game.timer.start(); // Set a timer for the current level (used in func_postScore)
+            game.timer.start(); // Set a timer for the current level (used in postScore())
 
             game.event.add('click', this.func_onInputDown);
             game.event.add('mousemove', this.func_onInputOver);
@@ -394,7 +394,7 @@ const circleOne = {
                 game.add.image(defaultWidth / 2, defaultHeight / 2, 'error').anchor(0.5, 0.5);
             }
 
-            self.func_postScore();
+            self.postScore();
 
             self.animateEnding = true;
             self.checkAnswer = false;
@@ -652,9 +652,9 @@ const circleOne = {
     /**
      * Saves players data after level
      */
-    func_postScore: function () {
+    postScore: function () {
 
-        // Create some variables we need to send to our PHP file
+        // Saves player data to send to the database
         const data = '&s_game=' + gameShape
             + '&s_mode=' + levelType
             + '&s_oper=' + sublevelType

+ 1 - 1
js/globals.js

@@ -463,7 +463,7 @@ const navigationIcons = {
 const postScore = function (extraData) {
 
 	// Create some variables we need to send to our PHP file
-	const data = 's_ip=143.107.45.11'
+	const data = 's_ip=143.107.45.11' // INSERT database server IP
 		+ '&s_name=' + playerName
 		+ '&s_lang=' + langString
 		+ extraData;

+ 6 - 6
js/squareOne.js

@@ -44,7 +44,7 @@ const squareOne = {
         this.result = false;        // Checks player 'answer' 
         this.count = 0;             // An 'x' position counter used in the tractor animation        
 
-        this.divisorsList = '';     // Hold the divisors for each fraction on stacked blocks (created for func_postScore)
+        this.divisorsList = '';     // Hold the divisors for each fraction on stacked blocks (created for postScore())
 
         this.DIREC_LEVEL = (sublevelType == 'Minus') ? -1 : 1;    // Will be multiplied to values to easily change tractor direction when needed
         this.animationSpeed = 2 * this.DIREC_LEVEL;   // X distance in which the tractor moves in each iteration of the animation
@@ -154,7 +154,7 @@ const squareOne = {
 
 
         if (!this.restart) {
-            game.timer.start(); // Set a timer for the current level (used in func_postScore)
+            game.timer.start(); // Set a timer for the current level (used in postScore())
 
             game.event.add('click', this.func_onInputDown);
             game.event.add('mousemove', this.func_onInputOver);
@@ -289,7 +289,7 @@ const squareOne = {
 
             }
 
-            self.func_postScore();
+            self.postScore();
 
 
 
@@ -574,7 +574,7 @@ const squareOne = {
             let divisor = game.math.randomInRange(1, gameDifficulty); // Set divisor for fraction
             if (divisor == gameDifficulty) hasBaseDifficulty = true;
             if (divisor == 3) divisor = 4; // Make sure valid divisors are 1, 2 and 4 (not 3)
-            self.divisorsList += divisor + ','; // List of divisors (for func_postScore())
+            self.divisorsList += divisor + ','; // List of divisors (for postScore())
 
             const curBlockWidth = self.defaultBlockWidth / divisor; // Current width is a fraction of the default
 
@@ -774,9 +774,9 @@ const squareOne = {
     /**
      * Saves players data after level 
      */
-    func_postScore: function () {
+    postScore: function () {
 
-        // Create some variables we need to send to our PHP file
+        // Saves player data to send to the database
         const data = '&s_game=' + gameShape
             + '&s_mode=' + levelType
             + '&s_oper=' + sublevelType

+ 4 - 4
js/squareTwo.js

@@ -219,7 +219,7 @@ const squareTwo = {
 
 
 
-        game.timer.start(); // Set a timer for the current level (used in func_postScore)
+        game.timer.start(); // Set a timer for the current level (used in postScore)
 
         game.event.add('click', this.func_onInputDown);
         game.event.add('mousemove', this.func_onInputOver);
@@ -291,7 +291,7 @@ const squareTwo = {
 
                 }
 
-                self.func_postScore();
+                self.postScore();
 
                 self.endLevel = true;
 
@@ -514,9 +514,9 @@ const squareTwo = {
     /**
      * Saves players data after level
      */
-    func_postScore: function () {
+    postScore: function () {
 
-        // Create some variables we need to send to our PHP file
+        // Saves player data to send to the database
         const data = '&s_game=' + gameShape
             + '&s_mode=' + levelType
             + '&s_oper=Equal'

+ 78 - 0
php/README.md

@@ -0,0 +1,78 @@
+#  save.php
+
+iFractions is developed to run mainly on the client side. However, it communicates with a database using MySQL to save the player information after each level. The file **save.php** manages the connection between the game and the database.
+
+# How to set up the database connection correctly
+
+In order for iFractions to successfully establish a connection to the database you must:
+
+1. set up a MySQL database.
+2. update /php/save.php 
+3. update /js/globals.js
+
+## 1) Creating the MySQL database for iFractions
+
+You must have MySQL installed on the server. 
+
+Considering the database name to be **db_ifractins** and the table to be **ifractions**, you can setup the MySQL database as follows:
+
+	CREATE DATABASE db_ifractions;
+
+	USE db_ifractions;
+
+	CREATE TABLE ifractions (
+		id int(11) NOT NULL AUTO_INCREMENT,
+		s_hostip varchar(255) DEFAULT NULL,
+		s_playername varchar(256) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_datetime varchar(20) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_lang varchar(6) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_game varchar(10) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_mode varchar(1) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_operator varchar(5) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_level int(5) NOT NULL,
+		s_mappos int(5) NOT NULL,
+		s_result varchar(6) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_time varchar(20) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		s_details varchar(120) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
+		PRIMARY KEY (id)
+	) ENGINE = InnoDB AUTO_INCREMENT = 1816 DEFAULT CHARSET = latin1;
+
+## 2) /php/save.php
+
+You have to set values for the following variables in **/php/save.php** to match the database's:
+
+	$servername = "localhost"; 	// INSERT MYSQL server name
+	$username = "put_username";	// INSERT MySQL user name
+	$password = "put_password";	// INSERT MySQL password
+	$dbname = "db_ifractions";	// INSERT database name (default=db_ifractions) 
+	$tablename = "ifractions";	// INSERT table name (default=ifractions)
+
+## 3) /js/globals.js
+
+There is a global function **postScore() ** inside /js/globals.js. When the information is collected on the current game file, it is sent as a parameter to this function. Here is where all the information collecting is completed, the data is sent to /php/save.php and the connection to the database done.
+
+	const data = 's_ip='// INSERT the IP of the machine where the MySQL was set up
+		+ '&s_name=' + //player's name
+		+ '&s_lang=' + // selected language for the game
+		+ // data received from the game as parameter to this function
+
+
+# Where do we use the database in the code?
+
+There is also a function **postScore()** in every game file:
+* /js/gameSquareOne.js
+* /js/gameSquareTwo.js
+* /js/gameCircleOne.js
+
+After each level is completed, information about the player's progress is sent do the database through the function **postScore()**. The data collected in the game is structured as a string that is going to be sent to the database (as can be seen below).
+
+	const data = '&s_game=' +	// collect game shape
+	+ '&s_mode=' +	// collect level type
+	+ '&s_oper=' +	// collect sublevelType
+	+ '&s_leve=' +	// collect the selected difficulty for the game
+	+ '&s_posi=' +	// collect the players position on the map
+	+ '&s_resu=' +	// collect status for players answer (correct or incorrect)
+	+ '&s_time=' +	// collect time spent finishing the game
+	+ '&s_deta=' +	// collect extra details specific to current game
+
+The variable **data** is then sent as a parameter to the global function **postScore()** in **/js/globals.js**, that completes the string and sends the information to the database using /php/save.php.

+ 10 - 14
php/save.php

@@ -1,17 +1,18 @@
 <?php
-
-// IMPORTANT
-
-// * database name : db_ifractions
-// * table name : ifractions
-
-// php/save.php on line 24, referer: http://milanesa.ime.usp.br/ifractions1/
-
 // @see js/globals.js
 // @see js/circleOne.js
 // @see js/squareOne.js
 // @see js/squareTwo.js
 
+// change these values according to your database settings
+
+$servername = "localhost"; 	// INSERT MySQL name
+$username = "put_username";	// INSERT MySQL user name
+$password = "put_password"; // INSERT MySQL password
+$dbname = "db_ifractions";	// INSERT database name (default=db_ifractions) 
+
+$tablename = "ifractions";	// INSERT table name (default=ifractions)
+
 function remove_accents ($stripAccents) {
   /*
   $stripAccents = strtr($stripAccents,
@@ -38,11 +39,6 @@ function clientIP () {
   return $strIP;
 }
 
-$servername = "localhost";
-$username = "root"; // put here the name of user root of MySQL
-$password = "put_paswd"; // put here the password of user root of MySQL
-$dbname = "put_name_of_base"; // put here the name of data base used to register iFraction use
-
 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname);
 
@@ -75,7 +71,7 @@ if (is_object($lang))
   $lang = json_decode($lang);
 
 // Table 'ifractions': id s_hostip s_playername s_datetime s_lang s_game s_mode s_operator s_level s_mappos s_result s_time s_details
-$sql = "INSERT INTO ifractions
+$sql = "INSERT INTO $tablename
 (s_hostip, s_playername, s_datetime, s_lang, s_game, s_mode, s_operator, s_level, s_mappos, s_result, s_time, s_details)
 VALUES
 ('$ip', '$name', '$date', '$lang', '$game', '$mode', '$oper', $leve, $posi, '$resu', $time, '$deta')";