Merge pull request #99 from jspsych/plugin-survey-number

add survey-number plugin

.changeset/twenty-tomatoes-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@jspsych-contrib/plugin-survey-number": major
+---
+
+New plugin for displaying a survey question and getting a numeric response

README.md

@@ -41,6 +41,7 @@ Plugin/Extension | Contributor | Description
 [rdk](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-rdk/docs/jspsych-rdk.md#jspsych-rdk-plugin) | [Sivananda Rajananda](https://github.com/vrsivananda) | This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard.
 [rok](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-rok/docs/jspsych-rok.md#jspsych-rok-plugin) | [Younes Strittmatter](https://github.com/younesStrittmatter) | This plugin displays a Random Object Kinematogram (ROK) and allows the subject to report the primary direction of motion or the primary orientation by pressing a key on the keyboard.
 [self-paced-reading](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-self-paced-reading/docs/jspsych-self-paced-reading.md) | [@igmmgi](https://github.com/igmmgi) | Self-paced reading tasks with different display options.
+[survey-number](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-survey-number/README.md) | [Josh de Leeuw](https://github.com/jodeleeuw) | This plugin displays a survey question and collects a numeric response.
 [vsl-animate-occlusion](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-vsl-animate-occlusion/docs/jspsych-vsl-animate-occlusion.md#jspsych-vsl-animate-occlusion-plugin) | [Josh de Leeuw](https://github.com/jodeleeuw) | The VSL (visual statistical learning) animate occlusion plugin displays an animated sequence of shapes that disappear behind an occluding rectangle while they change from one shape to another. 
 [vsl-grid-scene](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-vsl-grid-scene/docs/jspsych-vsl-grid-scene.md#jspsych-vsl-grid-scene-plugin) | [Josh de Leeuw](https://github.com/jodeleeuw) | The VSL (visual statistical learning) grid scene plugin displays images arranged in a grid. 
 

packages/plugin-survey-number/README.md

@@ -0,0 +1,35 @@
+# survey-number
+
+## Overview
+
+Collects a number response in a text box
+
+## Loading
+
+### In browser
+
+```js
+<script src="https://unpkg.com/@jspsych-contrib/[email protected]">
+```
+
+### Via NPM
+
+```
+npm install @jspsych-contrib/plugin-survey-number
+```
+
+```js
+import jsPsychSurveyNumber from '@jspsych-contrib/plugin-survey-number';
+```
+
+## Compatibility
+
+jsPsych 7.0.0
+
+## Documentation
+
+See [documentation](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-survey-number/docs/jspsych-survey-number.md)
+
+## Author / Citation
+
+Josh de Leeuw

packages/plugin-survey-number/docs/survey-number.md

@@ -0,0 +1,53 @@
+# survey-number
+
+Collects a number response in a text box
+
+## Parameters
+
+In addition to the [parameters available in all plugins](https://jspsych.org/latest/overview/plugins.md#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://jspsych.org/latest/overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
+
+| Name      | Type    | Value                                    |
+| --------- | ------- | ---------------------------------------- |
+|           |         |                                          |
+
+## Install
+
+Using the CDN-hosted JavaScript file:
+
+```js
+<script src="https://unpkg.com/@jspsych-contrib/plugin-survey-number"></script>
+```
+
+Using the JavaScript file downloaded from a GitHub release dist archive:
+
+```js
+<script src="jspsych/plugin-survey-number.js"></script>
+```
+
+Using NPM:
+
+```
+npm install @jspsych-contrib/plugin-survey-number
+```
+
+```js
+import SurveyNumber from '@jspsych-contrib/plugin-survey-number';
+```
+
+## Examples
+
+### Title of Example
+
+```javascript
+var trial = {
+  type: jsPsychSurveyNumber
+}
+```

packages/plugin-survey-number/examples/example1.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="https://unpkg.com/jspsych"></script>
+        <script src="../dist/index.browser.js"></script>
+        <link href="https://unpkg.com/jspsych/css/jspsych.css" rel="stylesheet" type="text/css">
+    </head>
+    <body></body>
+    <script>
+        const jsPsych = initJsPsych();
+
+        const trial = {
+            type: jsPsychSurveyNumber,
+            questions: [{
+                prompt: 'How old are you?',
+                name: 'age',
+                required: true,
+            }]
+        }
+
+        jsPsych.run([trial]);
+    </script>
+</html>

packages/plugin-survey-number/jest.config.cjs

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

packages/plugin-survey-number/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@jspsych-contrib/plugin-survey-number",
+  "version": "0.0.1",
+  "description": "Collects a number response in a text box",
+  "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": "git+https://github.com/jspsych/jspsych-contrib.git",
+    "directory": "packages/plugin-survey-number"
+  },
+  "author": "Josh de Leeuw",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jspsych/jspsych-contrib/issues"
+  },
+  "homepage": "https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-survey-number",
+  "peerDependencies": {
+    "jspsych": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^2.0.0",
+    "@jspsych/test-utils": "^1.0.0",
+    "jspsych": "^7.0.0"
+  }
+}

packages/plugin-survey-number/rollup.config.mjs

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

packages/plugin-survey-number/src/index.spec.ts

@@ -0,0 +1,24 @@
+import { startTimeline } from "@jspsych/test-utils";
+
+import jsPsychSurveyNumber from ".";
+
+jest.useFakeTimers();
+
+describe("my plugin", () => {
+  it("should load", async () => {
+    const { expectFinished, getHTML, getData, displayElement, jsPsych } = await startTimeline([
+      {
+        type: jsPsychSurveyNumber,
+        questions: [{ prompt: "How old are you?" }],
+      },
+    ]);
+
+    expect(getHTML()).toMatch("How old are you?");
+
+    displayElement.querySelector("input").value = "25";
+
+    (displayElement.querySelector("#jspsych-survey-text-next") as HTMLInputElement).click();
+
+    await expectFinished();
+  });
+});