Webgazer: how to use showPredictions() #3262

smith-garrett · 2024-03-27T12:59:59Z

smith-garrett
Mar 27, 2024

Hi everyone,

I have a question about using Webgazer. I am trying to set up a very simple demo for a science outreach project. I want to give participants a feeling for how our eyes move when we read a sentence. For the project, it's not feasible to bring a full eye tracker setup, and since we're not interested in analyzing the data, I'm hoping to use jsPsych + Webgazer.

So far, I have been able to set up the camera and run the calibration as described in the documentation. Recording the eye fixation data seems to work fine as well. Where I'm stuck is in trying to use the webgazer.showPrediction() function to show where the eyes are currently fixated. (There was a similar question in #2260 a couple years ago, but it didn't seem to get an answer.)

A minimal working example is below. I have installed jsPsych locally as described here. The closest I've gotten is to embed the function call in the stimulus part of item, but it doesn't seem to be working. Any help would be greatly appreciated! :)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My experiment</title>
  <script src="jspsych/jspsych.js"></script>
  <script src="jspsych/plugin-html-button-response.js"></script>
  <script src="jspsych/plugin-html-keyboard-response.js"></script>
  <script src="jspsych/webgazer/webgazer.js"></script>
  <script src="jspsych/extension-webgazer.js"></script>
  <script src="jspsych/plugin-webgazer-init-camera.js"></script>
  <script src="jspsych/plugin-webgazer-calibrate.js"></script>
  <link href="jspsych/jspsych.css" rel="stylesheet" type="text/css" />
</head>

<body></body>

<script>
  var timeline = [];
  const jsPsych = initJsPsych({
    extensions: [
      {type: jsPsychExtensionWebgazer}
    ],
    on_finish: function () {
      jsPsych.data.displayData();
    },
    override_safe_mode: true
  });

  const init_camera_trial = {
    type: jsPsychWebgazerInitCamera,
    instructions: `<p>First we'll calibrate the camera.</p>`,
    button_text: "Weiter"
  }
  timeline.push(init_camera_trial);

  const calibration_trial = {
    type: jsPsychWebgazerCalibrate,
    calibration_mode: 'view',
    repetitions_per_point: 1,
    randomize_calibration_order: true
  }
  timeline.push(calibration_trial);

  const pretrial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: "Now we'll read a sentence.",
    choices: ["Weiter"]
  }
  timeline.push(pretrial);

  const item = {
    type: jsPsychHtmlButtonResponse,
    stimulus: function () {
      jsPsych.extensions.webgazer.onGazeUpdate(function () {
        jsPsych.extensions.webgazer.showPredictions()
      });
      return (`<p><span id="sent">This is a sentence</span></p>`)
    },
    extensions: [{type: jsPsychExtensionWebgazer, params: {targets: ["#sent"]}}],
    choices: ["Done!"],
  }
  timeline.push(item)

  jsPsych.run(timeline);
</script>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webgazer: how to use showPredictions() #3262

{{title}}

Replies: 0 comments

Select a reply

Webgazer: how to use showPredictions() #3262

smith-garrett Mar 27, 2024

Replies: 0 comments

smith-garrett
Mar 27, 2024