index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="node_modules/jspsych/dist/index.browser.min.js"></script>
    <script src="node_modules/@jspsych/plugin-html-keyboard-response/dist/index.browser.min.js"></script>
    <script src="dist/bundles/reaction-time.umd.js"></script>
    <link rel="stylesheet" href="node_modules/jspsych/css/jspsych.css" />
  </head>
  <body>
    <script>
      RT.plugins.jsPsych.init(initJsPsych());

      const seq = new RT.Sequence({root: document.body});

      function* timelineGenerator() {

        yield RT.plugins.formPlugin({
          form: '<div><label>Name: <input name="Wow"><button>Submit</button></div>'
        })

        while (true) {
          const result = yield RT.plugins.jsPsych({
            type: jsPsychHtmlKeyboardResponse,
            stimulus: "<p>Type fast</p>",
            choices: ["K", "J"]
          });

          console.log(result); // data for that specific trial
          console.log(Date.now()); // timestamp for the moment the trial is over

          if (result.rt < 500) {
            break;
          }

          yield RT.plugins.jsPsych({
            type: jsPsychHtmlKeyboardResponse,
            stimulus: "<p>Too slow! Your RT was " + result.rt.toString() + "</p>",
            choices: [" "]
          })
        }

        RT.utils.displayData(seq);
      }


      seq.init(timelineGenerator);
    </script>
  </body>
</html>