examples/jspsych/experiment.html

<!DOCTYPE html>
<html>
  <head>
    <script src="./jsPsych/jspsych.js"></script>
    <script src="./jsPsych/plugins/jspsych-image-button-response.js"></script>
    <script src="./jspsych-mouseview-start.js"></script>
    <script src="./jspsych-mouseview-stop.js"></script>
    <link rel="stylesheet" href="./jsPsych/css/jspsych.css"></link>
    <style>
      img { width: 300px; }
    </style>
  </head>
  <body></body>
  <script>

  var timeline = [];
    
  var mouseview_trial_start = ()=> {     
    mouseview.logEvent('Trial Started')
  }
  var mouseview_trial_end = ()=> {
    mouseview.logEvent('Trial Ended')
 }
  timeline.push({
      type: 'Mouseview-Start'
  })      

  timeline.push({
    type: 'image-button-response',
    stimulus: './jsPsych/examples/img/happy_face_1.jpg',
    choices: ['Happy', 'Sad'],
    prompt: "<p>What emotion is this person showing?</p>",
    on_start: mouseview_trial_start,
    on_end: mouseview_trial_end
  });

  timeline.push({
    type: 'image-button-response',
    stimulus: './jsPsych/examples/img/happy_face_2.jpg',
    stimulus_height: 400,
    choices: ['Happy', 'Sad'],
    stimulus_duration: 1000,
    prompt: "<p>What emotion is this person showing? (image disappears after 1s)</p>",
    on_start: mouseview_trial_start,
    on_end: mouseview_trial_end
  });

  timeline.push({
    type: 'image-button-response',
    stimulus: './jsPsych/examples/img/happy_face_3.jpg',
    stimulus_width: 600,
    choices: ['Happy', 'Sad'],
    trial_duration: 2000,
    response_ends_trial: false,
    prompt: "<p>What emotion is this person showing? (trial ends after 2s)</p>",
    on_start: mouseview_trial_start,
    on_end: mouseview_trial_end
  });

  timeline.push({
      type: 'Mouseview-Stop'
  })

  jsPsych.init({
    timeline: timeline,
    on_finish: function(){jsPsych.data.displayData();}
  });

  </script>
</html>