diff --git a/app/Http/Controllers/FinishUjianController.php b/app/Http/Controllers/FinishUjianController.php
index df0a64d..ce0e397 100644
--- a/app/Http/Controllers/FinishUjianController.php
+++ b/app/Http/Controllers/FinishUjianController.php
@@ -9,6 +9,54 @@
 
 class FinishUjianController extends Controller
 {
+
+    public function getAllAnswer(Request $request) {
+        $data_session = TestSessionsModel::where('id_test_sessions', $request->id_test_sessions)->first();
+        if($data_session != null) {
+            if($data_session->status_session != '1') {
+                return response()->json([
+                    'status' => false,
+                    'message' => 'Data sesi tes belum dimulai atau telah usai. Silahkan cek status dengan kode untuk informasi lebih lanjut.'
+                ]);
+            } else if($data_session->status_session == '1') {
+                $detail_test = DetailTestModel::where('id_test_sessions', $request->id_test_sessions)->get();
+                $data_ujian = [];
+                foreach($detail_test as $detail) {
+                    $data_soal = DataSoalModel::where('id_soal', $detail->id_soal)->first();
+                    $data_jawaban = $detail->jawaban;
+                    if($data_jawaban == 'a') {
+                        $data_jawaban = $data_soal->jawaban_a;
+                    } else if($data_jawaban == 'b') {
+                        $data_jawaban = $data_soal->jawaban_b;
+                    } else if($data_jawaban == 'c') {
+                        $data_jawaban = $data_soal->jawaban_c;
+                    } else if($data_jawaban == 'd') {
+                        $data_jawaban = $data_soal->jawaban_d;
+                    } else if($data_jawaban == 'e') {
+                        $data_jawaban = $data_soal->jawaban_e;
+                    } else {
+                        $data_jawaban = 'Tidak menjawab';
+                    }
+                    $data_ujian[] = [
+                        'id_soal' => $detail->id_soal,
+                        'jawaban' => $data_jawaban,
+                        'jawaban_key' => $detail->jawaban,
+                        'soal' => $data_soal->pertanyaan
+                    ];
+                }
+                return response()->json([
+                    'status' => true,
+                    'data' => $data_ujian
+                ]);
+            }
+        } else {
+            return response()->json([
+                'status' => false,
+                'message' => 'Data sesi tes tidak ditemukan.'
+            ]);
+        }
+    }
+
     /**
      * Display a listing of the resource.
      */
@@ -32,17 +80,7 @@ public function index(Request $request)
                 //     'status_session' => '2',
                 //     'is_active' => '0'
                 // ]);
-                $detail_test = DetailTestModel::where('id_test_sessions', $id_session)->get();
-                $data_ujian = [];
-                foreach($detail_test as $detail) {
-                    $data_soal = DataSoalModel::where('id_soal', $detail->id_soal)->first();
-                    $data_ujian[] = [
-                        'id_soal' => $detail->id_soal,
-                        'jawaban' => $detail->jawaban,
-                        'soal' => $data_soal ? $data_soal->soal : null
-                    ];
-                }
-                return view('user.pages.finish_ujian.index', compact('data_ujian', 'id_session'));
+                return view('user.pages.finish_ujian.index', compact('id_session'));
             }
         } else {
             return redirect()->route('cek-status.index')->with('error', 'Data sesi tes tidak ditemukan.');
diff --git a/resources/views/user/layouts/index.blade.php b/resources/views/user/layouts/index.blade.php
index 92a2f59..4836d9b 100644
--- a/resources/views/user/layouts/index.blade.php
+++ b/resources/views/user/layouts/index.blade.php
@@ -28,6 +28,8 @@
   <link href="{{ asset('assets/users/assets/vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
   <link href="{{ asset('assets/users/assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
 
+  <link href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css" rel="stylesheet" />
+
   <!-- Main CSS File -->
   <link href="{{ asset('assets/users/assets/css/main.css') }}" rel="stylesheet">
 
@@ -60,6 +62,7 @@ class="bi bi-arrow-up-short"></i></a>
   <div id="preloader"></div>
 
   <!-- Vendor JS Files -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
   <script src="{{ asset('assets/users/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
@@ -69,6 +72,8 @@ class="bi bi-arrow-up-short"></i></a>
   <script src="{{ asset('assets/users/assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
   <script src="{{ asset('assets/users/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
 
+  <script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js" crossorigin="anonymous"></script>
+
   <!-- Main JS File -->
   <script src="{{ asset('assets/users/assets/js/main.js') }}"></script>
 
diff --git a/resources/views/user/pages/finish_ujian/index.blade.php b/resources/views/user/pages/finish_ujian/index.blade.php
index dae4831..40b733b 100644
--- a/resources/views/user/pages/finish_ujian/index.blade.php
+++ b/resources/views/user/pages/finish_ujian/index.blade.php
@@ -27,9 +27,26 @@
 
   <!-- About Section -->
   <section id="about" class="about section">
-
     <div class="container" data-aos="fade-up" data-aos-delay="100">
-      
+      <table class="table" id="table-data-hasil-ujian">
+        <thead>
+          <tr>
+            <th>No</th>
+            <th>Pertanyaan</th>
+            <th>Jawaban</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-12">
+          <h2 class="title">Grafik Kecepatan Mata</h2>
+          <canvas id="velocityChart"></canvas>
+        </div>
+      </div>
     </div>
   </section><!-- /About Section -->
 
@@ -49,7 +66,121 @@
 
 @section('script')
   <script>
-    
+    const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
+    let table = null;
+    let data_tobii = null;
+
+    function renderVelocityChart(timeseries) {
+      const base = timeseries.timestamp[0];
+      const labels = timeseries.timestamp.map(t => (t - base) / 1000);
+      const ctx = document.getElementById('velocityChart').getContext('2d');
+
+      new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: labels,
+          datasets: [{
+            label: 'Velocity',
+            data: timeseries.velocity,
+            borderWidth: 2,
+            tension: 0.3
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            tooltip: {
+              callbacks: {
+                label: function(context) {
+                  return "Velocity: " + context.raw.toFixed(4);
+                }
+              }
+            }
+          },
+          scales: {
+            x: {
+              display: false
+            }
+          }
+        }
+      });
+    }
+
+    async function loadData(data) {
+      const res = await fetch("{{ env('PYTHON_API_URL') }}/extract", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(data)
+      });
+
+      const result = await res.json();
+      if(result != null) {
+        renderVelocityChart(result.timeseries);
+      }
+    }
+
+    $(document).ready(function() {
+      table = new DataTable("#table-data-hasil-ujian", {
+        searching: false,
+        paging: false,
+        ajax: {
+          url: '{{ route('hasil-tes.getAllAnswer', ['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) {
+              let renderedJawaban = null;
+              if(row.jawaban_key == 'a') {
+                renderedJawaban = `<span class="badge text-bg-primary">${row.jawaban}</span>`;
+              } else if(row.jawaban_key == 'b') {
+                renderedJawaban = `<span class="badge" style="background-color: #fc7938; color: white;">${row.jawaban}</span>`;
+              } else if(row.jawaban_key == 'c') {
+                renderedJawaban = `<span class="badge text-bg-danger">${row.jawaban}</span>`;
+              } else if(row.jawaban_key == 'd') {
+                renderedJawaban = `<span class="badge text-bg-warning">${row.jawaban}</span>`;
+              } else if(row.jawaban_key == 'e') {
+                renderedJawaban = `<span class="badge text-bg-success">${row.jawaban}</span>`;
+              } else {
+                renderedJawaban = `<span class="badge text-bg-secondary">${row.jawaban}</span>`;
+              }
+              return renderedJawaban;
+            }
+          }
+        ]
+      });
+
+      ws.onopen = () => {
+        console.log("Connected to WebSocket");
+
+        ws.send(JSON.stringify({
+          type: 'get_json_file',
+          session_id: '{{ $id_session }}'
+        }));
+
+        ws.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          if(data.type === 'json_file_data') {
+            if(data.data != null) {
+              data_tobii = data.data;
+              loadData(data_tobii);
+            }
+          }
+        };
+      };
+    });
   </script>
 
   @if (session('error'))
diff --git a/routes/web.php b/routes/web.php
index 826f8db..13450da 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -42,6 +42,7 @@
     Route::get('ujian/get/current-answer', [HalamanUjianController::class, 'getCurrentAnswer'])->name('ujian.getCurrentAnswer');
     Route::get('ujian/get/time-left', [HalamanUjianController::class, 'getTimeLeft'])->name('ujian.getTimeLeft');
 Route::resource('hasil-tes', FinishUjianController::class)->only(['index', 'show']);
+    Route::get('hasil-tes/get/all-answer', [FinishUjianController::class, 'getAllAnswer'])->name('hasil-tes.getAllAnswer');
 Route::middleware(['auth', 'role.auth'])->group(function() {
     Route::resource('dashboard', DashboardController::class);
     Route::resource('users', UsersController::class);