add example for html-button-response

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

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/docs/demos/jspsych-html-button-response-demo2.html b/docs/demos/jspsych-html-button-response-demo2.html
@@ -0,0 +1,46 @@
+<!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-html-button-response/dist/index.browser.js"></script>
+    <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/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>
diff --git a/docs/plugins/html-button-response.md b/docs/plugins/html-button-response.md
@@ -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>
 
+???+ 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>