Skip to content

2
2022-074
Commit 65c1671e authored by Wasala W.L.M.K.S - IT19177106's avatar Wasala W.L.M.K.S - IT19177106
Browse files
Options

Add pause,stop to task. Add background music. Add task2

parent a81dad2a
Show whitespace changes
Inline Side-by-side
Showing with 2193 additions and 102 deletions
frontend/task1.html
View file @ 65c1671e
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
<script src="https://code.jquery.com/jquery-3.6.0.min.js" <script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<!-- dropdown hide -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="webgazer_calib.js" type="text/javascript"></script> <script src="webgazer_calib.js" type="text/javascript"></script>
<style type="text/css"> <style type="text/css">
body { body {
...@@ -16,6 +18,44 @@ ...@@ -16,6 +18,44 @@
height: 130px; height: 130px;
position: absolute; position: absolute;
} }
.dropdown {
position: absolute;
display: none;
width: 200px;
height: 30px;
top: 40%;
left: 25%;
font-size: 17px;
background: #f8faf8;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content option {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content option:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style> </style>
</head> </head>
...@@ -41,16 +81,74 @@ ...@@ -41,16 +81,74 @@
<img id="s18" class="slide" style="display: none;" src="images/task1/F16R.png"> <img id="s18" class="slide" style="display: none;" src="images/task1/F16R.png">
<img id="s19" class="slide" style="display: none;" src="images/task1/F17R.png"> <img id="s19" class="slide" style="display: none;" src="images/task1/F17R.png">
<img id="result" class="slide" style="display: none;" src="images/task1/result.png"> <img id="result" class="slide" style="display: none;" src="images/task1/result1.png">
<div id="resultChart"
style="display: none; position: absolute; top:190px; left:50%; z-index: 9; width: 500px; height: 300px;">
<canvas id="myChart" width="500px" height="300px"></canvas>
</div>
<div id="resultChart" style="display: none; position: absolute;" > <!-- dropdown -->
<canvas id="myChart" width="400" height="400"></canvas> <!-- <div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Slide 1</a>
<a href="#">Slide 2</a>
<a href="#">Slide 3</a>
<a href="#">Slide 4</a>
<a href="#">Slide 5</a>
<a href="#">Slide 6</a>
<a href="#">Slide 7</a>
<a href="#">Slide 8</a>
<a href="#">Slide 9</a>
<a href="#">Slide 10</a>
<a href="#">Slide 11</a>
<a href="#">Slide 12</a>
<a href="#">Slide 13</a>
<a href="#">Slide 14</a>
<a href="#">Slide 15</a>
<a href="#">Slide 16</a>
<a href="#">Slide 17</a>
<a href="#">Slide 18</a>
<a href="#">Slide 19</a>
</div>
</div> -->
<div >
<select id="slideList" class="dropdown" onchange="slideChange()">
<option value="none" selected disabled hidden>Select a Slide</option>
<option value="1">Slide 1</option>
<option value="2">Slide 2</option>
<option value="3">Slide 3</option>
<option value="4">Slide 4</option>
<option value="5">Slide 5</option>
<option value="6">Slide 6</option>
<option value="7">Slide 7</option>
<option value="8">Slide 8</option>
<option value="9">Slide 9</option>
<option value="10">Slide 10</option>
<option value="11">Slide 11</option>
<option value="12">Slide 12</option>
<option value="13">Slide 13</option>
<option value="14">Slide 14</option>
<option value="15">Slide 15</option>
<option value="16">Slide 16</option>
<option value="17">Slide 17</option>
<option value="18">Slide 18</option>
<option value="19">Slide 19</option>
</select>
</div> </div>
<!-- <p id="objectName" style="position: absolute; top:500px; left: 500px;">Object name</p> --> <div id="message"></div>
<script type="text/javascript"> <script type="text/javascript">
function slideChange() {
var slideNumber = document.getElementById("slideList").value;
showResults(slideNumber);
}
sessionStorage.setItem("task_name", "task1"); sessionStorage.setItem("task_name", "task1");
boundaryArr = { boundaryArr = {
...@@ -793,12 +891,24 @@ ...@@ -793,12 +891,24 @@
var percentArr = {} var percentArr = {}
var slideID = null; var slideID = null;
var slide = "ch"; var slide = "ch";
//pause variable(use to store the stste of game)
var isPaused = false;
var isGameOver = false;
var a
var started = false;
var taskLoop;
webgazer.setGazeListener(function (data, elapsedTime) { webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) { if (data == null) {
return; return;
} }
if(!started){
showSlide();
taskLoop = setInterval(showSlide, 7000);
started = true;
}
var xprediction = data.x; //these x coordinates are relative to the viewport var xprediction = data.x; //these x coordinates are relative to the viewport
var yprediction = data.y; //these y coordinates are relative to the viewport var yprediction = data.y; //these y coordinates are relative to the viewport
// console.log(elapsedTime); //elapsed time is based on time since begin was called // console.log(elapsedTime); //elapsed time is based on time since begin was called
...@@ -823,22 +933,6 @@ ...@@ -823,22 +933,6 @@
}).begin(); }).begin();
// hide #webgazerVideoContainer
// $("#webgazerVideoContainer").hide();
// webgazer.setRegression("weightedRidge");
// webgazer.begin();
// var prediction = webgazer.getCurrentPrediction();
// if (prediction) {
// var x = prediction.x;
// var y = prediction.y;
// console.log(x,y);
// }
// printPred();
// printPred();
// printPred();
// printPred();
// const predloop = setInterval(printPred, 1000);
function printPred() { function printPred() {
var prediction = webgazer.getCurrentPrediction(); var prediction = webgazer.getCurrentPrediction();
...@@ -1649,13 +1743,56 @@ ...@@ -1649,13 +1743,56 @@
// var type = "s"; // var type = "s";
var increment = 1; var increment = 1;
showSlide();
const taskLoop = setInterval(showSlide, 7000);
//function for pause game
document.addEventListener('keyup', function (e) {
//32 is space bar button ASCII value
console.log("e.which");
console.log(e.which);
console.log("/e.which");
alert("Game is paused");
if (e.which === 32 && isGameOver == false) {
//if(isPaused) resumeGame();
//else pasuseGame();
}
});
// function pasuseGame(){
// clearInterval(interval);
// isPaused = true;
// canvas.style.opacity = 0.5;
// canvascontext.font = "90px tahoma";
// canvascontext.fillstyle = "white";
// canvascontext.textAlign = "center";
// canvascontext.textBaseline = "middle";
// canvascontext.fillText("Game Paused", 400,250)
// }
// function resumeGame(){
// isPaused = false;
// canvascontext.clearRect(0, 0, canvas.width, canvas.height);
// canvas.style.opacity = 1;
// interval = setInterval(showSlide, 20);
// }
// function gameOver(){
// isGameOver = true;
// canvas.style.opacity = 0.5;
// canvascontext.font = "90px tahoma";
// canvascontext.fillstyle = "white";
// canvascontext.textAlign = "center";
// canvascontext.textBaseline = "middle";
// canvascontext.fillText("Game Over", 400,170);
// }
function showSlide() { function showSlide() {
if (increment >= 20) { if (increment >= 20) {
$(".slide").hide(); $(".slide").hide();
$("#result").show(); $("#result").show();
$("#slideList").show();
slide = "result"; slide = "result";
clearInterval(taskLoop); clearInterval(taskLoop);
...@@ -1688,7 +1825,7 @@ ...@@ -1688,7 +1825,7 @@
} }
} }
showResults(); //showResults(a);
sendGazeDataToBackend(arr, percentArr); sendGazeDataToBackend(arr, percentArr);
...@@ -1739,21 +1876,24 @@ ...@@ -1739,21 +1876,24 @@
} }
}); });
} }
var myChart;
function showResults(a) {
function showResults() { var dynamicColors = function () {
var dynamicColors = function() {
var r = Math.floor(Math.random() * 255); var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")"; return "rgb(" + r + "," + g + "," + b + ")";
}; };
var slidename = "s" +a;
var labelsArr = Object.getOwnPropertyNames(percentArr["s4"]) var labelsArr = Object.getOwnPropertyNames(percentArr[slidename]);
var valuesArr = []; var valuesArr = [];
var colorArr = []; var colorArr = [];
labelsArr.forEach((label)=>{ labelsArr.forEach((label) => {
valuesArr.push(percentArr["s4"][label]); valuesArr.push(percentArr[slidename][label]);
colorArr.push(dynamicColors()); colorArr.push(dynamicColors());
}) })
...@@ -1761,7 +1901,7 @@ ...@@ -1761,7 +1901,7 @@
labels: labelsArr, labels: labelsArr,
datasets: [ datasets: [
{ {
label: 'Slide 4', label: 'Slide ' + a,
data: valuesArr, data: valuesArr,
backgroundColor: colorArr, backgroundColor: colorArr,
} }
...@@ -1769,23 +1909,28 @@ ...@@ -1769,23 +1909,28 @@
}; };
const config = { const config = {
type: 'pie', type: 'bar',
data: data, data: data,
options: { options: {
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
position: 'top', position: 'top',
display: false
}, },
title: { title: {
display: true, display: true,
text: 'Results' text: 'Slide ' + a
} }
} }
}, },
}; };
if(myChart){
const myChart = new Chart(document.getElementById('myChart'), config); console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA");
myChart.destroy();
}
myChart = new Chart(document.getElementById('myChart'), config);
$("#dropdown").show();
$("#resultChart").show(); $("#resultChart").show();
} }
......
frontend/task2.html 0 → 100644
View file @ 65c1671e
<!DOCTYPE html>
<html>
<head>
<title>Test Game</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<!-- dropdown hide -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="webgazer_calib.js" type="text/javascript"></script>
<style type="text/css">
body {
background-color: rgb(168, 209, 141);
}
.face {
height: 130px;
position: absolute;
}
.dropdown {
position: absolute;
display: none;
width: 200px;
height: 30px;
top: 40%;
left: 25%;
font-size: 17px;
background: #f8faf8;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content option {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content option:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body style="margin: 0px; overflow: hidden;">
<audio autoplay>
<source src="audio/background.mp3" type="audio/mpeg">
</audio>
<img id="ch" class="slide" style="display: none;" src="images/task1/CHR.png">
<img id="s1" class="slide" style="display: none;" src="images/task1/F1.png">
<img id="s2" class="slide" style="display: none;" src="images/task1/F2.png">
<img id="s3" class="slide" style="display: none;" src="images/task1/gif1.gif">
<img id="s4" class="slide" style="display: none;" src="images/task1/F3.png">
<img id="s5" class="slide" style="display: none;" src="images/task1/gif2.gif">
<img id="s6" class="slide" style="display: none;" src="images/task1/F4R.png">
<img id="s7" class="slide" style="display: none;" src="images/task1/F5R.png">
<img id="s8" class="slide" style="display: none;" src="images/task1/F6R.png">
<img id="s9" class="slide" style="display: none;" src="images/task1/F7R.png">
<img id="s10" class="slide" style="display: none;" src="images/task1/F8R.png">
<img id="s11" class="slide" style="display: none;" src="images/task1/F9R.png">
<img id="s12" class="slide" style="display: none;" src="images/task1/F10R.png">
<img id="s13" class="slide" style="display: none;" src="images/task1/F11R.png">
<img id="s14" class="slide" style="display: none;" src="images/task1/F12R.png">
<img id="s15" class="slide" style="display: none;" src="images/task1/F13R.png">
<img id="s16" class="slide" style="display: none;" src="images/task1/F14R.png">
<img id="s17" class="slide" style="display: none;" src="images/task1/F15R.png">
<img id="s18" class="slide" style="display: none;" src="images/task1/F16R.png">
<img id="s19" class="slide" style="display: none;" src="images/task1/F17R.png">
<img id="result" class="slide" style="display: none;" src="images/task1/result1.png">
<div id="resultChart"
style="display: none; position: absolute; top:190px; left:50%; z-index: 9; width: 500px; height: 300px;">
<canvas id="myChart" width="500px" height="300px"></canvas>
</div>
<!-- dropdown -->
<!-- <div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Slide 1</a>
<a href="#">Slide 2</a>
<a href="#">Slide 3</a>
<a href="#">Slide 4</a>
<a href="#">Slide 5</a>
<a href="#">Slide 6</a>
<a href="#">Slide 7</a>
<a href="#">Slide 8</a>
<a href="#">Slide 9</a>
<a href="#">Slide 10</a>
<a href="#">Slide 11</a>
<a href="#">Slide 12</a>
<a href="#">Slide 13</a>
<a href="#">Slide 14</a>
<a href="#">Slide 15</a>
<a href="#">Slide 16</a>
<a href="#">Slide 17</a>
<a href="#">Slide 18</a>
<a href="#">Slide 19</a>
</div>
</div> -->
<div>
<select id="slideList" class="dropdown" onchange="slideChange()">
<option value="none" selected disabled hidden>Select a Slide</option>
<option value="1">Slide 1</option>
<option value="2">Slide 2</option>
<option value="3">Slide 3</option>
<option value="4">Slide 4</option>
<option value="5">Slide 5</option>
<option value="6">Slide 6</option>
<option value="7">Slide 7</option>
<option value="8">Slide 8</option>
<option value="9">Slide 9</option>
<option value="10">Slide 10</option>
<option value="11">Slide 11</option>
<option value="12">Slide 12</option>
<option value="13">Slide 13</option>
<option value="14">Slide 14</option>
<option value="15">Slide 15</option>
<option value="16">Slide 16</option>
<option value="17">Slide 17</option>
<option value="18">Slide 18</option>
<option value="19">Slide 19</option>
</select>
</div>
<div id="message"></div>
<script type="text/javascript">
function slideChange() {
var slideNumber = document.getElementById("slideList").value;
showResults(slideNumber);
}
sessionStorage.setItem("task_name", "task1");
boundaryArr = {
"s1": {
"F1I1": {
"name": "hat",
"type": "L",
"top": 216,
"bottom": 571,
"left": 450,
"right": 888,
},
},
"s2": {
"F2I1": {
"name": "head",
"type": "S",
"top": 137,
"bottom": 269,
"left": 626,
"right": 725,
},
"F2I2": {
"name": "hands",
"type": "S",
"top": 269,
"bottom": 380,
"left": 541,
"right": 846,
},
"F2I3": {
"name": "legs",
"type": "S",
"top": 380,
"bottom": 623,
"left": 526,
"right": 724,
},
},
"s3": {
"F3I1": {
"name": "head",
"type": "S",
"top": 132,
"bottom": 278,
"left": 597,
"right": 700,
},
"F3I2": {
"name": "hands",
"type": "S",
"top": 278,
"bottom": 393,
"left": 507,
"right": 832,
},
"F3I3": {
"name": "legs",
"type": "S",
"top": 393,
"bottom": 658,
"left": 480,
"right": 707,
},
},
"s4": {
"F4I1": {
"name": "car",
"type": "H",
"top": 237,
"bottom": 482,
"left": 271,
"right": 1055,
},
"F4I2": {
"name": "wheel1",
"type": "H",
"top": 336,
"bottom": 482,
"left": 353,
"right": 502,
},
"F4I3": {
"name": "wheel2",
"type": "H",
"top": 322,
"bottom": 465,
"left": 857,
"right": 1015,
},
},
"s5": {
"F5I1": {
"name": "car",
"type": "H",
"top": 277,
"bottom": 505,
"left": 313,
"right": 1058,
},
"F5I2": {
"name": "wheel1",
"type": "H",
"top": 364,
"bottom": 505,
"left": 394,
"right": 531,
},
"F5I3": {
"name": "wheel2",
"type": "H",
"top": 356,
"bottom": 493,
"left": 866,
"right": 1019,
},
},
"s6": {
"F6I1": {
"name": "baby",
"type": "S",
"top": 94,
"bottom": 496,
"left": 200,
"right": 460,
},
"F6I2": {
"name": "car",
"type": "H",
"top": 149,
"bottom": 320,
"left": 688,
"right": 1241,
},
"F6I3": {
"name": "hat",
"type": "I",
"top": 403,
"bottom": 678,
"left": 560,
"right": 904,
},
},
"s7": {
"F7I1": {
"name": "baby",
"type": "S",
"top": 28,
"bottom": 471,
"left": 940,
"right": 1228,
},
"F7I2": {
"name": "car",
"type": "H",
"top": 459,
"bottom": 643,
"left": 281,
"right": 883,
},
"F7I3": {
"name": "hat",
"type": "I",
"top": 109,
"bottom": 355,
"left": 217,
"right": 522,
},
},
"s8": {
"F8I1": {
"name": "girl",
"type": "S",
"top": 64,
"bottom": 536,
"left": 119,
"right": 286,
},
"F8I2": {
"name": "lady",
"type": "S",
"top": 371,
"bottom": 675,
"left": 338,
"right": 590,
},
"F8I3": {
"name": "doll",
"type": "S",
"top": 70,
"bottom": 478,
"left": 666,
"right": 925,
},
"F8I4": {
"name": "face",
"type": "S",
"top": 279,
"bottom": 591,
"left": 1002,
"right": 1282,
},
},
"s9": {
"F9I1": {
"name": "Sit",
"type": "S",
"top": 49,
"bottom": 322,
"left": 136,
"right": 501,
},
"F9I2": {
"name": "Half Body",
"type": "S",
"top": 421,
"bottom": 683,
"left": 251,
"right": 460,
},
"F9I3": {
"name": "Face",
"type": "S",
"top": 237,
"bottom": 532,
"left": 660,
"right": 877,
},
"F9I4": {
"name": "fullbody",
"type": "S",
"top": 102,
"bottom": 542,
"left": 1017,
"right": 1175,
},
},
"s10": {
"F10I1": {
"name": "boy",
"type": "S",
"top": 38,
"bottom": 294,
"left": 160,
"right": 368,
},
"F10I2": {
"name": "women",
"type": "S",
"top": 395,
"bottom": 665,
"left": 159,
"right": 389,
},
"F10I3": {
"name": "doll",
"type": "S",
"top": 196,
"bottom": 557,
"left": 558,
"right": 793,
},
"F10I4": {
"name": "men",
"type": "S",
"top": 57,
"bottom": 325,
"left": 976,
"right": 1288,
},
"F10I5": {
"name": "girl",
"type": "S",
"top": 455,
"bottom": 695,
"left": 958,
"right": 1196,
},
},
"s11": {
"F11I1": {
"name": "girl",
"type": "S",
"top": 60,
"bottom": 318,
"left": 611,
"right": 815,
},
"F11I2": {
"name": "upper boy",
"type": "S",
"top": 395,
"bottom": 665,
"left": 159,
"right": 389,
},
"F11I3": {
"name": "bread",
"type": "L",
"top": 115,
"bottom": 306,
"left": 917,
"right": 1218,
},
"F11I4": {
"name": "gloves",
"type": "L",
"top": 454,
"bottom": 716,
"left": 201,
"right": 418,
},
"F11I5": {
"name": "table",
"type": "L",
"top": 476,
"bottom": 702,
"left": 562,
"right": 825,
},
"F11I6": {
"name": "bottom boy",
"type": "S",
"top": 431,
"bottom": 653,
"left": 934,
"right": 1207,
},
},
"s12": {
"F12I1": {
"name": "baby face",
"type": "S",
"top": 88,
"bottom": 359,
"left": 157,
"right": 381,
},
"F12I2": {
"name": "threewheel",
"type": "H",
"top": 97,
"bottom": 295,
"left": 547,
"right": 752,
},
"F12I3": {
"name": "iorn",
"type": "H",
"top": 88,
"bottom": 302,
"left": 954,
"right": 1273,
},
"F12I4": {
"name": "lap",
"type": "L",
"top": 470,
"bottom": 686,
"left": 114,
"right": 436,
},
"F12I5": {
"name": "ball",
"type": "H",
"top": 423,
"bottom": 634,
"left": 576,
"right": 788,
},
"F12I6": {
"name": "block",
"type": "H",
"top": 459,
"bottom": 596,
"left": 947,
"right": 1191,
},
},
"s13": {
"F13I1": {
"name": "Throwser",
"type": "L",
"top": 75,
"bottom": 351,
"left": 168,
"right": 262,
},
"F13I2": {
"name": "book",
"type": "L",
"top": 111,
"bottom": 328,
"left": 502,
"right": 780,
},
"F13I3": {
"name": "bag",
"type": "L",
"top": 113,
"bottom": 263,
"left": 958,
"right": 1175,
},
"F13I4": {
"name": "apple",
"type": "L",
"top": 516,
"bottom": 703,
"left": 185,
"right": 345,
},
"F13I5": {
"name": "brush",
"type": "L",
"top": 454,
"bottom": 648,
"left": 481,
"right": 748,
},
"F13I6": {
"name": "baby",
"type": "S",
"top": 405,
"bottom": 735,
"left": 886,
"right": 1124,
},
},
"s14": {
"F14I1": {
"name": "bat",
"type": "H",
"top": 22,
"bottom": 319,
"left": 84,
"right": 399,
},
"F14I2": {
"name": "frock",
"type": "L",
"top": 44,
"bottom": 288,
"left": 535,
"right": 736,
},
"F14I3": {
"name": "train",
"type": "H",
"top": 171,
"bottom": 359,
"left": 933,
"right": 1291,
},
"F14I4": {
"name": "Tv",
"type": "H",
"top": 416,
"bottom": 620,
"left": 488,
"right": 803,
},
"F14I5": {
"name": "block",
"type": "H",
"top": 407,
"bottom": 652,
"left": 153,
"right": 270,
},
"F14I6": {
"name": "road signl",
"type": "H",
"top": 480,
"bottom": 716,
"left": 960,
"right": 1189,
},
},
"s15": {
"F15I1": {
"name": "batminton racket",
"type": "H",
"top": 88,
"bottom": 318,
"left": 98,
"right": 329,
},
"F15I2": {
"name": "bread",
"type": "L",
"top": 137,
"bottom": 263,
"left": 494,
"right": 741,
},
"F15I3": {
"name": "keyboard",
"type": "H",
"top": 98,
"bottom": 306,
"left": 904,
"right": 1258,
},
"F15I4": {
"name": "roadsignel",
"type": "H",
"top": 450,
"bottom": 644,
"left": 196,
"right": 263,
},
"F15I5": {
"name": "bycle",
"type": "H",
"top": 394,
"bottom": 641,
"left": 465,
"right": 840,
},
"F15I6": {
"name": "kettle",
"type": "H",
"top": 399,
"bottom": 688,
"left": 969,
"right": 1216,
},
},
"s16": {
"F16I1": {
"name": "bike",
"type": "H",
"top": 74,
"bottom": 380,
"left": 127,
"right": 434,
},
"F16I2": {
"name": "road signle",
"type": "H",
"top": 84,
"bottom": 282,
"left": 543,
"right": 746,
},
"F16I3": {
"name": "fridge",
"type": "H",
"top": 74,
"bottom": 416,
"left": 940,
"right": 1108,
},
"F16I4": {
"name": "pen",
"type": "L",
"top": 471,
"bottom": 679,
"left": 187,
"right": 407,
},
"F16I5": {
"name": "cap",
"type": "L",
"top": 407,
"bottom": 610,
"left": 529,
"right": 784,
},
"F16I6": {
"name": "gloves",
"type": "L",
"top": 478,
"bottom": 635,
"left": 966,
"right": 1209,
},
},
"s17": {
"F17I1": {
"name": "helicopter",
"type": "H",
"top": 120,
"bottom": 334,
"left": 63,
"right": 453,
},
"F17I2": {
"name": "tree",
"type": "L",
"top": 96,
"bottom": 302,
"left": 580,
"right": 806,
},
"F17I3": {
"name": "land phone",
"type": "H",
"top": 116,
"bottom": 352,
"left": 947,
"right": 1221,
},
"F17I4": {
"name": "chair",
"type": "L",
"top": 435,
"bottom": 669,
"left": 165,
"right": 358,
},
"F17I5": {
"name": "van",
"type": "H",
"top": 488,
"bottom": 643,
"left": 532,
"right": 866,
},
"F17I6": {
"name": "book",
"type": "L",
"top": 432,
"bottom": 670,
"left": 965,
"right": 1282,
},
},
"s18": {
"F18I1": {
"name": "Fan",
"type": "H",
"top": 79,
"bottom": 348,
"left": 198,
"right": 382,
},
"F18I2": {
"name": "caboard",
"type": "L",
"top": 53,
"bottom": 371,
"left": 581,
"right": 737,
},
"F18I3": {
"name": "tap",
"type": "L",
"top": 56,
"bottom": 325,
"left": 919,
"right": 1110,
},
"F18I4": {
"name": "bag",
"type": "L",
"top": 410,
"bottom": 680,
"left": 147,
"right": 351,
},
"F18I5": {
"name": "burger",
"type": "H",
"top": 467,
"bottom": 669,
"left": 526,
"right": 793,
},
"F18I6": {
"name": "shirt",
"type": "L",
"top": 409,
"bottom": 694,
"left": 932,
"right": 1184,
},
},
"s19": {
"F19I1": {
"name": "pencil",
"type": "L",
"top": 109,
"bottom": 305,
"left": 90,
"right": 420,
},
"F19I2": {
"name": "bag",
"type": "L",
"top": 92,
"bottom": 344,
"left": 579,
"right": 763,
},
"F19I3": {
"name": "tree",
"type": "L",
"top": 73,
"bottom": 314,
"left": 909,
"right": 1160,
},
"F19I4": {
"name": "bus",
"type": "H",
"top": 435,
"bottom": 631,
"left": 104,
"right": 465,
},
"F19I5": {
"name": "hat",
"type": "L",
"top": 479,
"bottom": 692,
"left": 531,
"right": 920,
},
"F19I6": {
"name": "skirt",
"type": "L",
"top": 375,
"bottom": 588,
"left": 1002,
"right": 1235,
},
},
};
// $(document).ready(function (){
// document.documentElement.requestFullscreen();
// })
// <!-- start webgazer -->
var arr = {};
var percentArr = {}
var slideID = null;
var slide = "ch";
//pause variable(use to store the stste of game)
var isPaused = false;
var isGameOver = false;
var a
var started = false;
var taskLoop;
webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) {
return;
}
if (!started) {
showSlide();
taskLoop = setInterval(showSlide, 7000);
started = true;
}
var xprediction = data.x; //these x coordinates are relative to the viewport
var yprediction = data.y; //these y coordinates are relative to the viewport
// console.log(elapsedTime); //elapsed time is based on time since begin was called
// console.log(xprediction,yprediction);
if (slide != "ch" && slide != "result") {
gazeObject = getGazeObject(slide, xprediction, yprediction)
// console.log("gazeObject")
// console.log(gazeObject)
// console.log("/gazeObject")
if (arr[slide] == undefined) {
arr[slide] = [];
}
arr[slide].push({
"x": xprediction,
"y": yprediction,
"bb": gazeObject.name,
"type": gazeObject.type
})
$("#objectName").text(gazeObject.name, xprediction, yprediction)
}
}).begin();
function printPred() {
var prediction = webgazer.getCurrentPrediction();
if (prediction) {
var x = prediction.x;
var y = prediction.y;
console.log(prediction);
}
}
function getGazeObject(slide, xcoordinate, ycoordinate) {
//cootima bounding box eke condition eka mulinma liyanna one
//condition for object1
// if () object1.left < xcoordinate < object1.right && object1.top < ycoordinate < object1.bottom ) then return object1
// console.log("object1")
// console.log(object1)
// console.log("/object1")
//final condition set
//slide1
if (slide == "s1") {
object1 = boundaryArr[slide]["F1I1"]
if (((object1.left < xcoordinate) && (xcoordinate < object1.right)) && ((object1.top < ycoordinate) && (ycoordinate < object1.bottom))) {
return {
"name": object1.name,
"type": object1.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide2
if (slide == "s2") {
object2 = boundaryArr[slide]["F2I1"]
if (((object2.left < xcoordinate) && (xcoordinate < object2.right)) && ((object2.top < ycoordinate) && (ycoordinate < object2.bottom))) {
return {
"name": object2.name,
"type": object2.type,
}
}
object3 = boundaryArr[slide]["F2I2"]
if (((object3.left < xcoordinate) && (xcoordinate < object3.right)) && ((object3.top < ycoordinate) && (ycoordinate < object3.bottom))) {
return {
"name": object3.name,
"type": object3.type,
}
}
object4 = boundaryArr[slide]["F2I3"]
if (((object4.left < xcoordinate) && (xcoordinate < object4.right)) && ((object4.top < ycoordinate) && (ycoordinate < object4.bottom))) {
return {
"name": object4.name,
"type": object4.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide3
if (slide == "s3") {
object5 = boundaryArr[slide]["F3I1"]
if (((object5.left < xcoordinate) && (xcoordinate < object5.right)) && ((object5.top < ycoordinate) && (ycoordinate < object5.bottom))) {
return {
"name": object5.name,
"type": object5.type,
}
}
object6 = boundaryArr[slide]["F3I2"]
if (((object6.left < xcoordinate) && (xcoordinate < object6.right)) && ((object6.top < ycoordinate) && (ycoordinate < object6.bottom))) {
return {
"name": object6.name,
"type": object6.type,
}
}
object7 = boundaryArr[slide]["F3I3"]
if (((object7.left < xcoordinate) && (xcoordinate < object7.right)) && ((object7.top < ycoordinate) && (ycoordinate < object7.bottom))) {
return {
"name": object7.name,
"type": object7.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide4
if (slide == "s4") {
object9 = boundaryArr[slide]["F4I2"]
if (((object9.left < xcoordinate) && (xcoordinate < object9.right)) && ((object9.top < ycoordinate) && (ycoordinate < object9.bottom))) {
return {
"name": object9.name,
"type": object9.type,
}
}
object10 = boundaryArr[slide]["F4I3"]
if (((object10.left < xcoordinate) && (xcoordinate < object10.right)) && ((object10.top < ycoordinate) && (ycoordinate < object10.bottom))) {
return {
"name": object10.name,
"type": object10.type,
}
}
object8 = boundaryArr[slide]["F4I1"]
if (((object8.left < xcoordinate) && (xcoordinate < object8.right)) && ((object8.top < ycoordinate) && (ycoordinate < object8.bottom))) {
return {
"name": object8.name,
"type": object8.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide5
if (slide == "s5") {
object12 = boundaryArr[slide]["F5I2"]
if (((object12.left < xcoordinate) && (xcoordinate < object12.right)) && ((object12.top < ycoordinate) && (ycoordinate < object12.bottom))) {
return {
"name": object12.name,
"type": object12.type,
}
}
object13 = boundaryArr[slide]["F5I3"]
if (((object13.left < xcoordinate) && (xcoordinate < object13.right)) && ((object13.top < ycoordinate) && (ycoordinate < object13.bottom))) {
return {
"name": object13.name,
"type": object13.type,
}
}
object11 = boundaryArr[slide]["F5I1"]
if (((object11.left < xcoordinate) && (xcoordinate < object11.right)) && ((object11.top < ycoordinate) && (ycoordinate < object11.bottom))) {
return {
"name": object11.name,
"type": object11.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide6
if (slide == "s6") {
object14 = boundaryArr[slide]["F6I1"]
if (((object14.left < xcoordinate) && (xcoordinate < object14.right)) && ((object14.top < ycoordinate) && (ycoordinate < object14.bottom))) {
return {
"name": object14.name,
"type": object14.type,
}
}
object15 = boundaryArr[slide]["F6I2"]
if (((object15.left < xcoordinate) && (xcoordinate < object15.right)) && ((object15.top < ycoordinate) && (ycoordinate < object15.bottom))) {
return {
"name": object15.name,
"type": object15.type,
}
}
object16 = boundaryArr[slide]["F6I3"]
if (((object16.left < xcoordinate) && (xcoordinate < object16.right)) && ((object16.top < ycoordinate) && (ycoordinate < object16.bottom))) {
return {
"name": object16.name,
"type": object16.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide7
if (slide == "s7") {
object17 = boundaryArr[slide]["F7I1"]
if (((object17.left < xcoordinate) && (xcoordinate < object17.right)) && ((object17.top < ycoordinate) && (ycoordinate < object17.bottom))) {
return {
"name": object17.name,
"type": object17.type,
}
}
object18 = boundaryArr[slide]["F7I2"]
if (((object18.left < xcoordinate) && (xcoordinate < object18.right)) && ((object18.top < ycoordinate) && (ycoordinate < object18.bottom))) {
return {
"name": object18.name,
"type": object18.type,
}
}
object19 = boundaryArr[slide]["F7I3"]
if (((object19.left < xcoordinate) && (xcoordinate < object19.right)) && ((object19.top < ycoordinate) && (ycoordinate < object19.bottom))) {
return {
"name": object19.name,
"type": object19.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide8
if (slide == "s8") {
object20 = boundaryArr[slide]["F8I1"]
if (((object20.left < xcoordinate) && (xcoordinate < object20.right)) && ((object20.top < ycoordinate) && (ycoordinate < object20.bottom))) {
return {
"name": object20.name,
"type": object20.type,
}
}
object21 = boundaryArr[slide]["F8I2"]
if (((object21.left < xcoordinate) && (xcoordinate < object21.right)) && ((object21.top < ycoordinate) && (ycoordinate < object21.bottom))) {
return {
"name": object21.name,
"type": object21.type,
}
}
object22 = boundaryArr[slide]["F8I3"]
if (((object22.left < xcoordinate) && (xcoordinate < object22.right)) && ((object22.top < ycoordinate) && (ycoordinate < object22.bottom))) {
return {
"name": object22.name,
"type": object22.type,
}
}
object23 = boundaryArr[slide]["F8I4"]
if (((object23.left < xcoordinate) && (xcoordinate < object23.right)) && ((object23.top < ycoordinate) && (ycoordinate < object23.bottom))) {
return {
"name": object23.name,
"type": object23.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide9
if (slide == "s9") {
object24 = boundaryArr[slide]["F9I1"]
if (((object24.left < xcoordinate) && (xcoordinate < object24.right)) && ((object24.top < ycoordinate) && (ycoordinate < object24.bottom))) {
return {
"name": object24.name,
"type": object24.type,
}
}
object25 = boundaryArr[slide]["F9I2"]
if (((object25.left < xcoordinate) && (xcoordinate < object25.right)) && ((object25.top < ycoordinate) && (ycoordinate < object25.bottom))) {
return {
"name": object25.name,
"type": object25.type,
}
}
object26 = boundaryArr[slide]["F9I3"]
if (((object26.left < xcoordinate) && (xcoordinate < object26.right)) && ((object26.top < ycoordinate) && (ycoordinate < object26.bottom))) {
return {
"name": object26.name,
"type": object26.type,
}
}
object27 = boundaryArr[slide]["F9I4"]
if (((object27.left < xcoordinate) && (xcoordinate < object27.right)) && ((object27.top < ycoordinate) && (ycoordinate < object27.bottom))) {
return {
"name": object27.name,
"type": object27.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide10
if (slide == "s10") {
object28 = boundaryArr[slide]["F10I1"]
if (((object28.left < xcoordinate) && (xcoordinate < object28.right)) && ((object28.top < ycoordinate) && (ycoordinate < object28.bottom))) {
return {
"name": object28.name,
"type": object28.type,
}
}
object29 = boundaryArr[slide]["F10I2"]
if (((object29.left < xcoordinate) && (xcoordinate < object29.right)) && ((object29.top < ycoordinate) && (ycoordinate < object29.bottom))) {
return {
"name": object29.name,
"type": object29.type,
}
}
object30 = boundaryArr[slide]["F10I3"]
if (((object30.left < xcoordinate) && (xcoordinate < object30.right)) && ((object30.top < ycoordinate) && (ycoordinate < object30.bottom))) {
return {
"name": object30.name,
"type": object30.type,
}
}
object31 = boundaryArr[slide]["F10I4"]
if (((object31.left < xcoordinate) && (xcoordinate < object31.right)) && ((object31.top < ycoordinate) && (ycoordinate < object31.bottom))) {
return {
"name": object31.name,
"type": object31.type,
}
}
object32 = boundaryArr[slide]["F10I5"]
if (((object32.left < xcoordinate) && (xcoordinate < object32.right)) && ((object32.top < ycoordinate) && (ycoordinate < object32.bottom))) {
return {
"name": object32.name,
"type": object32.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide11
if (slide == "s11") {
object33 = boundaryArr[slide]["F11I1"]
if (((object33.left < xcoordinate) && (xcoordinate < object33.right)) && ((object33.top < ycoordinate) && (ycoordinate < object33.bottom))) {
return {
"name": object33.name,
"type": object33.type,
}
}
object34 = boundaryArr[slide]["F11I2"]
if (((object34.left < xcoordinate) && (xcoordinate < object34.right)) && ((object34.top < ycoordinate) && (ycoordinate < object34.bottom))) {
return {
"name": object34.name,
"type": object34.type,
}
}
object35 = boundaryArr[slide]["F11I3"]
if (((object35.left < xcoordinate) && (xcoordinate < object35.right)) && ((object35.top < ycoordinate) && (ycoordinate < object35.bottom))) {
return {
"name": object35.name,
"type": object35.type,
}
}
object36 = boundaryArr[slide]["F11I4"]
if (((object36.left < xcoordinate) && (xcoordinate < object36.right)) && ((object36.top < ycoordinate) && (ycoordinate < object36.bottom))) {
return {
"name": object36.name,
"type": object36.type,
}
}
object37 = boundaryArr[slide]["F11I5"]
if (((object37.left < xcoordinate) && (xcoordinate < object37.right)) && ((object37.top < ycoordinate) && (ycoordinate < object37.bottom))) {
return {
"name": object37.name,
"type": object37.type,
}
}
object38 = boundaryArr[slide]["F11I6"]
if (((object38.left < xcoordinate) && (xcoordinate < object38.right)) && ((object38.top < ycoordinate) && (ycoordinate < object38.bottom))) {
return {
"name": object38.name,
"type": object38.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide12
if (slide == "s12") {
object39 = boundaryArr[slide]["F12I1"]
if (((object39.left < xcoordinate) && (xcoordinate < object39.right)) && ((object39.top < ycoordinate) && (ycoordinate < object39.bottom))) {
return {
"name": object39.name,
"type": object39.type,
}
}
object40 = boundaryArr[slide]["F12I2"]
if (((object40.left < xcoordinate) && (xcoordinate < object40.right)) && ((object40.top < ycoordinate) && (ycoordinate < object40.bottom))) {
return {
"name": object40.name,
"type": object40.type,
}
}
object41 = boundaryArr[slide]["F12I3"]
if (((object41.left < xcoordinate) && (xcoordinate < object41.right)) && ((object41.top < ycoordinate) && (ycoordinate < object41.bottom))) {
return {
"name": object41.name,
"type": object41.type,
}
}
object42 = boundaryArr[slide]["F12I4"]
if (((object42.left < xcoordinate) && (xcoordinate < object42.right)) && ((object42.top < ycoordinate) && (ycoordinate < object42.bottom))) {
return {
"name": object42.name,
"type": object42.type,
}
}
object43 = boundaryArr[slide]["F12I5"]
if (((object43.left < xcoordinate) && (xcoordinate < object43.right)) && ((object43.top < ycoordinate) && (ycoordinate < object43.bottom))) {
return {
"name": object43.name,
"type": object43.type,
}
}
object44 = boundaryArr[slide]["F12I6"]
if (((object44.left < xcoordinate) && (xcoordinate < object44.right)) && ((object44.top < ycoordinate) && (ycoordinate < object44.bottom))) {
return {
"name": object44.name,
"type": object44.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide13
if (slide == "s13") {
object45 = boundaryArr[slide]["F13I1"]
if (((object45.left < xcoordinate) && (xcoordinate < object45.right)) && ((object45.top < ycoordinate) && (ycoordinate < object45.bottom))) {
return {
"name": object45.name,
"type": object45.type,
}
}
object46 = boundaryArr[slide]["F13I2"]
if (((object46.left < xcoordinate) && (xcoordinate < object46.right)) && ((object46.top < ycoordinate) && (ycoordinate < object46.bottom))) {
return {
"name": object46.name,
"type": object46.type,
}
}
object47 = boundaryArr[slide]["F13I3"]
if (((object47.left < xcoordinate) && (xcoordinate < object47.right)) && ((object47.top < ycoordinate) && (ycoordinate < object47.bottom))) {
return {
"name": object47.name,
"type": object47.type,
}
}
object48 = boundaryArr[slide]["F13I4"]
if (((object48.left < xcoordinate) && (xcoordinate < object48.right)) && ((object48.top < ycoordinate) && (ycoordinate < object48.bottom))) {
return {
"name": object48.name,
"type": object48.type,
}
}
object49 = boundaryArr[slide]["F13I5"]
if (((object49.left < xcoordinate) && (xcoordinate < object49.right)) && ((object49.top < ycoordinate) && (ycoordinate < object49.bottom))) {
return {
"name": object49.name,
"type": object49.type,
}
}
object50 = boundaryArr[slide]["F13I6"]
if (((object50.left < xcoordinate) && (xcoordinate < object50.right)) && ((object50.top < ycoordinate) && (ycoordinate < object50.bottom))) {
return {
"name": object50.name,
"type": object50.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide14
if (slide == "s14") {
object51 = boundaryArr[slide]["F14I1"]
if (((object51.left < xcoordinate) && (xcoordinate < object51.right)) && ((object51.top < ycoordinate) && (ycoordinate < object51.bottom))) {
return {
"name": object51.name,
"type": object51.type,
}
}
object52 = boundaryArr[slide]["F14I2"]
if (((object52.left < xcoordinate) && (xcoordinate < object52.right)) && ((object52.top < ycoordinate) && (ycoordinate < object52.bottom))) {
return {
"name": object52.name,
"type": object52.type,
}
}
object53 = boundaryArr[slide]["F14I3"]
if (((object53.left < xcoordinate) && (xcoordinate < object53.right)) && ((object53.top < ycoordinate) && (ycoordinate < object53.bottom))) {
return {
"name": object53.name,
"type": object53.type,
}
}
object54 = boundaryArr[slide]["F14I4"]
if (((object54.left < xcoordinate) && (xcoordinate < object54.right)) && ((object54.top < ycoordinate) && (ycoordinate < object54.bottom))) {
return {
"name": object54.name,
"type": object54.type,
}
}
object55 = boundaryArr[slide]["F14I5"]
if (((object55.left < xcoordinate) && (xcoordinate < object55.right)) && ((object55.top < ycoordinate) && (ycoordinate < object55.bottom))) {
return {
"name": object55.name,
"type": object55.type,
}
}
object56 = boundaryArr[slide]["F14I6"]
if (((object56.left < xcoordinate) && (xcoordinate < object56.right)) && ((object56.top < ycoordinate) && (ycoordinate < object56.bottom))) {
return {
"name": object56.name,
"type": object56.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide15
if (slide == "s15") {
object57 = boundaryArr[slide]["F15I1"]
if (((object57.left < xcoordinate) && (xcoordinate < object57.right)) && ((object57.top < ycoordinate) && (ycoordinate < object57.bottom))) {
return {
"name": object57.name,
"type": object57.type,
}
}
object58 = boundaryArr[slide]["F15I2"]
if (((object58.left < xcoordinate) && (xcoordinate < object58.right)) && ((object58.top < ycoordinate) && (ycoordinate < object58.bottom))) {
return {
"name": object58.name,
"type": object58.type,
}
}
object59 = boundaryArr[slide]["F15I3"]
if (((object59.left < xcoordinate) && (xcoordinate < object59.right)) && ((object59.top < ycoordinate) && (ycoordinate < object59.bottom))) {
return {
"name": object59.name,
"type": object59.type,
}
}
object60 = boundaryArr[slide]["F15I4"]
if (((object60.left < xcoordinate) && (xcoordinate < object60.right)) && ((object60.top < ycoordinate) && (ycoordinate < object60.bottom))) {
return {
"name": object60.name,
"type": object60.type,
}
}
object61 = boundaryArr[slide]["F15I5"]
if (((object61.left < xcoordinate) && (xcoordinate < object61.right)) && ((object61.top < ycoordinate) && (ycoordinate < object61.bottom))) {
return {
"name": object61.name,
"type": object61.type,
}
}
object62 = boundaryArr[slide]["F15I6"]
if (((object62.left < xcoordinate) && (xcoordinate < object62.right)) && ((object62.top < ycoordinate) && (ycoordinate < object62.bottom))) {
return {
"name": object62.name,
"type": object62.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide16
if (slide == "s16") {
object63 = boundaryArr[slide]["F16I1"]
if (((object63.left < xcoordinate) && (xcoordinate < object63.right)) && ((object63.top < ycoordinate) && (ycoordinate < object63.bottom))) {
return {
"name": object63.name,
"type": object63.type,
}
}
object64 = boundaryArr[slide]["F16I2"]
if (((object64.left < xcoordinate) && (xcoordinate < object64.right)) && ((object64.top < ycoordinate) && (ycoordinate < object64.bottom))) {
return {
"name": object64.name,
"type": object64.type,
}
}
object65 = boundaryArr[slide]["F16I3"]
if (((object65.left < xcoordinate) && (xcoordinate < object65.right)) && ((object65.top < ycoordinate) && (ycoordinate < object65.bottom))) {
return {
"name": object65.name,
"type": object65.type,
}
}
object66 = boundaryArr[slide]["F16I4"]
if (((object66.left < xcoordinate) && (xcoordinate < object66.right)) && ((object66.top < ycoordinate) && (ycoordinate < object66.bottom))) {
return {
"name": object66.name,
"type": object66.type,
}
}
object67 = boundaryArr[slide]["F16I5"]
if (((object67.left < xcoordinate) && (xcoordinate < object67.right)) && ((object67.top < ycoordinate) && (ycoordinate < object67.bottom))) {
return {
"name": object67.name,
"type": object67.type,
}
}
object68 = boundaryArr[slide]["F16I6"]
if (((object68.left < xcoordinate) && (xcoordinate < object68.right)) && ((object68.top < ycoordinate) && (ycoordinate < object68.bottom))) {
return {
"name": object68.name,
"type": object68.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide17
if (slide == "s17") {
object69 = boundaryArr[slide]["F17I1"]
if (((object69.left < xcoordinate) && (xcoordinate < object69.right)) && ((object69.top < ycoordinate) && (ycoordinate < object69.bottom))) {
return {
"name": object69.name,
"type": object69.type,
}
}
object70 = boundaryArr[slide]["F17I2"]
if (((object70.left < xcoordinate) && (xcoordinate < object70.right)) && ((object70.top < ycoordinate) && (ycoordinate < object70.bottom))) {
return {
"name": object70.name,
"type": object70.type,
}
}
object71 = boundaryArr[slide]["F17I3"]
if (((object71.left < xcoordinate) && (xcoordinate < object71.right)) && ((object71.top < ycoordinate) && (ycoordinate < object71.bottom))) {
return {
"name": object71.name,
"type": object71.type,
}
}
object72 = boundaryArr[slide]["F17I4"]
if (((object72.left < xcoordinate) && (xcoordinate < object72.right)) && ((object72.top < ycoordinate) && (ycoordinate < object72.bottom))) {
return {
"name": object72.name,
"type": object72.type,
}
}
object73 = boundaryArr[slide]["F17I5"]
if (((object73.left < xcoordinate) && (xcoordinate < object73.right)) && ((object73.top < ycoordinate) && (ycoordinate < object73.bottom))) {
return {
"name": object73.name,
"type": object73.type,
}
}
object74 = boundaryArr[slide]["F17I6"]
if (((object74.left < xcoordinate) && (xcoordinate < object74.right)) && ((object74.top < ycoordinate) && (ycoordinate < object74.bottom))) {
return {
"name": object74.name,
"type": object74.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide18
if (slide == "s18") {
object75 = boundaryArr[slide]["F18I1"]
if (((object75.left < xcoordinate) && (xcoordinate < object75.right)) && ((object75.top < ycoordinate) && (ycoordinate < object75.bottom))) {
return {
"name": object75.name,
"type": object75.type,
}
}
object76 = boundaryArr[slide]["F18I2"]
if (((object76.left < xcoordinate) && (xcoordinate < object76.right)) && ((object76.top < ycoordinate) && (ycoordinate < object76.bottom))) {
return {
"name": object76.name,
"type": object76.type,
}
}
object77 = boundaryArr[slide]["F18I3"]
if (((object77.left < xcoordinate) && (xcoordinate < object77.right)) && ((object77.top < ycoordinate) && (ycoordinate < object77.bottom))) {
return {
"name": object77.name,
"type": object77.type,
}
}
object78 = boundaryArr[slide]["F18I4"]
if (((object78.left < xcoordinate) && (xcoordinate < object78.right)) && ((object78.top < ycoordinate) && (ycoordinate < object78.bottom))) {
return {
"name": object78.name,
"type": object78.type,
}
}
object79 = boundaryArr[slide]["F18I5"]
if (((object79.left < xcoordinate) && (xcoordinate < object79.right)) && ((object79.top < ycoordinate) && (ycoordinate < object79.bottom))) {
return {
"name": object79.name,
"type": object79.type,
}
}
object80 = boundaryArr[slide]["F18I6"]
if (((object80.left < xcoordinate) && (xcoordinate < object80.right)) && ((object80.top < ycoordinate) && (ycoordinate < object80.bottom))) {
return {
"name": object80.name,
"type": object80.type,
}
}
return {
"name": "none",
"type": "none"
}
}
//slide19
if (slide == "s19") {
object81 = boundaryArr[slide]["F19I1"]
if (((object81.left < xcoordinate) && (xcoordinate < object81.right)) && ((object81.top < ycoordinate) && (ycoordinate < object81.bottom))) {
return {
"name": object81.name,
"type": object81.type,
}
}
object82 = boundaryArr[slide]["F19I2"]
if (((object82.left < xcoordinate) && (xcoordinate < object82.right)) && ((object82.top < ycoordinate) && (ycoordinate < object82.bottom))) {
return {
"name": object82.name,
"type": object82.type,
}
}
object83 = boundaryArr[slide]["F19I3"]
if (((object83.left < xcoordinate) && (xcoordinate < object83.right)) && ((object83.top < ycoordinate) && (ycoordinate < object83.bottom))) {
return {
"name": object83.name,
"type": object83.type,
}
}
object84 = boundaryArr[slide]["F19I4"]
if (((object84.left < xcoordinate) && (xcoordinate < object84.right)) && ((object84.top < ycoordinate) && (ycoordinate < object84.bottom))) {
return {
"name": object84.name,
"type": object84.type,
}
}
object85 = boundaryArr[slide]["F19I5"]
if (((object85.left < xcoordinate) && (xcoordinate < object85.right)) && ((object85.top < ycoordinate) && (ycoordinate < object85.bottom))) {
return {
"name": object85.name,
"type": object85.type,
}
}
object86 = boundaryArr[slide]["F19I6"]
if (((object86.left < xcoordinate) && (xcoordinate < object86.right)) && ((object86.top < ycoordinate) && (ycoordinate < object86.bottom))) {
return {
"name": object86.name,
"type": object86.type,
}
}
return {
"name": "none",
"type": "none"
}
}
}
// <!-- end webgazer -->
// var type = "s";
var increment = 1;
//function for pause game
document.addEventListener('keyup', function (e) {
//32 is space bar button ASCII value
console.log("e.which");
console.log(e.which);
console.log("/e.which");
alert("Game is paused");
if (e.which === 32 && isGameOver == false) {
//if(isPaused) resumeGame();
//else pasuseGame();
}
});
// function pasuseGame(){
// clearInterval(interval);
// isPaused = true;
// canvas.style.opacity = 0.5;
// canvascontext.font = "90px tahoma";
// canvascontext.fillstyle = "white";
// canvascontext.textAlign = "center";
// canvascontext.textBaseline = "middle";
// canvascontext.fillText("Game Paused", 400,250)
// }
// function resumeGame(){
// isPaused = false;
// canvascontext.clearRect(0, 0, canvas.width, canvas.height);
// canvas.style.opacity = 1;
// interval = setInterval(showSlide, 20);
// }
// function gameOver(){
// isGameOver = true;
// canvas.style.opacity = 0.5;
// canvascontext.font = "90px tahoma";
// canvascontext.fillstyle = "white";
// canvascontext.textAlign = "center";
// canvascontext.textBaseline = "middle";
// canvascontext.fillText("Game Over", 400,170);
// }
function showSlide() {
if (increment >= 20) {
$(".slide").hide();
$("#result").show();
$("#slideList").show();
slide = "result";
clearInterval(taskLoop);
$("#objectName").text("none")
webgazer.pause();
//calculate object percentages for each slide
for (let slide in arr) {
OList = arr[slide].map((x) => {
return x.bb
})
const count = {};
for (const element of OList) {
if (count[element]) {
count[element] += 1;
} else {
count[element] = 1;
}
}
var tot = OList.length
percentArr[slide] = {}
for (let name in count) {
percentArr[slide][name] = 100 * count[name] / tot
}
}
//showResults(a);
sendGazeDataToBackend(arr, percentArr);
return;
}
$(".slide").hide();
slideID = "#s" + parseInt(increment);
$("#ch").show();
$("#objectName").text("none")
slide = "ch";
setTimeout(function () {
$("#ch").hide();
$(slideID).show();
slide = slideID.substr(1); //remove the # in the begining
console.log("slideID: " + slideID);
console.log("increment: " + increment);
}, 2000);
increment += 1;
}
// send Gaze Data To Backend
function sendGazeDataToBackend(dataArr, percentArray, user, task) {
//ajax
$.ajax({
type: "POST",
url: "http://localhost:3000/results",
data: {
"user": sessionStorage.getItem("user_name"),
"task": sessionStorage.getItem("task_name"),
"dataArr": dataArr,
"percentArray": percentArray
},
success: function (data) {
// Ajax call completed successfully
alert("Form Submited Successfully");
// window.location.href = "selection.html"
},
error: function (data) {
// Some error in ajax call
alert("some Error");
}
});
}
var myChart;
function showResults(a) {
var dynamicColors = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
};
var slidename = "s" + a;
var labelsArr = Object.getOwnPropertyNames(percentArr[slidename]);
var valuesArr = [];
var colorArr = [];
labelsArr.forEach((label) => {
valuesArr.push(percentArr[slidename][label]);
colorArr.push(dynamicColors());
})
const data = {
labels: labelsArr,
datasets: [
{
label: 'Slide ' + a,
data: valuesArr,
backgroundColor: colorArr,
}
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
display: false
},
title: {
display: true,
text: 'Slide ' + a
}
}
},
};
if (myChart) {
console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA");
myChart.destroy();
}
myChart = new Chart(document.getElementById('myChart'), config);
$("#dropdown").show();
$("#resultChart").show();
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment