{description}
' + 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'{description}
' # 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 index 047bea70f..4a7ec393b 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( @@ -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 index 97090ce7f..f614ec721 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://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 index b96c5fbdf..fcbc08e06 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://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 index b637e748c..29ae8c4b9 100644 --- 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 index 8571e85a3..8cfd8f1fe 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 + 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; 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" }