index.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title> iFractions </title>
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7. <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
  8. <link rel="stylesheet" type="text/css" href="css/jquery.modal.min.css">
  9. <script type="text/javascript" src="js/phaser.min.js"></script>
  10. <script type="text/javascript" src="js/jquery.js"></script>
  11. <script type="text/javascript" src="js/jquery-ui.js"></script>
  12. <script type="text/javascript" src="js/jquery.modal.min.js"></script>
  13. <script type="text/javascript" src="js/boot.js"></script>
  14. <script type="text/javascript" src="js/menu.js"></script>
  15. <script type="text/javascript" src="js/circleOne.js"></script>
  16. <script type="text/javascript" src="js/squareOne.js"></script>
  17. <script type="text/javascript" src="js/squareTwo.js"></script>
  18. <script>
  19. function getParameterByName(name) {
  20. var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
  21. return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
  22. }
  23. function getAnswer() {
  24. if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
  25. var str = "{"
  26. + '"shape": "' + jogo.shape
  27. + '", "modo": "' + jogo.modo
  28. + '", "label": "' + jogo.label
  29. + '", "operator": "' + jogo.operator
  30. + '", "difficulty": "' + jogo.difficulty
  31. + '", "num": "' + jogo.num
  32. + '", "results": {';
  33. for (j = 0; j < iterator; j++) {
  34. str += '"' + (j + 1) + '": { "phase": "' + (j + 1)
  35. + '", "hits": "' + hits[j]
  36. + '", "errors": "' + errors[j]
  37. + '", "start": "' + start[j]
  38. + '", "end": "' + end[j]
  39. + '" }' + ((j + 1 < iterator) ? "," : "");
  40. }
  41. str += "}}";
  42. return str;
  43. } else {
  44. console.log("getAnswer:: called");
  45. if (modulo < 1) {
  46. alert(words.error_module);
  47. return x;
  48. }
  49. if (difficulty < 1) {
  50. alert(words.error_difficulty);
  51. return x;
  52. }
  53. if (num < 5) {
  54. return '{'
  55. + '"shape": "' + (modules_names[modulo].split(",")[0] === words.square_name ? "Square" : "Circle")
  56. + '", "modo": "' + modos[modulo]
  57. + '", "label": "' + labels[modulo]
  58. + '", "operator": "' + (operation == 1 ? "Plus" : (operation == 2 ? "Minus" : (operation == 3 ? "Mixed" : "Equals")))
  59. + '", "difficulty": "' + difficulty
  60. + '", "num": "' + num
  61. + '"}';
  62. } else {
  63. return '{'
  64. + '"shape": "' + (modules_names[modulo].split(",")[0] === words.square_name ? "Square" : "Circle")
  65. + '", "modo": "' + (operation == 1 ? "A" : (operation == 2 ? "B" : "C"))
  66. + '", "label": "' + labels[modulo]
  67. + '", "operator": "' + (operation == 1 ? "Plus" : (operation == 2 ? "Minus" : (operation == 3 ? "Mixed" : "Equals")))
  68. + '", "difficulty": "' + difficulty
  69. + '", "num": "' + num
  70. + '"}';
  71. }
  72. }
  73. }
  74. function getEvaluation() {
  75. console.log("getEvaluation:: called");
  76. getEvaluationCallback(1); // verificar com o professor:: uma fórmula para compor a nota do aluno
  77. }
  78. function getEvaluationCallback(nota) {
  79. console.log("getEvaluationCallback:: called");
  80. if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
  81. parent.getEvaluationCallback(nota);
  82. }
  83. }
  84. var iLMparameters = {
  85. iLM_PARAM_ServerToGetAnswerURL: getParameterByName("iLM_PARAM_ServerToGetAnswerURL"),
  86. iLM_PARAM_SendAnswer: getParameterByName("iLM_PARAM_SendAnswer"),
  87. iLM_PARAM_AssignmentURL: getParameterByName("iLM_PARAM_AssignmentURL"),
  88. iLM_PARAM_Assignment: getParameterByName("iLM_PARAM_Assignment"),
  89. lang: getParameterByName("lang")
  90. };
  91. function trackAction(action) {
  92. $.post(iLMparameters.iLM_PARAM_ServerToGetAnswerURL + "&track=1", {trackingData: "html=1;" + action}, function (d) {});
  93. }
  94. </script>
  95. <style>
  96. .input-hidden {
  97. position: absolute;
  98. left: -9999px;
  99. }
  100. input[type=radio]:checked + label>img {
  101. border: 1px solid #fff;
  102. box-shadow: 0 0 3px 3px #090;
  103. filter: grayscale(0%);
  104. }
  105. input[type=radio] + label>img {
  106. width: 80px;
  107. height: 80px;
  108. margin-left: 5px;
  109. filter: grayscale(100%);
  110. transition: 500ms all;
  111. }
  112. #form-create img:hover {
  113. filter: grayscale(0%);
  114. }
  115. #select_module, #select_difficulty, #options_summary_title {
  116. text-align: left;
  117. padding: 15px;
  118. }
  119. #options_module, #options_diff {
  120. text-align: left;
  121. padding-left: 40px;
  122. }
  123. .img_difficulty {
  124. width: 80px !important;
  125. margin-right: 20px;
  126. margin-top: 20px;
  127. }
  128. #results-title {
  129. font-size: 140%;
  130. border-bottom: 2px solid #c9d1dd;
  131. padding-bottom: 5px;
  132. }
  133. #results-image, #results-info {
  134. float: left;
  135. margin-top: 10px;
  136. }
  137. #results-image img {
  138. width: 80px;
  139. height: 80px;
  140. }
  141. #results-info {
  142. margin-left: 15px;
  143. margin-top: 20px;
  144. font-size: 120%;
  145. }
  146. #bl {
  147. width: 100%;
  148. height: 105px;
  149. border-bottom: 2px solid #c9d1dd;
  150. }
  151. .results-levels {
  152. border-bottom: 2px solid #c9d1dd;
  153. padding: 10px;
  154. }
  155. .results-levels img {
  156. width: 60px;
  157. }
  158. .numphase {
  159. float: left;
  160. margin-top: -50px;
  161. margin-left: 25px;
  162. position: absolute;
  163. z-index: 9999;
  164. color: white;
  165. font-size: 20px;
  166. font-weight: bold;
  167. }
  168. .panel-body, .panel-primary {
  169. padding: 0;
  170. border: none;
  171. height: auto;
  172. width: auto;
  173. margin: 0;
  174. }
  175. .results-levels-item {
  176. margin-top: -70px;
  177. margin-left: 75px;
  178. }
  179. .container {
  180. width: auto;
  181. padding: 0;
  182. margin: 0;
  183. }
  184. .close-modal {
  185. margin: 10px;
  186. }
  187. .modal-title {
  188. text-align: center;
  189. font-size: 24px;
  190. font-weight: bold;
  191. }
  192. .modal-geral {
  193. font-size: 16px;
  194. margin: 10px;
  195. }
  196. .modal-coop {
  197. padding: 5px;
  198. border: 1px solid #4286f4;
  199. background-color: #c5d9f9;
  200. border-radius: 10px 10px 0 0;
  201. margin-top: 10px;
  202. font-weight: bold;
  203. }
  204. .modal-coop-content {
  205. border: 1px solid #4286f4;
  206. margin-top: -1px;
  207. padding: 5px;
  208. border-radius: 0 0 10px 10px;
  209. }
  210. .modal-based {
  211. padding: 5px;
  212. border: 1px solid #ff5e5e;
  213. background-color: #f9dbdb;
  214. border-radius: 10px 10px 0 0;
  215. margin-top: 10px;
  216. font-weight: bold;
  217. }
  218. .modal-based-content {
  219. border: 1px solid #ff5e5e;
  220. margin-top: -1px;
  221. padding: 5px;
  222. border-radius: 0 0 10px 10px;
  223. }
  224. .modal-tech {
  225. padding: 5px;
  226. border: 1px solid #109b0d;
  227. background-color: #b6ffb5;
  228. border-radius: 10px 10px 0 0;
  229. margin-top: 10px;
  230. font-weight: bold;
  231. }
  232. .modal-tech-content {
  233. border: 1px solid #109b0d;
  234. margin-top: -1px;
  235. padding: 5px;
  236. border-radius: 0 0 10px 10px;
  237. }
  238. .results-levels:hover {
  239. background: #f5f5f5;
  240. }
  241. </style>
  242. </head>
  243. <body>
  244. <div class="container">
  245. <div class="clearfix"></div>
  246. <div class="panel panel-primary">
  247. <!--<div class="panel-heading">FRACTIONS GAME</div>-->
  248. <div class="panel-body">
  249. <center>
  250. <div id="fractions-game" style="padding: 0 auto 0 auto;">
  251. <div id="form-create" style="display: none;">
  252. <script>
  253. //
  254. var words = [];
  255. var modules_names = [''];
  256. var total_levels = [0, 2, 2, 3, 3, 3, 2, 2, 3, 3];
  257. var levels = [0, 3, 3, 5, 5, 5, 3, 3, 5, 5];
  258. var modos = ['', 'A', 'A', 'A', 'A', 'C', 'B', 'B', 'B', 'B'];
  259. var labels = [false, true, false, true, false, false, true, false, true, false];
  260. var operation_img = [''];
  261. var operation;
  262. var difficulty = 0;
  263. var modulo = 0;
  264. var num;
  265. var redir = true;
  266. var url_lang;
  267. if (iLMparameters.lang == "en")
  268. url_lang = "en_US";
  269. if (iLMparameters.lang == "pt")
  270. url_lang = "pt_BR";
  271. if (iLMparameters.lang == "fr")
  272. url_lang = "fr_FR";
  273. if (iLMparameters.lang == "es")
  274. url_lang = "es_PE";
  275. $.getJSON("resource/lang/" + url_lang + ".json", function (data) {
  276. $.each(data, function (key, val) {
  277. words[key] = val;
  278. });
  279. $("#select_module").html(words.select_module + ":");
  280. $("#select_difficulty").html(words.select_operation + ":");
  281. $("#options_summary_title").html(words.options_summary + ":");
  282. $("#options_module").html(words.options_module + ":");
  283. $("#options_diff").html(words.options_difficulty + ":");
  284. modules_names[1] = words.square_name + ", " + words.mode_name + " A, " + words.with_name + " " + words.label_name;
  285. modules_names[2] = words.square_name + ", " + words.mode_name + " A, " + words.without_name + " " + words.label_name;
  286. modules_names[3] = words.circle_name + ", " + words.mode_name + " A, " + words.with_name + " " + words.label_name;
  287. modules_names[4] = words.circle_name + ", " + words.mode_name + " A, " + words.without_name + " " + words.label_name;
  288. modules_names[5] = words.square_name + ", " + words.mode_name + " C, " + words.without_name + " " + words.label_name;
  289. modules_names[6] = words.square_name + ", " + words.mode_name + " B, " + words.with_name + " " + words.label_name;
  290. modules_names[7] = words.square_name + ", " + words.mode_name + " B, " + words.without_name + " " + words.label_name;
  291. modules_names[8] = words.circle_name + ", " + words.mode_name + " B, " + words.with_name + " " + words.label_name;
  292. modules_names[9] = words.circle_name + ", " + words.mode_name + " B, " + words.without_name + " " + words.label_name;
  293. for (i = 1; i < modules_names.length; i++) {
  294. $("#img_" + i).attr("title", modules_names[i]);
  295. }
  296. operation_img[1] = "help/arrow.png,help/arrow_2.png";
  297. operation_img[2] = "help/arrow.png,help/arrow_2.png";
  298. operation_img[3] = "help/arrow.png,help/arrow_2.png,help/double.png";
  299. operation_img[4] = "help/arrow.png,help/arrow_2.png,help/double.png";
  300. operation_img[5] = ",operator/equal.png,";
  301. operation_img[6] = "help/arrow.png,help/arrow_2.png";
  302. operation_img[7] = "help/arrow.png,help/arrow_2.png";
  303. operation_img[8] = "help/arrow.png,help/arrow_2.png,help/double.png";
  304. operation_img[9] = "help/arrow.png,help/arrow_2.png,help/double.png";
  305. });
  306. $(function () {
  307. $(document).tooltip();
  308. });
  309. function show_operation_and_difficulty(opt) {
  310. difficulty = 0;
  311. $("#div_difficulty").css("display", "block");
  312. $("#div_summary").css("display", "none");
  313. $("#options_module").html(words.options_module + ":");
  314. $("#options_diff").html(words.options_difficulty + ":");
  315. modulo = parseInt(opt.value);
  316. num = (modulo == 1 ? 1 : (modulo == 2 ? 2 : (modulo == 3 ? 1 : (modulo == 4 ? 2 : (modulo == 5 ? 5 : (modulo == 6 ? 3 : (modulo == 7 ? 4 : (modulo == 8 ? 3 : 4))))))));
  317. var i;
  318. var divs = "";
  319. var id = 1;
  320. for (i = 0; i < total_levels[modulo]; i++) {
  321. var j;
  322. divs += "<div style='margin-bottom: 20px;'>";
  323. if (operation_img[modulo].split(",")[i] !== '') {
  324. divs += "<img class='img_difficulty' src='resource/img/global/" + operation_img[modulo].split(",")[i] + "'>";
  325. } else {
  326. divs += "<div class='img_difficulty' style='display:inline;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>";
  327. }
  328. for (j = 0; j < levels[modulo]; j++) {
  329. divs += "<input type='radio' name='difficulty' id='diff_" + id + "' class='input-hidden' value='" + i + "," + j + "' onchange='change_operation_and_difficulty(" + (i + 1) + "," + (j + 1) + ")' /> <label for='diff_" + id + "'> <img src='resource/img/global/dot.png' style='height: " + ((j + 1) * 20) + "px; width: 30px; margin-bottom: -" + (((levels[modulo] + 1) * 20) - ((j + 1) * 20)) + "px;' /> </label>";
  330. id++;
  331. }
  332. divs += "</div>";
  333. }
  334. $("#options_difficulty").html(divs);
  335. $("#options_module").html(words.options_module + ": " + modules_names[modulo]);
  336. }
  337. function change_operation_and_difficulty(op, dif) {
  338. $("#div_summary").css("display", "block");
  339. operation = parseInt(op);
  340. difficulty = parseInt(dif);
  341. var op_text = "";
  342. switch (operation) {
  343. case 1:
  344. op_text = words.options_plus;
  345. break;
  346. case 2:
  347. op_text = words.options_minus;
  348. break;
  349. case 3:
  350. op_text = words.options_mixed;
  351. break;
  352. case 4:
  353. op_text = words.options_equals;
  354. break;
  355. }
  356. $("#options_diff").html(words.options_difficulty + ": " + op_text + ", " + difficulty);
  357. }
  358. </script>
  359. <div id="select_module"></div>
  360. <input
  361. type="radio" name="emotion"
  362. id="in1" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="1" />
  363. <label for="in1">
  364. <img id="img_1" src="resource/img/global/game/one-s.png" title="" />
  365. </label>
  366. <input
  367. type="radio" name="emotion"
  368. id="in2" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="2" />
  369. <label for="in2">
  370. <img id="img_2" src="resource/img/global/game/two-s.png" title="" />
  371. </label>
  372. <input
  373. type="radio" name="emotion"
  374. id="in3" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="3" />
  375. <label for="in3">
  376. <img id="img_3" src="resource/img/global/game/one-c.png" title="" />
  377. </label>
  378. <input
  379. type="radio" name="emotion"
  380. id="in4" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="4" />
  381. <label for="in4">
  382. <img id="img_4" src="resource/img/global/game/two-c.png" title="" />
  383. </label>
  384. <input
  385. type="radio" name="emotion"
  386. id="in5" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="5" />
  387. <label for="in5">
  388. <img id="img_5" src="resource/img/global/game/five-s.png" title="" />
  389. </label>
  390. <input
  391. type="radio" name="emotion"
  392. id="in6" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="6" />
  393. <label for="in6">
  394. <img id="img_6" src="resource/img/global/game/three-s.png" title="" />
  395. </label>
  396. <input
  397. type="radio" name="emotion"
  398. id="in7" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="7" />
  399. <label for="in7">
  400. <img id="img_7" src="resource/img/global/game/four-s.png" title="" />
  401. </label>
  402. <input
  403. type="radio" name="emotion"
  404. id="in8" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="8" />
  405. <label for="in8">
  406. <img id="img_8" src="resource/img/global/game/three-c.png" title="" />
  407. </label>
  408. <input
  409. type="radio" name="emotion"
  410. id="in9" class="input-hidden" onchange="show_operation_and_difficulty(this)" value="9" />
  411. <label for="in9">
  412. <img id="img_9" src="resource/img/global/game/four-c.png" title="" />
  413. </label>
  414. <div id="div_difficulty" style="display:none;">
  415. <div id="select_difficulty"></div>
  416. <div id="options_difficulty"></div>
  417. </div>
  418. <div id="div_summary" style="display:none;">
  419. <div id="options_summary_title"></div>
  420. <div id="options_summary_text">
  421. <div id="options_module"></div>
  422. <div id="options_diff"></div>
  423. </div>
  424. </div>
  425. </div>
  426. </div>
  427. </center>
  428. <div id="results" style="display: none;">
  429. <div id="results-title"></div>
  430. <div id="bl">
  431. <div id="results-image"></div>
  432. <div id="results-info"></div>
  433. </div>
  434. <div id="results-details"></div>
  435. </div>
  436. </div>
  437. </div>
  438. <!--
  439. <div class="panel panel-info">
  440. <div class="panel-heading">COOPERATION TEAM</div>
  441. <div class="panel-body">
  442. <center>
  443. <ul>
  444. <li><strong>BRAZIL:</strong> Le&ocirc;nidas de Oliveira Brand&atilde;o (IME-USP)</li>
  445. <li><strong>PERU:</strong> Manuel Ibarra and Cristhian Serrano (EAPIIS-UNAMBA)</li>
  446. <li><strong>FRANCE:</strong> Jean-Marc (MOCAH-UPMC)</li>
  447. </ul>
  448. </center>
  449. </div>
  450. </div>
  451. <div class="panel panel-default">
  452. <div class="panel-heading">BASED ON</div>
  453. <div class="panel-body">
  454. <center>
  455. <ul>
  456. <li><strong>iLM </strong>(interactive Learning Modules) </li>
  457. <li><strong>Six facets of Serious Game Design</strong>:<br>
  458. Pedagogical Objectives; Domain Simulation; Interactions with the Simulation; Problems and Progression; Decorum and Conditions of Use.
  459. </li>
  460. </ul>
  461. </center>
  462. </div>
  463. </div>
  464. <div class="panel panel-danger">
  465. <div class="panel-heading">TECHNOLOGY</div>
  466. <div class="panel-body">
  467. <center>
  468. <ul>
  469. <li> We used <strong>HTML5</strong>, <strong>CSS</strong> and the <strong>Javascript</strong> Library <a href="http://phaser.io/" target="_blank"><strong>Phaser.io</strong></a> </li>
  470. </ul>
  471. </center>
  472. </div>
  473. </div>
  474. -->
  475. </div>
  476. </body>
  477. <script type="text/javascript">
  478. // If SendAnswer (student) ::Igor
  479. if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {
  480. // Initialize the game
  481. var game = new Phaser.Game(900, 600, Phaser.CANVAS, 'fractions-game');
  482. hip = "143.107.45.11"; //Host ip
  483. /*name = ""; //player name*/
  484. lang = ""; //language
  485. var timer, totalTime;
  486. // Game One
  487. onePosition = 0; //Map position
  488. oneMove = false; //Move to next position
  489. oneDifficulty = 0; //From one to five
  490. oneOperator = ""; //Plus; Minus; Mixed
  491. oneLabel = false; //Show block label
  492. oneShape = ""; //Circle; square
  493. oneType = ""; // A - Place distance; B - Select blocks
  494. oneMenu = true;
  495. // Game Two
  496. twoPosition = 0; //Map position
  497. twoMove = false; //Move to next position
  498. twoDifficulty = 0; //From one to five
  499. twoOperator = ""; //Plus; Minus; Mixed
  500. twoLabel = false; //Show block label
  501. twoShape = ""; //Circle; square
  502. twoType = ""; // A - Normal position; B - Random position
  503. twoMenu = true;
  504. //adding game states (scenes)
  505. game.state.add('boot', bootState);
  506. game.state.add('load', loadState);
  507. game.state.add('name', nameState);
  508. game.state.add('menu', menuState);
  509. game.state.add('menuCOne', menuCircleOne);
  510. game.state.add('mapCOne', mapCircleOne);
  511. game.state.add('gameCOne', gameCircleOne);
  512. game.state.add('endCOne', endCircleOne);
  513. game.state.add('menuSOne', menuSquareOne);
  514. game.state.add('mapSOne', mapSquareOne);
  515. game.state.add('gameSOne', gameSquareOne);
  516. game.state.add('endSOne', endSquareOne);
  517. game.state.add('menuSTwo', menuSquareTwo);
  518. game.state.add('mapSTwo', mapSquareTwo);
  519. game.state.add('gameSTwo', gameSquareTwo);
  520. game.state.add('endSTwo', endSquareTwo);
  521. lang = url_lang;
  522. var jogo = [];
  523. $.get(iLMparameters.iLM_PARAM_Assignment, function (d) {
  524. if (d != null) {
  525. $.each(d, function (key, val) {
  526. jogo[key] = val;
  527. });
  528. register_start();
  529. if (jogo.hasOwnProperty('results')) {
  530. $("#fractions-game").css("display", "none");
  531. $("#results").css("display", "block");
  532. var results = [];
  533. $.each(jogo.results, function (key, val) {
  534. results[key] = val;
  535. });
  536. $("#results-title").html(words.results_title);
  537. $("#results-info").html(words.results_operation + ": " + jogo.operator + "<br>" + words.results_difficulty + ": " + jogo.difficulty);
  538. var dd = "";
  539. for (i = 1; i < results.length; i++) {
  540. dd += "<div class='results-levels'> <img src='resource/img/en_US/sign.png'><div class='numphase'>" + i + "</div> ";
  541. dd += "<div class='results-levels-item'>" + words.results_start + ": " + timeConverter(results[i].start);
  542. dd += " " + words.results_end + ": " + timeConverter(results[i].end);
  543. errors[i - 1] = results[i].errors;
  544. hits[i - 1] = results[i].hits;
  545. start[i - 1] = results[i].start;
  546. end[i - 1] = results[i].end;
  547. iterator++;
  548. var temp = results[i].end - results[i].start;
  549. dd += "<br>" + words.results_time + ": " + ("" + temp + "").toHHMMSS();
  550. dd += "<br>" + words.results_hits + ": " + results[i].hits;
  551. dd += "<br>" + words.results_errors + ": " + results[i].errors;
  552. //dd += "<br>" + words.results_grade + ": ";
  553. dd += "</div></div>";
  554. }
  555. $("#results-details").html(dd);
  556. var icone = "";
  557. if (jogo.shape == "Square") {
  558. if (jogo.modo == "A") {
  559. if (jogo.label == true) {
  560. icone = "one-s.png";
  561. } else {
  562. icone = "two-s.png";
  563. }
  564. }
  565. if (jogo.modo == "B") {
  566. if (jogo.label == true) {
  567. icone = "three-s.png";
  568. } else {
  569. icone = "four-s.png";
  570. }
  571. }
  572. if (jogo.modo == "C") {
  573. icone = "five-s.png";
  574. }
  575. } else {
  576. if (jogo.modo == "A") {
  577. if (jogo.label == true) {
  578. icone = "one-c.png";
  579. } else {
  580. icone = "two-c.png";
  581. }
  582. }
  583. if (jogo.modo == "B") {
  584. if (jogo.label == true) {
  585. icone = "three-c.png";
  586. } else {
  587. icone = "four-c.png";
  588. }
  589. }
  590. }
  591. $("#results-image").html("<img src='resource/img/global/game/" + icone + "'>");
  592. } else {
  593. //starting to boot game
  594. game.state.start('boot');
  595. }
  596. } else
  597. alert('Erro: nao consegui ler o conteudo de ' + iLMparameters.iLM_PARAM_Assignment);
  598. }, "json");
  599. var conta = true;
  600. var iterator = 0;
  601. var hits = [0, 0, 0, 0];
  602. var errors = [0, 0, 0, 0];
  603. var start = [0, 0, 0, 0];
  604. var end = [0, 0, 0, 0];
  605. } else { // If Not SendAnswer (teacher) ::Igor
  606. $("#form-create").css("display", "block");
  607. }
  608. function sendResults(final) {
  609. var str = "{"
  610. + '"shape": "' + jogo.shape
  611. + '", "modo": "' + jogo.modo
  612. + '", "label": "' + jogo.label
  613. + '", "operator": "' + jogo.operator
  614. + '", "difficulty": "' + jogo.difficulty
  615. + '", "num": "' + jogo.num
  616. + '", "results": {';
  617. for (j = 0; j < iterator; j++) {
  618. str += '"' + (j + 1) + '": { "phase": "' + (j + 1)
  619. + '", "hits": "' + hits[j]
  620. + '", "errors": "' + errors[j]
  621. + '", "start": "' + start[j]
  622. + '", "end": "' + end[j]
  623. + '" }' + ((j + 1 < iterator) ? "," : "");
  624. }
  625. str += "}}";
  626. console.log(str);
  627. $.post(iLMparameters.iLM_PARAM_ServerToGetAnswerURL, {return_get_answer: 1, iLM_PARAM_ActivityEvaluation: final, iLM_PARAM_ArchiveContent: str}, function (d) {});
  628. }
  629. function register_start() {
  630. var str = "{"
  631. + '"shape": "' + jogo.shape
  632. + '", "modo": "' + jogo.modo
  633. + '", "label": "' + jogo.label
  634. + '", "operator": "' + jogo.operator
  635. + '", "difficulty": "' + jogo.difficulty
  636. + '", "num": "' + jogo.num
  637. + '"';
  638. str += "}";
  639. $.post(iLMparameters.iLM_PARAM_ServerToGetAnswerURL, {iLM_PARAM_ActivityEvaluation: 0, iLM_PARAM_ArchiveContent: str}, function (d) {});
  640. }
  641. function finish_redirect() {
  642. parent.location.reload(true);
  643. }
  644. function timeConverter(UNIX_timestamp) {
  645. var a = new Date(UNIX_timestamp * 1000);
  646. var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  647. var year = a.getFullYear();
  648. var month = months[a.getMonth()];
  649. var date = a.getDate();
  650. var hour = a.getHours();
  651. var min = a.getMinutes();
  652. var sec = a.getSeconds();
  653. var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec;
  654. return time;
  655. }
  656. String.prototype.toHHMMSS = function () {
  657. var sec_num = parseInt(this, 10); // don't forget the second param
  658. var hours = Math.floor(sec_num / 3600);
  659. var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  660. var seconds = sec_num - (hours * 3600) - (minutes * 60);
  661. if (hours < 10) {
  662. hours = "0" + hours;
  663. }
  664. if (minutes < 10) {
  665. minutes = "0" + minutes;
  666. }
  667. if (seconds < 10) {
  668. seconds = "0" + seconds;
  669. }
  670. return hours + ':' + minutes + ':' + seconds;
  671. }
  672. function getParameterFromParent(name) {
  673. var match = RegExp('[?&]' + name + '=([^&]*)').exec(parent.document.location.search);
  674. return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;
  675. }
  676. function showInfo() {
  677. var html = "<div class='modal-geral'> <div class='modal-title'>iFractions</div>"
  678. + "<div class='modal-coop'>Cooperation Team</div> <div class='modal-coop-content'> BRAZIL: Leônidas de Oliveira Brandão (IME-USP)<br>"
  679. + "PERU: Manuel Ibarra and Cristhian Serrano (EAPIIS-UNAMBA)<br> FRANCE: Jean-Marc (MOCAH-UPMC) </div>"
  680. + "<div class='modal-based'>Based on</div><div class='modal-based-content'> iLM (interactive Learning Modules)<br>"
  681. + "Six facets of Serious Game Design:<br>Pedagogical Objectives; Domain Simulation; Interactions with the Simulation; Problems and Progression; Decorum and Conditions of Use."
  682. + "</div> <div class='modal-tech'> Technology </div> <div class='modal-tech-content'> We used HTML5, CSS and the Javascript Library Phaser.io </div> </div>";
  683. $(html).appendTo('body').modal();
  684. }
  685. </script>
  686. </html>