examples/jspsych-reconstruction.html

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

  var sample_function = function(param){
    var size = 50 + Math.floor(param*250);
    var html = '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
      '<div style="display: block; position: absolute; top: '+(150 - size/2)+'px; left:'+(150 - size/2)+'px; background-color: #000000; '+
      'width: '+size+'px; height: '+size+'px;"></div></div><p>Press H to make the square larger. Press G to make the square smaller.</p>'+
      '<p>When the square is the same size as the previous one, click Next.</p>';
    return html;
  }

  var pre_test = {
    type: 'html-keyboard-response',
    stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
      '<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
      'width: 210px; height: 210px;"></div></div>',
    choices: ['c'],
    post_trial_gap: 1250,
    prompt: '<p>Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press C.</p>'
  }

  var test = {
    type: 'reconstruction',
    stim_function: sample_function,
    starting_value: 0.5,
  }

  jsPsych.init({
    timeline: [pre_test, test],
    on_finish: function() { jsPsych.data.displayData(); }
  });

  </script>
</html>