jspsych / jspsych-contrib Goto Github PK

An open repository of jsPsych plugins and extensions, without any official support

Shell 0.01% JavaScript 22.10% TypeScript 63.73% HTML 13.42% CSS 0.73%

javascript science research psychology experiments jspsych templates

jspsych-contrib's Introduction

jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.

Experiments in jsPsych are created using plugins. Each plugin defines different kinds of events, like showing an image on the screen, and collects different kinds of data, like recording which key was pressed at which time. By assembling different plugins together into a timeline, it is possible to create a wide range of online experiments.

What can I do with jsPsych?

jsPsych comes with a number of plugins that you can use create tasks and collect data. Some plugins do general things, like present a stimulus (text, image, audio, video) and record a key press or button response along with a response time. Other plugins do more specific things, like show a set of instructions pages, run a drag-and-drop image sorting task, or calibrate the WebGazer eye-tracking extension. See the list of all plugins to see what each plugin can do.

Often people can create their experiment by combining these plugins together. But if that's not possible for your experiment, you can also modify a plugin file or create your own plugin. This gives you the flexibility to do exactly what you want, while still taking advantage of jsPsych's general experiment-building framework. The plugin template is extremely flexible. If a task is possible to do in a web browser, you can almost certainly implement it as a plugin.

Getting started

jsPsych can be loaded into a project in a variety of ways, including via CDNs and through NPM. You can learn more about setting up a project by following the hello world tutorial on the jsPsych website.

Once you've got a project set up, the reaction time task tutorial is a great next step, since it covers many core topics and features.

There are also a number of video tutorials available on the website.

Examples

Several example experiments and plugin demonstrations are available in the /examples folder. After you've downloaded the latest release, double-click on an example HTML file to run it in your web browser, and open it with a programming-friendly text editor to see how it works.

Documentation

Documentation is available at https://www.jspsych.org.

Getting help

For questions about using the library, please use the GitHub discussions forum. You can also browse through the history of Q&A on the forum to find related questions.

Contributing

We ❤️ contributions! See the contributing to jsPsych documentation page for more information about how you can help.

Citation

If you use this library in academic work, the preferred citation is:

de Leeuw, J.R., Gilbert, R.A., & Luchterhandt, B. (2023). jsPsych: Enabling an open-source collaborative ecosystem of behavioral experiments. Journal of Open Source Software, 8(85), 5351, https://joss.theoj.org/papers/10.21105/joss.05351.

This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:

de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. Behavior Research Methods, 47(1), 1-12. doi:10.3758/s13428-014-0458-y

Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.

Contributors

jsPsych is open source project with numerous contributors. The project is currently managed by the core team of Josh de Leeuw (@jodeleeuw), Becky Gilbert (@becky-gilbert), and Björn Luchterhandt (@bjoluc).

jsPsych was created by Josh de Leeuw.

We're also grateful for the generous support from a Mozilla Open Source Support award, which funded development of the library from 2020-2022.

jspsych-contrib's People

Contributors

Stargazers

Watchers

jspsych-contrib's Issues

Mediapipe face tracking extension

Hi all,
I'm currently trying to implement a mediapipe face tracking extension for jsPsych, but a runtime error keeps me from moving on. I added @mediapipe/face_mesh as an dependency and try to instantiate it in the constructor of the new jsPsychExtensionMediapipeFacemesh. However, I'm stuck with the VM throwing the error Uncaught TypeError: face_mesh.FaceMesh is not a constructor.

I suspect that it is related to the way of handling dependencies by npm and that not all parts of mediapipe were included in the dist js file created by npm. Because I'm fairly new to JS/TS and npm, I greatly appreciate any help.

Please find an example here: https://github.com/mgrewe/jspsych-contrib/tree/mediapipe_test

Thanks!

Add a who-used-jsPsych section in the readme / docs

I have not found a list of references for projects of other authors.
Maybe that could be a great source for all jsPsych users to see even more examples?
I could for example contribute https://github.com/1kastner/memory-test for now as a sample and another project might be added soon.

Latest version of html-vas-response doesn't seem to be on NPM?

Hello, it seems like the latest version (1.1.0) of html-vas-response is not on NPM. <script src="https://unpkg.com/@jspsych-contrib/[email protected]"></script> returns a 404 error and <script src="https://unpkg.com/@jspsych-contrib/plugin-html-vas-response"></script> appears to load version 1.0.0. Do I need to do anything to update it?

add optional message to wait screen for pipe plugin

As suggested here: jspsych/datapipe#89

VAS Plugin Error with webpack

Hello,

