LInE
/
Ifractions-web


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

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <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 by LInE-IME-USP</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <style>
    /*
    body, .panel-body {
      background-color: #313857;
    }
    */
    #iFractions-canvas {
      padding: 0 auto 0 auto;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    #textbox {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      top: 300px;
      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: 44px;
      font-family: Arial;
      color: #000;
      text-align: center;
    }

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

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

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

    /* 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="clearfix">
    </div>

    <div class="panel panel-primary">

      <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">
          <input type="text" id="textbox-content" value="" size="13" maxlength="36">
        </div>

        <!-- Display fps in debugmode -->
        <div id="display-fps"></div>

        <!-- The Modal -->
        <div id="myModal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <div id='infobox-content'></div> <!-- Modal content -->
          </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/circleOne.js"></script>
    <script src="js/squareOne.js"></script>
    <script src="js/squareTwo.js"></script>
    <script src="js/stundentReport.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 displayFps = document.getElementById("display-fps");

      canvas = document.getElementById("iFractions-canvas");
      canvas.width = defaultWidth;
      canvas.height = defaultHeight;

      const context = canvas.getContext("2d");

      info.start();

      // 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);

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

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

  </div>

</body>

</html>