update

templates/experiment.html

@@ -12,15 +12,15 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            min-height: 100vh;
         }
         .container {
             background-color: #ffffff;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            width: 95%;
-            height: 95%;
+            width: 98%;
+            height: 98vh;
             margin: 0;
             text-align: center;
             display: flex;
@@ -28,33 +28,35 @@
         }
         h1, h2 {
             color: #000000;
-            font-size: 24px;
+            font-size: 20px;
+            margin: 10px 0;
         }
         p {
             color: #000000;
-            font-size: 18px;
+            font-size: 16px;
+            margin: 5px 0;
         }
         .visualization-container {
             display: flex;
             justify-content: space-between;
             flex: 1;
-            margin: 20px 0;
+            margin: 10px 0;
         }
         .visualization {
-            width: 48%;
-            height: calc(100vh - 300px);
+            width: 49%;
+            height: calc(100vh - 250px);
             border: 1px solid #ddd;
             border-radius: 5px;
             overflow: hidden;
         }
         .question-box {
             background-color: #f0f0f0;
-            padding: 20px;
+            padding: 10px;
             border-radius: 10px;
-            margin: 20px 0;
+            margin: 10px 0;
         }
         .question-text {
-            font-size: 22px;
+            font-size: 18px;
             font-weight: bold;
             color: #333;
         }
@@ -64,12 +66,12 @@
         }
         button {
             color: white;
-            padding: 15px 30px;
+            padding: 10px 20px;
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 18px;
-            margin-top: 20px;
+            font-size: 16px;
+            margin-top: 10px;
             width: 48%;
             transition: background-color 0.3s ease;
         }
@@ -88,6 +90,11 @@
         button[value="Plan-of-SQLs"] {
             background-color: green;
         }
+        iframe { 
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
@@ -96,27 +103,25 @@
         <h1>{{ sample_id + 1 }} / 10</h1>
         <p><strong>Task description:</strong> {{ statement }}</p>
         <div class="visualization-container">
-            {% set methods = ['No-XAI', 'Dater', 'Chain-of-Table', 'Plan-of-SQLs'] %}
-            {% set method_a, method_b = random.sample(methods, 2) %}
             <div class="visualization">
                 <h2>{{ method_a }}</h2>
-                <iframe src="{{ visualizations[method_a] }}" width="100%" height="100%" frameborder="0"></iframe>
+                <iframe src="{{ visualization_a }}" frameborder="0"></iframe>
             </div>
             <div class="visualization">
                 <h2>{{ method_b }}</h2>
-                <iframe src="{{ visualizations[method_b] }}" width="100%" height="100%" frameborder="0"></iframe>
+                <iframe src="{{ visualization_b }}" frameborder="0"></iframe>
             </div>
         </div>
         <div class="question-box">
             <p class="question-text">Which explanation provides a clearer and more accurate reasoning process?</p>
         </div>
         <div class="buttons">
-            <form action="{{ url_for('experiment', username=username) }}" method="post" style="width: 48%;">
-                <input type="hidden" name="comparison" value="{{ method_a }}:{{ method_b }}">
+            <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
+                <input type="hidden" name="username" value="{{ username }}">
                 <button type="submit" name="feedback" value="{{ method_a }}">{{ method_a }}</button>
             </form>
-            <form action="{{ url_for('experiment', username=username) }}" method="post" style="width: 48%;">
-                <input type="hidden" name="comparison" value="{{ method_a }}:{{ method_b }}">
+            <form action="{{ url_for('feedback') }}" method="post" style="width: 48%;">
+                <input type="hidden" name="username" value="{{ username }}">
                 <button type="submit" name="feedback" value="{{ method_b }}">{{ method_b }}</button>
             </form>
         </div>