model creation complete with code modification

frontend/task1.html

@@ -19,7 +19,7 @@
 		}
 
 		.dropdown {
-			position: absolute;
+			/* position: absolute; */
 			display: none;
 			width: 200px;
 			height: 30px;
@@ -30,7 +30,7 @@
 		}
 
 		.details {
-			position: absolute;
+			/* position: absolute; */
 			display: none;
 			width: 642px;
 			height: 550px;
@@ -80,15 +80,6 @@
 
 	<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"
-		style="display: none; position: absolute; top:190px; left:60%; z-index: 9; width: 800px; height: 400px;">
-		<canvas id="objectChart" width="500px" height="300px"></canvas>
-		<canvas id="typeChart" width="500px" height="300px"></canvas>
-	</div>
-
 	<!-- dropdown for 1st bar chart-->
 	<div>
 		<select id="slideList" class="dropdown" onchange="slideChange()">
@@ -114,8 +105,21 @@
 			<option value="19">Slide 19</option>
 			<option value="all">All Slide</option>
 		</select>
+		<button class="dropdown" onclick="window.print()">තොරතුරු බාගත කරගන්න</button>
 	</div>
 
+	<img id="details" class="details " style="display: none;" src="images/task1/detail.png">
+
+
+	<div id="resultChart"
+		style="display: none; margin-left: 40px; top:190px; left:60%; z-index: 9; width: 800px; height: 400px;">
+		<h1 id="avgAttention"></h1>
+		<canvas id="objectChart" width="500px" height="300px"></canvas>
+		<canvas id="typeChart" width="500px" height="300px"></canvas>
+	</div>
+
+	
+
 	<script type="text/javascript">
 
 		function slideChange() {
@@ -905,14 +909,11 @@
 
 			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] = [];
 				}
@@ -2420,8 +2421,14 @@
 				}
 				typeChart = drawChart(slideNumber, percentArr2, typeChart, 'typeChart', 'Type Percentage')
 			}
+			
+			// avgAttention
+			avgAtt = 100-percentArr2.sall.none
+			console.log("Average attention: " + Math.round(avgAtt*100)/100 + " %")
+			$("#avgAttention").html("Average attention: " + Math.round(avgAtt*100)/100 + " %")
 			$("#resultChart").show();
 			$("#dropdown").show();
+			$(".dropdown").show();
 			$("#details").show();
 		}