Amsterdam-Music-Lab · BeritJanssen · Sep 27, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 23, 2024
diff --git a/.github/workflows/podman.yml b/.github/workflows/podman.yml
@@ -79,11 +79,11 @@ jobs:
           echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env
           cp .env frontend/.env
       - name: Build Podman images
-        run: podman-compose -f docker-compose-deploy.yml build
+        run: podman-compose -f docker compose-deploy.yml build
       - name: Shut down running containers
-        run: podman compose -f docker-compose-deploy.yml down
+        run: podman compose -f docker compose-deploy.yml down
       - name: Deploy Podman images
-        run: podman-compose -f docker-compose-deploy.yml up -d
+        run: podman-compose -f docker compose-deploy.yml up -d
       - name: Notify Sentry of new release
         run: |
             curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \
@@ -101,9 +101,9 @@ jobs:
       - name: Prune old images
         run: podman image prune -a -f
       - name: Check Podman images
-        run: podman-compose -f docker-compose-deploy.yml ps
+        run: podman-compose -f docker compose-deploy.yml ps
       - name: Check logs
-        run: podman-compose -f docker-compose-deploy.yml logs
+        run: podman-compose -f docker compose-deploy.yml logs
 
   deploy-acceptance:
     name: Deploy to acceptance environment
@@ -171,11 +171,11 @@ jobs:
           echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env
           cp .env frontend/.env
       - name: Build Podman images
-        run: podman-compose -f docker-compose-deploy.yml build
+        run: podman-compose -f docker compose-deploy.yml build
       - name: Shut down running containers
-        run: podman compose -f docker-compose-deploy.yml down
+        run: podman compose -f docker compose-deploy.yml down
       - name: Deploy Podman images
-        run: podman-compose -f docker-compose-deploy.yml up -d
+        run: podman-compose -f docker compose-deploy.yml up -d
       - name: Notify Sentry of new release
         run: |
           curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \
@@ -193,9 +193,9 @@ jobs:
       - name: Prune old images
         run: podman image prune -a -f
       - name: Check Podman images
-        run: podman-compose -f docker-compose-deploy.yml ps
+        run: podman-compose -f docker compose-deploy.yml ps
       - name: Check logs
-        run: podman-compose -f docker-compose-deploy.yml logs
+        run: podman-compose -f docker compose-deploy.yml logs
 
   deploy-production:
     name: Deploy to production environment
@@ -260,11 +260,11 @@ jobs:
           echo "VITE_SENTRY_DSN=$FRONTEND_SENTRY_DSN" >> .env
           cp .env frontend/.env
       - name: Build Podman images
-        run: podman-compose -f docker-compose-deploy.yml build
+        run: podman-compose -f docker compose-deploy.yml build
       - name: Shut down running containers
-        run: podman compose -f docker-compose-deploy.yml down
+        run: podman compose -f docker compose-deploy.yml down
       - name: Deploy Podman images
-        run: podman-compose -f docker-compose-deploy.yml up -d
+        run: podman-compose -f docker compose-deploy.yml up -d
       - name: Notify Sentry of new release
         run: |
           curl -X POST "https://sentry.io/api/0/organizations/uva-aml/releases/" \

diff --git a/backend/experiment/rules/toontjehogerkids_1_mozart.py b/backend/experiment/rules/toontjehogerkids_1_mozart.py
@@ -63,10 +63,15 @@ def get_final_round(self, session):
         debrief_message = "Merkte je dat de puzzel beter ging na het \
             horen van Mozart? Dit noemen we het 'Mozart effect'! Wil je meer weten over het Mozart effect? Bekijk dan de filmpjes!"
         body = render_to_string(
-            join('info', 'toontjehogerkids', 'debrief.html'),
-            {'debrief': debrief_message,
-             'vid1': "https://www.youtube.com/embed/hW12-q4781Q?si=PPorbSo_PdyDeS_Y",
-             'vid2': "https://www.youtube.com/embed/DHx7cJ22MZI?si=wMK09bLSrsDY6nyl"})
+            join("info", "toontjehogerkids", "debrief.html"),
+            {
+                "debrief": debrief_message,
+                "vid1": "https://player.vimeo.com/video/1012736186?h=82640b5e3a",
+                "vid1_title": "Wat is het Mozart effect?",
+                "vid2": "https://player.vimeo.com/video/1012736336?h=e90fff89cd",
+                "vid2_title": "Hoe werkt het Mozart effect?",
+            },
+        )
         info = Info(
             body=body,
             heading="Het Mozart effect",

diff --git a/backend/experiment/rules/toontjehogerkids_2_preverbal.py b/backend/experiment/rules/toontjehogerkids_2_preverbal.py
@@ -20,14 +20,13 @@ def first_round(self, experiment):
             instruction="Het eerste luisteren",
             steps=[
                 Step(
-                    "Je krijgt straks een soort grafieken van geluid te zien, met een uitlegfilmpje."),
-                Step(
-                    "Welk plaatje denk jij dat hoort bij de stem van een mens?"),
-                Step(
-                    "En hoor jij het verschil tussen twee babyhuiltjes?"),
+                    "Je krijgt straks een soort grafieken van geluid te zien, met een uitlegfilmpje."
+                ),
+                Step("Welk plaatje denk jij dat hoort bij de stem van een mens?"),
+                Step("En hoor jij het verschil tussen twee babyhuiltjes?"),
             ],
             step_numbers=True,
