resources/views/user/pages/finish_ujian/index.blade.php

@@ -334,6 +334,13 @@
             <div id="heatmapChart" style="aspect-ratio: 16/9;"></div>
           </div>
         </div>
+        <div class="col-lg-12 mt-5">
+          <h2 class="title text-center">Heatmap Pergerakan Mata (Grid)</h2>
+          <div style="position: relative; aspect-ratio: 16/9;">
+            <img src="{{ asset('assets/users/assets/img/overlay/overlay_grid.png') }}" style="width:100%; height:100%; object-fit: cover; position: absolute;">
+            <div id="heatmapChartGrid" style="aspect-ratio: 16/9;"></div>
+          </div>
+        </div>
       </div>
     </div>
   </section><!-- /About Section -->
@@ -363,9 +370,11 @@
     let recordedScreenWidth = null
     let recordedScreenHeight = null
     let mappedHeatmapData = null;
+    let mappedHeatmapDataGrid = null;
     let scaleX = null;
     let scaleY = null;
     let heatmapInstance = null;
+    let heatmapInstanceGrid = null;
     let score = null;
     let totalScore = null;
     let soalTerjawab = 0;
@@ -427,6 +436,15 @@ function renderVelocityChart(timeseries) {
           max: 10,
           data: mappedHeatmapData
         });
+        mappedHeatmapDataGrid = result.heatmap.map(point => ({
+          x: point.x * scaleX,
+          y: point.y * scaleY,
+          value: point.value
+        }));
+        heatmapInstanceGrid.setData({
+          max: 10,
+          data: mappedHeatmapDataGrid
+        });
         heatmapContainer.style.removeProperty('position');
         renderStats(result.statistics);
       }
@@ -657,7 +675,7 @@ function showInsight(type) {
 
         ws.onmessage = (event) => {
           const data = JSON.parse(event.data);
-          console.log(data);
+          // console.log(data);
           if(data.type === 'json_file_data') {
             if(data.data != null) {
               data_tobii = null;
@@ -688,6 +706,12 @@ function showInsight(type) {
                       maxOpacity: 0.6,
                       blur: 0.85
                     });
+                    heatmapInstanceGrid = h337.create({
+                      container: document.getElementById('heatmapChartGrid'),
+                      radius: 40,
+                      maxOpacity: 0.6,
+                      blur: 0.85
+                    });
                     loadData(data_tobii);
                     getPredict(data_tobii.data);
                   } else {

resources/views/user/pages/ujian/temp_index.blade.php

@@ -30,8 +30,8 @@
           <div class="row justify-content-center flex-column p-4">
             <div class="col-md-12 border-bottom fs-4 fw-bold p-2">Soal</div>
             <div class="col-md-12 p-2 d-none" id="id_question" style="text-align: justify"></div>
-            <div class="col-md-12 p-2" id="text_question" style="text-align: justify"></div>
+            <div class="col-md-12 p-2 fs-1 text-muted" id="text_question" style="text-align: justify"></div>
-            <div class="col-md-12" id="answer_field">
+            <div class="col-md-12 fs-1 text-muted" id="answer_field">
               <div class="fs-4 fw-bold p-2">Jawaban:</div>
             </div>
           </div>