examples/timeline-variables.html

<!DOCTYPE html>
<html>

<head>

  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-image-keyboard-response.js"></script>
  <script src="../plugins/jspsych-audio-keyboard-response.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    img {
      width: 300px;
    }
  </style>
</head>

<body>
</body>
<script>

  var timeline_variables = [
    { v1: 'img/happy_face_1.jpg', v2: 'Ann' },
    { v1: 'img/happy_face_2.jpg', v2: 'Jackson' },
    { v1: 'img/happy_face_3.jpg', v2: 'Riley' }
  ];

  var node = {
    timeline_variables: timeline_variables,
    timeline: [
      {
        type: 'html-keyboard-response',
        choices: ['none'], // Y or N
        stimulus: "<p style='text-align:center; font-size:80px;'>+</p>",
        trial_duration: 500,
      },
      {
        type: 'image-keyboard-response',
        choices: [89, 78], // Y or N
        stimulus: jsPsych.timelineVariable('v1'),
        prompt: function() { return '<p>Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Y or N.</p>' }
      }
    ],
    randomize_order: true,
    repetitions: 2
  }

  jsPsych.init({
    timeline: [node],
    preload_images: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg', 'img/happy_face_3.jpg'],
    on_finish: function() {
      jsPsych.data.displayData();
    },
    default_iti: 250
  });

</script>

</html>