You have " + tries + " tries left." }` | +| KEY | A single key, with support for function keys like arrows and spacebars. | `"j"`, `"n"`, `"ArrowLeft"` | +| KEYS | Either an array of keys, or the string `"ALL_KEYS"` or `"NO_KEYS"`, indicating their respective inclusion/exclusion criterea. | `["f", "j"]` | +| SELECT | A list of strings that a developer can choose between as a parameter. | `["cm", "px", "em"]` | +| HTML_STRING | A string with HTML markup. | `"
This is the prompt.
"` | +| IMAGE | A string that contains the path to an image file. | `"my_image.jpg"` | +| AUDIO | A string that contains the path to an audio file. | `"my_sound.mp3"` | +| VIDEO | A string that contains the path to a video file. | `"my_video.mp4"` | +| OBJECT | A general JSON object (key-value pairs). | `{ rt: 350, response: "hello!", correct: true }` | +| COMPLEX | A JSON object that one can specify nested parameters for. | `{ rt: 350, response: "hello!", correct: true }` | +| TIMELINE | A jsPsych timeline object with trials. | `[{ type: jsPsychKeyboardResponse, stimulus: 'my_image.jpg }]` | + +Within each parameter, you may also specify if it is an array of the specific type. For example, a parameter that requires a list of button labels would be described as: + +```js +const info = { + // ... + parameters: { + /** The labels to be displayed on each button. */ + labels: { + type: ParameterType.STRING, + array: true, + default: ["Pause", "Play", "Continue"] + } + }, + // ... +} +``` + +Specific parameter types also have their own special markup. For `ParameterType.SELECT`, you specify the options one can choose with an `options` field, and then the `default` field must be within that field. + +```js +const info = { + // ... + parameters: { + /** The units of measure used to display the length and width of the stimulus. */ + units: { + type: ParameterType.SELECT, + options: ["em", "px", "vh", "vw"], + default: "px" + } + }, + // ... +} +``` + +For `ParameterType.COMPLEX`, we may specify the underlying fields in the object with the `nested` field. This acts in the same way as us defining parameters regularly, only we are now just delineating the fields within the object itself. + +```js +const info = { + // ... + parameters: { + /** Where to display the location of the stimuli. */ + locations: { + type: ParameterType.COMPLEX, + array: true, + default: undefined, + nested: { + /** The x-coordinate of the stimulus, in the units from the `units` field. */ + x: { + type: ParameterType.INT + }, + /** The y-coordinate of the stimulus. */ + y: { + type: ParameterType.INT + } + } + } + }, + // ... +} +``` + ## Plugin functionality Inside the `.trial()` method you can do pretty much anything that you want, including modifying the DOM, setting up event listeners, and making asynchronous requests. In this section we'll highlight a few common things that you might want to do as examples. diff --git a/docs/overview/browser-device-support.md b/docs/overview/browser-device-support.md index 891e0c42ab..7de505a487 100644 --- a/docs/overview/browser-device-support.md +++ b/docs/overview/browser-device-support.md @@ -22,11 +22,12 @@ There are many other web browsers that are available, but that are not commonly In general, jsPsych experiments can be run on mobile devices (smartphones and tablets). However, certain plugins will not work on mobile. For instance, any plugin that requires a keyboard response without a text input box, such as the *-keyboard-response plugins, will not work. Even plugins that do work on mobile might work differently than they do on desktop and laptop computers. For instance, on mobile devices, a text input box will cause an on-screen keyboard to pop up, which affects the visible content on the screen. If you plan to run an experiment that allows people to use mobile devices, we recommend doing some extra testing to make sure that everything works as expected. In particular, you may want to check that: -* Font sizes are readable on smaller screens -* Stimuli sizes are large enough and appropriate for the task -* Page is laid out as intended (e.g. elements are centered and do not overlap) -* Response options are touchscreen-friendly (e.g. buttons rather than key presses) -* Response options (e.g. buttons, text boxes, radio buttons) are large enough and far enough apart to be easily selected with a finger tap + + * Font sizes are readable on smaller screens + * Stimuli sizes are large enough and appropriate for the task + * Page is laid out as intended (e.g. elements are centered and do not overlap) + * Response options are touchscreen-friendly (e.g. buttons rather than key presses) + * Response options (e.g. buttons, text boxes, radio buttons) are large enough and far enough apart to be easily selected with a finger tap It's possible to use your browser's developer tools to emulate mobile devices ([this page shows how to do it in Chrome](https://developers.google.com/web/tools/chrome-devtools/device-mode)), which is useful for getting a sense of how your experiment will look on mobile devices. Just be aware that there are limitations to emulator tools, and there are some aspects of mobile devices/browsers that a desktop browser will not be able to simulate. diff --git a/docs/overview/building-surveys.md b/docs/overview/building-surveys.md index 257a695410..5a5dccfb38 100644 --- a/docs/overview/building-surveys.md +++ b/docs/overview/building-surveys.md @@ -387,7 +387,7 @@ Rather than repeating a question format within the same trial, perhaps you want elements: [ { type: "text", - title: `Enter a word related to ${jsPsych.timelineVariable('word').toUpperCase()}:`, + title: `Enter a word related to ${jsPsych.evaluteTimelineVariable('word').toUpperCase()}:`, autocomplete: "off" } ], @@ -416,7 +416,7 @@ Rather than repeating a question format within the same trial, perhaps you want // Create question using timeline variables const page = survey.addNewPage('page1'); const question = page.addNewQuestion('text'); - question.title = `Enter a word related to ${jsPsych.timelineVariable('word').toUpperCase()}`; + question.title = `Enter a word related to ${jsPsych.evaluateTimelineVariable('word').toUpperCase()}`; question.autocomplete = "off"; // Set survey-level parameters survey.showQuestionNumbers = false; diff --git a/docs/overview/extensions.md b/docs/overview/extensions.md index bf69628fbc..dd4a0972c0 100644 --- a/docs/overview/extensions.md +++ b/docs/overview/extensions.md @@ -1,6 +1,6 @@ # Extensions -Extensions are jsPsych modules that can interface with any plugin to extend the functionality of the plugin. A canonical example of an extension is eye tracking. An eye tracking extension allows a plugin to gather gaze data and add it to the plugin's data object. +In jsPsych, extensions allow one to extend the functionality of various plugins, giving individual plugins the ability to collect more data, display additional stimuli, and more. A canonical example of an extension is [eye tracking](../extensions/webgazer.md), which allow plugins to gather gaze data and add it to the their respective data objects. For a full list of extensions directly included in the jsPsych release, see [here](../extensions/list-of-extensions.md). ## Using an Extension @@ -16,7 +16,7 @@ To use an extension in an experiment, you'll load the extension file via a `Please select the microphone you would like to use.
` | The message to display when the user is presented with a dropdown list of available devices. -button_label | sting | 'Use this microphone.' | The label for the select button. +button_label | string | 'Use this microphone.' | The label for the select button. ## Data Generated diff --git a/docs/reference/jspsych-pluginAPI.md b/docs/reference/jspsych-pluginAPI.md index 46c782ea4c..b7fa6005eb 100644 --- a/docs/reference/jspsych-pluginAPI.md +++ b/docs/reference/jspsych-pluginAPI.md @@ -234,7 +234,7 @@ Returns a Promise that resolves to an instance of an AudioPlayer class that hold #### Description -Gets an AudioPlayer class instance which has methods that can be used to play or stop audio that can be played with the WebAudio API or an audio object that can be played as HTML5 Audio. +Gets an AudioPlayer class instance which has methods that can be used to play or stop audio that can be played with the WebAudio API or an audio object that can be played as HTML5 Audio. By default, jsPsych uses the WebAudio API to play audio in the browser, so if you want to use HTML5 Audio, be sure to put `use_webaudio: false` in the `initJsPsych` object. It is strongly recommended that you preload audio files before calling this method. This method will load the files if they are not preloaded, but this may result in delays during the experiment as audio is downloaded. @@ -289,7 +289,7 @@ See the `audio-keyboard-response` plugin for an example in a fuller context. ```javascript const audio = jsPsych.pluginAPI.getAudioPlayer(filepath); -audio.play(); +audio.stop(); ``` #### Return value @@ -298,7 +298,7 @@ Returns nothing. #### Description -Method that belongs to the AudioPlayer class. Stops the audio loaded into the audio buffer of the AudioPlayer instance for a particular file. If the audio is an HTML5 audio object it pauses it. If the audio is a Webaudio API object it stops it. +Method that belongs to the AudioPlayer class. Stops the audio loaded into the audio buffer of the AudioPlayer instance for a particular file. If the audio is an HTML5 audio object it pauses it. If the audio is a WebAudio API object it stops it. This will regenerate the audio player, allowing you to call the `play()` method upon it again. #### Example @@ -310,7 +310,6 @@ const audio = await jsPsych.pluginAPI.getAudioPlayer('my-sound.mp3'); audio.play(); audio.stop(); - ``` See the `audio-keyboard-response` plugin for an example in a fuller context. @@ -385,63 +384,6 @@ See the `audio-keyboard-response` plugin for an example in a fuller context. ## Other Media -### getAudioBuffer - -```javascript -jsPsych.pluginAPI.getAudioBuffer(filepath) -``` - -#### Parameters - -Parameter | Type | Description -----------|------|------------ -filepath | string | The path to the audio file that was preloaded. - -#### Return value - -Returns a Promise that resolves when the audio file loads. Success handler's parameter will be the audio buffer. If the experiment is running using the WebAudio API it will be an AudioBuffer object. Otherwise, it will be an HTML5 Audio object. The failure handler's parameter is the error generated by `preloadAudio`. - -#### Description - -Gets an AudioBuffer that can be played with the WebAudio API or an Audio object that can be played with HTML5 Audio. - -It is strongly recommended that you preload audio files before calling this method. This method will load the files if they are not preloaded, but this may result in delays during the experiment as audio is downloaded. - -#### Examples - -##### HTML 5 Audio - -```javascript -jsPsych.pluginAPI.getAudioBuffer('my-sound.mp3') - .then(function(audio){ - audio.play(); - }) - .catch(function(err){ - console.error('Audio file failed to load') - }) -``` - -##### WebAudio API - -```javascript -var context = jsPsych.pluginAPI.audioContext(); - -jsPsych.pluginAPI.getAudioBuffer('my-sound.mp3') - .then(function(buffer){ - audio = context.createBufferSource(); - audio.buffer = buffer; - audio.connect(context.destination); - audio.start(context.currentTime); - }) - .catch(function(err){ - console.error('Audio file failed to load') - }) -``` - -See the `audio-keyboard-response` plugin for an example in a fuller context. - ---- - ### getAutoPreloadList ```javascript @@ -565,7 +507,7 @@ None. #### Description -Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [getCameraRecorder()](#getcamerarecorder). +Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [`getCameraRecorder()`](#getcamerarecorder). #### Example @@ -598,7 +540,7 @@ None. #### Description -Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [getMicrophoneRecorder()](#getmicrophonerecorder). +Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [`getMicrophoneRecorder()`](#getmicrophonerecorder). #### Example diff --git a/docs/reference/jspsych.md b/docs/reference/jspsych.md index 906241fc73..a4d4260307 100644 --- a/docs/reference/jspsych.md +++ b/docs/reference/jspsych.md @@ -228,42 +228,6 @@ const memoryTestProcedure = { ``` ---- -## jsPsych.addNodeToEndOfTimeline - -```javascript -jsPsych.addNodeToEndOfTimeline(node_parameters) -``` - -### Parameters - -| Parameter | Type | Description | -| --------------- | -------- | ---------------------------------------- | -| node_parameters | object | An object defining a timeline. It must have, at a minimum, a `timeline` parameter with a valid timeline array as the value for that parameter. | - -### Return value - -None. - -### Description - -Adds the timeline to the end of the experiment. - -### Example - -```javascript -var trial = { - type: jsPsychHtmlKeyboardResponse, - stimulus: 'This is a new trial.' -} - -var new_timeline = { - timeline: [trial] -} - -jsPsych.addNodeToEndOfTimeline(new_timeline) -``` - --- ## jsPsych.evaluateTimelineVariable @@ -330,13 +294,14 @@ Returns nothing. ### Description -This method tells jsPsych that the current trial is over. It is used in all of the plugins to end the current trial. When the trial ends a few things happen: +This method tells jsPsych that the current trial is over. It is used in all of the plugins to end the current trial. When the trial ends, a few things happen: * The data is stored using `jsPsych.data.write()` -* The on_finish callback function is executed for the trial -* The on_trial_finish callback function is executed +* The `on_finish` callback function is executed for the trial +* The `on_trial_finish` callback function is executed +* The display element is cleared, and any timeouts that are pending are cleared. * The progress bar is updated if it is being displayed -* The experiment ends if the trial is the last one (and the on_finish callback function is executed). +* The experiment ends if the trial is the last one (and the `on_finish` callback function is executed). * The next trial, if one exists, is started. ### Example @@ -363,7 +328,7 @@ Returns the object describing the current trial. The object will contain all of ### Description -Get a description of the current trial +Get a description of the current trial. ### Example @@ -400,6 +365,8 @@ var el = jsPsych.getDisplayElement(); // hide the jsPsych display el.style.visibility = 'hidden'; ``` + + --- ## jsPsych.getInitSettings @@ -465,31 +432,6 @@ alert('You have completed approximately '+progress.percent_complete+'% of the ex ``` ---- -## jsPsych.getProgressBarCompleted - -```javascript -jsPsych.getProgressBarCompleted() -``` - -### Parameters - -None. - -### Return value - -Returns a value between 0 and 1 representing how full the progress bar currently is. - -### Description - -Used to get the current value of the progress bar. Works for automated and manual control. - -### Example - -```javascript -var progress_bar_amount = jsPsych.getProgressBarCompleted(); -``` - --- ## jsPsych.getStartTime @@ -568,9 +510,9 @@ Pauses the experiment. The experiment will finish the current trial, but will no var trial = { type: jsPsychHtmlKeyboardResponse, stimulus: 'Press p to take a 30 second break. Otherwise, press c to continue immediately.', - choices: ['p','c'], + choices: ['p', 'c'], on_finish: function(data){ - if(jsPsych.pluginAPI.compareKeys(data.response, "p")) { + if (jsPsych.pluginAPI.compareKeys(data.response, "p")) { jsPsych.pauseExperiment(); setTimeout(jsPsych.resumeExperiment, 30000); } @@ -646,35 +588,6 @@ jsPsych.run(timeline); --- -## jsPsych.setProgressBar - -```javascript -jsPsych.setProgressBar(value) -``` - -### Parameters - -| Parameter | Type | Description | -| --------- | ------- | ---------------------------------------- | -| value | numeric | Proprotion (between 0 and 1) to fill the progress bar. | - - -### Return value - -None. - -### Description - -Set the progress bar to a custom amount. Proportion must be between 0 and 1. Values larger than 1 are treated as 1. - -### Example - -```javascript -jsPsych.setProgressBar(0.85); -``` - ---- - ## jsPsych.timelineVariable ```javascript diff --git a/docs/support/migration-v8.md b/docs/support/migration-v8.md index b0651a1009..7c107ba86a 100644 --- a/docs/support/migration-v8.md +++ b/docs/support/migration-v8.md @@ -2,7 +2,8 @@ Version 8.x of jsPsych focused on a complete rewrite of the core library to enable new features and make it easier to maintain. Most of the changes in version 8.x are behind the scenes. -However, there are some breaking changes that you will need to address in your experiment code in order to upgrade to v8.x. +However, there are some breaking changes that you will need to address in your experiment code in order to upgrade to v8.x. +If you are a plugin developer, there are also some special considerations below to factor in when developing your plugins or modifying existing ones. This guide is aimed at upgrades from version 7.x to 8.x. If you are using version 6.x or earlier, please follow the [migration guide for v7.x](./migration-v7.md) before trying to upgrade to v8.x. @@ -83,7 +84,7 @@ const trial = { ``` The `button_html` parameter can also support different HTML for each button. -See the [plugin documentation](https://www.jspsych.org/plugins/jspsych-html-button-response/) for more details. +See the [plugin documentation](https://www.jspsych.org/latest/plugins/html-button-response/index.html) for more details. ## Plugin parameter handling @@ -104,6 +105,49 @@ Including these properties is not *required* for a plugin to work, but it is rec In version 8.x, jsPsych will throw a warning if a plugin is used that does not have a `version` or `data` property in the `info` object. In version 9.x, we plan to make this a requirement. +## Changes to the `AudioPlayer` class + +In version 7.x, jsPsych's `pluginAPI` class exposed WebAudio and HTML5 audio APIs through `getAudioBuffer()`. However, this required different implementations done by the developer to account for each API. +In version 8.x, we've removed this in favor of `getAudioPlayer()`, which handles both API choices under the hood. + +This change only affects plugin developers. If you want to update to use the new `getAudioPlayer()`, it is recommend that you call this new method using the `await` syntax, which requires an asynchronous `trial` function: +```js +const audio = await jsPsych.pluginAPI.getAudioPlayer('my-sound.mp3'); +``` + +If you'd like to still use the `.then()` syntax to resolve the Promise generated, you may update it as such: + +Version 7.x: +```js +this.jsPsych.pluginAPI + .getAudioBuffer('my-audio.mp3') + .then((audio) => { + // call play on audio if HTML5 audio API, create and connect buffer if WebAudio API + }) + .catch((err) =>{ + // handle error + }); +``` + +Version 8.x: +```js +this.jsPsych.pluginAPI + .getAudioPlayer('my-audio.mp3') + .then((player) => { + // no need to create and connect buffer, can just directly call functions on player + }) + .catch((err) => { + // handle error + }) +``` + +Along with this, the `start()` and `pause()` functions were removed from the `AudioPlayer` class. +You can still call `stop()` upon an audio ending in order to regenerate the `AudioPlayer`, and be able +to call `play()` on it again. + +For a general guide on implementation, the [`audio-button-response`](https://github.com/jspsych/jsPsych/blob/main/packages/plugin-audio-button-response/src/index.ts) plugin uses the `await` syntax +to handle playing audio. + ## Changes to `finishTrial()` When a plugin calls `finishTrial()` or ends via a `return` statement, jsPsych will now automatically clear the display and clear any timeouts that are still pending. This change should only affect plugin developers. If you are using built-in plugins you should not notice any difference. diff --git a/docs/tutorials/community-tutorials.md b/docs/tutorials/community-tutorials.md new file mode 100644 index 0000000000..d3063f5e10 --- /dev/null +++ b/docs/tutorials/community-tutorials.md @@ -0,0 +1,45 @@ +# Community Tutorials + +If you're interested in learning more about jsPsych, prefer video tutorials, or would like to just see other perspectives on how to use the codebase, we have some community resources that can assist you. If you have an idea for a tutorial to add, if you want to make your own, or if you have found a particularly helpful resource while online, be sure to tell us through our [issues board](https://github.com/jspsych/jsPsych/issues) so we may potentially feature it here! + +## Version 8.x + +Currently there many aren't any tutorials specific to jsPsych version `8.x` due to the relatively recent release date. However, concerning most experiments, the `7.x` tutorials should provide plenty of information. Along with this, our [migration guide](../support/migration-v8.md) can also assist in bridging the gap, though most breaking changes have to do with plugin development, rather than experiment building. + +### University of Edinburgh + +This [tutorial](https://softdev.ppls.ed.ac.uk/online_experiments/index.html) provided by the folks at the University of Edinburgh is primarily used for students learning how to construct online experiments with jsPsych, but there is plenty of helpful information on here for anyone. A [basic tutorial](https://softdev.ppls.ed.ac.uk/online_experiments/02_first.html) is initially provided, along with framework-specific topics like timeline variables and factorial design [covered here](https://softdev.ppls.ed.ac.uk/online_experiments/04_jspsych.html). There are some more advanced tutorials covering [participant and condition numbers](https://softdev.ppls.ed.ac.uk/online_experiments/07_ppt.html), among other tutorials that should give you a deeper understanding of JavaScript and our framework. + +## Version 7.x + +These tutorials use version `7.x` of jsPsych. + +### jamesbrandscience + +This very handy [website](https://jamesbrandscience.github.io/tutorials/) focuses primarily on teaching how to use [Cognition.run](https://www.cognition.run/), a hosting service for jsPsych experiments, in tandem with teaching jsPsych. It is split into an [introduction](https://jamesbrandscience.github.io/jspsych-tutorial/jspsych_1.html) with jsPsych and Cognition.run, the basics of [customizing timelines, CSS, and data processing](https://jamesbrandscience.github.io/jspsych-tutorial/jspsych_2.html), an overview of a [proper experiment](https://jamesbrandscience.github.io/jspsych-tutorial/jspsych_2.html) with the `fullscreen`, `instructions`, and `survey-html-form` plugins, and finally, a tutorial on using [advanced stimuli](https://jamesbrandscience.github.io/jspsych-tutorial/jspsych_4.html), such as audio and images. For those interested in contributing to jsPsych, but have limited knowledge of Git and GitHub, there is also a very helpful [tutorial](https://jamesbrandscience.github.io/tutorials/GitHub_stats_chat/GitHub.html) for that as well. + +### Cognition and Learning Lab @ Purdue University + +Purdue University's Cognition and Learning Lab has a [simple tutorial](https://learninglab.psych.purdue.edu/handbook/programming-guide/getting-started-jspsych-7/) on utilizing jsPsych `7.x`. The rest of the tutorials pertaining to jsPsych on this website are written in jsPsych `6.x`, but some of the information may still be applicable assuming you have a good grasp on how `7.x` works. + +### Crump Lab @ Brooklyn College + +The Psyc 2001 course at Brooklyn College used a combination of [Quarto](https://quarto.org/), an academic blogging workflow in RStudio, along with jsPsych to create tutorials on setting up a [Quarto blog](https://www.crumplab.com/blog/post_887_8_25_22_quartoblog/). While most of the advanced posts on the [course blog](https://www.crumplab.com/psyc2001/blog.html) concern data processing and R, the first few tutorials have videos accompanied for a basic overview on [web development](https://www.crumplab.com/psyc2001/blog/2_Basic_web/), our simple [reaction time tutorial](https://www.crumplab.com/psyc2001/blog/3_jspsych_tutorial/), and programming a [Stroop experiment](https://www.crumplab.com/psyc2001/blog/3_jspsych_tutorial/) in jsPsych. + +### (中文) Resources in Chinese + +Contributor [Shaobin-Jiang](https://github.com/Shaobin-Jiang) has created resources specifically tailored to those who require a Chinese language tutorial, including a full [video tutorial](https://www.bilibili.com/video/BV1Qs4y1y7c9/) and a version of this [documentation](https://shaobin-jiang.github.io/jsPsych-Chinese-Documentation/), in Chinese. + +## Version 6.x + +These tutorials use version `6.x` of jsPsych, and are not very applicable to the modern patterns of jsPsych. If you are to use this for a starting point, make sure to read the tutorials on this website to understand how `8.x` works, watching these videos for any additional information. Some of the content still applies to `8.x` and their corresponding plugins, but a solid understanding of the current framework is required in order to make use of the examples in the videos. + +### YouTube Channel + +A variety of video tutorials are available on [Josh de Leeuw's YouTube channel](https://www.youtube.com/playlist?list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh). Some tutorials walk through creating a basic version of an entire experiment, like the tutorial on creating a [dichotic listening experiment](https://www.youtube.com/playlist?list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh) aimed at new users. Others focus on specific features of jsPsych, like how to use [functions as parameters](https://www.youtube.com/watch?v=8-j2aAZ_iOk&list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh&index=5) to create experiments that change in response to participant input or how to [create a new plugin](https://www.youtube.com/watch?v=XQcsFwAmbiw&list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh&index=4). + +### Workshops + +**Moving Research Online (2020)**. Recordings from a [Summer 2020 workshop](https://www.movingresearchonline.info) on conducting online research are available on the [workshop's YouTube channel](https://www.youtube.com/channel/UCBZ5F1UysHWlplUNDRwbsWA). [Session 1](https://www.youtube.com/watch?v=BuhfsIFRFe8) provides an overview of jsPsych suitable for brand new users. [Session 3](https://www.youtube.com/watch?v=LP7o0iAALik) covers some more advanced features of jsPsych. This workshop was funded by the National Science Foundation. + +**babySTEP (2021)**. The Centre for Comparative Psycholinguistics (CCP, University of Alberta Department of Linguistics) hosted a two-part jsPsych workshop in 2021 as part of their annual [STEP program](https://ccp.artsrn.ualberta.ca/portfolio/step/). [Day 1](https://drive.google.com/file/d/1_bd_Tz1IoyGaZzuPoR_Qb6Rtd5wg4t4D/view?usp=drive_web) covered the basics of creating a jsPsych experiment, with an emphasis on audio stimuli. [Day 2](https://drive.google.com/file/d/1dIw1xIVY1lCHwFKGRaUnWMguwHfdkbGK/view?usp=drive_web) was organized around pre-submitted questions. The video demonstrates how to create a more complex experiment involving reading a sentence and hearing different audio options for completing the sentences, and answers several questions about timing accuracy, recording participant generated audio, embedding jsPsych into course (or other) websites, and some (non-empirical) advice about attention checks. \ No newline at end of file diff --git a/docs/tutorials/video-tutorials.md b/docs/tutorials/video-tutorials.md deleted file mode 100644 index efc58a387a..0000000000 --- a/docs/tutorials/video-tutorials.md +++ /dev/null @@ -1,14 +0,0 @@ -# Video tutorials - -!!! warning - Most of these videos are using version `6.x` of jsPsych. Using version `7.x` requires a few changes that are not covered in these videos. We recommend starting with the tutorials on this website to understand how to work with `7.x` and then watching these videos for additional information. Much of the content covered in the videos still applies to `7.x`, but you'll need a solid understanding of how to use `7.x` in order to make use of the examples in the videos. - -## YouTube Channel - -A variety of video tutorials are available on [Josh de Leeuw's YouTube channel](https://www.youtube.com/playlist?list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh). Some tutorials walk through creating a basic version of an entire experiment, like the tutorial on creating a [dichotic listening experiment](https://www.youtube.com/playlist?list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh) aimed at new users. Others focus on specific features of jsPsych, like how to use [functions as parameters](https://www.youtube.com/watch?v=8-j2aAZ_iOk&list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh&index=5) to create experiments that change in response to participant input or how to [create a new plugin](https://www.youtube.com/watch?v=XQcsFwAmbiw&list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh&index=4). - -## Workshops - -**Moving Research Online (2020)**. Recordings from a [Summer 2020 workshop](https://www.movingresearchonline.info) on conducting online research are available on the [workshop's YouTube channel](https://www.youtube.com/channel/UCBZ5F1UysHWlplUNDRwbsWA). [Session 1](https://www.youtube.com/watch?v=BuhfsIFRFe8) provides an overview of jsPsych suitable for brand new users. [Session 3](https://www.youtube.com/watch?v=LP7o0iAALik) covers some more advanced features of jsPsych. This workshop was funded by the National Science Foundation. - -**babySTEP (2021)**. The Centre for Comparative Psycholinguistics (CCP, University of Alberta Department of Linguistics) hosted a two-part jsPsych workshop in 2021 as part of their annual [STEP program](https://ccp.artsrn.ualberta.ca/portfolio/step/). [Day 1](https://drive.google.com/file/d/1_bd_Tz1IoyGaZzuPoR_Qb6Rtd5wg4t4D/view?usp=drive_web) covered the basics of creating a jsPsych experiment, with an emphasis on audio stimuli. [Day 2](https://drive.google.com/file/d/1dIw1xIVY1lCHwFKGRaUnWMguwHfdkbGK/view?usp=drive_web) was organized around pre-submitted questions. The video demonstrates how to create a more complex experiment involving reading a sentence and hearing different audio options for completing the sentences, and answers several questions about timing accuracy, recording participant generated audio, embedding jsPsych into course (or other) websites, and some (non-empirical) advice about attention checks. \ No newline at end of file diff --git a/examples/extension-record-video.html b/examples/extension-record-video.html index 10108a75c5..29cf9ee570 100644 --- a/examples/extension-record-video.html +++ b/examples/extension-record-video.html @@ -32,7 +32,7 @@ type: jsPsychHtmlKeyboardResponse, stimulus: ()=>{ let html = `