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

@@ -9,13 +9,16 @@
         <a class="navbar-brand" href="#">Smart Anxiety</a>
         <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
-          <div class="d-flex col-md-2">
+          <div class="d-flex col-md-4">
-            <div class="col-md-6 d-flex justify-content-center align-items-center">
+            <div class="col-md-4 d-flex justify-content-center align-items-center">
               Time Left: <span id="time_left"></span>
             </div>
-            <div class="col-md-6 d-flex justify-content-center align-items-center">
+            <div class="col-md-4 d-flex justify-content-center align-items-center">
               <span id="bg_status_tobii" class="rounded bg-warning d-block mx-2" style="width: 10px; aspect-ratio: 1/1;"></span>Status Tobii
             </div>
+            <div class="col-md-4 d-flex justify-content-center align-items-center">
+              <button id="fullscreen_btn" data-status="fullscreen" class="btn btn-sm btn-outline-secondary" onclick="openFullscreen()">Fullscreen</button>
+            </div>
           </div>
         </div>
       </div>
@@ -263,6 +266,63 @@ function stopTobii() {
       }));
     }
 
+    function openFullscreen() {
+      const status = $('#fullscreen_btn').attr('data-status');
+      const elem = document.documentElement;
+      if (status === 'fullscreen') {
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen();
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen(); // Safari
+        } else if (elem.msRequestFullscreen) {
+          elem.msRequestFullscreen(); // IE
+        }
+        $('#fullscreen_btn').attr('data-status', 'exit-fullscreen');
+        $('#fullscreen_btn').text('Exit Fullscreen');
+        s.send(JSON.stringify({
+          type: "command",
+          action: "start",
+          session_id: SESSION_ID
+        }));
+      } else if (status === 'exit-fullscreen') {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen(); // Safari
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen(); // IE
+        }
+        $('#fullscreen_btn').attr('data-status', 'fullscreen');
+        $('#fullscreen_btn').text('Enter Fullscreen');
+      }
+    }
+
+    function checkFullscreen() {
+      if (!document.fullscreenElement) {
+        ws.send(JSON.stringify({
+          type: "command",
+          action: "stop",
+          session_id: SESSION_ID
+        }));
+
+        Swal.fire({
+          title: 'Alert',
+          icon: 'warning',
+          text: 'Anda keluar dari mode fullscreen, harap masuk ke mode fullscreen untuk melanjutkan ujian.',
+          confirmButtonText: 'Ya',
+          showCancelButton: false,
+          showCloseButton: false,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          backdrop: `rgba(0, 0, 0, 0.4)`
+        }).then((result) => {
+          if (result.isConfirmed) {
+            openFullscreen();
+          }
+        });
+      }
+    }
+
     $(document).ready(function() {
       ws.onopen = () => {
         console.log("Connected to WebSocket");
@@ -273,6 +333,9 @@ function stopTobii() {
           role: "web"
         }));
 
+        document.addEventListener('fullscreenchange', checkFullscreen);
+        checkFullscreen();
+
         ws.send(JSON.stringify({
           type: "update_status",
           status_sessions: true,