LInE
/
Ifractions-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!DOCTYPE html>
<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Educational game for teaching fractions" />
  <meta name="keywords" content="ifractions, fraction, game, private data" />
  <link rel="shortcut icon" href="assets/img/scene/flag.png">
  <title>iFractions</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <style>
    /* canvas */
    #iFractions-canvas {
      width: 100%;
    }

    /* Text box */
    #textbox {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      top: 330px;
      left: 0;
      right: 0;
      text-align: center;
      visibility: hidden;
    }

    input[type=text] {
      background-color: #fff;
      padding: 15px 40px;
      box-sizing: border-box;
      border: 3px solid #ccc;
      font-size: 24px;
      font-family: Arial;
      color: #000;
      text-align: center;
    }

    input:focus {
      outline: 3px solid #85accc;
    }

    /* The Modal (background) */
    .modal {
      /* Hidden by default */
      display: none;
      /* Stay in place */
      position: fixed;
      /* Sit on top */
      z-index: 1;
      /* Location of the box */
      padding-top: 155px;
      left: 0;
      top: 0;
      /* Full width */
      width: 100%;
      /* Full height */
      height: 100%;
      /* Enable scroll if needed */
      overflow: auto;
      /* Fallback color */
      background-color: rgb(0, 0, 0);
      /* Black w/ opacity */
      background-color: rgba(0, 0, 0, 0.4);
    }

    /* Modal Content */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 50%;
    }

    .modal-content img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
  </style>

</head>

<body>

  <div class="container">

    <div class="panel panel-primary">

      <div class="panel-heading">iFractions game :: by LInE</div>

      <div class="panel-body">

        <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->

        <div id="textbox" onsubmit="return false">
          <input type="text" id="textbox-content" value="" size="13" maxlength="36"> <!-- Textbox to get player name -->
        </div>

        <div id="my-modal" class="modal">
          <!-- Modal black background-->
          <div class="modal-content">
            <span class="close">&times;</span> <!-- Modal close button -->
            <div id='infobox-content'></div> <!-- Modal box -->
          </div>
        </div>

      </div>

    </div>

    <!-- Load all js files -->
    <script src="js/preMenu.js"></script>
    <script src="js/menu.js"></script>
    <script src="js/customMenu.js"></script>
    <script src="js/map.js"></script>
    <script src="js/games/circleOne.js"></script>
    <script src="js/games/squareOne.js"></script>
    <script src="js/games/squareTwo.js"></script>
    <script src="js/studentReport.js"></script> <!-- FOR MOODLE -->
    <script src="js/integrationFunctions.js"></script> <!-- FOR MOODLE -->
    <script src="js/gameMechanics.js"></script>
    <script src="js/globals.js"></script>

    <script>

      const defaultWidth = 1920; // Default width for the Canvas
      const defaultHeight = 1080; // Default height for the Canvas

      const context = document.getElementById("iFractions-canvas").getContext("2d");
      context.canvas.width = defaultWidth;
      context.canvas.height = defaultHeight;

      // CREATING GAME STATES
      game.state.add('boot', bootState);
      game.state.add('lang', langState);
      game.state.add('loadLang', loadLangState);
      game.state.add('name', nameState);

      game.state.add('menu', menuState);
      game.state.add('customMenu', customMenuState);

      game.state.add('map', mapState);
      game.state.add('end', endState);

      game.state.add('squareOne', squareOne);
      game.state.add('circleOne', circleOne);
      game.state.add('squareTwo', squareTwo);

      game.state.add('studentReport', studentReport); // FOR MOODLE

      // CALLING FIRST GAME STATE
      game.state.start('boot');
    </script>

  </div>

</body>

</html>