Adding/fixing examples for audio-button-response

jspsych · Oct 19, 2023 · a7c13f2 · a7c13f2
1 parent bb3d82a
commit a7c13f2
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 13 deletions.
diff --git a/docs/demos/jspsych-audio-button-response-demo-2.html b/docs/demos/jspsych-audio-button-response-demo-2.html
@@ -3,7 +3,8 @@
   <head>
     <script src="docs-demo-timeline.js"></script>
     <script src="https://unpkg.com/[email protected]"></script>
-    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+    <!--<script src="https://unpkg.com/@jspsych/[email protected]"></script>-->
+    <script src="../../packages/plugin-audio-button-response/dist/index.browser.js"></script>
     <script src="https://unpkg.com/@jspsych/[email protected]"></script>
     <script src="https://unpkg.com/@jspsych/[email protected]"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />
@@ -30,7 +31,7 @@
     	stimulus: 'sound/roar.mp3',
     	choices: images,
     	prompt: "<p>Which animal made the sound?</p>",
-    	button_html: '<img src="%choice%" />'
+    	button_html: (choice)=>`<img style="cursor: pointer; margin: 10px;" src="${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
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="docs-demo-timeline.js"></script>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <!--<script src="https://unpkg.com/@jspsych/[email protected]"></script>-->
+    <script src="../../packages/plugin-audio-button-response/dist/index.browser.js"></script>
+    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+    <!--<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css" />-->
+    <link rel="stylesheet" href="../../packages/jspsych/css/jspsych.css" />
+  </head>
+  <body></body>
+  <script>
+
+    const jsPsych = initJsPsych();
+
+    const timeline = [];
+
+    // sound source: https://www.videvo.net/sound-effect/lion-growl-angry-gene-pe931902/249942/
+    // images source: http://clipart-library.com/cartoon-animal-clipart.html
+    const images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
+
+    const preload = {
+      type: jsPsychPreload,
+      auto_preload: true,
+      images: images
+    }
+
+    const trial = {
+    	type: jsPsychAudioButtonResponse,
+      stimulus: 'sound/telephone.mp3',
+      prompt: '<p>Which key was pressed first?</p>',
+      choices: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'],
+      button_layout: 'grid',
+      grid_rows: 4,
+      grid_columns: 3
+    }
+
+    timeline.push(trial);
+
+    if (typeof jsPsych !== "undefined") {
+      jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
+    } else {
+      document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
+    }
+  </script>
+</html>
diff --git a/docs/demos/sound/telephone.mp3 b/docs/demos/sound/telephone.mp3
diff --git a/docs/plugins/audio-button-response.md b/docs/plugins/audio-button-response.md
@@ -89,13 +89,13 @@ import audioButtonResponse from '@jspsych/plugin-audio-button-response';
 ???+ example "Using custom button HTML to use images as buttons"
 	=== "Code"
 		```javascript
-		var trial = {
-			type: jsPsychAudioButtonResponse,
-			stimulus: 'sound/roar.mp3',
-			choices: ['lion.png', 'elephant.png', 'monkey.png'],
-			prompt: "<p>Which animal made the sound?</p>",
-			button_html: '<img src="%choice%" />'
-		};
+		const trial = {
+    	type: jsPsychAudioButtonResponse,
+    	stimulus: 'sound/roar.mp3',
+    	choices: images,
+    	prompt: "<p>Which animal made the sound?</p>",
+    	button_html: (choice)=>`<img style="cursor: pointer; margin: 10px;" src="${choice}" />`
+    };
 		```
 
 	=== "Demo"
@@ -105,7 +105,23 @@ import audioButtonResponse from '@jspsych/plugin-audio-button-response';
 
 	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-button-response-demo-2.html">Open demo in new tab</a>
 
-	**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: '<button class="jspsych-btn"><img src="%choice%" /></button>'
-	```
+???+ example "Setting up a grid-based layout"
+	=== "Code"
+		```javascript
+		const trial = {
+    	type: jsPsychAudioButtonResponse,
+      stimulus: 'sound/telephone.mp3',
+      prompt: '<p>Which key was pressed first?</p>',
+      choices: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'],
+      button_layout: 'grid',
+      grid_rows: 4,
+      grid_columns: 3
+    }
+		```
+
+	=== "Demo"
+		<div style="text-align:center;">
+			<iframe src="../../demos/jspsych-audio-button-response-demo-3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
+		</div>
+
+	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-button-response-demo-3.html">Open demo in new tab</a>