start of replay example

jspsych · Dec 7, 2021 · 76b47d6 · 76b47d6
1 parent e3bce4b
commit 76b47d6
Showing 1 changed file with 86 additions and 0 deletions.
diff --git a/replay/index.html b/replay/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<head>
+  <script src="https://unpkg.com/[email protected]"></script>
+  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/jspsych.css">
+</head>
+<body>
+</body>
+<script>
+
+  run();
+
+  function run(){
+    const jsPsych = initJsPsych({
+      on_finish: function(){
+        replay(jsPsych.data.get().readOnly().values());
+      }
+    });
+
+    const timeline = create_srt_timeline(jsPsych);
+
+    jsPsych.run(timeline);
+  }
+
+  function replay(data){
+    const simulation_options = {};
+
+    for(const trial of data){
+      simulation_options[trial.trial_index] = {
+        data: {
+          response: trial.response,
+          rt: trial.rt
+        }
+      }
+    }
+
+
+    const jsPsych = initJsPsych();
+
+    const timeline = create_srt_timeline(jsPsych);
+
+    jsPsych.simulate(timeline, "visual", simulation_options)
+  }
+
+  function create_srt_timeline(jsPsych){
+    const srt = {
+      timeline: [
+        {
+          type: jsPsychSerialReactionTime,
+          choices: [['f','g','h','j']],
+          target: jsPsych.timelineVariable('target'),
+          show_response_feedback: true,
+          simulation_options: ()=>{
+            return jsPsych.getProgress().current_trial_global.toString();
+          },
+        }
+      ],
+      timeline_variables: [
+        { target: [0,0] },
+        { target: [0,1] },
+        { target: [0,3] },
+        { target: [0,2] },
+        { target: [0,3] },
+        { target: [0,0] },
+        { target: [0,1] },
+        { target: [0,2] }
+      ],
+      loop_function: function(){
+        const total_reps = jsPsych.data.get().filter({trial_type: 'serial-reaction-time'}).count() / 2;
+        return total_reps < 1;
+      }
+    }
+
+    const end = {
+      type: jsPsychHtmlButtonResponse,
+      stimulus: '',
+      choices: ['Watch replay']
+    }
+
+    const timeline = [srt, end];
+
+    return timeline;
+  }
+
+</script>