Skip to content

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

Type chart added to result. Task 2 modifications

parent 65c1671e
Hide whitespace changes
Inline Side-by-side
Showing with 434 additions and 286 deletions
frontend/calibCopy.html 0 → 100644
View file @ a49dd9ee
<!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="webgazer.js" type="text/javascript"></script>
<style type="text/css">
body {
background-color: rgb(255, 242, 204);
}
</style>
</head>
<body style="margin: 0px; overflow: hidden;">
<img id="I1" class="calibImg" style="position:absolute; left: 15px; top:10px; " src="images/resize/6- 2.png">
<img id="I2" class="calibImg" style="position:absolute; left: 660px; top:10px;display: none;" src="images/resize/20- 2.png">
<img id="I3" class="calibImg" style="position:absolute; left: 1250px; top:10px; display: none;" src="images/resize/1- 2.png">
<img id="I4" class="calibImg" style="position:absolute; left: 15px; top:350px;display: none; " src="images/resize/19- 2.png">
<img id="I5" class="calibImg" style="position:absolute; left: 660px; top:350px;display: none;" src="images/resize/14- 2.png">
<img id="I6" class="calibImg" style="position:absolute; left: 1250px; top:350px;display: none;" src="images/resize/12- 2.png">
<img id="I7" class="calibImg" style="position:absolute; left: 15px; top:660px;display: none;" src="images/resize/18- 2.png">
<img id="I8" class="calibImg" style="position:absolute; left: 660px; top:660px;display: none;" src="images/resize/7- 2.png">
<img id="I9" class="calibImg" style="position:absolute; left: 1250px; top:660px;display: none;" src="images/resize/22- 2.png">
<!-- <img id="calib" class="slide" style="display: block;" src="calibPoints.png"> -->
<span
style="position: absolute; bottom: 10px; right: 10px; font-size: x-large; color: rgb(255, 230, 255); cursor: default;"
onclick="location.href='task2.html'" id="finish">►</span>
<script type="text/javascript">
webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) {
$("webgazerVideoContainer").show();
return;
}
$("#webgazerVideoContainer").hide();
}).begin();
clickCount = {
"I1": 0,
"I2": 0,
"I3": 0,
"I4": 0,
"I5": 0,
"I6": 0,
"I7": 0,
"I8": 0,
"I9": 0,
"total": 0,
}
$(".calibImg").on('click', function (event) {
var objectId = event.target.id;
clickCount[objectId] += 1;
if (clickCount[objectId] >= 3) {
$("#" + objectId).hide();
var currentNumber = Number(objectId.substr(1))
if(currentNumber <= 9){
currentNumber++;
$("#I" + currentNumber).show();
}
}
console.log(clickCount);
clickCount["total"] += 1;
if (clickCount["total"] >= 27) {
alert('ක්‍රියාකාරම ආරම්භ කිරීමට "OK" බොත්තම ඔබන්න');
location.href='task2.html';
}
//(... rest of your JS code)
});
//initialy hide all images
//kotuwa athulta face eka awama hide wnna dnna
</script>
</body>
</html>
\ No newline at end of file
frontend/description.html
View file @ a49dd9ee
...@@ -6,12 +6,29 @@ ...@@ -6,12 +6,29 @@
</header> </header>
<br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
<body> <body>
<div class="main" >
<div>
<h1>සමස්ථ ක්‍රියාකාරකම පිළිබද හැදින්වීම :</h1>
</div>
<div>
<h3>මම ක්‍රියාකාරකම වයස අවුරුදු 1-7ත් දරුවන් සදහා නිර්මාණය කරන ලද්දකි.</h3>
<h3>පලමු පියවර ලෙස පෝරමයට ඔබේ දරුවාට අන්‍යය වූ තොරතුරු ඉදිරිපත් කර ලියාපදිංචි විය යුතුය</h3>
<h3>සාර්තකව ලියාපදිංචි වීමෙන් පසුව ඔබව අදාල ක්‍රියාකාරකම පිළිබද සවිස්තරාත්මක පැහැදිලි කිරීමක් සහිත පිටුවකට පිවිසේ.</h3>
<h3>ඔබ පෝරමය සම්පූර්ණ කරන විට වයස, ස්ත්‍රී/පුරුෂ භාවය සදහා නිවැරදි තොරතුරු ඇතුලත් කරන්න.(මන්ද ඉදිරි දත්ත පුරෝකතන පියවර වලදී ඒවා උපකාර වන නිසාය).</h3>
<h3>ඔබ අදාළ හැදින්වීම හොදින් කියවීමෙන් පසු ඊළග පිටුවට පිවිසීමේ බොත්තම ඔබන්න.</h3>
<h3>අදාල උප ක්‍රියාකාරකම් වලට අදාල විස්ථර ඇතුලත් පිටුව වෙතට මීළගට ඔබ පිවිසේ.</h3>
</div>
</div>
<br><br>
<div style="text-align:center"> <div style="text-align:center">
<h1>Common Description</h1><br><br>
<input type="submit" value="ඊළග පිටුවට" name="submit" id="submit" onclick="location.href='form.html'"> <input type="submit" value="ඊළග පිටුවට" name="submit" id="submit" onclick="location.href='form.html'">
</div> </div>
<br><br><br><br>
</body> </body>
</html> </html>
\ No newline at end of file
frontend/images/task1/gif1.gif
View replaced file @ 65c1671e View file @ a49dd9ee
frontend/images/task1/gif1.gif

