Amend style

docs/index.html

@@ -35,4 +35,4 @@
   <script src="script.js"></script>
 </body>
 
-</html>
+</html>

docs/script.js

@@ -108,9 +108,9 @@ function displayChat(answers, score) {
           playAnswer(answers[i].sample).onended = () => {
             const img = images[i];
             img.style.display = 'inline-block';
-            img.scrollIntoView({ behavior: 'smooth', inline: 'start' });
             updateIntensityGraph(answers[i], i, answers.length);
             i++;
+            scrollImageIntoView(img);
             nextQuestion();
           };
         }
@@ -122,6 +122,17 @@ function displayChat(answers, score) {
   nextQuestion();
 }
 
+function scrollImageIntoView(img) {
+  setTimeout(() => {
+    const container = document.getElementById('image-display');
+    const scrollLeft = img.offsetLeft - container.offsetLeft;
+    container.scrollTo({
+      left: scrollLeft,
+      behavior: 'smooth'
+    });
+  }, 50);
+}
+
 function displayScore(score) {
   const container = document.getElementById('chat-container');
 
@@ -208,4 +219,4 @@ function drawGrid(svgContainer) {
       .attr("stroke", strokeColor)
       .attr("stroke-width", 0.2);
   }
-}
+}

docs/serve.sh

@@ -1,3 +1,14 @@
 #!/bin/bash
 
-python3 -m http.server 8000 --directory "." & chromium-browser --start-fullscreen "http://localhost:8000"
+# Check if a directory was provided as an argument
+if [ $# -eq 0 ]; then
+    # If no argument, use the current directory
+    DIR="."
+else
+    # Use the provided directory
+    DIR="$1"
+fi
+
+python3 -m http.server 8069 --directory "$DIR" > /dev/null 2>&1 &
+sleep 2
+chromium-browser --start-fullscreen "http://localhost:8069"

docs/style.css

@@ -102,7 +102,7 @@ html {
 }
 
 #tableContainer .tableHead {
-  font-size: clamp(12px, 2.2vw, 30px);
+  font-size: clamp(13px, 2.2vw, 30px);
   text-align: center;
   font-weight: 400;
 }
@@ -130,7 +130,7 @@ html {
 }
 
 #tableContainer #promptContent {
-  font-size: clamp(12px, 1.6vw, 40px);
+  font-size: clamp(15px, 1.6vw, 40px);
 }
 
 #chat-container {
@@ -159,14 +159,14 @@ html {
 .question {
   margin-left: 0;
   margin-right: auto;
-  width: 30%;
+  width: 40%;
   text-align: center;
 }
 
 .answer {
   margin-left: auto;
   margin-right: 0;
-  width: 30%;
+  width: 20%;
   text-align: center;
 }
 
@@ -178,6 +178,9 @@ html {
   height: 30vh;
   white-space: nowrap;
   overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
   background-color: white;
   border-top: 1vh solid black;
 }
@@ -232,7 +235,7 @@ html {
 #selectionHeading {
   color: white;
   text-align: center;
-  font-size: 10vh;
+  font-size: 8vw;
   margin-bottom: 20px;
   font-weight: 600;
 }
@@ -242,4 +245,4 @@ html {
   margin-left: 1vh;
   margin-bottom: 0.5vh;
   font-weight: 400;
-}
+}