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

add example for html-button-response

Browse Source
This commit is contained in:
Josh de Leeuw 2023-10-19 11:24:38 -04:00
parent a7c13f2723
commit 516dae4b86
2 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/demos/jspsych-html-button-response-demo2.html Normal file
View File

@ -0,0 +1,46 @@
<!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-html-button-response@1.1.2"></script> -->
<script src="../../packages/plugin-html-button-response/dist/index.browser.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.3/css/jspsych.css" /> -->
<link rel="stylesheet" href="../../packages/jspsych/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const timeline = [];
const trial = {
type: jsPsychHtmlButtonResponse,
stimulus: `<div style="width: 600px">
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: gray; display: inline-block"></div>
</div>`,
choices: ['red', 'green', 'blue'],
prompt: "<p>What color should the gray block be?</p>",
button_html: (choice) => `<div style="width: 80px; height: 80px; margin: 20px; background-color: ${choice}; cursor: pointer;"></div>`
};
timeline.push(trial);
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} 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>

29
docs/plugins/html-button-response.md
View File

@ -74,4 +74,33 @@ import htmlButtonResponse from '@jspsych/plugin-html-button-response';
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-button-response-demo1.html">Open demo in new tab</a> <a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-button-response-demo1.html">Open demo in new tab</a>
???+ example "Using `button_html` to generate custom buttons"
=== "Code"
```javascript
const trial = {
type: jsPsychHtmlButtonResponse,
stimulus: `<div style="width: 600px">
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: green; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: blue; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: red; display: inline-block"></div>
<div style="width: 50px; height: 50px; background-color: gray; display: inline-block"></div>
</div>`,
choices: ['red', 'green', 'blue'],
prompt: "<p>What color should the gray block be?</p>",
button_html: (choice) => `<div style="width: 80px; height: 80px; margin: 20px; background-color: ${choice}; cursor: pointer;"></div>`
};
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../../demos/jspsych-html-button-response-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-button-response-demo2.html">Open demo in new tab</a>