1.67 MB | W: | H:

frontend/images/task1/gif1.gif

3.04 MB | W: | H:

frontend/images/task1/gif1.gif
frontend/images/task1/gif1.gif
frontend/images/task1/gif1.gif
frontend/images/task1/gif1.gif
  • 2-up
  • Swipe
  • Onion skin
frontend/selection.html
View file @ a49dd9ee
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
<div id="content" style="margin: auto; width:50%"> <div id="content" style="margin: auto; width:50%">
<div id="search"> <div id="search">
<a href="taskDescription1.html" class="button">වයස අවුරුදු 1-3 දරුවන් සදහා හඩ නොමැතිව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a> <a href="taskDescription1.html" class="button">වයස අවුරුදු 4-7 දරුවන් සදහා හඩ නොමැතිව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a>
<a href="taskDescription2.html" class="button">වයස අවුරුදු 1-3 දරුවන් සදහා හඩ සහිතව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a> <a href="taskDescription2.html" class="button">වයස අවුරුදු 4-7 දරුවන් සදහා හඩ සහිතව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a>
<a href="taskDescription3.html" class="button">වයස අවුරුදු 4-6 දරුවන් සදහා හඩ නොමැතිව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a> <a href="taskDescription3.html" class="button">වයස අවුරුදු 1-3 දරුවන් සදහා හඩ නොමැතිව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a>
<a href="taskDescription4.html" class="button">වයස අවුරුදු 4-6 දරුවන් සදහා හඩ සහිතව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a> <a href="taskDescription4.html" class="button">වයස අවුරුදු 1-3 දරුවන් සදහා හඩ සහිතව සිදු කරන ක්‍රියාකාරකම වෙත පිවිසීමට</a>
</div> </div>
<div id="results"> <div id="results">
<img src="images/mickey4.png" alt="Paris" style="width:80%; height:80%" > <img src="images/mickey4.png" alt="Paris" style="width:80%; height:80%" >
......
frontend/start.html
View file @ a49dd9ee
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<header> <header>
<title>Welcome page</title> <title>Welcome page</title>
<link rel="stylesheet" href="style3.css" type="text/css"> <link rel="stylesheet" href="style4.css" type="text/css">
</header> </header>
<br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
<body> <body>
......
frontend/task1.html
View file @ a49dd9ee
...@@ -6,60 +6,42 @@ ...@@ -6,60 +6,42 @@
<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="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 {
background-color: rgb(168, 209, 141); background-color: #FFF2CC;
} }
.face { .face {
height: 130px; height: 130px;
position: absolute; position: absolute;
} }
.dropdown { .dropdown {
position: absolute; position: absolute;
display: none; display: none;
width: 200px; width: 200px;
height: 30px; height: 30px;
top: 40%; top: 30%;
left: 25%; left: 25%;
font-size: 17px; font-size: 17px;
background: #f8faf8; background: #f8faf8;
} }
.dropdown-content { .details {
display: none;
position: absolute; position: absolute;
background-color: #f1f1f1; display: none;
min-width: 160px; width: 642px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); height: 550px;
z-index: 1; top: 45%;
} left: 2%;
.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>
<body style="margin: 0px; overflow: hidden;"> <body style="margin: 0px; ">
<img id="ch" class="slide" style="display: none;" src="images/task1/CHR.png"> <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="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="s2" class="slide" style="display: none;" src="images/task1/F2.png">
...@@ -83,39 +65,19 @@ ...@@ -83,39 +65,19 @@
<img id="result" class="slide" style="display: none;" src="images/task1/result1.png"> <img id="result" class="slide" style="display: none;" src="images/task1/result1.png">
<img id="details" class="details" style="display: none;" src="images/task1/detail.png">
<div id="resultChart" <div id="resultChart"
style="display: none; position: absolute; top:190px; left:50%; z-index: 9; width: 500px; height: 300px;"> style="display: none; position: absolute; top:190px; left:60%; z-index: 9; width: 800px; height: 400px;">
<canvas id="myChart" width="500px" height="300px"></canvas> <canvas id="objectChart" width="500px" height="300px"></canvas>
<canvas id="typeChart" width="500px" height="300px"></canvas>
</div> </div>
<!-- dropdown --> <!-- dropdown for 1st bar chart-->
<!-- <div class="dropdown"> <div>
<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()"> <select id="slideList" class="dropdown" onchange="slideChange()">
<option value="none" selected disabled hidden>Select a Slide</option> <option value="none" selected disabled hidden>Select Slide</option>
<option value="1">Slide 1</option> <option value="1">Slide 1</option>
<option value="2">Slide 2</option> <option value="2">Slide 2</option>
<option value="3">Slide 3</option> <option value="3">Slide 3</option>
...@@ -138,13 +100,9 @@ ...@@ -138,13 +100,9 @@
</select> </select>
</div> </div>
<div id="message"></div>
<script type="text/javascript"> <script type="text/javascript">
function slideChange() { function slideChange() {
var slideNumber = document.getElementById("slideList").value; var slideNumber = document.getElementById("slideList").value;
showResults(slideNumber); showResults(slideNumber);
} }
...@@ -285,7 +243,7 @@ ...@@ -285,7 +243,7 @@
}, },
"F6I3": { "F6I3": {
"name": "hat", "name": "hat",
"type": "I", "type": "L",
"top": 403, "top": 403,
"bottom": 678, "bottom": 678,
"left": 560, "left": 560,
...@@ -311,7 +269,7 @@ ...@@ -311,7 +269,7 @@
}, },
"F7I3": { "F7I3": {
"name": "hat", "name": "hat",
"type": "I", "type": "L",
"top": 109, "top": 109,
"bottom": 355, "bottom": 355,
"left": 217, "left": 217,
...@@ -889,21 +847,22 @@ ...@@ -889,21 +847,22 @@
// <!-- start webgazer --> // <!-- start webgazer -->
var arr = {}; var arr = {};
var percentArr = {} var percentArr = {}
var percentArr2 = {}
var slideID = null; var slideID = null;
var slide = "ch"; var slide = "ch";
//pause variable(use to store the stste of game) //pause variable(use to store the stste of game)
var isPaused = false;
var isGameOver = false; var isGameOver = false;
var a var slideNumber
var started = false; var started = false;
var taskLoop; var taskLoop;
var taskPaused = false;
webgazer.setGazeListener(function (data, elapsedTime) { webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) { if (data == null) {
return; return;
} }
if(!started){ if (!started) {
showSlide(); showSlide();
taskLoop = setInterval(showSlide, 7000); taskLoop = setInterval(showSlide, 7000);
started = true; started = true;
...@@ -922,7 +881,9 @@ ...@@ -922,7 +881,9 @@
if (arr[slide] == undefined) { if (arr[slide] == undefined) {
arr[slide] = []; arr[slide] = [];
} }
arr[slide].push({ arr[slide].push({
"timestamp": Date.now(),
"x": xprediction, "x": xprediction,
"y": yprediction, "y": yprediction,
"bb": gazeObject.name, "bb": gazeObject.name,
...@@ -944,15 +905,7 @@ ...@@ -944,15 +905,7 @@
} }
function getGazeObject(slide, xcoordinate, ycoordinate) { 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") { if (slide == "s1") {
object1 = boundaryArr[slide]["F1I1"] object1 = boundaryArr[slide]["F1I1"]
if (((object1.left < xcoordinate) && (xcoordinate < object1.right)) && ((object1.top < ycoordinate) && (ycoordinate < object1.bottom))) { if (((object1.left < xcoordinate) && (xcoordinate < object1.right)) && ((object1.top < ycoordinate) && (ycoordinate < object1.bottom))) {
...@@ -1743,114 +1696,145 @@ ...@@ -1743,114 +1696,145 @@
// var type = "s"; // var type = "s";
var increment = 1; var increment = 1;
//function for pause game //function for pause game
document.addEventListener('keyup', function (e) { document.addEventListener('keyup', function (e) {
//32 is space bar button ASCII value //32 is space bar button ASCII value
console.log("e.which"); if (slide == "ch") {
console.log(e.which); if (e.which === 32) {
console.log("/e.which"); if (!taskPaused) {
alert("Game is paused"); pauseTask();
if (e.which === 32 && isGameOver == false) { } else {
//if(isPaused) resumeGame(); resumeTask();
//else pasuseGame(); }
// alert("Game is paused");
} else if (e.which === 13 && taskPaused) {
stopTask();
}
} }
}); });
// function pasuseGame(){ function pauseTask() {
// clearInterval(interval); if (!taskPaused) {
// isPaused = true; console.log("puased");
// 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); clearInterval(taskLoop);
clearTimeout(tempT)
$("#objectName").text("none")
webgazer.pause(); webgazer.pause();
taskPaused = true;
}
}
function resumeTask() {
if (taskPaused) {
console.log("resumed");
taskLoop = setInterval(showSlide, 9000);
webgazer.resume();
taskPaused = false;
}
}
function stopTask() {
console.log("stoped");
//calculate object percentages for each slide $(".slide").hide();
$("#result").show();
$("#slideList").show();
slide = "result";
clearInterval(taskLoop);
for (let slide in arr) { $("#objectName").text("none")
webgazer.pause();
OList = arr[slide].map((x) => { //calculate object percentages for each slide
return x.bb calculatePercentArray(arr, percentArr);
}) calculatePercentArray2(arr, percentArr2);
const count = {}; //showResults(slideNumber);
sendGazeDataToBackend(arr, percentArr);
for (const element of OList) { }
if (count[element]) {
count[element] += 1;
} else {
count[element] = 1;
}
}
var tot = OList.length function calculatePercentArray(arr, percentArr) {
for (let slide in arr) {
percentArr[slide] = {} OList = arr[slide].map((x) => {
for (let name in count) { return x.bb
percentArr[slide][name] = 100 * count[name] / tot })
}
const count = {};
for (const element of OList) {
if (count[element]) {
count[element] += 1;
} else {
count[element] = 1;
}
} }
//showResults(a);
sendGazeDataToBackend(arr, percentArr);
var tot = OList.length
percentArr[slide] = {}
for (let name in count) {
percentArr[slide][name] = 100 * count[name] / tot
}
return;
} }
}
$(".slide").hide(); function calculatePercentArray2(arr, percentArr2) {
for (let slide in arr) {
slideID = "#s" + parseInt(increment); OList = arr[slide].map((x) => {
$("#ch").show(); return x.type
$("#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; const count = {};
for (const element of OList) {
if (count[element]) {
count[element] += 1;
} else {
count[element] = 1;
}
}
var tot = OList.length
percentArr2[slide] = {}
for (let type in count) {
percentArr2[slide][type] = 100 * count[type] / tot
}
}
} }
var tempT;
function showSlide() {
if (increment >= 20) { //end of slides
stopTask();
} else {
$(".slide").hide();
slideID = "#s" + parseInt(increment);
$("#ch").show();
$("#objectName").text("none")
slide = "ch";
tempT = setTimeout(function () {
$("#ch").hide();
$(slideID).show();
slide = slideID.substr(1); //remove the # in the begining
console.log("slideID: " + slideID);
console.log("increment: " + increment);
}, 5000);
increment += 1;
}
}
// send Gaze Data To Backend // send Gaze Data To Backend
function sendGazeDataToBackend(dataArr, percentArray, user, task) { function sendGazeDataToBackend(dataArr, percentArray, user, task) {
//ajax //ajax
...@@ -1876,24 +1860,26 @@ ...@@ -1876,24 +1860,26 @@
} }
}); });
} }
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 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 + ")";
};
function drawChart(slideNumber, array, chart, canvasName, chartTitle){
var slidename = "s" + slideNumber;
var labelsArr = Object.getOwnPropertyNames(array[slidename]);
var valuesArr = []; var valuesArr = [];
var colorArr = []; var colorArr = [];
labelsArr.forEach((label) => { labelsArr.forEach((label) => {
valuesArr.push(percentArr[slidename][label]); valuesArr.push(array[slidename][label]);
colorArr.push(dynamicColors()); colorArr.push(dynamicColors());
}) })
...@@ -1901,7 +1887,7 @@ ...@@ -1901,7 +1887,7 @@
labels: labelsArr, labels: labelsArr,
datasets: [ datasets: [
{ {
label: 'Slide ' + a, label: 'Slide ' + slideNumber,
data: valuesArr, data: valuesArr,
backgroundColor: colorArr, backgroundColor: colorArr,
} }
...@@ -1920,18 +1906,48 @@ ...@@ -1920,18 +1906,48 @@
}, },
title: { title: {
display: true, display: true,
text: 'Slide ' + a text: chartTitle
} }
} },
scales: {
yAxes: [{
title: {
display: true,
text: 'Your Title Y'
}
}],
xAxes: [{
title: {
display: true,
text: 'Your Title X'
}
}]
}
}, },
}; };
if(myChart){ if (chart) {
console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA"); chart.destroy();
myChart.destroy();
} }
myChart = new Chart(document.getElementById('myChart'), config); chart = new Chart(document.getElementById(canvasName), config);
$("#dropdown").show(); return chart;
}
var objectChart;
var typeChart;
function showResults(slideNumber) {
if (objectChart) {
objectChart.destroy();
}
objectChart = drawChart(slideNumber, percentArr, objectChart, 'objectChart', 'Object Percentage')
if (typeChart) {
typeChart.destroy();
}
typeChart = drawChart(slideNumber, percentArr2, typeChart, 'typeChart', 'Type Percentage')
$("#resultChart").show(); $("#resultChart").show();
$("#dropdown").show();
$("#details").show();
} }
</script> </script>
......
frontend/task2.html
View file @ a49dd9ee
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
height: 130px; height: 130px;
position: absolute; position: absolute;
} }
.dropdown { .dropdown {
position: absolute; position: absolute;
display: none; display: none;
...@@ -61,9 +60,8 @@ ...@@ -61,9 +60,8 @@
</head> </head>
<body style="margin: 0px; overflow: hidden;"> <body style="margin: 0px; overflow: hidden;">
<audio id="backgroundsound" autoplay loop src="audio/background.mp3">
<audio autoplay> <!-- <source src="audio/background.mp3" type="audio/mpeg"> -->
<source src="audio/background.mp3" type="audio/mpeg">
</audio> </audio>
<img id="ch" class="slide" style="display: none;" src="images/task1/CHR.png"> <img id="ch" class="slide" style="display: none;" src="images/task1/CHR.png">
...@@ -95,31 +93,8 @@ ...@@ -95,31 +93,8 @@
</div> </div>
<!-- dropdown --> <!-- dropdown -->
<!-- <div class="dropdown">
<button class="dropbtn">Dropdown</button> <div >
<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()"> <select id="slideList" class="dropdown" onchange="slideChange()">
<option value="none" selected disabled hidden>Select a Slide</option> <option value="none" selected disabled hidden>Select a Slide</option>
<option value="1">Slide 1</option> <option value="1">Slide 1</option>
...@@ -898,18 +873,18 @@ ...@@ -898,18 +873,18 @@
var slideID = null; var slideID = null;
var slide = "ch"; var slide = "ch";
//pause variable(use to store the stste of game) //pause variable(use to store the stste of game)
var isPaused = false;
var isGameOver = false; var isGameOver = false;
var a var a
var started = false; var started = false;
var taskLoop; var taskLoop;
var taskPaused = false;
webgazer.setGazeListener(function (data, elapsedTime) { webgazer.setGazeListener(function (data, elapsedTime) {
if (data == null) { if (data == null) {
return; return;
} }
if (!started) { if(!started){
showSlide(); showSlide();
taskLoop = setInterval(showSlide, 7000); taskLoop = setInterval(showSlide, 7000);
started = true; started = true;
...@@ -1749,21 +1724,91 @@ ...@@ -1749,21 +1724,91 @@
// var type = "s"; // var type = "s";
var increment = 1; var increment = 1;
//function for pause game //function for pause game
document.addEventListener('keyup', function (e) { document.addEventListener('keyup', function (e) {
//32 is space bar button ASCII value //32 is space bar button ASCII value
console.log("e.which"); if(slide=="ch"){
console.log(e.which); if (e.which === 32) {
console.log("/e.which"); if(!taskPaused){
alert("Game is paused"); pauseTask();
if (e.which === 32 && isGameOver == false) { }else{
//if(isPaused) resumeGame(); resumeTask();
//else pasuseGame(); }
// alert("Game is paused");
}else if (e.which === 13 && taskPaused) {
stopTask();
}
} }
}); });
function pauseTask(){
if(!taskPaused){
console.log("puased");
clearInterval(taskLoop);
clearTimeout(tempT)
webgazer.pause();
taskPaused = true;
}
}
function resumeTask(){
if(taskPaused){
console.log("resumed");
taskLoop = setInterval(showSlide, 7000);
webgazer.resume();
taskPaused = false;
}
}
function stopTask(){
console.log("stoped");
$(".slide").hide();
$("#result").show();
$("#slideList").show();
slide = "result";
clearInterval(taskLoop);
$("#objectName").text("none")
webgazer.pause();
//calculate object percentages for each slide
calculatePercentArray(arr, percentArr);
//showResults(a);
sendGazeDataToBackend(arr, percentArr);
}
function calculatePercentArray(arr, percentArr){
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
}
}
}
// function pasuseGame(){ // function pasuseGame(){
// clearInterval(interval); // clearInterval(interval);
// isPaused = true; // isPaused = true;
...@@ -1793,70 +1838,32 @@ ...@@ -1793,70 +1838,32 @@
// } // }
var tempT;
function showSlide() { function showSlide() {
if (increment >= 20) { if (increment >= 20) { //end of slides
$(".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);
stopTask();
}else{
$(".slide").hide();
return; slideID = "#s" + parseInt(increment);
$("#ch").show();
$("#objectName").text("none")
slide = "ch";
tempT = setTimeout(function () {
$("#ch").hide();
$(slideID).show();
slide = slideID.substr(1); //remove the # in the begining
console.log("slideID: " + slideID);
console.log("increment: " + increment);
}, 5000);
increment += 1;
} }
$(".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 // send Gaze Data To Backend
function sendGazeDataToBackend(dataArr, percentArray, user, task) { function sendGazeDataToBackend(dataArr, percentArray, user, task) {
//ajax //ajax
...@@ -1882,6 +1889,7 @@ ...@@ -1882,6 +1889,7 @@
} }
}); });
} }
var myChart; var myChart;
function showResults(a) { function showResults(a) {
...@@ -1889,11 +1897,11 @@ ...@@ -1889,11 +1897,11 @@
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 slidename = "s" +a;
var labelsArr = Object.getOwnPropertyNames(percentArr[slidename]); var labelsArr = Object.getOwnPropertyNames(percentArr[slidename]);
var valuesArr = []; var valuesArr = [];
...@@ -1931,7 +1939,7 @@ ...@@ -1931,7 +1939,7 @@
} }
}, },
}; };
if (myChart) { if(myChart){
console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA"); console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA");
myChart.destroy(); myChart.destroy();
} }
......
frontend/taskDescription1.html
View file @ a49dd9ee
...@@ -6,12 +6,28 @@ ...@@ -6,12 +6,28 @@
</header> </header>
<br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
<body> <body>
<div class="main" >
<div>
<h1>සමස්ථ ක්‍රියාකාරකම පිළිබද හැදින්වීම :</h1>
</div>
<div>
<h3>මම ක්‍රියාකාරකම වයස අවුරුදු 4-7ත් දරුවන් සදහා නිර්මාණය කරන ලද්දකි.</h3>
<h3>ඉන්පසු පිවිසෙන්නේ calibration ක්‍රියාවලිය සිදු කිරීම සදහා සෑදූ වෙබ් පිටුව වෙතටයි. Calibration ක්‍රියාවලිය යනු මේ ක්‍රියාකාරකමේ ඉතා වැදගත් කොටසකි. එම නිසා ඒ ක්‍රියාවලිය නිවැරදිව සිදු කිරීම වැදගත් වේ</h3>
<h3>එහිදී මූලික පියවර ලෙස දරුවා පුටුවක් මත වාඩි කරවන්න. ඉන්පසු ඔබ ක්‍රියාකරකමට සහභාගී වීම සදහා යොදා ගන්නා laptop පරිගණකය හෝ desktop පරිගණකය දරුවාගේ මුහුණ මට්ටමට සමාන්තරව සිටිය පරිදි තිරස් මේසයක් මත නොසලවෙන සේ තබන්න</h3>
<h3>ඔබට දරුවාගේ මුහුණ මේ වන විට තිරය තම දිස්වේ. දරුවා නිවැරදි ඉරියව්වට පැමිණ ඇත්දැයි ඔබට දැනගැනීමට හැක. ඒ ඔබේ දරුවා නිවැරදි ආකරයට අසුන්ගෙන සිටීනම් එවිට තිරය මත ඔබේ දරුවාගෙ රූපය පෙනීම නැතිවී ගොස් තිරයේ වම් කෙරවල උඩ රූපයක් දිස්වේ.</h3>
<h3>දැන් දරුවාට ඒ රූපය දෙස බලා සිටීමට යැයි දැනුවත් කල ඔබ ඒ රූප උඩ තුන්වරක් බැගින් ඔබන්න. එක් රූපයක් මත ඔබ තුන්වරක් නිවැරදිව එබීම සිදු කලේ නම ඊලග රූපය මතු වේ.</h3>
<h3>එලස රූප 9 සදහාම නිවැරදිව සිදු කලේ නම් අවසන් රූපය තෙවරක් එබීමෙන් පසු ඊලග පිටුවට පිවිසීම සදහ උඩින් දිස් වන බොත්තම එබීම කල යුතුය.</h3>
<h3>ඉන්පසු පඉවිසෙන්නේ ක්‍රියාකරකම වෙතටයි. එහිදී දරුවාට තමා කැමති රූප දෙස බැලීමට උපදෙස් දෙන්න.</h3>
<h3>කිසියම් හේතුවක් නිසා දරුවාට ක්‍රියාකාරකම මගින් නැවතීමට අවශ්‍ය නම් ඔබ key board එකේ ඇති space යතුර එක වතාවක් ඔබන්න. එමගින් ක්‍රියාකාරකම තවකාලිකව නවතී. මද වෙලාවකින් පසු දරුවා නැවත ක්‍රියාකාරකම කිරීමය බලාපොරොත්තු වෙනවානම් ඒ සූදානම් වූ පසු නැවත එම space යතුරම ඔබන්න. එසේ නැතිනම් දරුවා ක්‍රියාකාරකම මගින් සම්පූර්ණයෙන්ම නවත්වයිනම් පලමු අවස්ථාවේ space යතුර එබීමෙන් පසුව enter යතුර ඔබන්න.</h3>
<h3>එවිය ක්‍රියාකාරකම අවසන් වී ප්‍රතිඵල තීරුවට යොමු වේ. මේ සියලු නැවැත්වීම ක්‍රියාවන් කල හැක්කේ කතිර සලකුන පෙනෙන අවස්ථාවේදී පමණි.</h3>
</div>
</div>
<br><br>
<div style="text-align:center"> <div style="text-align:center">
<h1>task1 Description</h1><br><br>
<input type="submit" value="ඊළග පිටුවට" name="submit" id="submit" onclick="location.href='start.html'"> <input type="submit" value="ඊළග පිටුවට" name="submit" id="submit" onclick="location.href='start.html'">
</div> </div>
<br><br><br><br>
</body> </body>
</html> </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