New plugin: click a button a required number of times before advancing

.changeset/lazy-games-serve.md

@@ -0,0 +1,5 @@
+---
+"plugin-mindless-clicking": major
+---
+
+Initial release of the plugin.

packages/plugin-mindless-clicking/CITATION.cff

@@ -0,0 +1,41 @@
+cff-version: 1.2.0
+message: "If you use this software, please cite it as below."
+authors:
+- family-names: "Josh de Leeuw"  # Replace with last name
+  given-names: "Josh de Leeuw"   # Replace with first name
+  name-particle: "Josh de Leeuw" # Replace with name particle(s)
+  orcid: "https://orcid.org/0000-0000-0000-0000"  # Replace with ORCID
+# More  authors can be listed here in the same format as above
+contact:  # Contact person for this extension
+- family-names: "Josh de Leeuw"
+  given-names: "Josh de Leeuw"
+  email: "{email}"          # Replace with contact person's email
+  orcid: "https://orcid.org/0000-0000-0000-0000"  # Replace with contact person's ORCID
+title: "jsPsychPluginMindlessClicking"
+version: 0.0.0
+doi: 10.5281/zenodo.1234    # Replace with DOI
+date-released: 2000-01-01
+url: "{softwareUrl}"        # Replace with URL to this extension
+
+# If you wish to cite a paper on this extension instead, you can use the following template:
+preferred-citation:
+  authors:
+  - family-names: "Josh de Leeuw"
+    given-names: "Josh de Leeuw"
+    name-particle: "Josh de Leeuw"
+    orcid: "https://orcid.org/0000-0000-0000-0000"
+  # More authors can be listed here in the same format as above
+  date-published: 2023-05-11
+  doi: 10.21105/joss.12345 
+  issn: 1234-5678
+  issue: 01
+  journal: Journal for Open Source Software
+  publisher:
+    name: Open Journals
+  start: 0001
+  title: "{title}"
+  type: article               # Other options include: book, pamphlet, conference-paper...
+  url: "{linkToPublicationInJournal}"
+  volume: 1
+
+# More information on the preffered-citation CFF format can be found at https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-citation-files#citing-something-other-than-software

packages/plugin-mindless-clicking/README.md

@@ -0,0 +1,21 @@
+# plugin-mindless-clicking
+
+## Overview
+
+Participants click on a button many times
+
+## Loading
+
+*Enter instructions for loading the plugin package here.*
+
+## Compatibility
+
+`plugin-mindless-clicking` requires jsPsych v8.0.0 or later.
+
+## Documentation
+
+See [documentation](/plugin-mindless-clicking/README.md)
+
+## Author / Citation
+
+[Josh de Leeuw](https://github.com/jodeleeuw)

packages/plugin-mindless-clicking/docs/plugin-mindless-clicking.md

@@ -0,0 +1,33 @@
+# plugin-mindless-clicking
+
+Participants click on a button many times
+
+## Parameters
+
+In addition to the [parameters available in all plugins](https://www.jspsych.org/latest/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of undefined must be specified. Other parameters can be left unspecified if the default value is acceptable.
+
+| Parameter           | Type             | Default Value      | Description                              |
+| ------------------- | ---------------- | ------------------ | ---------------------------------------- |
+|                     |                  |                    |                                          |
+
+## Data Generated
+
+In addition to the [default data collected by all plugins](https://www.jspsych.org/latest/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
+
+| Name      | Type    | Value                                    |
+| --------- | ------- | ---------------------------------------- |
+|           |         |                                          |
+
+## Install
+
+*Enter instructions for installing the plugin package here.*
+
+## Examples
+
+### Title of Example
+
+```javascript
+var trial = {
+  type: jsPsychPluginMindlessClicking
+}
+```

packages/plugin-mindless-clicking/examples/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>jsPsychPluginMindlessClicking Example</title>
+  <script src="https://unpkg.com/jspsych"></script>
+  <!-- Load the published plugin package here, e.g.
+<script src="https://unpkg.com/plugin-mindless-clicking"></script>
+<script src="../dist/index.browser.js"></script> -->
+  <script src="../dist/index.browser.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css">
+</head>
+
+<body></body>
+<script>
+  const jsPsych = initJsPsych();
+
+  const trial = {
+    type: jsPsychPluginMindlessClicking,
+    required_clicks: 10
+  };
+
+  jsPsych.run([trial])
+</script>
+
+</html>

packages/plugin-mindless-clicking/jest.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);

packages/plugin-mindless-clicking/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "plugin-mindless-clicking",
+  "version": "0.0.1",
+  "description": "Participants click on a button many times",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "typings": "dist/index.d.ts",
+  "unpkg": "dist/index.browser.min.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "source": "src/index.ts",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
+    "tsc": "tsc",
+    "build": "rollup --config",
+    "build:watch": "npm run build -- --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jodeleeuw/jspsych-contrib.git",
+    "directory": ""
+  },
+  "keywords": [
+    "jsPsych"
+  ],
+  "author": {
+    "name": "Josh de Leeuw",
+    "url": "https://github.com/jodeleeuw"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jodeleeuw/jspsych-contrib/issues"
+  },
+  "homepage": "/plugin-mindless-clicking/README.md",
+  "dependencies": {
+    "jspsych": "^8.0.0",
+    "@citation-js/core": "^0.7.14",
+    "@citation-js/plugin-software-formats": "^0.6.1",
+    "@citation-js/plugin-bibtex": "^0.7.14",
+    "@citation-js/plugin-cff": "^0.6.1"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^3.2.2",
+    "@jspsych/test-utils": "^1.0.0"
+  }
+}

