<!DOCTYPE html>
<html>
<head>
    <!-- Required for each demo -->
  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
  <style>
    .jspsych-btn {margin-bottom: 10px;}
  </style>
  <!-- UPDATE depending on current demo -->
  <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
</head>
<body></body>
<script>

  var preload_trial = {
    type: 'preload',
    auto_preload: true
  }

  var start = {
    type: 'html-button-response',
    stimulus: '',
    choices: ['Run demo']
  };

  var demo_trial = {
      type: 'instructions',
      pages: [
        'Welcome to the experiment. Click next to begin.',
        'This is the second page of instructions.',
        'This is the final page.'
      ],
      show_clickable_nav: true
    }

  var show_data = {
    type: 'html-button-response',
    stimulus: function() {
      var trial_data = jsPsych.data.getLastTrialData().values();
      var trial_json = JSON.stringify(trial_data, null, 2);
      return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
      '<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
    },
    choices: ['Repeat demo']
  };

  var demo_loop = {
    timeline: [demo_trial, show_data],
    loop_function: function() {
      return true;
    }
  };

  if (typeof jsPsych !== "undefined") {
    jsPsych.init({
      timeline: [preload_trial, start, demo_loop]
    });
  } else {
    document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
  }

</script>

</html>

Add demo 1 - multi page text
Add demo 1 - multi page text