-            button_label="Start"
+            button_label="Start",
         )
 
         # 2 Spectrogram information
@@ -40,9 +39,11 @@ def first_round(self, experiment):
 
     def get_spectrogram_info(self):
         image_url = "/images/experiments/toontjehoger/spectrogram_info_nl.webp"
-        description = "Dit is een spectogram. Wil je weten hoe dat werkt? Kijk dan het filmpje!"
-        video = 'https://www.youtube.com/embed/7uDw3aC-1nc?si=xTvhO7Lx6XeqwkJM'
-        body = f'<div class="center"><img src="{image_url}"></div><p>{description}</p><iframe width="100%" height="315" src={video}></iframe>'
+        description = (
+            "Dit is een spectrogram. Wil je weten hoe dat werkt? Kijk dan het filmpje!"
+        )
+        video = "https://player.vimeo.com/video/1012736887?h=bac11b4075"
+        body = f'<div class="center"><img src="{image_url}"></div><p>{description}</p><div style="padding:56.25% 0 0 0;position:relative;margin-bottom:2vh;"><iframe src="{video}" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Hoe werkt een spectrogram?"></iframe></div><script src=https://player.vimeo.com/api/player.js></script>'
 
         # Return answer info view
         info = Info(
@@ -105,15 +106,20 @@ def get_final_round(self, session):
         # Info page
         debrief_message = "Had jij dat gedacht, dat Franse en Duitse baby's anders huilen? Waarom zouden ze dat doen denk je? Bekijk de filmpjes om dit uit te vinden!"
         body = render_to_string(
-            join('info', 'toontjehogerkids', 'debrief.html'),
-            {'debrief': debrief_message,
-             'vid1': 'https://www.youtube.com/embed/QV9rM_7HE3s?si=V4SKnbDgdBLhPivt',
-             'vid2': 'https://www.youtube.com/embed/w1f9Rr0yXIs?si=Cjz2CU9wUlm-ST8c'})
+            join("info", "toontjehogerkids", "debrief.html"),
+            {
+                "debrief": debrief_message,
+                "vid1": "https://player.vimeo.com/video/1012712004?h=1ec875caec",
+                "vid1_title": "Franse en Duitse baby",
+                "vid2": "https://player.vimeo.com/video/1012712095?h=020b0bfc37",
+                "vid2_title": "Geluiden in Duitsland en Frankrijk",
+            },
+        )
         info = Info(
             body=body,
             heading="Het eerste luisteren",
             button_label="Terug naar ToontjeHogerKids",
-            button_link="/collection/thkids"
+            button_link="/collection/thkids",
         )
 
         return [*score, final, info]
diff --git a/backend/experiment/rules/toontjehogerkids_3_plink.py b/backend/experiment/rules/toontjehogerkids_3_plink.py
@@ -5,7 +5,7 @@
 from .toontjehoger_1_mozart import toontjehoger_ranks
 from experiment.actions import Explainer, Step, Score, Final, Info, Trial
 from experiment.actions.playback import PlayButton
-from experiment.actions.form import AutoCompleteQuestion, Form
+from experiment.actions.form import DropdownQuestion, Form
 from .toontjehoger_3_plink import ToontjeHoger3Plink
 
 from experiment.utils import non_breaking_spaces
@@ -33,14 +33,19 @@ def first_round(self, experiment):
         explainer = Explainer(
             instruction="Muziekherkenning",
             steps=[
-                Step("Je hoort zo een heel kort stukje van {} liedjes.".format(
-                    experiment.rounds)),
-                Step("Herken je de liedjes? Kies dan steeds de juiste artiest en titel!"),
                 Step(
-                    "Weet je het niet zeker? Doe dan maar een gok.")
+                    "Je hoort zo een heel kort stukje van {} liedjes.".format(
+                        experiment.rounds
+                    )
+                ),
+                Step(
+                    "Herken je de liedjes? Kies dan steeds de juiste artiest en titel!"
+                ),
+                Step("Weet je het niet zeker? Doe dan maar een gok."),
+                Step("Herken jij er meer dan 3?"),
             ],
             step_numbers=True,
