jsPsych学习记录
Introdcution to jsPsych
jsPsych is a JavaScript library for running behavioral experiments in a web browser. The library provides a flexible framework for building a wide range of laboratory-like experiments that can be run online.
To use jsPsych, you provide a description of the experiment in the form of a timeline. jsPsych handles things like determining which trial to run next, storing data, and randomization. jsPsych uses plugins to define what to do at each point on the timeline. Plugins are ready-made templates for simple experimental tasks like displaying instructions or displaying a stimulus and collecting a keyboard response. Plugins are very flexible to support a wide variety of experiments. It is easy to create your own plugin if you have experience with JavaScript programming.
The page on timelines is a good place to start learning about jsPsych. From there, you might want to complete the Hello World! tutorial and the reaction time experiment tutorial.
Video tutorials
https://www.jspsych.org/tutorials/video-tutorials/
YouTube Channel
A variety of video tutorials are available on Josh de Leeuw’s YouTube channel. Some tutorials walk through creating a basic version of an entire experiment, like the tutorial on creating a dichotic listening experiment aimed at new users. Others focus on specific features of jsPsych, like how to use functions as parameters to create experiments that change in response to participant input or how to create a new plugin.
Workshops
Moving Research Online (2020). Recordings from a Summer 2020 workshop on conducting online research are available on the workshop’s YouTube channel. Session 1 provides an overview of jsPsych suitable for brand new users. Session 3 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. Day 1 covered the basics of creating a jsPsych experiment, with an emphasis on audio stimuli. Day 2 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.
Moving research online
Relevant resources:
- Click to download code example from Session 1
- jsPsych documentation
- jsPsych Github
- Github - make an account here to ask questions in the Q & A for this session
- HTML
- CSS
- JavaScript
- CSV-to-JSON converter
中文教程
https://zhuanlan.zhihu.com/p/150468198
- jsPsych是什么?
- jsPsych初体验:跑个示例玩一玩
- jsPsych的三种编写套路
- jsPsych的基本框架结构
- 中文乱码问题
- 本地运行与数据记录
- 线上运行与数据记录
- 简单入门:呈现指导语的几种方式
- 简单入门:调查个人背景变量的几种方式
- 技能提升:呈现Likert量表的几种方式
- 技能提升:编写按键反应程序的几种方式
- 拓展边界:小括号、中括号、大括号暗藏的玄机
- 拓展边界:自编JavaScript函数满足个性化需求
- 总结
jsPsych的“本体”是「Web前端开发三叉戟」:HTML、CSS、JavaScript。有点懵?没关系,我们打个比方。
如果把“上网”比作“冲浪”,那么HTML(网页结构)就是大海、沙滩、椰子树,以及冲浪的人;CSS(网页样式)就是海的颜色、沙的味道、树的高度,以及冲浪人的衣服发型;JavaScript(网页行为)就是海的流动、沙的飘舞、树的摇曳,以及冲浪人的酷炫动作。
同时,国内有关jsPsych的教程少之又少。截止到2020年6月,全网范围只有下面这两篇关于jsPsych的中文介绍(感谢
和 @郑光军 撰写的这两篇科普文,尤其是第一篇,我也是在第一篇的帮助下才开始接触和学习jsPsych的)。
https://zhuanlan.zhihu.com/p/154428604
Some basic codes
var hello_trial = {
type: 'html-keyboard-response',
stimulus: "Hellow world!"
}
jsPsych.init({
timeline: [hello_trial]
})