adding a new slider plugin

.changeset/busy-plants-relax.md

@@ -0,0 +1,5 @@
+---
+"@jspsych-contrib/plugin-slide-to-continue": major
+---
+
+The plugin-slide-to-continue is a interactive slider interface similar to the 'slide to unlock' functionality found on mobile devices. User must drag a slider handle to start or complete the trial, making it useful for consent screens, engagement check, or trasition screens in experiments

packages/plugin-slide-to-continue/CHANGELOG.md

@@ -0,0 +1,70 @@
+# @jspsych-contrib/plugin-slide-to-continue
+
+## 5.0.0
+
+### Major Changes
+
+- First major version bump, includes a working version of the plugin (removed the animations parameter)
+
+### Minor Changes
+
+- Changed the progress bar styling so that it is more smooth and its dynamic motiong of following the leading shape is more consistent than before
+- Changed slider_text parameter to accomodate multi-line text with the use of commas and added a new parameter called text_size to adjust the size of the text in the slider_text parameter
+- Change to the color parameter - it now allows for either a color name or color hex code input and removed custom hex color codes
+- A change to the plugin name, dependancies and commented text
+
+### Patch Changes
+
+- Smoothened progress bar completion and added detail to parameter functions
+
+## 4.0.0
+
+### Major Changes
+
+- First major version bump, includes a working version of the plugin (removed the animations parameter)
+
+### Minor Changes
+
+- Changed the progress bar styling so that it is more smooth and its dynamic motiong of following the leading shape is more consistent than before
+- Changed slider_text parameter to accomodate multi-line text with the use of commas and added a new parameter called text_size to adjust the size of the text in the slider_text parameter
+- Change to the color parameter - it now allows for either a color name or color hex code input and removed custom hex color codes
+- A change to the plugin name, dependancies and commented text
+
+## 3.0.0
+
+### Major Changes
+
+- First major version bump, includes a working version of the plugin (removed the animations parameter)
+
+### Minor Changes
+
+- Changed slider_text parameter to accomodate multi-line text with the use of commas and added a new parameter called text_size to adjust the size of the text in the slider_text parameter
+- Change to the color parameter - it now allows for either a color name or color hex code input and removed custom hex color codes
+- A change to the plugin name, dependancies and commented text
+
+## 2.0.0
+
+### Major Changes
+
+- First major version bump, includes a working version of the plugin (removed the animations parameter)
+
+### Minor Changes
+
+- Change to the color parameter - it now allows for either a color name or color hex code input and removed custom hex color codes
+- A change to the plugin name, dependancies and commented text
+
+## 1.0.0
+
+### Major Changes
+
+- First major version bump, includes a working version of the plugin (removed the animations parameter)
+
+### Minor Changes
+
+- A change to the plugin name, dependancies and commented text
+
+## 0.1.0
+
+### Minor Changes
+
+- A change to the plugin name, dependancies and commented text

packages/plugin-slide-to-continue/CITATION.cff

@@ -0,0 +1,32 @@
+# This CITATION.cff file was generated with cffinit.
+# Visit https://bit.ly/cffinit to generate yours today!
+
+cff-version: 1.2.0
+title: jspsych-plugin-slide-to-contuinue
+message: >-
+  If you use this software, please cite it using the
+  metadata from this file.
+type: software
+authors:
+  - given-names: Vishnu
+    family-names: Lakshman
+    email: [email protected]
+    affiliation: De Leeuw Lab - Vassar College
+repository-code: >-
+  https://github.com/lakshmanvishnu/jspsych-contrib/tree/slider_plugin/packages/plugin-slider
+abstract: >-
+  The plugin-slider is a jspsych plugin that creates an
+  interactive slider interface similar to the "slide to
+  unlock" functionality found on mobile devices. Users must
+  drag a slider handle to complete the trial, making it
+  useful for consent screens, engagement checks, or
+  transition screens in psychological experiments.
+keywords:
+  - jspsych
+  - plugin
+  - slider
+  - jspsych-contrib
+license: MIT
+commit: First release
+version: 1.0.0
+date-released: '2025-07-14'

