From ee45651f87cdc7150932b43b129c565e8c2eb268 Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Mon, 23 Sep 2024 11:08:16 +0200 Subject: [PATCH 1/8] adjust thkids plink: use DropdownQuestion, add Step in Explainer --- .../rules/toontjehogerkids_3_plink.py | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/backend/experiment/rules/toontjehogerkids_3_plink.py b/backend/experiment/rules/toontjehogerkids_3_plink.py index 047bea70f..2e26e0766 100644 --- 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( From f0e998665c855bf6ffe52b816aaac461f1bc9f43 Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Mon, 23 Sep 2024 11:13:15 +0200 Subject: [PATCH 2/8] adjust thkids preverbal: fix typo, change video link --- backend/experiment/rules/toontjehogerkids_2_preverbal.py | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/backend/experiment/rules/toontjehogerkids_2_preverbal.py b/backend/experiment/rules/toontjehogerkids_2_preverbal.py index ad5c03fd9..5e4bae02f 100644 --- a/backend/experiment/rules/toontjehogerkids_2_preverbal.py +++ b/backend/experiment/rules/toontjehogerkids_2_preverbal.py @@ -40,8 +40,10 @@ 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' + description = ( + "Dit is een spectrogram. Wil je weten hoe dat werkt? Kijk dan het filmpje!" + ) + video = "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_trd2yc58/uiConfId/441104 01/st/0" body = f'

{description}

' # Return answer info view From d9abf69a19cc5759a8d819286a0ad38503cdca6c Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Mon, 23 Sep 2024 11:17:17 +0200 Subject: [PATCH 3/8] adjust thkids relative: fix typo --- backend/experiment/rules/toontjehogerkids_6_relative.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/experiment/rules/toontjehogerkids_6_relative.py b/backend/experiment/rules/toontjehogerkids_6_relative.py index b637e748c..8d7c002af 100644 --- a/backend/experiment/rules/toontjehogerkids_6_relative.py +++ b/backend/experiment/rules/toontjehogerkids_6_relative.py @@ -72,7 +72,7 @@ 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, From 10e779374b4ad1fde98053b7d4ac1f778db93a80 Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Mon, 23 Sep 2024 11:34:46 +0200 Subject: [PATCH 4/8] thkids: adjust embed logic & links of all debrief sections --- .../experiment/rules/toontjehogerkids_1_mozart.py | 13 +++++++++---- .../rules/toontjehogerkids_2_preverbal.py | 13 +++++++++---- .../experiment/rules/toontjehogerkids_3_plink.py | 13 +++++++++---- .../rules/toontjehogerkids_4_absolute.py | 13 +++++++++---- .../experiment/rules/toontjehogerkids_5_tempo.py | 14 +++++++++----- .../rules/toontjehogerkids_6_relative.py | 13 +++++++++---- .../templates/info/toontjehogerkids/debrief.html | 4 ++-- 7 files changed, 56 insertions(+), 27 deletions(-) diff --git a/backend/experiment/rules/toontjehogerkids_1_mozart.py b/backend/experiment/rules/toontjehogerkids_1_mozart.py index 4ae595e83..648fc2031 100644 --- 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://video.leidenuniv.nl/embed/secure/iframe/entryId/1_moxxt7x6/uiConfId/44110 401/st/0", + "vid1_title": "Wat is het Mozart effect?", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_trd2yc58/uiConfId/441104 01/st/0", + "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 index 5e4bae02f..fbe1fc794 100644 --- a/backend/experiment/rules/toontjehogerkids_2_preverbal.py +++ b/backend/experiment/rules/toontjehogerkids_2_preverbal.py @@ -107,10 +107,15 @@ 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://video.leidenuniv.nl/embed/secure/iframe/entryId/1_q8r74zji/uiConfId/4411040 1/st/0", + "vid1_title": "Franse en Duitse baby", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_rteiyere/uiConfId/4411040 1/st/0", + "vid2_title": "Geluiden in Duitsland en Frankrijk", + }, + ) info = Info( body=body, heading="Het eerste luisteren", diff --git a/backend/experiment/rules/toontjehogerkids_3_plink.py b/backend/experiment/rules/toontjehogerkids_3_plink.py index 2e26e0766..69a977ea6 100644 --- a/backend/experiment/rules/toontjehogerkids_3_plink.py +++ b/backend/experiment/rules/toontjehogerkids_3_plink.py @@ -147,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://video.leidenuniv.nl/embed/secure/iframe/entryId/1_ylw2npmb/uiConfId/44110 401/st/0", + "vid1_title": "Super snel liedjes herkennen!", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_xo33dvth/uiConfId/441104 01/st/0", + "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 index 97090ce7f..f73dd9203 100644 --- 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://video.leidenuniv.nl/embed/secure/iframe/entryId/1_mgbpg5wi/uiConfId/44110 401/st/0", + "vid1_title": "Absoluut gehoor, wat betekent dat?", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_237ounbc/uiConfId/44110401/st/0", + "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 index b96c5fbdf..509a70278 100644 --- 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://video.leidenuniv.nl/embed/secure/iframe/entryId/1_7wpdkmyv/uiConfId/4411 0401/st/0", + "vid1_title": "Maatgevoel en dansen", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_eolyptz7/uiConfId/441104 01/st/0", + "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 index 8d7c002af..abddf3d90 100644 --- a/backend/experiment/rules/toontjehogerkids_6_relative.py +++ b/backend/experiment/rules/toontjehogerkids_6_relative.py @@ -74,10 +74,15 @@ 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 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://video.leidenuniv.nl/embed/secure/iframe/entryId/1_pdz2mqpl/uiConfId/44110 401/st/0", + "vid1_title": "Relatief gehoor, wat is dat?", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_su0gq56f/uiConfId/441104 01/st/0", + "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 index 8571e85a3..8eb87a0a7 100644 --- a/backend/experiment/templates/info/toontjehogerkids/debrief.html +++ b/backend/experiment/templates/info/toontjehogerkids/debrief.html @@ -5,6 +5,6 @@

- +
- \ No newline at end of file +
From f700bbe259c4265d0c326e63566a29224c23687e Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Mon, 23 Sep 2024 14:37:39 +0200 Subject: [PATCH 5/8] fix: correct video links --- .../rules/toontjehogerkids_1_mozart.py | 4 ++-- .../rules/toontjehogerkids_2_preverbal.py | 21 +++++++++---------- .../rules/toontjehogerkids_3_plink.py | 4 ++-- .../rules/toontjehogerkids_4_absolute.py | 2 +- .../rules/toontjehogerkids_5_tempo.py | 4 ++-- .../rules/toontjehogerkids_6_relative.py | 4 ++-- .../info/toontjehogerkids/debrief.html | 4 ++-- 7 files changed, 21 insertions(+), 22 deletions(-) diff --git a/backend/experiment/rules/toontjehogerkids_1_mozart.py b/backend/experiment/rules/toontjehogerkids_1_mozart.py index 648fc2031..a91f53e61 100644 --- a/backend/experiment/rules/toontjehogerkids_1_mozart.py +++ b/backend/experiment/rules/toontjehogerkids_1_mozart.py @@ -66,9 +66,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_moxxt7x6/uiConfId/44110 401/st/0", + "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_moxxt7x6/uiConfId/44110401/st/0", "vid1_title": "Wat is het Mozart effect?", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_trd2yc58/uiConfId/441104 01/st/0", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_trd2yc58/uiConfId/44110401/st/0", "vid2_title": "Hoe werkt het Mozart effect?", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_2_preverbal.py b/backend/experiment/rules/toontjehogerkids_2_preverbal.py index fbe1fc794..1d96c68d6 100644 --- 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 @@ -43,8 +42,8 @@ def get_spectrogram_info(self): description = ( "Dit is een spectrogram. Wil je weten hoe dat werkt? Kijk dan het filmpje!" ) - video = "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_trd2yc58/uiConfId/441104 01/st/0" - body = f'

{description}

' + video = "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_ghoti6z2/uiConfId/44110401/st/0" + body = f'

{description}

' # Return answer info view info = Info( @@ -110,9 +109,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_q8r74zji/uiConfId/4411040 1/st/0", + "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_q8r74zji/uiConfId/44110401/st/0", "vid1_title": "Franse en Duitse baby", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_rteiyere/uiConfId/4411040 1/st/0", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_rteiyere/uiConfId/44110401/st/0", "vid2_title": "Geluiden in Duitsland en Frankrijk", }, ) @@ -120,7 +119,7 @@ def get_final_round(self, session): 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 index 69a977ea6..3819670e1 100644 --- a/backend/experiment/rules/toontjehogerkids_3_plink.py +++ b/backend/experiment/rules/toontjehogerkids_3_plink.py @@ -150,9 +150,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_ylw2npmb/uiConfId/44110 401/st/0", + "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_ylw2npmb/uiConfId/44110401/st/0", "vid1_title": "Super snel liedjes herkennen!", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_xo33dvth/uiConfId/441104 01/st/0", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_xo33dvth/uiConfId/44110401/st/0", "vid2_title": "Kun je elk liedje zo snel herkennen?", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_4_absolute.py b/backend/experiment/rules/toontjehogerkids_4_absolute.py index f73dd9203..2c704832c 100644 --- a/backend/experiment/rules/toontjehogerkids_4_absolute.py +++ b/backend/experiment/rules/toontjehogerkids_4_absolute.py @@ -61,7 +61,7 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_mgbpg5wi/uiConfId/44110 401/st/0", + "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_mgbpg5wi/uiConfId/44110401/st/0", "vid1_title": "Absoluut gehoor, wat betekent dat?", "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_237ounbc/uiConfId/44110401/st/0", "vid2_title": "Is een absoluut gehoor bijzonder?", diff --git a/backend/experiment/rules/toontjehogerkids_5_tempo.py b/backend/experiment/rules/toontjehogerkids_5_tempo.py index 509a70278..ef232b47d 100644 --- a/backend/experiment/rules/toontjehogerkids_5_tempo.py +++ b/backend/experiment/rules/toontjehogerkids_5_tempo.py @@ -120,9 +120,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_7wpdkmyv/uiConfId/4411 0401/st/0", + "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_7wpdkmyv/uiConfId/44110401/st/0", "vid1_title": "Maatgevoel en dansen", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_eolyptz7/uiConfId/441104 01/st/0", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_eolyptz7/uiConfId/44110401/st/0", "vid2_title": "Maatgevoel en muziekles", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_6_relative.py b/backend/experiment/rules/toontjehogerkids_6_relative.py index abddf3d90..c683f8fd6 100644 --- a/backend/experiment/rules/toontjehogerkids_6_relative.py +++ b/backend/experiment/rules/toontjehogerkids_6_relative.py @@ -77,9 +77,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_pdz2mqpl/uiConfId/44110 401/st/0", + "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_pdz2mqpl/uiConfId/44110401/st/0", "vid1_title": "Relatief gehoor, wat is dat?", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_su0gq56f/uiConfId/441104 01/st/0", + "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_su0gq56f/uiConfId/44110401/st/0", "vid2_title": "Relatief gehoor en toonladders", }, ) diff --git a/backend/experiment/templates/info/toontjehogerkids/debrief.html b/backend/experiment/templates/info/toontjehogerkids/debrief.html index 8eb87a0a7..9751cafb0 100644 --- a/backend/experiment/templates/info/toontjehogerkids/debrief.html +++ b/backend/experiment/templates/info/toontjehogerkids/debrief.html @@ -5,6 +5,6 @@

-
+
-
+
From a852a12ce0e14f5c9557c8b805a314d0422eb09d Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Fri, 27 Sep 2024 13:22:02 +0200 Subject: [PATCH 6/8] fix: use vimeo for videos --- backend/experiment/rules/toontjehogerkids_1_mozart.py | 4 ++-- backend/experiment/rules/toontjehogerkids_2_preverbal.py | 8 ++++---- backend/experiment/rules/toontjehogerkids_3_plink.py | 4 ++-- backend/experiment/rules/toontjehogerkids_4_absolute.py | 4 ++-- backend/experiment/rules/toontjehogerkids_5_tempo.py | 4 ++-- backend/experiment/rules/toontjehogerkids_6_relative.py | 4 ++-- .../templates/info/toontjehogerkids/debrief.html | 4 ++-- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/backend/experiment/rules/toontjehogerkids_1_mozart.py b/backend/experiment/rules/toontjehogerkids_1_mozart.py index a91f53e61..8aa5a5152 100644 --- a/backend/experiment/rules/toontjehogerkids_1_mozart.py +++ b/backend/experiment/rules/toontjehogerkids_1_mozart.py @@ -66,9 +66,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_moxxt7x6/uiConfId/44110401/st/0", + "vid1": "https://player.vimeo.com/video/1012736186?h=82640b5e3a", "vid1_title": "Wat is het Mozart effect?", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_trd2yc58/uiConfId/44110401/st/0", + "vid2": "https://player.vimeo.com/video/1012736336?h=e90fff89cd", "vid2_title": "Hoe werkt het Mozart effect?", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_2_preverbal.py b/backend/experiment/rules/toontjehogerkids_2_preverbal.py index 1d96c68d6..d5eae5fd7 100644 --- a/backend/experiment/rules/toontjehogerkids_2_preverbal.py +++ b/backend/experiment/rules/toontjehogerkids_2_preverbal.py @@ -42,8 +42,8 @@ def get_spectrogram_info(self): description = ( "Dit is een spectrogram. Wil je weten hoe dat werkt? Kijk dan het filmpje!" ) - video = "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_ghoti6z2/uiConfId/44110401/st/0" - body = f'

{description}

' + video = "https://player.vimeo.com/video/1012736887?h=bac11b4075" + body = f'

{description}

' # Return answer info view info = Info( @@ -109,9 +109,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_q8r74zji/uiConfId/44110401/st/0", + "vid1": "https://player.vimeo.com/video/1012712004?h=1ec875caec", "vid1_title": "Franse en Duitse baby", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_rteiyere/uiConfId/44110401/st/0", + "vid2": "https://player.vimeo.com/video/1012712095?h=020b0bfc37", "vid2_title": "Geluiden in Duitsland en Frankrijk", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_3_plink.py b/backend/experiment/rules/toontjehogerkids_3_plink.py index 3819670e1..4a7ec393b 100644 --- a/backend/experiment/rules/toontjehogerkids_3_plink.py +++ b/backend/experiment/rules/toontjehogerkids_3_plink.py @@ -150,9 +150,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_ylw2npmb/uiConfId/44110401/st/0", + "vid1": "https://player.vimeo.com/video/1012062402?h=342dd7ab90", "vid1_title": "Super snel liedjes herkennen!", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_xo33dvth/uiConfId/44110401/st/0", + "vid2": "https://player.vimeo.com/video/1012062961?h=bf5749901d", "vid2_title": "Kun je elk liedje zo snel herkennen?", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_4_absolute.py b/backend/experiment/rules/toontjehogerkids_4_absolute.py index 2c704832c..f614ec721 100644 --- a/backend/experiment/rules/toontjehogerkids_4_absolute.py +++ b/backend/experiment/rules/toontjehogerkids_4_absolute.py @@ -61,9 +61,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_mgbpg5wi/uiConfId/44110401/st/0", + "vid1": "https://player.vimeo.com/video/1012705794?h=f8aa6548a9", "vid1_title": "Absoluut gehoor, wat betekent dat?", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_237ounbc/uiConfId/44110401/st/0", + "vid2": "https://player.vimeo.com/video/1012705982?h=a37c718512", "vid2_title": "Is een absoluut gehoor bijzonder?", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_5_tempo.py b/backend/experiment/rules/toontjehogerkids_5_tempo.py index ef232b47d..fcbc08e06 100644 --- a/backend/experiment/rules/toontjehogerkids_5_tempo.py +++ b/backend/experiment/rules/toontjehogerkids_5_tempo.py @@ -120,9 +120,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_7wpdkmyv/uiConfId/44110401/st/0", + "vid1": "https://player.vimeo.com/video/1012712271?h=d1ac5fa7e8", "vid1_title": "Maatgevoel en dansen", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_eolyptz7/uiConfId/44110401/st/0", + "vid2": "https://player.vimeo.com/video/1012712459?h=2598b81590", "vid2_title": "Maatgevoel en muziekles", }, ) diff --git a/backend/experiment/rules/toontjehogerkids_6_relative.py b/backend/experiment/rules/toontjehogerkids_6_relative.py index c683f8fd6..29ae8c4b9 100644 --- a/backend/experiment/rules/toontjehogerkids_6_relative.py +++ b/backend/experiment/rules/toontjehogerkids_6_relative.py @@ -77,9 +77,9 @@ def get_final_round(self, session): join("info", "toontjehogerkids", "debrief.html"), { "debrief": debrief_message, - "vid1": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_pdz2mqpl/uiConfId/44110401/st/0", + "vid1": "https://player.vimeo.com/video/1012736436?h=11b7974f13", "vid1_title": "Relatief gehoor, wat is dat?", - "vid2": "https://video.leidenuniv.nl/embed/secure/iframe/entryId/1_su0gq56f/uiConfId/44110401/st/0", + "vid2": "https://player.vimeo.com/video/1012736666?h=b1098b4bbb", "vid2_title": "Relatief gehoor en toonladders", }, ) diff --git a/backend/experiment/templates/info/toontjehogerkids/debrief.html b/backend/experiment/templates/info/toontjehogerkids/debrief.html index 9751cafb0..8cfd8f1fe 100644 --- a/backend/experiment/templates/info/toontjehogerkids/debrief.html +++ b/backend/experiment/templates/info/toontjehogerkids/debrief.html @@ -5,6 +5,6 @@

-
+
-
+
From 3cc9a6924f94785f65af0f78fbb45056eef2a9cd Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Fri, 27 Sep 2024 14:14:26 +0200 Subject: [PATCH 7/8] fix: redefine ButtonArray button gaps --- frontend/src/components/Question/_ButtonArray.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Question/_ButtonArray.scss b/frontend/src/components/Question/_ButtonArray.scss index 84c560ffc..9605aecf2 100644 --- 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; From 8584d4ba5d4ca6e9c908d2784360c5951a505a48 Mon Sep 17 00:00:00 2001 From: BeritJanssen Date: Fri, 27 Sep 2024 14:22:40 +0200 Subject: [PATCH 8/8] fix: docker compose without hyphen --- .github/workflows/ci.yml | 18 +++++++++--------- .github/workflows/podman.yml | 32 ++++++++++++++++---------------- README.md | 10 +++++----- package.json | 4 ++-- scripts/build-front | 2 +- scripts/lint-back | 2 +- scripts/lint-front | 2 +- scripts/manage | 2 +- scripts/test-back | 2 +- scripts/test-back-coverage | 2 +- scripts/test-front | 2 +- scripts/test-front-ci | 2 +- scripts/test-front-watch | 2 +- 13 files changed, 41 insertions(+), 41 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 05544648e..ef41a3067 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -11,16 +11,16 @@ jobs: steps: - uses: actions/checkout@v3 - name: Run Backend Tests - run: sudo docker-compose --env-file .env-github-actions run server bash -c "coverage run manage.py test" + run: sudo docker compose --env-file .env-github-actions run server bash -c "coverage run manage.py test" - name: Generate Backend Coverage Report (Inline) - run: sudo docker-compose --env-file .env-github-actions run server bash -c "coverage report --show-missing" + run: sudo docker compose --env-file .env-github-actions run server bash -c "coverage report --show-missing" # Generate coverage badge (only for main and develop branches) - name: Generate Backend Coverage Report (XML) and Badge if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/develop' run: | - sudo docker-compose --env-file .env-github-actions run server bash -c "coverage xml" - sudo docker-compose --env-file .env-github-actions run server bash -c "genbadge coverage -i coverage.xml -o coverage-backend-badge-new.svg -n \"Backend Code Coverage\"" + sudo docker compose --env-file .env-github-actions run server bash -c "coverage xml" + sudo docker compose --env-file .env-github-actions run server bash -c "genbadge coverage -i coverage.xml -o coverage-backend-badge-new.svg -n \"Backend Code Coverage\"" # Push coverage badge to separate branch (only for main and develop branches) - name: Push Backend Coverage Badge to separate branch continue-on-error: true @@ -55,7 +55,7 @@ jobs: - uses: actions/checkout@v3 - name: Lint Backend continue-on-error: false - run: sudo docker-compose --env-file .env-github-actions run server bash -c "flake8" + run: sudo docker compose --env-file .env-github-actions run server bash -c "flake8" frontend-test: name: Test Frontend @@ -63,7 +63,7 @@ jobs: steps: - uses: actions/checkout@v3 - name: Run Frontend Tests - run: sudo docker-compose --env-file .env-github-actions run client yarn test:ci + run: sudo docker compose --env-file .env-github-actions run client yarn test:ci frontend-coverage-badge: name: Generate Frontend Coverage Badge @@ -74,8 +74,8 @@ jobs: - uses: actions/checkout@v3 - name: Generate Frontend Coverage Report (XML) and Badge run: | - sudo docker-compose --env-file .env-github-actions run client yarn test:ci - sudo docker-compose --env-file .env-github-actions run client yarn coverage-badges -s public/coverage/coverage-summary.json -o public/coverage/coverage-frontend-badge-new.svg --label 'Frontend Code Coverage' + sudo docker compose --env-file .env-github-actions run client yarn test:ci + sudo docker compose --env-file .env-github-actions run client yarn coverage-badges -s public/coverage/coverage-summary.json -o public/coverage/coverage-frontend-badge-new.svg --label 'Frontend Code Coverage' - name: Push Frontend Coverage Badge to separate branch continue-on-error: true run: | @@ -106,4 +106,4 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - run: sudo docker-compose --env-file .env-github-actions run client yarn lint + - run: sudo docker compose --env-file .env-github-actions run client yarn lint diff --git a/.github/workflows/podman.yml b/.github/workflows/podman.yml index 6f0ee907b..14e73b2df 100644 --- 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,15 +101,15 @@ 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 environment: Acceptance runs-on: ACC - + # this job runs only on commits to the main branch, tags, or when manually triggered for the main branch if: github.ref == 'refs/heads/main' || github.ref == 'refs/tags/*' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main') concurrency: @@ -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/" \ @@ -282,8 +282,8 @@ 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 + e2e-acceptance: name: E2E tests on acceptance environment runs-on: ACC diff --git a/README.md b/README.md index 71989f196..63e9aaf4a 100644 --- a/README.md +++ b/README.md @@ -30,8 +30,8 @@ Install [Docker Desktop](https://docs.docker.com/desktop/). Make a copy of [the file](https://github.com/Amsterdam-Music-Lab/MUSCLE/blob/develop/.env.dist) `.env.dist` (in the same directory as this README) and rename it to `.env.` This file contains variables used by Docker to start up a container network serving MUSCLE. Start Docker (the app icon is a whale carrying containers). Then, open a terminal and run -`docker-compose up` (add `sudo` on Linux). -This command starts up the containers defined in `docker-compose.yaml`: +`docker compose up` (add `sudo` on Linux). +This command starts up the containers defined in `docker compose.yaml`: - a PostgreSQL container, for storing experiment/user/playlist data, saved on the host machine in the Docker user data, represented in the volume `db_data`. Data added to the database will persist if the container is shut down. - a ip2country container, which provides country codes for ip addresses, used for demographic information of users. - a container of the server, defined in DockerfileDevelop in `backend`. The Dockerfile defines the Python version and installs development dependencies. The startup command runs migrations and then starts up a Django development server. @@ -39,13 +39,13 @@ This command starts up the containers defined in `docker-compose.yaml`: Once you see all containers have started up, open your browser and navigate to [localhost:3000](http://localhost:3000). You should now be able to see the first screen of the Goldsmiths Musical Sophistication Index questionnaire. -Since the `docker-compose.yaml` defines bind mounts for `backend` and `frontend`, any changes to the files on the host are immediately reflected in the containers, which means code watching works and hot reload works in the same way as with a native node or Django server. +Since the `docker compose.yaml` defines bind mounts for `backend` and `frontend`, any changes to the files on the host are immediately reflected in the containers, which means code watching works and hot reload works in the same way as with a native node or Django server. To stop the containers, press `ctrl-c` or (in another terminal) run -`docker-compose down`. +`docker compose down`. ## Production build -A production build should define its own `docker-compose.yaml`, making use of the `Dockerfile` of the `backend` and `frontend` environments. It should also define a custom .env file, with safe passwords for the SQL database and the Python backend. Instead of mounting the entire backend and frontend directory and using the development servers, the backend should serve with gunicorn, and the frontend should use a build script to compile static html, css and JavaScript. +A production build should define its own `docker compose.yaml`, making use of the `Dockerfile` of the `backend` and `frontend` environments. It should also define a custom .env file, with safe passwords for the SQL database and the Python backend. Instead of mounting the entire backend and frontend directory and using the development servers, the backend should serve with gunicorn, and the frontend should use a build script to compile static html, css and JavaScript. ## Troubleshooting diff --git a/package.json b/package.json index fe200f419..c235ed5ae 100644 --- 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" } diff --git a/scripts/build-front b/scripts/build-front index 8b70ab8fb..fa7d48725 100755 --- a/scripts/build-front +++ b/scripts/build-front @@ -1,3 +1,3 @@ #!/bin/bash -docker-compose run --rm client yarn build +docker compose run --rm client yarn build diff --git a/scripts/lint-back b/scripts/lint-back index 533b74a94..c83b8fbc1 100755 --- a/scripts/lint-back +++ b/scripts/lint-back @@ -1,2 +1,2 @@ #!/bin/bash -docker-compose run --rm server bash -c "flake8" +docker compose run --rm server bash -c "flake8" diff --git a/scripts/lint-front b/scripts/lint-front index ad826e4f8..2e313c2f5 100755 --- a/scripts/lint-front +++ b/scripts/lint-front @@ -1,2 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn lint $@ +docker compose run --rm client yarn lint $@ diff --git a/scripts/manage b/scripts/manage index 8c7cccdc5..9e3ca3918 100755 --- a/scripts/manage +++ b/scripts/manage @@ -1,4 +1,4 @@ #!/bin/bash # This script executes Django management commands through Docker. -docker-compose run --rm server python manage.py $@ \ No newline at end of file +docker compose run --rm server python manage.py $@ diff --git a/scripts/test-back b/scripts/test-back index 8d367adff..e85bcb44b 100755 --- a/scripts/test-back +++ b/scripts/test-back @@ -1,3 +1,3 @@ #!/bin/bash -docker-compose run --rm server bash -c "python manage.py test $@" +docker compose run --rm server bash -c "python manage.py test $@" diff --git a/scripts/test-back-coverage b/scripts/test-back-coverage index 67a0101e0..344636b72 100755 --- a/scripts/test-back-coverage +++ b/scripts/test-back-coverage @@ -1,3 +1,3 @@ #!/bin/bash -docker-compose run --rm server bash -c "coverage run manage.py test && coverage report --show-missing" +docker compose run --rm server bash -c "coverage run manage.py test && coverage report --show-missing" diff --git a/scripts/test-front b/scripts/test-front index a2fd3536d..3815ce120 100755 --- a/scripts/test-front +++ b/scripts/test-front @@ -1,3 +1,3 @@ #!/bin/bash -docker-compose run --rm client yarn test --watch=false +docker compose run --rm client yarn test --watch=false diff --git a/scripts/test-front-ci b/scripts/test-front-ci index d630b82c9..14a83b113 100755 --- a/scripts/test-front-ci +++ b/scripts/test-front-ci @@ -1,2 +1,2 @@ #!/bin/bash -docker-compose run --rm client yarn test:ci +docker compose run --rm client yarn test:ci diff --git a/scripts/test-front-watch b/scripts/test-front-watch index bb76f6de1..2600ef7c9 100755 --- a/scripts/test-front-watch +++ b/scripts/test-front-watch @@ -1,3 +1,3 @@ #!/bin/bash -docker-compose run --rm client yarn test --watch=true +docker compose run --rm client yarn test --watch=true