HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adding/fixing examples for audio-button-response

Browse Source
This commit is contained in:
Josh de Leeuw 2023-10-19 11:00:35 -04:00
parent bb3d82a548
commit a7c13f2723
4 changed files with 78 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/demos/jspsych-audio-button-response-demo-2.html
View File

@ -3,7 +3,8 @@
<head> <head>
<script src="docs-demo-timeline.js"></script> <script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.3"></script> <script src="https://unpkg.com/jspsych@7.3.3"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script> <!--<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script>-->
<script src="../../packages/plugin-audio-button-response/dist/index.browser.js"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script> <script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.3/css/jspsych.css" /> <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.3/css/jspsych.css" />
@ -30,7 +31,7 @@
stimulus: 'sound/roar.mp3', stimulus: 'sound/roar.mp3',
choices: images, choices: images,
prompt: "<p>Which animal made the sound?</p>", 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); timeline.push(trial);

48
docs/demos/jspsych-audio-button-response-demo-3.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<script src="https://unpkg.com/jspsych@7.3.3"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.2"></script>-->
<script src="../../packages/plugin-audio-button-response/dist/index.browser.js"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>
<!--<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.3/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>

BIN
docs/demos/sound/telephone.mp3 Normal file
View File

Binary file not shown.

28
docs/plugins/audio-button-response.md
View File

@ -89,12 +89,12 @@ import audioButtonResponse from '@jspsych/plugin-audio-button-response';
???+ example "Using custom button HTML to use images as buttons" ???+ example "Using custom button HTML to use images as buttons"
=== "Code" === "Code"
```javascript ```javascript
var trial = { const trial = {
type: jsPsychAudioButtonResponse, type: jsPsychAudioButtonResponse,
stimulus: 'sound/roar.mp3', stimulus: 'sound/roar.mp3',
choices: ['lion.png', 'elephant.png', 'monkey.png'], choices: images,
prompt: "<p>Which animal made the sound?</p>", prompt: "<p>Which animal made the sound?</p>",
button_html: '<img src="%choice%" />' button_html: (choice)=>`<img style="cursor: pointer; margin: 10px;" src="${choice}" />`
}; };
``` ```
@ -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> <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: ???+ example "Setting up a grid-based layout"
```js === "Code"
button_html: '<button class="jspsych-btn"><img src="%choice%" /></button>' ```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>