In this example we’ll build a relatively simple choice reaction time experiment. On any given trial, the participant will be presented with a blue circle or an orange circle, and will respond by pressing the “F” or “J” keys. It is almost identical to the demonstration experiment used in the jsPsych documentation.

Creating the resource files

library(ggplot2)

# where should the images be stored initially?
resources <- temporary_folder()  
blue_image <- file.path(resources, "blue.png")
orange_image <- file.path(resources, "orange.png")

# create the blue circle plot
blue_pic <- ggplot() + theme_void() +
  annotate(geom = "point", x = 0, y = 0, colour = "blue", size = 60)

# create the orange circle plot
orange_pic <- ggplot() + theme_void() +
  annotate(geom = "point", x = 0, y = 0, colour = "orange", size = 60)

# save the images to files in the resource folder
ggsave(filename = blue_image, plot = blue_pic, width = 2, height = 2)
ggsave(filename = orange_image, plot = orange_pic, width = 2, height = 2)

# check that it worked
list.files(resources)
#> [1] "blue.png"   "orange.png"

Defining instructions

welcome <- trial_html_keyboard_response(
  stimulus = "Welcome to the experiment! Press any key to begin",
  data = insert_property(stage = "start")
)

finish <- trial_html_keyboard_response(
  stimulus = "Thank you!", 
  choices = respond_no_key(),
  trial_duration = 2000,
  data = insert_property(stage = "end")
)

page1 <- paste0(
  "To navigate these instructions, use the arrow keys on your keyboard. ",
  "The right arrow will move you forward one page, and the left arrow will ",
  "move you back one page. Press the right arrow key to continue."
)

page2 <- paste0(
  "In this experiment, a circle will appear in the centre of the screen. ",
  "If the circle is <b>blue</b>, press the letter F on the keyboard as fast ",
  "as you can. If the circle is <b>orange</b>, press the letter J as fast as",
  "you can.<br>"
)

page3 <- paste0(
  "If you see this blue circle, you should press F. <br>", 
  "<img src = '", insert_resource("blue.png"), "' width = 300px>"
)

page4 <- paste0(
  "If you see this orange circle, you should press J. <br>", 
  "<img src = '", insert_resource("orange.png"), "' width = 300px>"
)

page5 <- "When you are ready to begin, press the right arrow key."

instructions <- trial_instructions(
  pages = c(page1, page2, page3, page4, page5), 
  show_clickable_nav = FALSE,
  allow_keys = TRUE,
  post_trial_gap = 2000,
  data = insert_property(stage = "instruction")
)

Defining the experiment trials

intervals <- c(250, 500, 750, 1000, 1250, 1500, 1750, 2000)

fixation <- trial_html_keyboard_response(
  stimulus = '<div style="font-size:60px;">+</div>',
  choices = respond_no_key(),
  trial_duration = fn_sample(intervals, 1),
  data = insert_property(stage = "fixation")
)

test <- trial_image_keyboard_response(
  stimulus = insert_variable("circle"), 
  stimulus_height = 300,
  stimulus_width = 300,
  choices = c("f", "j"),
  data = insert_property(
    stage = "choice", 
    colour = insert_variable("colour"),
    correct_key = insert_variable("correct_key")
  )
)

trials <- build_timeline(fixation, test) %>%
  set_variables(
    circle = insert_resource(c("orange.png", "blue.png")),
    colour = c("orange", "blue"),
    correct_key = keycode(c("f","j"))
  ) %>%
  set_parameters(
    repetitions = 5,
    randomize_order = TRUE
  )

Building the experiment

build_experiment(
  timeline = build_timeline(welcome, instructions, trials, finish),
  resources = build_resources(resources),
  columns = insert_property(experiment = "choice_rt"),  
  path = temporary_folder(),
  on_finish = save_locally()
)

Working version of the experiment here.