interactive-llm-xai-TEST

Sleeping

App Files Files Community

luulinh90s commited on Jun 1, 2025

Commit

41598b6

verified ·

1 Parent(s): 7f2f881

Update evaluation/eval_interfaces/instructions.html

Browse files

Files changed (1) hide show

evaluation/eval_interfaces/instructions.html +89 -91

evaluation/eval_interfaces/instructions.html CHANGED Viewed

@@ -4,118 +4,116 @@
   <meta charset="UTF-8" />
   <title>Instructions</title>
   <style>
-    body {
-      font-family: Arial, sans-serif;
-      line-height: 1.6;
-      padding: 2rem;
-      height: 700px;
-      background-color: #f8f9fa;
-      color: #212529;
     }
-    h1, h2 {
-      color: #343a40;
     }
-    .section {
-      margin-bottom: 1rem;
     }
-    ul {
-      padding-left: 1.2rem;
     }
-    .note {
-      background-color: #fff3cd;
-      border-left: 5px solid #ffc107;
-      padding: 1rem;
-      margin-top: 1rem;
-      font-weight: bold;
     }
-    .important {
-      background-color: #f8d7da;
-      border-left: 5px solid #dc3545;
-      padding: 1rem;
-      margin-top: 1rem;
-      font-weight: bold;
-    }
-    input[type="text"] {
-      padding: 0.6rem;
-      font-size: 1rem;
-      width: 300px;
-      margin-top: 1rem;
-    }
-    .start-button {
-      display: inline-block;
-      padding: 0.7rem 1.4rem;
-      font-size: 1rem;
-      background-color: #007bff;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      text-align: center;
-      margin-top: 1.5rem;
-    }
-    .start-button:disabled {
-      background-color: #cccccc;
-      cursor: not-allowed;
     }
   </style>
 </head>
 <body>
   <h2>🧠 Experiment Instructions</h2>
-  <div class="section">
-    <h3>🧭 Interface Overview</h3>
-    <ul>
-      <p>You’ll review 10 math problems with explanations. Your task is to decide whether each numerical answer is correct or incorrect.
-      You’ll have 2 minutes per question to decide if the final answer is correct. If it’s error-free, click “Correct”; otherwise, click “Incorrect.”
-      The interface contains two panels</p>
-      <li>Left Panel: Displays the math problem and relevant facts.</li>
-      <li>Right Panel: Step-by-step explanation.</li>
-    </ul>
-  </div>
-  <div class="section">
-    <h3>🕹️ How to Use</h3>
-    <ul>
-      <li>▶️ Play / ❚❚ Pause: Steps through explanations automatically.</li>
-      <li>⬆️ / ⬇️: Move through steps manually.</li>
-      <li>🔴 Breakpoints: Stop auto-play at specific steps.</li>
-    </ul>
-  </div>
-  <div class="section">
-    <h3>🎨 Highlights</h3>
-    <p>All variables are color-coded. Variable values will update as each step is executed.</p>
-  </div>
-  <div class="section">
-    <h3>📝 Enter Your Name</h3>
-    <p>Your name is used to associate this evaluation with your response. It is stored in a secure research log.</p>
-    <input type="text" id="nameInput" placeholder="Enter your name..." />
-  </div>
-  <div class="important">
-    You must enter your name to start the evaluation.
   </div>
-  <button class="start-button" id="startBtn" disabled>Start</button>
   <script>
-    const input = document.getElementById("nameInput");
-    const button = document.getElementById("startBtn");
-    input.addEventListener("input", () => {
-      button.disabled = input.value.trim().length === 0;
-    });
-    button.addEventListener("click", () => {
-      const name = input.value.trim();
-      if (name && window.parent && typeof window.parent.setUserName === 'function') {
         window.parent.setUserName(name);
-        window.parent.loadNext();
-      } else {
-        alert("Parent interface is not ready. Please try again.");
       }
     });
   </script>
 </body>
-</html>

   <meta charset="UTF-8" />
   <title>Instructions</title>
   <style>
+    :root { --gap:1.2rem; }
+    *{box-sizing:border-box;margin:0;padding:0}
+    body{
+      font-family:Arial,Helvetica,sans-serif;
+      line-height:1.55;
+      background:#f8f9fa;
+      color:#212529;
+      height:100vh;                           /* full viewport */
+      display:flex;
+      flex-direction:column;
+      justify-content:space-between;          /* header / content / footer */
+      padding:var(--gap);
     }
+    h2{color:#343a40;margin-bottom:var(--gap)}
+    h3{color:#343a40;font-size:1.1rem;margin-bottom:.4rem}
+    ul{padding-left:1.1rem;margin-bottom:.6rem}
+    .grid{
+      flex:1;
+      display:grid;
+      gap:var(--gap);
+      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
+      overflow:hidden;                        /* never scroll */
     }
+    .card{
+      background:#fff;
+      border-left:5px solid #0d6efd;
+      padding:1rem;
+      border-radius:6px;
+      box-shadow:0 1px 4px rgba(0,0,0,.06);
+      overflow:hidden;
     }
+    input[type="text"]{
+      padding:.55rem .8rem;
+      font-size:1rem;
+      width:100%;
+      max-width:320px;
+      margin-top:.5rem;
+      border:1px solid #ced4da;
+      border-radius:4px;
     }
+    .start{
+      align-self:center;
+      padding:.75rem 1.4rem;
+      font-size:1rem;
+      background:#0d6efd;
+      color:#fff;
+      border:none;
+      border-radius:4px;
+      cursor:pointer;
+      margin-top:var(--gap);
+      transition:opacity .25s;
     }
+    .start:hover{opacity:.9}
+    @media(max-width:480px){
+      body{padding:.8rem}
+      .grid{grid-template-columns:1fr}
     }
   </style>
 </head>
 <body>
   <h2>🧠 Experiment Instructions</h2>
+  <div class="grid">
+    <div class="card">
+      <h3>🧭 Interface Overview</h3>
+      <p style="margin-bottom:.6rem">You’ll review <strong>10 math problems</strong>.
+         Decide whether each final numerical answer is <em>correct</em> or <em>incorrect</em>.</p>
+      <ul>
+        <li>Left panel – problem statement &amp; facts</li>
+        <li>Right panel – step-by-step explanation</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>🕹️ How to Use</h3>
+      <ul>
+        <li>▶️ / ❚❚ – auto-play / pause</li>
+        <li>⤴ / ⤵ – manual previous / next</li>
+        <li>🔴 – set breakpoints to pause auto-play</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>🎨 Highlights</h3>
+      <p>Variables are color-coded; their values update as each step runs.</p>
+    </div>
+    <div class="card">
+      <h3>📝 (Optional) Enter Your Name</h3>
+      <p>If you’d like your responses tagged, enter a name or alias;
+         otherwise you’ll appear as “anonymous”.</p>
+      <input type="text" id="nameInput" placeholder="Your name (optional)">
+    </div>
   </div>
+  <button class="start" id="startBtn">Start Experiment</button>
   <script>
+    const input  = document.getElementById('nameInput');
+    const start  = document.getElementById('startBtn');
+    start.addEventListener('click', ()=>{
+      const name = (input.value || 'anonymous').trim();
+      if (window.parent && typeof window.parent.setUserName==='function'){
         window.parent.setUserName(name);
+        window.parent.loadNext();             // kick off first sample
+      }else{
+        alert('Parent interface not ready. Please reload.');
       }
     });
   </script>
 </body>
+</html>