-            button_label="Start"
+            button_label="Start",
         )
 
         return [
@@ -94,16 +99,13 @@ def get_plink_round(self, session, present_score=False):
 
         expected_response = section.pk
 
-        question1 = AutoCompleteQuestion(
-            key='plink',
+        question1 = DropdownQuestion(
+            key="plink",
             choices=choices,
-            question='Kies de artiest en de titel van het nummer',
+            question="Kies de artiest en de titel van het nummer",
             result_id=prepare_result(
-                'plink',
-                session,
-                section=section,
-                expected_response=expected_response
-            )
+                "plink", session, section=section, expected_response=expected_response
+            ),
         )
         next_round.append(Trial(
             playback=PlayButton(
@@ -145,10 +147,15 @@ def get_final_round(self, session):
         debrief_message = "Hoe snel denk je dat je een popliedje kunt herkennen? Binnen tien seconden?\
             Binnen twee seconden? Of nog minder? Kijk de filmpjes voor het antwoord!"
         body = render_to_string(
-            join('info', 'toontjehogerkids', 'debrief.html'),
-            {'debrief': debrief_message,
-             'vid1': 'https://www.youtube.com/embed/JF8uq1UllMo?si=9H51MMVyg9JcTSAh',
-             'vid2': 'https://www.youtube.com/embed/qUXd1ql6gLc?si=RIKb_QI67baWGEbA'})
+            join("info", "toontjehogerkids", "debrief.html"),
+            {
+                "debrief": debrief_message,
+                "vid1": "https://player.vimeo.com/video/1012062402?h=342dd7ab90",
+                "vid1_title": "Super snel liedjes herkennen!",
+                "vid2": "https://player.vimeo.com/video/1012062961?h=bf5749901d",
+                "vid2_title": "Kun je elk liedje zo snel herkennen?",
+            },
+        )
         info = Info(
             body=body,
             heading="Muziekherkenning",

diff --git a/backend/experiment/rules/toontjehogerkids_4_absolute.py b/backend/experiment/rules/toontjehogerkids_4_absolute.py
@@ -58,10 +58,15 @@ def get_final_round(self, session):
         debrief_message = "Lukte het jou om het juiste antwoord te kiezen? Dan heb je goed onthouden hoe hoog of laag die muziekjes normaal altijd klinken! Sommige mensen noemen dit absoluut gehoor. \
             Is dat eigenlijk bijzonder? Kijk de filmpjes om daar achter te komen!"
         body = render_to_string(
-            join('info', 'toontjehogerkids', 'debrief.html'),
-            {'debrief': debrief_message,
-             'vid1': 'https://www.youtube.com/embed/AkbIazK9Jcc?si=yjJLjXQa8wQbvSrf',
-             'vid2': 'https://www.youtube.com/embed/KVB6d0Oy_5o?si=zxj1gUzjME_n-fQ5'})
+            join("info", "toontjehogerkids", "debrief.html"),
+            {
+                "debrief": debrief_message,
+                "vid1": "https://player.vimeo.com/video/1012705794?h=f8aa6548a9",
+                "vid1_title": "Absoluut gehoor, wat betekent dat?",
+                "vid2": "https://player.vimeo.com/video/1012705982?h=a37c718512",
+                "vid2_title": "Is een absoluut gehoor bijzonder?",
+            },
+        )
         info = Info(
             body=body,
             heading="Absoluut gehoor",

diff --git a/backend/experiment/rules/toontjehogerkids_5_tempo.py b/backend/experiment/rules/toontjehogerkids_5_tempo.py
@@ -5,7 +5,6 @@
 from .toontjehoger_1_mozart import toontjehoger_ranks
 from .toontjehoger_5_tempo import ToontjeHoger5Tempo
 from experiment.actions import Explainer, Step, Score, Final, Info
-from experiment.utils import non_breaking_spaces
 
 logger = logging.getLogger(__name__)
 
@@ -118,10 +117,15 @@ def get_final_round(self, session):
         # Info page
         debrief_message = "Dit is een test die maatgevoel meet. Onderzoekers hebben laten zien dat de meeste mensen goed maatgevoel hebben. Maar als je nou niet zo goed kan dansen, heb jij dan toch niet zo'n goed maatgevoel? En kan je dit leren? Bekijk de filmpjes voor het antwoord!"
         body = render_to_string(
-            join('info', 'toontjehogerkids', 'debrief.html'),
-            {'debrief': debrief_message,
-             'vid1': 'https://www.youtube.com/embed/lsQx-mJ4-cA?si=BuO5FO56I4rThTAY',
-             'vid2': 'https://www.youtube.com/embed/9LSmfsiEXhI?si=WsxrYN3UnHiiG8qT'})
+            join("info", "toontjehogerkids", "debrief.html"),
+            {
+                "debrief": debrief_message,
+                "vid1": "https://player.vimeo.com/video/1012712271?h=d1ac5fa7e8",
+                "vid1_title": "Maatgevoel en dansen",
+                "vid2": "https://player.vimeo.com/video/1012712459?h=2598b81590",
+                "vid2_title": "Maatgevoel en muziekles",
+            },
+        )
         info = Info(
             body=body,
             heading="Timing en tempo",

diff --git a/backend/experiment/rules/toontjehogerkids_6_relative.py b/backend/experiment/rules/toontjehogerkids_6_relative.py
@@ -72,12 +72,17 @@ def get_final_round(self, session):
         )
 
         # Info page
-        debrief_message = "Als je de eerste noten van 'Lang zal ze leven' hoort, herken je het meteen! Hoe kan het dat je dat liedje herkent, zelfs als het veel hoger of langer gezongen wordt? Dit noemen we relatief gehoor. Kijk de filmpjes om uit te vinden hoe dit werkt!"
+        debrief_message = "Als je de eerste noten van 'Lang zal ze leven' hoort, herken je het meteen! Hoe kan het dat je dat liedje herkent, zelfs als het veel hoger of lager gezongen wordt? Dit noemen we relatief gehoor. Kijk de filmpjes om uit te vinden hoe dit werkt!"
         body = render_to_string(
-            join('info', 'toontjehogerkids', 'debrief.html'),
-            {'debrief': debrief_message,
-             'vid1': 'https://www.youtube.com/embed/W7EI4JVBs2o?si=rWpjzTi4GiF3XYTz',
-             'vid2': 'https://www.youtube.com/embed/UoxcFS6Wds8?si=SXz7XvuIrk30GpXW'})
+            join("info", "toontjehogerkids", "debrief.html"),
+            {
+                "debrief": debrief_message,
+                "vid1": "https://player.vimeo.com/video/1012736436?h=11b7974f13",
+                "vid1_title": "Relatief gehoor, wat is dat?",
+                "vid2": "https://player.vimeo.com/video/1012736666?h=b1098b4bbb",
+                "vid2_title": "Relatief gehoor en toonladders",
+            },
+        )
         info = Info(
             body=body,
             heading="Relatief gehoor",

diff --git a/backend/experiment/templates/info/toontjehogerkids/debrief.html b/backend/experiment/templates/info/toontjehogerkids/debrief.html
@@ -5,6 +5,6 @@
 </p>
 
 
-<iframe width="560" height="315" src={{vid1}} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div style="padding:56.25% 0 0 0;position:relative;margin-bottom:2vh;"><iframe src={{vid1_url}} frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" title={{vid1_title}}></iframe></div><script src=https://player.vimeo.com/api/player.js></script>
 
-<iframe width="560" height="315" src={{vid2}} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div style="padding:56.25% 0 0 0;position:relative;margin-bottom:2vh;"><iframe src={{vid1_url}} frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" title={{vid1_title}}></iframe></div><script src=https://player.vimeo.com/api/player.js></script>
diff --git a/frontend/src/components/Question/_ButtonArray.scss b/frontend/src/components/Question/_ButtonArray.scss
@@ -12,7 +12,18 @@
 
     .btn-group-toggle-custom {
         display: flex;
-        column-gap: 3rem;
+        &:has(> :last-child:nth-child(2)) {
+            column-gap: 8vw;
+        }
+        &:has(> :last-child:nth-child(3)) {
+            column-gap: 6vw;
+        }
+        &:has(> :last-child:nth-child(4)) {
+            column-gap: 3vw;
+        }
+        &:has(> :last-child:nth-child(5)) {
+            column-gap: 2vw;
+        }
 
         &.buttons-large-gap {
             column-gap: 5rem;

diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "description": "The MUSCLE platform is an application that provides an easy way to implement and run online listening experiments for music research.",
     "license": "MIT",
     "scripts": {
-        "test-front": "sudo docker-compose run client yarn test --watchAll=false",
-        "test-back": "sudo docker-compose run server bash -c 'python manage.py test'"
+        "test-front": "sudo docker compose run client yarn test --watchAll=false",
+        "test-back": "sudo docker compose run server bash -c 'python manage.py test'"
     },
     "packageManager": "yarn@4.1.1"
 }