Picture Selection Task #3181

hblam · 2023-11-08T00:50:02Z

hblam
Nov 8, 2023

Hi! With this being my first time using jspsych, I am having trouble getting images to load side by side for a picture selection task. I would like two pictures to show up (1a and 1b) and for the participants to select which picture best matches the sentence described (which will derive from a self-paced reading component of the experiment).

Right now, the file structure has the experiment alongside a folder 'img' that contains the .png files. When I try to run the experiment, it fails to show any pictures. Below is what I have so far.

<!DOCTYPE html>
<html>
<head>
  <script src="../dist/jspsych.js"></script>
  <script src="../dist/plugin-html-keyboard-response.js"></script>
  <script src="../dist/plugin-preload.js"></script>
  <link rel="stylesheet" href="../dist/jspsych.css">
</head>
<body></body>
<script>

  var jsPsych = initJsPsych({
    on_finish: function() {
      jsPsych.data.displayData();
    }
  });

  var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };

  var trial_1 = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: '<img src=img/1a.png /><img src=img/1b.png />',
    choices: ['1', '0'],
    prompt: '<p>Which picture matches the sentences (1 for left or 0 for right)</p>'
  };

  jsPsych.run([trial_1]);

</script>
</html>

Answered by jodeleeuw

Nov 8, 2023

Hi @hblam

There are two things to change here:

Your stimulus parameter for trial_1 is missing " around the file names. It should be '<img src="img/1a.png" /><img src="img/1b.png" />'
The auto_preload method for the preload trial won't work in this context because the images are added as HTML instead of through an image-based plugin. Instead use:

var preload = {
      type: jsPsychPreload,
      images: ['img/1a.png', 'img/1b.png']
 };

View full answer

jodeleeuw · 2023-11-08T15:32:51Z

jodeleeuw
Nov 8, 2023
Maintainer

Hi @hblam

There are two things to change here:

Your stimulus parameter for trial_1 is missing " around the file names. It should be '<img src="img/1a.png" /><img src="img/1b.png" />'
The auto_preload method for the preload trial won't work in this context because the images are added as HTML instead of through an image-based plugin. Instead use:

var preload = {
      type: jsPsychPreload,
      images: ['img/1a.png', 'img/1b.png']
 };

1 reply

hblam Nov 18, 2023
Author

Thank you for your reply! It worked!!!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Picture Selection Task #3181

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Picture Selection Task #3181

hblam Nov 8, 2023

Replies: 1 comment · 1 reply

jodeleeuw Nov 8, 2023 Maintainer

hblam Nov 18, 2023 Author

hblam
Nov 8, 2023

Replies: 1 comment 1 reply

jodeleeuw
Nov 8, 2023
Maintainer

hblam Nov 18, 2023
Author