Programming Behavioral Experiments in jsPsych 2500-EN-CS-E-12

The course offers a hands-on introduction to programming behavioral experiments in jsPsych for students who already know basic programming concepts from Python or R but have no prior background in JavaScript, HTML, or CSS. The course begins with the core architecture of a jsPsych study: plugins, trials, timelines, response collection, and data output. It then moves to more realistic research designs, including blocked procedures, timeline variables, randomization, counterbalancing, conditional logic, loops, and feedback-controlled flow. Students also learn how to improve the presentation layer of an experiment through basic HTML/CSS customization and how to check practical browser and device constraints that matter in online data collection.

The final part of the course focuses on online deployment and selected advanced browser-based measures. This includes mouse tracking and introductory webcam-based eye tracking with WebGazer, together with calibration, validation, and discussion of data-quality limits. The course also briefly introduces selected community extensions from the jsPsych ecosystem, especially examples from `jspsych-contrib`, such as device-motion and MediaPipe face-mesh integrations. By the end of the course, students should be able to design, implement, test, and deploy a small online behavioral study that is methodologically coherent and technically runnable.

Learning activities and teaching methods:
- Short lectures introducing key concepts and methodological tradeoffs.
- Live coding during class.
- Guided hands-on exercises completed individually or in pairs.
- Reading selected sections of official documentation before or after class.
- Instructor feedback on intermediate code and design decisions.
- A final project in which each student builds and deploys a small online experiment.

Efekty uczenia się

After successfully completing the course, the student will be able to:

1. Explain the logic, affordances, and methodological limits of browser-based behavioral experiments implemented in jsPsych. (K_W03, K_W07)
2. Build a simple jsPsych experiment that presents stimuli, records participant responses, and exports usable behavioral data. (K_U04, K_U12)
3. Implement blocked, randomized, counterbalanced, and feedback-controlled procedures using jsPsych timelines and control flow. (K_U03, K_U04, K_U12)
4. Customize the appearance and interaction logic of an experiment with basic HTML/CSS and test it against realistic browser and device constraints. (K_U12, K_K06)
5. Critically evaluate the suitability and limitations of mouse tracking, webcam-based eye tracking, and selected community-supported motion or face-tracking extensions for a given research question. (K_W03, K_U03, K_K01)
6. Design, document, and deploy a small online study in jsPsych using JATOS or Cognition.run. (K_U02, K_U11, K_U12, K_K06)

Kryteria oceniania

Assessment methods:
- Three short coding exercises / home assignments.
- Final project proposal and pilot submission.
- Final project: a small runnable online jsPsych experiment with brief technical and methodological documentation.

Components of the final grade and their weights:
- Coding exercises: 30%
- Project proposal and pilot test: 10%
- Final project: 60%

Grading scale:
- 50-59%: 3
- 60-69%: 3+
- 70-79%: 4
- 80-89%: 4+
- 90-100%: 5

Requirements for retaking the assessment:
- To be eligible for reassessment, the student must submit at least two of the three coding exercises and the project proposal by the original deadlines.
- Reassessment takes the form of revising and resubmitting the failed or incomplete coursework, especially the final project.
- A student who already obtained a positive final grade may improve it once by submitting a substantially revised final project within the retake period, provided all course requirements were originally submitted on time.

Project assessment criteria:
- Technical correctness and completeness of the implementation.
- Alignment between the research question and the experimental design.
- Appropriate use of jsPsych features.
- Clarity of code organization and documentation.

Attendance rules:
- Because the course is workshop-based, attendance is expected.
- One absence without consequences is permitted.
- A second absence is permitted only with a documented excuse and requires make-up work.
- Missing more than two classes may result in failure to obtain credit unless individually approved by the instructor for serious reasons.

Literatura

Meeting 1. From research question to first jsPsych experiment
- What jsPsych is and when it is useful.
- Minimal web stack for this course: HTML, CSS, and JavaScript for Python/R users.
- Plugins, trials, timelines, and basic response collection.
- Building and running a first simple experiment.

Suggested reading:

- jsPsych Introduction
- jsPsych "Hello World" tutorial

Meeting 2. Timelines, data, and simple experimental structure
- Timeline variables and repeated procedures.
- Randomization and sampling.
- Practice vs test trials.
- Inspecting, annotating, and exporting data.
- Building a simple reaction time or lexical decision task.

Suggested reading:

- jsPsych timeline overview
- jsPsych Simple Reaction Time tutorial
- jsPsych data reference

Meeting 3. More complex designs
- Blocked designs and nested timelines.
- Counterbalancing strategies.
- Conditional branching and loops.
- Feedback-controlled procedures and participant-specific flow.

Suggested reading:

- jsPsych timeline overview sections on conditional timelines, looping, and sampling
- Selected plugin documentation relevant to the student's task

Meeting 4. Customization, robustness, and online readiness
- Basic HTML/CSS customization for clearer and more controlled presentation.
- Preloading and media handling.
- Browser and device constraints.
- Debugging and testing before deployment.

Suggested reading:

- jsPsych styling overview
- jsPsych browser/device support overview
- Relevant plugin pages for preload and chosen stimulus types

Meeting 5. Advanced measures, ecosystem extensions, and online deployment
- Mouse tracking in jsPsych.
- Webcam-based eye tracking with WebGazer: setup, calibration, validation, and limitations.
- Optional ecosystem examples from `jspsych-contrib`, such as device motion and MediaPipe face mesh, with discussion of compatibility and maintenance risks.
- Exporting and deploying experiments with JATOS and Cognition.run.
- Final project workshop.

Suggested reading:

- jsPsych mouse-tracking extension documentation
- jsPsych eye-tracking overview
- jsPsych WebGazer extension documentation
- jsPsych-contrib repository and selected package documentation
- JATOS: jsPsych and JATOS
- Cognition.run documentation / platform overview

Core bibliography:

- 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
- de Leeuw, J. R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. Behavior Research Methods, 47(1), 1-12. https://doi.org/10.3758/s13428-014-0458-y
- jsPsych documentation: https://www.jspsych.org/v8/
- jsPsych-contrib repository: https://github.com/jspsych/jspsych-contrib
- JATOS documentation: https://www.jatos.org/jsPsych-and-JATOS.html
- Cognition.run: https://www.cognition.run/

Uwagi

W cyklu 2026Z:

- No prior knowledge of JavaScript, HTML, or CSS is required.
- Students should already be comfortable with basic programming concepts such as variables, functions, loops, conditionals, and reading error messages, for example from prior work in Python or R.
- Students should be able to work with files and folders on their own computer and use a code editor.
Students must respect the principles of academic integrity. Cheating and plagiarism (including copying work from other students, internet or other sources) are serious violations that are punishable and instructors are required to report all cases to the administration.

AI policy:

- AI tools may be used for brainstorming, explaining documentation, debugging, and syntax support.
- Students remain fully responsible for all submitted code and text.
- Any substantial AI assistance must be disclosed in a short note attached to the assignment or project.
- Using AI to generate a complete solution that the student cannot explain or modify independently is not permitted.

- Students should have access to a laptop/PC and a modern desktop-class browser and some code editor such as VS Code.
- Meeting 5 works best if students have a functioning webcam.
- Community extensions discussed in the course may have version-compatibility constraints and may require adaptation before use in new projects.
- The course assumes deployment with JATOS and Cognition.run or an equivalent hosted runner for jsPsych studies. The instructor provides a running JATOS test instance for students for testing purposes. This instance is hosted on Kognilab server and after consultation it is possible to get a permission to use it for future research projects.