I was excited to see that someone contributed a VAS plugin for jsPsych. I'd very much like to try this plugin in one of my experiments, however, when I try to use it as a drop-in replacement for survey-likert (with the appropriate parameters) it throws an error: Uncaught ReferenceError: jsPsychModule is not defined.

I downloaded the plugin using npm and compiled the experiment with webpack. The experiment compiles, but during runtime throws the error above. I'm confident that the error is related to the VAS plugin as the experiment works perfectly fine with the likert scale plugin, however, when using the VAS plugin the error occurs.

Any thoughts on how to remedy the issue so I can play around with the plugin would be appreciated!

make it clearer how to browse the list of plugins available here.

I think it may not be intuitive for some folks to look in /packages.

We could either add a list to the README that folks can update when they contribute, or we could just add a general statement about looking in /packages to the README.

Can't load the plugin - is unpkg down?

It seems like running:

<!DOCTYPE html>
<html>
    <head>
        <!-- Title shown in tab -->
        <title>Test</title>
        <script src="https://unpkg.com/[email protected]"></script>
        <link href="https://unpkg.com/jspsych/css/jspsych.css" rel="stylesheet" type="text/css" />
        <script src="https://unpkg.com/@jspsych-contrib/plugin-survey-slider"></script>
    </head>

    <body></body>

    <script>
        var jsPsych = initJsPsych()

        jsPsych.run({
            type: jsPsychSurveySlider,
            questions: [{ prompt: "How old are you?" }],
        })
    </script>
</html>

Fails (i.e., it says that jsPsychSurveySlider is undefined. Tried different variant URLs like:

<script src="https://unpkg.com/@jspsych-contrib/[email protected]"></script> and
<script src="https://unpkg.com/jspsych-contrib/[email protected]"></script>

Am I doing something wrong or is this a larger issue?

Also, there is an typo in the plugin's README, there is no closing /script statement

self-paced-reading doesn't record data

@jodeleeuw @igmmgi

I think that the self-paced reading plugin fails to trigger any of the events normally used to save data (such as on_trial_finish or on_data_update on any of the words except the last one.

You can find our timeline herehere.

Now consider:

    const jsPsych = initJsPsych({
      display_element: document.getElementById('jsPsychTarget'),
      on_finish: console.log(`I'm done`),
      on_data_update: function(data) {
        console.log('Just added new data. The contents of the data are: '+JSON.stringify(data));
      },
      on_trial_finish: function(data) {
        console.log('A trial just ended.');
        console.log(JSON.stringify(data));
      }
    });

Critically, console.log only triggers on the final word of a sentence:

If I have time, I'll try to come up with a minimal working example.

Setup changesets

I'm assuming that our recommendation is that folks load plugins/extensions from this repo via unpkg.com links. How do we trigger a release of a package in this repo?

Make survey-slider plugin for multiple analog (slider) scales

Given that jspsych has already several useful plugins for creating questionnaires (survey-likert), it would benefit a lot for being able to use analog scales (i.e., sliders) instead of discrete choices (PS: note that this option is not available either in SurveyJS/survey-plugin afaik).

We've been using this plugin code in the past to get:

with:

var questionnaire = {
            type: jsPsychSurveySlider,
            questions: [
                {
                    prompt: "<b>Question 1</b>",
                    name: "question1",
                    ticks: ["Strongly disagree", "Strongly agree"],
                    required: true,
                    min: 0,
                    max: 1,
                    step: 0.01,
                    slider_start: 0.5,
                },
                {
                    prompt: "<b>Question 2</b>",
                    name: "question2",
                    ticks: ["No", "Yes"],
                    required: true,
                    min: 0,
                    max: 1,
                    step: 0.01,
                    slider_start: 0.5,
                },
            ],
            randomize_question_order: false,
            preamble: "Some instructions.",
            require_movement: false,
            slider_width: 600,
            data: {
                screen: "questionnaire",
            },
        }

        timeline.push(questionnaire)

I believe such plugin would benefit from being added here (or even as part of the official distribution IMO) but for this it would need to be updated (to typescript if I understand?) and cleaned up (and add a data simulation option). Although it's probably not a lot of work, it's still slightly beyond my javascript skill level. And I was wondering if I could get some guidance and help with that?

extension-touchscreen-buttons

an simple extension that allows to "simulate" key presses with touchbuttons.

jspsych / jspsych-contrib Goto Github PK

jspsych-contrib's Introduction

What can I do with jsPsych?

Getting started

Examples

Documentation

Getting help

Contributing

Citation

Contributors

jspsych-contrib's People

Contributors

Stargazers

Watchers

Forkers

jspsych-contrib's Issues

Recommend Projects

Recommend Topics

Recommend Org