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
Expand all 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
This diff is collapsed.
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