Merge pull request #105 from Sussex-Psychology-Software-Team/main

Survey Sliders plugin
jspsych · Mar 4, 2024 · e216de3 · e216de3
2 parents 0cca232 + 64aaa08
commit e216de3
Show file tree

Hide file tree

Showing 12 changed files with 594 additions and 0 deletions.
diff --git a/.changeset/clean-seals-behave.md b/.changeset/clean-seals-behave.md
@@ -0,0 +1,5 @@
+---
+"@jspsych-contrib/plugin-survey-slider": patch
+---
+
+Added Survey Slider plugin
diff --git a/.changeset/hungry-kangaroos-learn.md b/.changeset/hungry-kangaroos-learn.md
@@ -0,0 +1,5 @@
+---
+"@jspsych-contrib/plugin-survey-slider": major
+---
+
+Added Survey-slider plugin (Major version this time)
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plugin-survey-slider/README.md b/packages/plugin-survey-slider/README.md
@@ -0,0 +1,38 @@
+# survey-slider
+
+## Overview
+
+Add several analogue scales on the same page for use in questionnaires. 
+
+Porting of existing code by Dominique Makowski here: https://github.com/RealityBending/JSmisc/blob/main/jspsych_extensions/plugin-survey-slider.js 
+to jspsych-contrib by Max Lovell
+
+## Loading
+
+### In browser
+
+```js
+<script src="https://unpkg.com/@jspsych-contrib/[email protected]">
+```
+
+### Via NPM
+
+```
+npm install @jspsych-contrib/plugin-survey-slider
+```
+
+```js
+import jsPsychSurveySlider from '@jspsych-contrib/plugin-survey-slider';
+```
+
+## Compatibility
+
+jsPsych 7.0.0
+
+## Documentation
+
+See [documentation](https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-survey-slider/docs/jspsych-survey-slider.md)
+
+## Author / Citation
+
+Dominique Makowski
diff --git a/packages/plugin-survey-slider/docs/survey-slider.md b/packages/plugin-survey-slider/docs/survey-slider.md
@@ -0,0 +1,53 @@
+# survey-slider
+
+Add several analogue scales on the same page for use in questionnaires
+
+## 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-slider"></script>
+```
+
+Using the JavaScript file downloaded from a GitHub release dist archive:
+
+```js
+<script src="jspsych/plugin-survey-slider.js"></script>
+```
+
+Using NPM:
+
+```
+npm install @jspsych-contrib/plugin-survey-slider
+```
+
+```js
+import SurveySlider from '@jspsych-contrib/plugin-survey-slider';
+```
+
+## Examples
+
+### Title of Example
+
+```javascript
+var trial = {
+  type: jsPsychSurveySlider
+}
+```
diff --git a/packages/plugin-survey-slider/examples/slider_example.html b/packages/plugin-survey-slider/examples/slider_example.html
@@ -0,0 +1,22 @@
+<!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: jsPsychSurveySlider,
+            questions: [
+                {prompt:'FIRST QUESTION', ticks:['Never','Always']},
+                {prompt:'SECOND QUESTION', ticks:['Just once','All the time!']},
+            ]
+        }
+
+        jsPsych.run([trial]);
+    </script>
+</html>
diff --git a/packages/plugin-survey-slider/jest.config.cjs b/packages/plugin-survey-slider/jest.config.cjs
@@ -0,0 +1 @@
+module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
diff --git a/packages/plugin-survey-slider/package.json b/packages/plugin-survey-slider/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@jspsych-contrib/plugin-survey-slider",
+  "version": "0.0.1",
+  "description": "Add several analogue scales on the same page for use in questionnaires",
+  "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-slider"
+  },
+  "author": "Dominique Makowski",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jspsych/jspsych-contrib/issues"
+  },
+  "homepage": "https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-survey-slider",
+  "peerDependencies": {
+    "jspsych": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^2.0.0",
+    "@jspsych/test-utils": "^1.0.0",
+    "jspsych": "^7.0.0"
+  }
+}
diff --git a/packages/plugin-survey-slider/rollup.config.mjs b/packages/plugin-survey-slider/rollup.config.mjs
@@ -0,0 +1,3 @@
+import { makeRollupConfig } from "@jspsych/config/rollup";
+
+export default makeRollupConfig("jsPsychSurveySlider");
diff --git a/packages/plugin-survey-slider/src/index.spec.ts b/packages/plugin-survey-slider/src/index.spec.ts
@@ -0,0 +1,24 @@
+import { startTimeline } from "@jspsych/test-utils";
+
+import jsPsychSurveySlider from ".";
+
+jest.useFakeTimers();
+
+describe("my plugin", () => {
+  it("should load", async () => {
+    const { expectFinished, getHTML, getData, displayElement, jsPsych } = await startTimeline([
+      {
+        type: jsPsychSurveySlider,
+        questions: [{ prompt: "How old are you?" }],
+      },
+    ]);
+
+    expect(getHTML()).toMatch("How old are you?");
+
+    displayElement.querySelector("input").value = "25";
+
+    (displayElement.querySelector("#jspsych-survey-slider-next") as HTMLInputElement).click();
+
+    await expectFinished();
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { makeRollupConfig } from "@jspsych/config/rollup";

		export default makeRollupConfig("jsPsychSurveySlider");