packages/plugin-mindless-clicking/rollup.config.mjs

@@ -0,0 +1,3 @@
+import { makeRollupConfig } from "@jspsych/config/rollup";
+
+export default makeRollupConfig("jsPsychPluginMindlessClicking");

packages/plugin-mindless-clicking/src/index.spec.ts

@@ -0,0 +1,39 @@
+import { clickTarget, startTimeline } from "@jspsych/test-utils";
+
+import jsPsychPluginMindlessClicking from ".";
+
+jest.useFakeTimers();
+
+describe("my plugin", () => {
+  it("should load", async () => {
+    const { expectFinished, expectRunning, getHTML, getData, displayElement, jsPsych } =
+      await startTimeline([
+        {
+          type: jsPsychPluginMindlessClicking,
+          required_clicks: 5,
+        },
+      ]);
+
+    await expectRunning();
+  });
+  it("should finish when the button is clicked the required number of times", async () => {
+    const { expectFinished, getHTML, getData, displayElement, jsPsych } = await startTimeline([
+      {
+        type: jsPsychPluginMindlessClicking,
+        required_clicks: 5,
+      },
+    ]);
+
+    const button = displayElement.querySelector("#jspsych-mindless-clicking-button");
+    for (let i = 0; i < 5; i++) {
+      clickTarget(button);
+      jest.advanceTimersByTime(100);
+    }
+
+    await expectFinished();
+
+    const data = getData();
+    expect(data.values()[0].rt).toBeDefined();
+    expect(data.values()[0].clicks).toBe(5);
+  });
+});

packages/plugin-mindless-clicking/src/index.ts

@@ -0,0 +1,77 @@
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+
+import { version } from "../package.json";
+
+const info = <const>{
+  name: "plugin-mindless-clicking",
+  version: version,
+  parameters: {
+    /** The number of times the button must be clicked before proceeding */
+    required_clicks: {
+      type: ParameterType.INT, // BOOL, STRING, INT, FLOAT, FUNCTION, KEY, KEYS, SELECT, HTML_STRING, IMAGE, AUDIO, VIDEO, OBJECT, COMPLEX
+      default: undefined,
+    },
+    /** The text on the button */
+    button_text: {
+      type: ParameterType.STRING,
+      default: "Click me!",
+    },
+  },
+  data: {
+    /** The total time to click the button the required number of times */
+    rt: {
+      type: ParameterType.INT,
+    },
+  },
+  // When you run build on your plugin, citations will be generated here based on the information in the CITATION.cff file.
+  citations: '__CITATIONS__',
+};
+
+type Info = typeof info;
+
+/**
+ * **plugin-mindless-clicking**
+ *
+ * Participants click on a button many times
+ *
+ * @author Josh de Leeuw
+ * @see {@link /plugin-mindless-clicking/README.md}}
+ */
+class MindlessClickingPlugin implements JsPsychPlugin<Info> {
+  static info = info;
+
+  constructor(private jsPsych: JsPsych) {}
+
+  trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    const start_time = performance.now();
+    let clicks = 0;
+
+    const html = `<div>
+      <button id="jspsych-mindless-clicking-button" class="jspsych-btn">${trial.button_text}</button>
+      <p id="jspsych-mindless-clicking-text">Click the button ${trial.required_clicks} more times to continue.</p>
+    </div>`;
+    display_element.innerHTML = html;
+
+    const update_display = () => {
+      const text_element = display_element.querySelector("#jspsych-mindless-clicking-text");
+      text_element.innerHTML = `Click the button ${trial.required_clicks - clicks} more times to continue.`;
+    }
+
+    const button_click_listener = () => {
+      clicks++;
+      update_display();
+      if (clicks == trial.required_clicks) {
+        this.jsPsych.finishTrial({
+          rt: performance.now() - start_time,
+          clicks: clicks,
+        })
+      }
+    }
+
+    const button = display_element.querySelector("#jspsych-mindless-clicking-button");
+    button.addEventListener("click", button_click_listener);
+  }
+
+}
+
+export default MindlessClickingPlugin;

packages/plugin-mindless-clicking/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "@jspsych/config/tsconfig.contrib.json",
+    "compilerOptions": {
+      "baseUrl": ".",
+      "resolveJsonModule": true
+    },
+    "include": ["src"]
+  }
+