started to calibration process

parent ea56fff4
<!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='task1.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='task1.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
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