halaman-psikolog #1
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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" id="answer_field">
|
||||
<div class="col-md-12 p-2 fs-1 text-muted" id="text_question" style="text-align: justify"></div>
|
||||
<div class="col-md-12 fs-1 text-muted" id="answer_field">
|
||||
<div class="fs-4 fw-bold p-2">Jawaban:</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue