Compare commits
2 Commits
9a895c57ba
...
6c41ac4cf3
| Author | SHA1 | Date |
|---|---|---|
 Mahayoga
|
6c41ac4cf3 | |
|
Mahayoga
|
01258eb92d |
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
namespace App\Http\Controllers;
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use App\Models\BookingModel;
|
||||||
use App\Models\DataSoalModel;
|
use App\Models\DataSoalModel;
|
||||||
use App\Models\DetailTestModel;
|
use App\Models\DetailTestModel;
|
||||||
use App\Models\TestSessionsModel;
|
use App\Models\TestSessionsModel;
|
||||||
|
|
@ -10,6 +11,39 @@
|
||||||
class FinishUjianController extends Controller
|
class FinishUjianController extends Controller
|
||||||
{
|
{
|
||||||
|
|
||||||
|
public function getNotAnswered(Request $request) {
|
||||||
|
$data_session = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
|
||||||
|
if($data_session != null) {
|
||||||
|
if($data_session->status_session == '0') {
|
||||||
|
return response()->json([
|
||||||
|
'status' => false,
|
||||||
|
'message' => 'Data sesi tes dinonaktifkan. Silahkan cek status dengan kode untuk informasi lebih lanjut.'
|
||||||
|
]);
|
||||||
|
} else if($data_session->status_session == '2') {
|
||||||
|
$soal = DataSoalModel::all();
|
||||||
|
$data_ujian = [];
|
||||||
|
foreach($soal as $detail) {
|
||||||
|
$data_soal = DetailTestModel::where('id_soal', $detail->id_soal)->where('id_test_sessions', $request->id_test_sessions)->first();
|
||||||
|
if($data_soal == null) {
|
||||||
|
$data_ujian[] = [
|
||||||
|
'id_soal' => $detail->id_soal,
|
||||||
|
'soal' => $detail->pertanyaan,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return response()->json([
|
||||||
|
'status' => true,
|
||||||
|
'data' => $data_ujian
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return response()->json([
|
||||||
|
'status' => false,
|
||||||
|
'message' => 'Data sesi tes tidak ditemukan.'
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public function getAllAnswer(Request $request) {
|
public function getAllAnswer(Request $request) {
|
||||||
$data_session = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
|
$data_session = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
|
||||||
if($data_session != null) {
|
if($data_session != null) {
|
||||||
|
|
@ -73,6 +107,53 @@ public function index(Request $request)
|
||||||
|
|
||||||
$data_session = TestSessionsModel::where('id_test_sessions', $id_session)->first();
|
$data_session = TestSessionsModel::where('id_test_sessions', $id_session)->first();
|
||||||
if($data_session != null) {
|
if($data_session != null) {
|
||||||
|
$start = strtotime($data_session->created_at);
|
||||||
|
$end = strtotime($data_session->updated_at);
|
||||||
|
$difference = gmdate("i:s", $end - $start);
|
||||||
|
|
||||||
|
$data_booking = BookingModel::where('id_booking', $data_session->id_booking)->first();
|
||||||
|
$data_information = [
|
||||||
|
'kode' => $data_booking->kode_unik,
|
||||||
|
'nama' => $data_booking->nama_lengkap,
|
||||||
|
'email' => $data_booking->email,
|
||||||
|
'no_hp' => $data_booking->no_telp,
|
||||||
|
];
|
||||||
|
|
||||||
|
$screen_dim = [
|
||||||
|
'width' => $data_session->screen_w,
|
||||||
|
'height' => $data_session->screen_h
|
||||||
|
];
|
||||||
|
|
||||||
|
$answered = DetailTestModel::where('id_test_sessions', $id_session)->where('jawaban', '!=', null)->count();
|
||||||
|
$question_count = DataSoalModel::all()->count();
|
||||||
|
$soalTerjawab = $answered;
|
||||||
|
$soalTidakTerjawab = $question_count - $answered;
|
||||||
|
|
||||||
|
$totalScore = 0;
|
||||||
|
$detail_test = DetailTestModel::where('id_test_sessions', $request->id_test_sessions)->get();
|
||||||
|
foreach($detail_test as $detail) {
|
||||||
|
$data_soal = DataSoalModel::where('id_soal', $detail->id_soal)->first();
|
||||||
|
$data_jawaban = $detail->jawaban;
|
||||||
|
if($data_jawaban == 'a') {
|
||||||
|
$totalScore += 1;
|
||||||
|
} else if($data_jawaban == 'b') {
|
||||||
|
$totalScore += 2;
|
||||||
|
} else if($data_jawaban == 'c') {
|
||||||
|
$totalScore += 3;
|
||||||
|
} else if($data_jawaban == 'd') {
|
||||||
|
$totalScore += 4;
|
||||||
|
} else if($data_jawaban == 'e') {
|
||||||
|
$totalScore += 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$data_aswered = [
|
||||||
|
'total_question' => $question_count,
|
||||||
|
'answered' => $answered,
|
||||||
|
'unanswered' => $soalTidakTerjawab,
|
||||||
|
'totalScore' => $totalScore
|
||||||
|
];
|
||||||
|
|
||||||
|
$data_booking = BookingModel::where('id_booking', $data_session->id_booking)->first();
|
||||||
if($data_session->status_session == '0') {
|
if($data_session->status_session == '0') {
|
||||||
return redirect()->route('cek-status.index')->with('error', 'Data sesi tes dinonaktifkan. Silahkan cek status dengan kode untuk informasi lebih lanjut.');
|
return redirect()->route('cek-status.index')->with('error', 'Data sesi tes dinonaktifkan. Silahkan cek status dengan kode untuk informasi lebih lanjut.');
|
||||||
} else if($data_session->status_session == '1') {
|
} else if($data_session->status_session == '1') {
|
||||||
|
|
@ -80,9 +161,15 @@ public function index(Request $request)
|
||||||
'status_session' => '2',
|
'status_session' => '2',
|
||||||
'is_active' => '0'
|
'is_active' => '0'
|
||||||
]);
|
]);
|
||||||
return view('user.pages.finish_ujian.index', compact('id_session'));
|
$data_booking->update([
|
||||||
|
'status_tes' => '2'
|
||||||
|
]);
|
||||||
|
return view('user.pages.finish_ujian.index', compact('id_session', 'difference', 'data_information', 'screen_dim', 'data_aswered'));
|
||||||
} else if($data_session->status_session == '2') {
|
} else if($data_session->status_session == '2') {
|
||||||
return view('user.pages.finish_ujian.index', compact('id_session'));
|
$data_booking->update([
|
||||||
|
'status_tes' => '2'
|
||||||
|
]);
|
||||||
|
return view('user.pages.finish_ujian.index', compact('id_session', 'difference', 'data_information', 'screen_dim', 'data_aswered'));
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return redirect()->route('cek-status.index')->with('error', 'Data sesi tes tidak ditemukan.');
|
return redirect()->route('cek-status.index')->with('error', 'Data sesi tes tidak ditemukan.');
|
||||||
|
|
|
||||||
|
|
@ -198,9 +198,22 @@ function searchUserStatus() {
|
||||||
$('#result_test_form').show();
|
$('#result_test_form').show();
|
||||||
}
|
}
|
||||||
} else if(response.status_data == 2) {
|
} else if(response.status_data == 2) {
|
||||||
|
let test_session = getTestSession(response.id_booking);
|
||||||
|
|
||||||
$('#alert_status').removeClass();
|
$('#alert_status').removeClass();
|
||||||
$('#alert_status').addClass('alert alert-success');
|
$('#alert_status').addClass('alert alert-success');
|
||||||
$('#alert_status').html('Kamu sudah melakukan tes, dan bisa cek hasil dengan tombol dibawah');
|
$('#alert_status').html('Kamu sudah melakukan tes, dan bisa cek hasil dengan tombol dibawah');
|
||||||
|
|
||||||
|
$('#result_test_status').html('Selesai');
|
||||||
|
$('#result_test_status').removeClass();
|
||||||
|
$('#result_test_status').addClass('fw-bold text-white bg-success p-2 rounded-pill');
|
||||||
|
let test_url = '{{ route('hasil-tes.index', ['id_test_sessions' => '__ID_TEST_SESSIONS__']) }}';
|
||||||
|
$('#result_test_form').hide();
|
||||||
|
$('#result_test_link').show();
|
||||||
|
$('#result_test_link').html('Tes Sudah Selesai, Klik untuk melihat hasil');
|
||||||
|
$('#result_test_link').attr('href', test_url.replace('__ID_TEST_SESSIONS__', test_session.id_test_sessions));
|
||||||
|
|
||||||
|
$('#result_test').show();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,23 @@
|
||||||
@section('title', 'Hasil Tes')
|
@section('title', 'Hasil Tes')
|
||||||
@extends('user.layouts.index')
|
@extends('user.layouts.index')
|
||||||
@section('content')
|
@section('content')
|
||||||
|
<style>
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-custom {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<!-- Page Title -->
|
<!-- Page Title -->
|
||||||
<div class="page-title">
|
<div class="page-title">
|
||||||
<div class="heading">
|
<div class="heading">
|
||||||
|
|
@ -18,7 +35,7 @@
|
||||||
<nav class="breadcrumbs">
|
<nav class="breadcrumbs">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<ol>
|
<ol>
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="{{ route('beranda.index') }}">Home</a></li>
|
||||||
<li class="current">Hasil Tes</li>
|
<li class="current">Hasil Tes</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -27,8 +44,252 @@
|
||||||
|
|
||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<section id="about" class="about section">
|
<section id="about" class="about section">
|
||||||
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
<div class="container mt-5">
|
||||||
|
<h1 class="text-center mb-4">
|
||||||
|
Prediksi & Analisis Kecemasan
|
||||||
|
</h1>
|
||||||
|
<div class="row g-4">
|
||||||
|
<!-- STAI Score -->
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card h-100 shadow-sm">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h4 class="card-title">
|
||||||
|
Skor STAI-T
|
||||||
|
</h4>
|
||||||
|
<h2 class="mt-4">
|
||||||
|
{{ $data_aswered['totalScore'] }}
|
||||||
|
</h2>
|
||||||
|
<p class="text-muted">
|
||||||
|
Hasil dari kuesioner kecemasan
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-clipboard2-pulse fs-3"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Anxiety Level -->
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card h-100 shadow-sm">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h4 class="card-title">
|
||||||
|
Tingkat Kecemasan
|
||||||
|
</h4>
|
||||||
|
@if ($data_aswered['totalScore'] >= 20)
|
||||||
|
<h2 class="mt-4 text-success">
|
||||||
|
Normal
|
||||||
|
</h2>
|
||||||
|
@elseif ($data_aswered['totalScore'] <= 44)
|
||||||
|
<h2 class="mt-4 text-warning">
|
||||||
|
Sedang
|
||||||
|
</h2>
|
||||||
|
@elseif ($data_aswered['totalScore'] <= 80)
|
||||||
|
<h2 class="mt-4 text-danger">
|
||||||
|
Tinggi
|
||||||
|
</h2>
|
||||||
|
@endif
|
||||||
|
<p class="text-muted">
|
||||||
|
Berdasarkan skor <a href="https://headway.co/resources/state-trait-anxiety-inventory-scoring" target="_blank"><i>STAI-T</i></a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-emoji-neutral fs-3"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- AI Prediction -->
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card h-100 shadow-sm">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between align-items-start">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h4 class="card-title">
|
||||||
|
Prediksi AI
|
||||||
|
</h4>
|
||||||
|
<h5 class="mt-4">
|
||||||
|
Belum tersedia
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted">
|
||||||
|
Model AI masih dalam tahap pengembangan
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-cpu fs-3"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<h2 class="title text-center">Detail Tes/Ujian kamu</h2>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Informasi Pribadi</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-person-vcard fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><strong>Kode Booking:</strong> {{ $data_information['kode'] }}</li>
|
||||||
|
<li><strong>Nama:</strong> {{ $data_information['nama'] }}</li>
|
||||||
|
<li><strong>Email:</strong> {{ $data_information['email'] }}</li>
|
||||||
|
<li><strong>Nomor Handphone:</strong> {{ $data_information['no_hp'] }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Informasi Ujian</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-clipboard fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><strong>Durasi Ujian:</strong> {{ $difference }}</li>
|
||||||
|
<li><strong>Resolusi Layar (saat ujian):</strong> {{ $screen_dim['width'] }} x {{ $screen_dim['height'] }}</li>
|
||||||
|
<li><strong>Jumlah Pergerakan Mata:</strong> <span id="total_movement">0</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Hasil Ujian (STAI-T)</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-easel fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li><strong>Jumlah Soal:</strong> {{ $data_aswered['total_question'] }}</li>
|
||||||
|
<li><strong>Soal terjawab:</strong> {{ $data_aswered['answered'] }}</li>
|
||||||
|
<li><strong>Soal tidak terjawab:</strong> {{ $data_aswered['unanswered'] }}</li>
|
||||||
|
<li><strong>Total Skor:</strong> {{ $data_aswered['totalScore'] }}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Avg Velocity</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-speedometer2 fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 id="avgVelocity"></h4>
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="btn btn-link p-0" onclick="showInsight('velocity')"><i class="bi bi-info-circle"></i> Lihat Insight</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Fixation Ratio</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-bullseye fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 id="fixationRatio"></h4>
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="btn btn-link p-0" onclick="showInsight('fixation')"><i class="bi bi-info-circle"></i> Lihat Insight</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Total Eye Distance</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-arrows-fullscreen fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 id="totalDistance"></h4>
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="btn btn-link p-0" onclick="showInsight('distance')"><i class="bi bi-info-circle"></i> Lihat Insight</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="bg-custom p-4 my-3 border rounded">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h5 class="text-body">Most Viewed Area</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2 d-flex justify-content-center align-items-center bg-primary-subtle border border primary rounded-circle" style="aspect-ratio: 1/1;">
|
||||||
|
<i class="bi bi-geo-alt fs-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 id="mostViewedArea"></h4>
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="btn btn-link p-0" onclick="showInsight('area')"><i class="bi bi-info-circle"></i> Lihat Insight</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container mt-5" data-aos="fade-up" data-aos-delay="100">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<h2 class="title text-center">Tabel soal yang telah dijawab</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 mt-2">
|
||||||
<table class="table" id="table-data-hasil-ujian">
|
<table class="table" id="table-data-hasil-ujian">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>No</th>
|
||||||
|
<th>Pertanyaan</th>
|
||||||
|
<th>Jawaban</th>
|
||||||
|
<th>Skor</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<h2 class="title text-center">Tabel soal yang tidak dijawab</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 mt-2">
|
||||||
|
<table class="table" id="table-data-soal-not-answer">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>No</th>
|
<th>No</th>
|
||||||
|
|
@ -39,17 +300,19 @@
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container mt-5">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<h2 class="title">Grafik Kecepatan Mata</h2>
|
<h2 class="title text-center">Grafik Kecepatan Mata</h2>
|
||||||
<canvas id="velocityChart"></canvas>
|
<canvas id="velocityChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-12 mt-5">
|
<div class="col-lg-12 mt-5">
|
||||||
<h2 class="title">Heatmap Pergerakan Mata</h2>
|
<h2 class="title text-center">Heatmap Pergerakan Mata</h2>
|
||||||
<div style="position: relative; aspect-ratio: 16/9;">
|
<div style="position: relative; aspect-ratio: 16/9;">
|
||||||
<img src="{{ asset('assets/users/assets/img/overlay/overlay.png') }}" style="width:100%; height:100%; object-fit: cover;">
|
<img src="{{ asset('assets/users/assets/img/overlay/overlay.png') }}" style="width:100%; height:100%; object-fit: cover; position: absolute;">
|
||||||
<div id="heatmapChart" style="aspect-ratio: 16/9;"></div>
|
<div id="heatmapChart" style="aspect-ratio: 16/9;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -85,6 +348,9 @@
|
||||||
let scaleX = null;
|
let scaleX = null;
|
||||||
let scaleY = null;
|
let scaleY = null;
|
||||||
let heatmapInstance = null;
|
let heatmapInstance = null;
|
||||||
|
let score = null;
|
||||||
|
let totalScore = null;
|
||||||
|
let soalTerjawab = 0;
|
||||||
|
|
||||||
function renderVelocityChart(timeseries) {
|
function renderVelocityChart(timeseries) {
|
||||||
const base = timeseries.timestamp[0];
|
const base = timeseries.timestamp[0];
|
||||||
|
|
@ -144,9 +410,104 @@ function renderVelocityChart(timeseries) {
|
||||||
data: mappedHeatmapData
|
data: mappedHeatmapData
|
||||||
});
|
});
|
||||||
heatmapContainer.style.removeProperty('position');
|
heatmapContainer.style.removeProperty('position');
|
||||||
|
renderStats(result.statistics);
|
||||||
|
Swal.close();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderStats(stats) {
|
||||||
|
document.getElementById("avgVelocity")
|
||||||
|
.innerText = stats.avg_velocity.toFixed(4);
|
||||||
|
|
||||||
|
document.getElementById("fixationRatio")
|
||||||
|
.innerText = stats.fixation_ratio.toFixed(2) + "%";
|
||||||
|
|
||||||
|
document.getElementById("totalDistance")
|
||||||
|
.innerText = stats.total_distance.toFixed(2);
|
||||||
|
|
||||||
|
document.getElementById("mostViewedArea")
|
||||||
|
.innerText = stats.most_viewed_area;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showInsight(type) {
|
||||||
|
let title = null;
|
||||||
|
let html = null;
|
||||||
|
|
||||||
|
if(type === "velocity") {
|
||||||
|
title = "Avg Velocity";
|
||||||
|
html = `
|
||||||
|
<p>
|
||||||
|
Rata-rata kecepatan gerakan mata selama ujian.
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<b>Nilai tinggi:</b>
|
||||||
|
<p>
|
||||||
|
Mata aktif berpindah area,
|
||||||
|
Aktivitas visual tinggi
|
||||||
|
</p>
|
||||||
|
<b>Nilai rendah:</b>
|
||||||
|
<p>
|
||||||
|
Fokus lebih stabil,
|
||||||
|
Gerakan mata lebih tenang
|
||||||
|
</p>
|
||||||
|
`;
|
||||||
|
} else if(type === "fixation") {
|
||||||
|
title = "Fixation Ratio";
|
||||||
|
|
||||||
|
html = `
|
||||||
|
<p>
|
||||||
|
Persentase waktu mata berada pada area tertentu.
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<b>Semakin tinggi:</b>
|
||||||
|
<p>
|
||||||
|
Fokus lebih lama pada suatu area,
|
||||||
|
Perhatian lebih stabil
|
||||||
|
</p>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
else if(type === "distance") {
|
||||||
|
title = "Total Eye Distance";
|
||||||
|
html = `
|
||||||
|
<p>
|
||||||
|
Total jarak perpindahan mata selama ujian.
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<b>Nilai besar:</b>
|
||||||
|
<p>
|
||||||
|
Mata banyak menjelajah layar,
|
||||||
|
Aktivitas visual tinggi
|
||||||
|
</p>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
else if(type === "area") {
|
||||||
|
title = "Most Viewed Area";
|
||||||
|
html = `
|
||||||
|
<p>
|
||||||
|
Area layar yang paling sering dilihat selama ujian.
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<b>Insight:</b>
|
||||||
|
<p>
|
||||||
|
Menunjukkan fokus utama pengguna,
|
||||||
|
Dapat membantu memahami pola perhatian
|
||||||
|
</p>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
title = "Huh?";
|
||||||
|
html = `<h1>Hello There :D</h1>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
title: title,
|
||||||
|
html: html,
|
||||||
|
icon: 'info',
|
||||||
|
showConfirmButton: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
table = new DataTable("#table-data-hasil-ujian", {
|
table = new DataTable("#table-data-hasil-ujian", {
|
||||||
searching: false,
|
searching: false,
|
||||||
|
|
@ -171,19 +532,56 @@ function renderVelocityChart(timeseries) {
|
||||||
let renderedJawaban = null;
|
let renderedJawaban = null;
|
||||||
if(row.jawaban_key == 'a') {
|
if(row.jawaban_key == 'a') {
|
||||||
renderedJawaban = `<span class="badge text-bg-primary">${row.jawaban}</span>`;
|
renderedJawaban = `<span class="badge text-bg-primary">${row.jawaban}</span>`;
|
||||||
|
score = 1;
|
||||||
} else if(row.jawaban_key == 'b') {
|
} else if(row.jawaban_key == 'b') {
|
||||||
renderedJawaban = `<span class="badge" style="background-color: #fc7938; color: white;">${row.jawaban}</span>`;
|
renderedJawaban = `<span class="badge" style="background-color: #fc7938; color: white;">${row.jawaban}</span>`;
|
||||||
|
score = 2;
|
||||||
} else if(row.jawaban_key == 'c') {
|
} else if(row.jawaban_key == 'c') {
|
||||||
renderedJawaban = `<span class="badge text-bg-danger">${row.jawaban}</span>`;
|
renderedJawaban = `<span class="badge text-bg-danger">${row.jawaban}</span>`;
|
||||||
|
score = 3;
|
||||||
} else if(row.jawaban_key == 'd') {
|
} else if(row.jawaban_key == 'd') {
|
||||||
renderedJawaban = `<span class="badge text-bg-warning">${row.jawaban}</span>`;
|
renderedJawaban = `<span class="badge text-bg-warning">${row.jawaban}</span>`;
|
||||||
|
score = 4;
|
||||||
} else if(row.jawaban_key == 'e') {
|
} else if(row.jawaban_key == 'e') {
|
||||||
renderedJawaban = `<span class="badge text-bg-success">${row.jawaban}</span>`;
|
renderedJawaban = `<span class="badge text-bg-success">${row.jawaban}</span>`;
|
||||||
|
score = 5;
|
||||||
} else {
|
} else {
|
||||||
renderedJawaban = `<span class="badge text-bg-secondary">${row.jawaban}</span>`;
|
renderedJawaban = `<span class="badge text-bg-secondary">${row.jawaban}</span>`;
|
||||||
}
|
}
|
||||||
return renderedJawaban;
|
return renderedJawaban;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: null,
|
||||||
|
render: function(data, type, row) {
|
||||||
|
return `<span>${score}</span>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
table = new DataTable("#table-data-soal-not-answer", {
|
||||||
|
searching: false,
|
||||||
|
paging: false,
|
||||||
|
ajax: {
|
||||||
|
url: '{{ route('hasil-tes.getNotAnswered', ['id_test_sessions' => $id_session]) }}',
|
||||||
|
dataSrc: 'data' // Specify the key containing the data array
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
data: null,
|
||||||
|
render: function(data, type, row, meta) {
|
||||||
|
return meta.row + 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: 'soal'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: null,
|
||||||
|
render: function(data, type, row, meta) {
|
||||||
|
return `<span class="badge text-bg-secondary">Tidak dijawab</span>`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
@ -208,28 +606,34 @@ function renderVelocityChart(timeseries) {
|
||||||
const data = JSON.parse(event.data);
|
const data = JSON.parse(event.data);
|
||||||
if(data.type === 'json_file_data') {
|
if(data.type === 'json_file_data') {
|
||||||
if(data.data != null) {
|
if(data.data != null) {
|
||||||
data_tobii = data.data;
|
data_tobii = null;
|
||||||
let xhttp = new XMLHttpRequest();
|
let xhttp = new XMLHttpRequest();
|
||||||
|
|
||||||
xhttp.onreadystatechange = function() {
|
xhttp.onreadystatechange = function() {
|
||||||
if(this.readyState == 4 && this.status == 200) {
|
if(this.readyState == 4 && this.status == 200) {
|
||||||
let data = JSON.parse(this.responseText);
|
let data_ = JSON.parse(this.responseText);
|
||||||
if(data.status) {
|
$('#total_movement').html(data.data.length + " (1 detik = 3 pergerakan)");
|
||||||
|
if(data_.status) {
|
||||||
heatmapContainer = document.getElementById('heatmapChart');
|
heatmapContainer = document.getElementById('heatmapChart');
|
||||||
clientWidth = heatmapContainer.clientWidth;
|
clientWidth = heatmapContainer.clientWidth;
|
||||||
clientHeight = heatmapContainer.clientHeight;
|
clientHeight = heatmapContainer.clientHeight;
|
||||||
recordedScreenWidth = data.screen_w;
|
recordedScreenWidth = data_.screen_w;
|
||||||
recordedScreenHeight = data.screen_h;
|
recordedScreenHeight = data_.screen_h;
|
||||||
scaleX = clientWidth / recordedScreenWidth;
|
scaleX = clientWidth / recordedScreenWidth;
|
||||||
scaleY = clientHeight / recordedScreenHeight;
|
scaleY = clientHeight / recordedScreenHeight;
|
||||||
|
|
||||||
|
data_tobii = {
|
||||||
|
data: data.data,
|
||||||
|
screen_w: recordedScreenWidth,
|
||||||
|
screen_h: recordedScreenHeight
|
||||||
|
};
|
||||||
|
|
||||||
heatmapInstance = h337.create({
|
heatmapInstance = h337.create({
|
||||||
container: heatmapContainer,
|
container: heatmapContainer,
|
||||||
radius: 40,
|
radius: 40,
|
||||||
maxOpacity: 0.6,
|
maxOpacity: 0.6,
|
||||||
blur: 0.85
|
blur: 0.85
|
||||||
});
|
});
|
||||||
Swal.close();
|
|
||||||
loadData(data_tobii);
|
loadData(data_tobii);
|
||||||
} else {
|
} else {
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
|
|
@ -244,7 +648,7 @@ function renderVelocityChart(timeseries) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
xhttp.open('GET', '{{ route('test-sessions.getScreen', ['id_test_sessions', $id_session]) }}', true);
|
xhttp.open('GET', '{{ route('test-sessions.getScreen', ['id_test_sessions' => $id_session]) }}', true);
|
||||||
xhttp.send();
|
xhttp.send();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,7 @@
|
||||||
Route::get('ujian/fetch/navigation-field', [HalamanUjianController::class, 'getNavigationField'])->name('ujian.navigationField');
|
Route::get('ujian/fetch/navigation-field', [HalamanUjianController::class, 'getNavigationField'])->name('ujian.navigationField');
|
||||||
Route::resource('hasil-tes', FinishUjianController::class)->only(['index', 'show']);
|
Route::resource('hasil-tes', FinishUjianController::class)->only(['index', 'show']);
|
||||||
Route::get('hasil-tes/get/all-answer', [FinishUjianController::class, 'getAllAnswer'])->name('hasil-tes.getAllAnswer');
|
Route::get('hasil-tes/get/all-answer', [FinishUjianController::class, 'getAllAnswer'])->name('hasil-tes.getAllAnswer');
|
||||||
|
Route::get('hasil-tes/get/all-not-answer', [FinishUjianController::class, 'getNotAnswered'])->name('hasil-tes.getNotAnswered');
|
||||||
Route::middleware(['auth', 'role.auth'])->group(function() {
|
Route::middleware(['auth', 'role.auth'])->group(function() {
|
||||||
Route::resource('dashboard', DashboardController::class);
|
Route::resource('dashboard', DashboardController::class);
|
||||||
Route::resource('users', UsersController::class);
|
Route::resource('users', UsersController::class);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue