Update evaluation/eval_interfaces/graph_eval_interface.html

evaluation/eval_interfaces/graph_eval_interface.html

@@ -93,6 +93,7 @@ button:hover{opacity:.9}
 
     <!-- MAIN CONTROLS (now vertical on the right) -->
     <div class="controls" style="display:none">
+      <p id= "instruction"> you <strong>MUST</strong> do the experiment in full screen mode by clicking the button below 👇 </p>
       <button id="full_screen" >Enter Full Screen</button>
       <p>Is the final answer correct or incorrect?</p>
       <button id="btn-correct">Correct</button>
@@ -122,6 +123,7 @@ button:hover{opacity:.9}
 
 document.addEventListener("DOMContentLoaded", () => {
     const btn = document.getElementById('full_screen');
+    const span = document.getElementById('instruction');
     function isFullscreen() {
       return document.fullscreenElement || 
              document.webkitFullscreenElement || 
@@ -131,7 +133,7 @@ document.addEventListener("DOMContentLoaded", () => {
     // Show button only if NOT in fullscreen at start
     if (!isFullscreen()) {
          btn.style.visibility = 'visible';
-         btn.innerText = "Enter Full Screen";
+         span.style.visibility = "visible";
     }
     btn.addEventListener('click', () => {
         if (!isFullscreen()) {
@@ -144,9 +146,10 @@ document.addEventListener("DOMContentLoaded", () => {
     function toggleButton() {
         if (isFullscreen()) {
             btn.style.visibility = 'hidden'; // Hide in fullscreen
+            span.style.visibility = "hidden";
         } else {
             btn.style.visibility = 'visible'; // Show when not fullscreen
-            btn.innerText = "Enter Full Screen";
+            span.style.visibility = "visible";
         }
     }
     document.addEventListener('fullscreenchange', toggleButton);