packages/plugin-slide-to-continue/README.md

@@ -0,0 +1,115 @@
+# plugin-slider
+
+## Overview
+
+The `plugin-slide-to-continue` is a jsPsych plugin that creates an interactive slider interface similar to the "slide to unlock" functionality found on mobile devices. Users must drag a slider handle to complete the trial, making it useful for consent screens, engagement checks, or transition screens in psychological experiments.
+
+## Features
+
+- **Customizable appearance**: Control color, shape, size, and orientation
+- **Flexible direction**: Support for left-to-right or right-to-left sliding
+- **Smooth animations**: Optional smooth transitions and visual feedback
+- **Touch-friendly**: Works on both desktop and mobile devices
+- **Progress tracking**: Records completion status, response time, and final position
+
+## Installation
+
+### Using npm
+
+```bash
+npm install plugin-slide-to-continue
+```
+
+### Using a CDN
+
+```html
+<script src="https://unpkg.com/plugin-slide-to-continue@latest/dist/index.browser.min.js"></script>
+```
+
+## Compatibility
+
+`plugin-slide-to-continue` requires jsPsych v8.0.0 or later.
+
+## 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                                                    |
+| -------------- | ------- | ------------------ | -------------------------------------------------------------- |
+| `color`        | string  | "purple"           | The color of the slider track and handle (hex, rgb, or named) |
+| `direction`    | string  | "left-to-right"    | The sliding direction ("left-to-right" or "right-to-left")    |
+| `object_sliding` | string | "round"           | The shape of the slider handle ("round" or "square")          |
+| `length`       | number  | 300                | The length of the slider in pixels                            |
+| `orientation`  | string  | "horizontal"       | The slider orientation ("horizontal" or "vertical")           |
+| `width`        | number  | 60                 | The width/height of the slider track in pixels                |
+| `animation`    | string  | "smooth"           | Animation style ("smooth" or "ticks")                         |
+| `prompt`       | string  | null               | HTML content displayed above the slider                       |
+| `slider_text`  | string  | "Slide to continue" | Text displayed on the slider                                  |
+| `duration`     | number  | null               | Maximum trial duration in milliseconds                        |
+
+## 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                                                      |
+| ---------------- | ------- | ---------------------------------------------------------- |
+| `rt`             | number  | The response time in milliseconds to complete the slide   |
+| `response`       | boolean | Whether the slider was successfully completed              |
+| `final_position` | number  | The final position of the slider (0-100)                  |
+
+## Examples
+
+### Basic Usage
+
+```javascript
+var trial = {
+  type: jsPsychPluginSlider,
+  prompt: '<h2>Welcome to the Experiment</h2>',
+  slider_text: 'Slide to continue'
+};
+```
+
+### Vertical Red Slider
+
+```javascript
+var trial = {
+  type: jsPsychPluginSlider,
+  color: 'red',
+  orientation: 'vertical',
+  length: 200,
+  width: 80,
+  object_sliding: 'square',
+  slider_text: 'Slide up'
+};
+```
+
+### Right-to-Left Slider
+
+```javascript
+var trial = {
+  type: jsPsychPluginSlider,
+  direction: 'right-to-left',
+  color: '#2196F3',
+  animation: 'ticks',
+  prompt: '<p>Slide from right to left to proceed</p>'
+};
+```
+
+### Timed Trial
+
+```javascript
+var trial = {
+  type: jsPsychPluginSlider,
+  duration: 10000, // 10 seconds maximum
+  prompt: '<p>Quick! Slide to continue before time runs out!</p>',
+  color: 'orange'
+};
+```
+
+## Documentation
+
+See [documentation](docs/plugin-slider.md) for detailed usage information.
+
+## Author / Citation
+
+[Vishnu Lakshman](https://github.com/lakshmanvishnu)