Javascript and HTML5 examples

Mark Wexler, 2020

To examine the code, open one of the examples and view the page source (for example on Chrome, right-click [or the Mac equivalent] and select "View page source"). Or download all the examples here.

1. Simple examples

a. Simplest Javascript example

Shows how to create text

b. Simple canvas example

Creates a canvas and draws a simple shape

b. Simple canvas example, improved resolution

Same thing, but draws high-res images on high DPI (pixel density) displays

c. Simple audio example

Downloads a sound file, waits for the download to complete, and plays it using the Web Audio API. (This only works on a server, not when directly opening a local file in a browser.)

2. Moving stimuli: From stimulus to full experiment

a. Continuous random-dot kinetogram (RDK) stimulus

With finite-lifetime dots, and 25% of the dots coherently moving to the right

b. Finite-duration RDKs

Stimuli are triggered by pressing the space bar. Each stimulus is randomly chosen to the left or to the right, with 25% coherence.

c. Precalculated frames

Like the previous example, except all the frames of each stimulus are rendered ahead of time. This can speed up the drawing, especially on older machines.

d. Collecting responses

Now we ask for a response (left arrow for left, right arrow for right) after every trial. Feedback is shown in the upper left-hand corner.

e. Full experiment with factorial design

Instead of independently chosen random trials, we now have an experiment with a full factorial design. Half the trials have coherence 20%, and the other half 40%. For each coherence fraction 10 trials have coherent movement to the left, and 10 to the right. The trials are shown in random order. At the end of the experiment, the percentages of correct responses for each coherence fraction are shown.

f. Saving the data

At the beginning of the experiment, we ask for the subject's name, age, and an optional email address. At the end of the experiment, the data is sent to a server. The server may do anything it wants with it (save in a file, send it by email, etc.). I've written a simple a simple server-side script in Python that I have placed on this server, which shows how to receive this data, save to a file, and send it by email. Its code can be downloaded here.