Merge branch 'main' of github.com:NOC-OI/breakingtheice

Author: soutobias

README.md

@@ -7,7 +7,7 @@ Breaking the Ice is an interactive science exhibit designed for pupils, teachers
 
 The stand is designed for touch interaction (tablets, iPads, or touchscreen laptops), supported by a pull-up banner and live facilitators.
 
-**Live demo:** [https://breakingtheice.space](https://breakingtheice.space)
+**Live demo:** [https://noc-oi.github.io/breakingtheice](https://noc-oi.github.io/breakingtheice)
 
 ### Learning Goals
 
@@ -141,27 +141,41 @@ Each question object should include:
 2. title: displayed heading
 3. scenario: explanatory paragraph
 4. question: the actual prompt
-5. options: array of 3 option objects
-6. correctIndex: zero-based index of the correct option
-7. bg: stage background color (hex)
-8. media: optional array of one or two image paths
+5. imageSource: Image source
+6. options: array of 3 option objects (See Option Object Description below)
+7. correctIndex: zero-based index of the correct option
+8. bg: stage background color (hex)
+9. media: optional array of one or two image paths (See Media Object Description below)
+
 
 Each option object currently supports:
 
-1. text: option label shown on the card
-2. explanation: feedback text for learning context
-3. image: optional image path
+1. image: optional image path
+2. text: option label shown on the card
+3. explanation: feedback text for learning context
+4. width: width of the image
+5. height: height of the image
+
+Each media object currently supports:
+1. image: optional image path
+2. position: position of the image (front or back)
+3. transform: rotation of the image
+4. width: width of the image
+5. height: height of the image
 
-### Adding or changing question images
+### Adding or changing question option images
 
-1. Add new image files into public/
+1. Add new image files or modify existing ones in the public folder
 2. Reference them in app/data/questions.json using paths like /my_image.png
-3. For media pairs, place them in the media array in the order you want them layered
+3. Update the width and height of the option image in the options array accordingly
 
-The question stage layout alternates media composition by question number:
+### Adding or changing question media images
+
+1. Add new image files or modify existing ones in the public folder
+2. Reference them in app/data/questions.json using paths like /my_image.png
+3. For media pairs, place them in the media array in the order you want them layered
+4. Update the width and height of the image in the media array accordingly
 
-1. Odd-numbered questions use the default image stack layout
-2. Even-numbered questions use the alternate position layout
 
 ### Quick validation after updating questions
 

app/components/QuestionsStage.tsx

@@ -110,9 +110,8 @@ export function QuestionsStage({
                             alt={option.text}
                             width={option.width}
                             height={option.height}
-                            className={`object-contain transition ${
-                              isWrongSelected ? 'grayscale opacity-60' : ''
-                            }`}
+                            className={`object-contain transition ${isWrongSelected ? 'grayscale opacity-60' : ''
+                              }`}
                           />
                         </div>
                       ) : null}
@@ -170,7 +169,7 @@ export function QuestionsStage({
           aria-hidden
         >
           <div
-            className={`absolute ${firstMedia?.position === 'top' ? 'z-10' : 'z-0'} overflow-hidden rounded-[15px] shadow-[0_4px_4px_rgba(0,0,0,0.25)] right-8 xl:right-15 top-0`}
+            className={`absolute ${firstMedia?.position === 'front' ? 'z-10' : 'z-0'} overflow-hidden rounded-[15px] shadow-[0_4px_4px_rgba(0,0,0,0.25)] right-8 xl:right-15 top-0`}
             style={{
               width: firstMedia?.width ? `${firstMedia.width * 4}px` : '280px',
               height: firstMedia?.height ? `${firstMedia.height * 4}px` : '360px',
@@ -191,7 +190,7 @@ export function QuestionsStage({
           </div>
 
           <div
-            className={`absolute ${secondMedia?.position === 'top' ? 'z-10' : 'z-0'} overflow-hidden rounded-[15px] shadow-[0_4px_4px_rgba(0,0,0,0.25)] left-35 xl:lef-40 top-60 xl:top-70`}
+            className={`absolute ${secondMedia?.position === 'front' ? 'z-10' : 'z-0'} overflow-hidden rounded-[15px] shadow-[0_4px_4px_rgba(0,0,0,0.25)] left-35 xl:lef-40 top-60 xl:top-70`}
             style={{
               width: secondMedia?.width ? `${secondMedia.width * 4}px` : '320px',
               height: secondMedia?.height ? `${secondMedia.height * 4}px` : '300px',

app/data/questions.json

@@ -33,14 +33,14 @@
     "media": [
       {
         "image": "/q1_media_1.jpg",
-        "position": "top",
+        "position": "front",
         "transform": "0deg",
         "width": 68,
         "height": 85
       },
       {
         "image": "/q1_media_2.jpg",
-        "position": "bottom",
+        "position": "back",
         "transform": "8.55deg",
         "width": 80,
         "height": 80
@@ -51,7 +51,7 @@
     "id": "q2",
     "title": "Critical Data Question 2",
     "scenario": "The Arctic and Antarctic are both cold polar regions, but they are not the same kind of place.",
-    "question": "What makes the the Arctic different?",
+    "question": "What makes the Arctic different?",
     "imageSource": "Image source - Sergey Torbik & The Shuttervision (Pexels)",
     "options": [
       {
@@ -81,14 +81,14 @@
     "media": [
       {
         "image": "/q2_media_1.jpg",
-        "position": "bottom",
+        "position": "back",
         "transform": "0deg",
         "width": 80,
         "height": 80
       },
       {
         "image": "/q2_media_2.jpg",
-        "position": "top",
+        "position": "front",
         "transform": "8.55deg",
         "width": 80,
         "height": 80
@@ -129,14 +129,14 @@
     "media": [
       {
         "image": "/q3_media_1.jpg",
-        "position": "top",
+        "position": "front",
         "transform": "351.45deg",
         "width": 75,
         "height": 85
       },
       {
         "image": "/q3_media_2.jpg",
-        "position": "bottom",
+        "position": "back",
         "transform": "0deg",
         "width": 90,
         "height": 90
@@ -177,14 +177,14 @@
     "media": [
       {
         "image": "/q4_media_1.jpg",
-        "position": "top",
+        "position": "front",
         "transform": "351.45deg",
         "width": 84,
         "height": 84
       },
       {
         "image": "/q4_media_2.jpg",
-        "position": "bottom",
+        "position": "back",
         "transform": "0deg",
         "width": 75,
         "height": 80
@@ -225,18 +225,18 @@
     "media": [
       {
         "image": "/q5_media_1.jpg",
-        "position": "top",
+        "position": "front",
         "transform": "0deg",
         "width": 70,
         "height": 100
       },
       {
         "image": "/q5_media_2.jpg",
-        "position": "bottom",
+        "position": "back",
         "transform": "8.55deg",
         "width": 78,
         "height": 82
       }
     ]
   }
-]
+]