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

frontend/task1.html

@@ -6,6 +6,8 @@
 	<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 {
@@ -16,6 +18,44 @@
 			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>
 
@@ -41,16 +81,74 @@
 	<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/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;" >
-        <canvas id="myChart" width="400" height="400"></canvas>
+	<!-- 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>
 
-	<!-- <p id="objectName" style="position: absolute; top:500px; left: 500px;">Object name</p> -->
+	<div id="message"></div>
+
 
 	<script type="text/javascript">
 
+		function slideChange() {
+
+			var slideNumber = document.getElementById("slideList").value;
+			showResults(slideNumber);
+		}
+
 		sessionStorage.setItem("task_name", "task1");
 
 		boundaryArr = {
@@ -793,12 +891,24 @@
 		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
@@ -823,22 +933,6 @@
 
 		}).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() {
 			var prediction = webgazer.getCurrentPrediction();
@@ -1649,13 +1743,56 @@
 
 		// var type = "s";
 		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() {
 			if (increment >= 20) {
 				$(".slide").hide();
 				$("#result").show();
+				$("#slideList").show();
 				slide = "result";
 				clearInterval(taskLoop);
 
@@ -1688,7 +1825,7 @@
 					}
 
 				}
-                showResults();
+				//showResults(a);
 				sendGazeDataToBackend(arr, percentArr);
 
 
@@ -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 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["s4"])
+			var labelsArr = Object.getOwnPropertyNames(percentArr[slidename]);
 			var valuesArr = [];
 			var colorArr = [];
-            labelsArr.forEach((label)=>{
-                valuesArr.push(percentArr["s4"][label]);
+			labelsArr.forEach((label) => {
+				valuesArr.push(percentArr[slidename][label]);
 				colorArr.push(dynamicColors());
 			})
 
@@ -1761,7 +1901,7 @@
 				labels: labelsArr,
 				datasets: [
 					{
-                        label: 'Slide 4',
+						label: 'Slide ' + a,
 						data: valuesArr,
 						backgroundColor: colorArr,
 					}
@@ -1769,23 +1909,28 @@
 			};
 
 			const config = {
-                type: 'pie',
+				type: 'bar',
 				data: data,
 				options: {
 					responsive: true,
 					plugins: {
 						legend: {
 							position: 'top',
+							display: false
 						},
 						title: {
 							display: true,
-                        text: 'Results'
+							text: 'Slide ' + a
 						}
 					}
 				},
 			};
-
-            const myChart = new Chart(document.getElementById('myChart'), config);
+			if(myChart){
+				console.log("AFASFASFASFASFASFSAFSAAFAFASFSAFASFDFAFA");
+				myChart.destroy();
+			}
+			myChart = new Chart(document.getElementById('myChart'), config);
+			$("#dropdown").show();
 			$("#resultChart").show();
 		}