You can view and edit the source code provided on CodePen.

Gabor patches

Please see Presenting gabor patches in online/web experiments first.

Images

  • randomizedImages.html-CodePen This file demonstrates how to present a fixation point and an image in a randomized order in the center of the display.
  • twoImagesWithSOA.html-CodePen This file demonstrates how to present two images with the 500-ms SOA.
  • twoImagesWithSOAinFrames-CodePen This file is nearly same as the twoImagesWithSOA.html except for that the display durations are specified in frames not in ms. The first image is presented for 5 frames (about 83 ms in a 60 Hz monitor), and the second image is presented for 20 frames (about 333 ms in a 60 Hz monitor) with a 60-frame SOA.
  • mask_filter.html This file demonstrates how to apply masking and filtering to the image file.
  • draw_part_of_image.html-CodePen This file demonstrates how to use the drawFunc with the image object. You need not to use the drawFunc when you present intact images. But if you want to modify the images, for example, if you want to present a part of the image, the drawFunc is useful.
  • rsvp.html-CodePen This file demonstrates how to present multiple images in random order in succession. That is, rapid serial visual presentation (RSVP).
  • rsvp_by_key.html This file demonstrates how to keep the image changing while the key is pressed.
  • rsvp_full_screen.html This file demonstrates how to present the RSVP with the jspsych-fullscreen plugin.

Sounds

  • twoSoundsWithSOA.html This file demonstrates how to present two sounds with a 1000-ms SOA. Note that the experimental files (html, js, and audio) must be uploaded in a web-server to run.
  • play_html5_sound_by_key.html This file demonstrates how to play the sound by pressing a key. This program doesn’t use the Web Audio API.
  • play_webaudio_sound_by_key.html I’m sorry, but this program will not work with jsPsych 6.3.0 and above. Please use the play_html5_sound_by_key.html instead.

Event handlers

  • change_image_size_by_keypress.html This file demonstrates how to change the image size by keypress using the keyboard-event functions. See also change_image_size_by_keypress2.html for practical use.
  • keyboard_event.html This file demonstrates how to specify the keyboard-event functions. Pressing the ArrowUp/ArrowDown key, the luminance of the circle will change. Press the space key to finish the program.
  • mouse_event.html This file demonstrates how to specify the mouse-event functions. As you move the mouse, the slope of the line segment changes. By changing the direction of the mouse in motion, the direction of rotation of the line changes. This also demonstrates how to use buttons as a response.
  • mouse_drawing.html This file demonstrates how to specify the mouse-event functions. This demo is like a drawing application. Note that the clear_canvas property is set to false.
  • visual_stimuls_terminates_earlier_than_audio.html This file demonstrates how to terminate a visual stimulus earlier than an audio stimuls.
  • touch_to_end.html This file demonstrates how to finsh the psychophysics trial by touching the screen.

requestAnimationFrame

  • elapsed_time_frame.html This file demonstrates how to use the raf_func which is called by the requestAnimationFrame method. The elapsed time after begging of a trial is presented both in milliseconds and in frames.
  • raf_func.html A circle moves on a virtual circumference. This file demonstrates how to use the raf_func which is called by the requestAnimationFrame method, and excuted synchronized with the refresh of the display. You can directly access the canvas (of which the context) using the raf_func. You can draw complex visual stimuli.
  • Advanced! draw_two_images_repeatedly.html-CodePen This file demonstrates how to present two images repeatedly until a participant responds to them. This demonstration can be applied to the study on like the change blindness.

Using PixiJS

Please see the documentation regarding the pixi mode of the psychophysics plugin.

Other stimuli

  • cross.html-CodePen The cross object can be used to present a fixation point. In this demo, moving two cross are presented.
  • lines.html-CodePen This file demonstrates how to present lines. There are two ways to define a line; one is to specify the angle and line_length, the other is to specify the start (x1, y1) and end (x2, y2) positions of the line. Note that you can not specify both the angle and positions for the same object.
  • rectangles.html This file demonstrates how to present (moving) rectangles.
  • texts.html The ‘Hello world!’ demonstration. You can start a new line using the ‘\n’. Texts can be moved as the same as rectangles.
  • text-rect-circle.html This file demonstrates how to present a text message, a rect, and a circle with SOAs
  • movingCircles.html This file demonstrates how to present moving circles. There are three ways to define motion. (1) Using the distance and time, (2) Using the distance and speed, and (3) Using the time and speed. Note: You can not specify the speed, distance, and time at the same time.
  • movingCircles_frames.html This demonstration is the same as the movingCircles.html except for specifying the timing information in terms of frames. The show_start(end)_frame property is used instead of the show_start(end)_time. Also, the motion_start(end)_frame property is used instead of the motion_start(end)_time. Note that if you define motion using the distance and time, you have to specify the time in milliseconds not in frames.
  • manual_drawFunc_gradation.html A visuals timulus graduated from white to black moves from left to right. This program uses the drawFunc function.

TIPS

  • change_attributes.html This file demonstrates how to dynamically change stimulus content for each frame.
  • combination_with_survey_plugins.html This file demonstrates how to combine with survey plugins: survey-text, survey-likert, survey-multi-choice etc. This program stores the data needed for the analysis in the same row.
  • how_to_timeline_variables.html This file works as the same as the twoImagesWithSOA.html, but the use of the jsPsych.timelineVariable function is slightly different. When you want to use the timeline_variables property with the jspsych-psychophysics plugin, see this file first.
  • localize-circle.html This file demonstrates how to respond using a mouse. This can be made by specifying the response_type and response_start_time property.
  • origin_center.html This file demonstrates how to present objects using a coordinate with the center of the window as the origin. Set the origin_center property to true (The default is false).
  • randomize_show_start_time.html. This file demonstrates how to randomize the show_start_time of a image stimulus. The stimulus image is presented from 500 to 3000ms after the fixation point.
  • remain_canvas.html This file demonstrates how to remain the main canvas even after the trial finishes. This method will be useful when there is a flash between trials.
  • resolution.html If you are using a Mac which has a retina display, the resolution may not match the number of pixels of the canvas. Using this demo, you can know the number of pixels of the canvas.
  • response_start_time_depends_on_onsets.html This demo explains how to specify different start time of presentation of an image for each trial, and how to get the reaction time based on the start time.
  • retina_display.html This demo confirms that the stimuli are presented properly on retina display. The canvas size is set to 600x600.
  • dynamically_change.html-CodePen This file demonstrates to change dynamically properties of an object.