LInE
/
Ifractions-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
							<!DOCTYPE html>

<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" />
	<link rel="shortcut icon" href="assets/img/scene/flag.png">
	<title> iFractions </title>
	<link rel="stylesheet" href="css/bootstrap.min.css">

	<style>
		#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;
		}
	</style>

</head>

<body>

	<div class="container">

		<div class="clearfix"></div>

		<div class="panel panel-primary">
		<div class="panel-heading">IFRACTIONS GAME</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>
				
			</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 -->
	<script src="js/preMenu.js"></script>
	<script src="js/menu.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/gameMechanics.js"></script>
	<script src="js/globals.js"></script>
	<script>
		
		const displayFps = document.getElementById("display-fps");

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

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

</body>

</html>