CVRSummer School 2026
Before you start

The tools you will use in this tutorial

This page explains the main pieces of the tutorial site: browser experiments, task HTML files, image folders, CSV data, Jupyter notebooks, Google Colab, Python analysis, and artificial neural network models.

Big picture: what is this tutorial site?

The tutorial combines online experiment demos with notebook-based analysis.

Part 1

Run behavioral experiments

You will run short browser-based psychophysics tasks. These tasks show images, collect responses, and produce CSV files that store trial-by-trial data.

Part 2

Analyze data and test models

You will open Jupyter notebooks in Google Colab to clean the behavioral data, run artificial neural network models, and compare human and model results.

Nothing needs to be installed locally. The tasks run in a web browser, and the notebooks run in Google Colab.

Tool map

Each tool has a specific role. You do not need to master all of them before starting.

JavaScriptInteractivity

JavaScript makes the web pages interactive. It is used for task logic, button clicks, response collection, and launching notebooks.

  • Task behavior depends on JavaScript.
  • Small changes can affect timing, trial order, or response handling.
jsPsychBrowser experiments

jsPsych is a JavaScript library for building psychology and neuroscience experiments in the browser.

  • Use jsPsych tasks to collect behavioral responses.
  • At the end of a task, save the downloaded CSV file.
  • Do not close the task before saving your data.
Image foldersStimuli

The experiments and notebooks load images from folders in the tutorial site. Image paths in the task files tell the browser which image to show.

  • When editing tasks, make sure the image path matches the image location.
  • In the playground, uploaded images are temporary.
  • Common path mistakes cause missing-image icons.
CSV filesTrial data and model outputs

CSV files are spreadsheet-like text files. The tasks produce CSV data, and some tutorial folders include example human or model CSV files.

  • Download your task CSV at the end of each experiment.
  • Upload or load CSV files in Colab notebooks.
  • Check that each row corresponds to a trial or a stimulus.
Jupyter notebooksInteractive analysis documents

A Jupyter notebook mixes text, code, outputs, and figures in one document. Notebook files usually end with .ipynb.

  • Read the text cells for instructions.
  • Run code cells one at a time from top to bottom.
  • Use notebooks for data cleaning, plotting, and model analysis.
Google ColabJupyter notebooks in the cloud

Google Colab lets you run Jupyter notebooks in your browser using Google’s computers. You do not need to install Python locally.

  • Click a Colab button from the tutorial site.
  • Sign into Google if asked.
  • Use File → Save a copy in Drive before editing heavily.
PythonAnalysis language

Python is the programming language used in the notebooks for loading images, processing CSV files, plotting results, and running models.

  • You can run the provided code even if you are new to Python.
  • Read error messages carefully; they often point to missing files or wrong paths.
Artificial neural networksModel observers

ANNs are computational models that can process images. In this tutorial, they are used as model observers that can be tested on tasks similar to the human experiments.

  • Run model notebooks to generate predictions or scores.
  • Compare model outputs with human behavioral data.
Temporary playgroundSafe task editing

The playground lets you edit a task file and test the result directly in the browser. It is designed for exploration during the tutorial.

  • Use it to change task timing, labels, trial lists, or images.
  • Your changes do not affect the official site.
  • Download your edited HTML if you want to keep it.

Typical workflow during the tutorial

This is the most common path from experiment to analysis.

1. Open the tutorial hub

Start from the main page and choose the psychophysics or ANN tutorial.

2. Run a browser task

Complete a task such as object 2AFC, ratings, drawing 2AFC, or N-back.

3. Save the CSV

When the task ends, download the CSV file. This is your behavioral dataset.

4. Open a Colab notebook

Launch the matching notebook and run cells from top to bottom.

5. Upload or load data

Use your own downloaded CSV or the example files provided in the tutorial.

6. Compare humans and models

Use the ANN notebooks and comparison notebook to study similarities and differences.

What is a Jupyter notebook? What is Google Colab?

These are the main analysis tools used in the tutorial.

Jupyter notebook

A notebook is an interactive lab notebook

It contains explanations, code, results, and figures in one file. Text cells explain what is happening. Code cells perform computations. Output cells show tables, plots, images, or printed results.

  • Notebook files end with .ipynb.
  • Run cells in order, from top to bottom.
  • If a cell depends on a previous cell, skipping cells can cause errors.
Google Colab

Colab runs notebooks in the browser

Colab is a free browser-based notebook environment. It lets you run Python code without installing Python, Jupyter, or machine learning packages on your own computer.

  • Click a Colab button from the tutorial site.
  • Sign in with a Google account if prompted.
  • Use Runtime → Run all only after reading the notebook instructions.
Important: if you want to edit a notebook and keep your work, choose File → Save a copy in Drive inside Colab.

What is the temporary task playground?

Use this when you want to change an experiment and immediately test the result.

What it is for

Safe browser-based editing

The playground loads a task HTML file into a browser editor. You can change the task and preview your modified version without changing the official tutorial site.

What to remember

Temporary means temporary

Edits made in the playground live only in your browser. If you refresh or close the page, changes may be lost unless you download your edited HTML file.

Common questions

Start here when something does not work as expected.

Do I need to install Python or Jupyter?

No. The notebooks open in Google Colab, which runs Python in the browser.

Do I need a GitHub account?

Not for simply using the tutorial site, running tasks, opening pages, or using the temporary playground. Some Colab features may require a Google account.

What is the difference between the tutorial site and Colab?

The tutorial site is where you navigate, read instructions, run browser tasks, and find files. Colab is where you run notebook-based Python analyses.

What should I do when Colab asks for permission?

Read the prompt carefully. Colab may ask for permission to save a copy to Google Drive or access files you upload. For this tutorial, you usually only need to upload or save your own tutorial files.

Why did my notebook lose its variables?

The Colab runtime may disconnect or reset. Run the notebook cells again from the top to recreate the variables.

Why is my image not showing in a task?

The most common reason is a wrong image path. Check the folder name, file name, spelling, capitalization, and extension such as .jpg or .png.

Where does my task data go?

At the end of a browser experiment, the task should download a CSV file. Save that file somewhere you can find it again, because you may need to upload it to Colab later.

Can I change the official tutorial site?

No. The official site is shared and read-only for students. Use the temporary playground to test your own changes safely.

Can I keep my edited task?

Yes. Use the playground’s download option to save your edited HTML file. Otherwise, your browser edits are temporary.

What should I do if a task freezes or looks wrong?

Refresh the page and try again. If you edited the task, return to the original version and then reapply changes gradually. Ask an instructor or TA if the problem continues.

What should I report when asking for help?

Tell the instructor or TA which page, task, or notebook you were using; what you clicked; what you expected; and what happened instead. Screenshots and error messages are very helpful.

Quick checklist before starting

Use this to make sure you are ready for the hands-on parts.

  • I can open the tutorial hub in a modern browser such as Chrome, Edge, Firefox, or Safari.
  • I can open a psychophysics task and see images on the screen.
  • I know that task output is saved as a CSV file.
  • I can open a notebook in Google Colab.
  • I know to run notebook cells from top to bottom.
  • I know that playground edits are temporary unless I download the edited HTML.