Mahayoga
/
MIF_E31231392
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Overlay

This commit is contained in:
Mahayoga 2026-05-26 04:32:07 +07:00
parent 1357d96c78
commit 22f532cdd6
4 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/users/assets/img/overlay/overlay.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/assets/users/assets/img/overlay/overlay_grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

26
resources/views/user/pages/finish_ujian/index.blade.php
View File

@ -334,6 +334,13 @@
<div id="heatmapChart" style="aspect-ratio: 16/9;"></div> <div id="heatmapChart" style="aspect-ratio: 16/9;"></div>
</div> </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>
</div> </div>
</section><!-- /About Section --> </section><!-- /About Section -->
@ -363,9 +370,11 @@
let recordedScreenWidth = null let recordedScreenWidth = null
let recordedScreenHeight = null let recordedScreenHeight = null
let mappedHeatmapData = null; let mappedHeatmapData = null;
let mappedHeatmapDataGrid = null;
let scaleX = null; let scaleX = null;
let scaleY = null; let scaleY = null;
let heatmapInstance = null; let heatmapInstance = null;
let heatmapInstanceGrid = null;
let score = null; let score = null;
let totalScore = null; let totalScore = null;
let soalTerjawab = 0; let soalTerjawab = 0;
@ -427,6 +436,15 @@ function renderVelocityChart(timeseries) {
max: 10, max: 10,
data: mappedHeatmapData 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'); heatmapContainer.style.removeProperty('position');
renderStats(result.statistics); renderStats(result.statistics);
} }
@ -657,7 +675,7 @@ function showInsight(type) {
ws.onmessage = (event) => { ws.onmessage = (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
console.log(data); // console.log(data);
if(data.type === 'json_file_data') { if(data.type === 'json_file_data') {
if(data.data != null) { if(data.data != null) {
data_tobii = null; data_tobii = null;
@ -688,6 +706,12 @@ function showInsight(type) {
maxOpacity: 0.6, maxOpacity: 0.6,
blur: 0.85 blur: 0.85
}); });
heatmapInstanceGrid = h337.create({
container: document.getElementById('heatmapChartGrid'),
radius: 40,
maxOpacity: 0.6,
blur: 0.85
});
loadData(data_tobii); loadData(data_tobii);
getPredict(data_tobii.data); getPredict(data_tobii.data);
} else { } else {

4
resources/views/user/pages/ujian/temp_index.blade.php
View File

@ -30,8 +30,8 @@
<div class="row justify-content-center flex-column p-4"> <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 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 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 class="fs-4 fw-bold p-2">Jawaban:</div>
</div> </div>
</div> </div>