From a7c13f27232d9273ceca3492fc34f05d80626cd5 Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Thu, 19 Oct 2023 11:00:35 -0400 Subject: [PATCH] Adding/fixing examples for audio-button-response --- .../jspsych-audio-button-response-demo-2.html | 5 +- .../jspsych-audio-button-response-demo-3.html | 48 ++++++++++++++++++ docs/demos/sound/telephone.mp3 | Bin 0 -> 4717 bytes docs/plugins/audio-button-response.md | 38 ++++++++++---- 4 files changed, 78 insertions(+), 13 deletions(-) create mode 100644 docs/demos/jspsych-audio-button-response-demo-3.html create mode 100644 docs/demos/sound/telephone.mp3 diff --git a/docs/demos/jspsych-audio-button-response-demo-2.html b/docs/demos/jspsych-audio-button-response-demo-2.html index 3801cd27..3875f7ad 100644 --- a/docs/demos/jspsych-audio-button-response-demo-2.html +++ b/docs/demos/jspsych-audio-button-response-demo-2.html @@ -3,7 +3,8 @@ - + + @@ -30,7 +31,7 @@ stimulus: 'sound/roar.mp3', choices: images, prompt: "

Which animal made the sound?

", - button_html: '' + button_html: (choice)=>`` }; timeline.push(trial); diff --git a/docs/demos/jspsych-audio-button-response-demo-3.html b/docs/demos/jspsych-audio-button-response-demo-3.html new file mode 100644 index 00000000..e4f95ac8 --- /dev/null +++ b/docs/demos/jspsych-audio-button-response-demo-3.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + diff --git a/docs/demos/sound/telephone.mp3 b/docs/demos/sound/telephone.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..5fc6954cfe2821ba913b2f91c396a713063ef400 GIT binary patch literal 4717 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 animal made the sound?

", - button_html: '' - }; + const trial = { + type: jsPsychAudioButtonResponse, + stimulus: 'sound/roar.mp3', + choices: images, + prompt: "

Which animal made the sound?

", + button_html: (choice)=>`` + }; ``` === "Demo" @@ -105,7 +105,23 @@ import audioButtonResponse from '@jspsych/plugin-audio-button-response'; Open demo in new tab - **Note**: if you want the images to look more like jsPsych buttons, i.e. with borders and different styles for hover/active/disabled states, then you can also embed the image element inside the default `button_html` string: - ```js - button_html: '' - ``` \ No newline at end of file +???+ example "Setting up a grid-based layout" + === "Code" + ```javascript + const trial = { + type: jsPsychAudioButtonResponse, + stimulus: 'sound/telephone.mp3', + prompt: '

Which key was pressed first?

', + choices: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'], + button_layout: 'grid', + grid_rows: 4, + grid_columns: 3 + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab \ No newline at end of file