CognitiveModeling/index.html at master · C-Loftus/CognitiveModeling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
<head>
  <title>Two-Step Task</title>

  <!-- Load libraries -->
  <script src="./lib/jquery-3.3.1/jquery.min.js"></script>
  <script src="./lib/jspsych-6.3.1/jspsych.js"></script>

  <!-- Load experiment -->
  <!-- Note: the order matters for the following imports -->
  <script src="./js/two-step-drifts.js" type="text/javascript"></script>
  <script src="./js/two-step-experiment.js" type="text/javascript"></script>
  <script src="./js/two-step-instructions.js" type="text/javascript"></script>

  <!-- Load jsPsych plug-ins -->
  <script src="./js/jspsych-alien-practice.js" type="text/javascript"></script>
  <script src="./js/jspsych-two-step-trial.js" type="text/javascript"></script>
  <script src="./js/jspsych-two-step-instructions.js" type="text/javascript"></script>
  <script src="./js/jspsych-two-step-comprehension.js" type="text/javascript"></script>
  <script src="./lib/jspsych-6.3.1/plugins/jspsych-preload.js"></script>
  <script src="./lib/jspsych-6.3.1/plugins/jspsych-fullscreen.js"></script>
  <script src="./lib/jspsych-6.3.1/plugins/jspsych-call-function.js"></script>
  <script src="./lib/jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>

  <!-- Load CSS styles -->
  <link href="./lib/jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>
  <link href="./css/two-step-css.min.css" rel="stylesheet" type="text/css"></link>

</head>
<body></body>
<script>

  // Define global variables.
  var low_quality = false;

  // Define image preloading.
  var PRELOAD = {
    type: 'preload',
    images: preload_images,
    message: 'Loading images. This may take a moment depending on your internet connection.',
    error_message: '<p>The experiment failed to load. Please try restarting your browser.</p><p>If this error persists after 2-3 tries, please contact the experimenter.</p>',
    continue_after_error: false,
    show_progress_bar: true,
    max_load_time: 30000
  }

  // Define experiment fullscreen.
  var FULLSCREEN = {
    type: 'fullscreen',
    fullscreen_mode: true
  }

  // Define timeline, blocks, and number of trials in a block.
  var timeline = [];
  timeline = timeline.concat(PRELOAD);
  timeline = timeline.concat(FULLSCREEN);
  timeline = timeline.concat(INSTRUCTIONS_SKIP);
  timeline = timeline.concat(INSTRUCTIONS);
  timeline = timeline.concat(READY_01);
  // The numbers in here should specify how long the task will be
  timeline = timeline.concat(TWO_STEP_TASK.slice(0, 75));
  timeline = timeline.concat(READY_02);
  timeline = timeline.concat(TWO_STEP_TASK.slice(75,150));
  timeline = timeline.concat(FINISHED);

  jsPsych.init({
    timeline: timeline,
    show_progress_bar: true,
    exclusions: {min_width: 600, min_height: 500},
    on_finish: function() {

      // Add interactions to the data  1
      var interaction_data = jsPsych.data.getInteractionData();
      jsPsych.data.get().addToLast({interactions: interaction_data.json()});

      // Display jsPsych data in viewport.
      // jsPsych.data.displayData();
      alert('After closing this popup, the experiment data will be exported as a CSV. Please download it, save it, and send it via email to us.')

      // get current time
      var date = new Date();
      // get UTC timestamp
      var timestamp = date.getTime();
    //  check if it is day or night
      var hours = date.getHours();
      var day_night = 'day';
      if (hours < 6 || hours > 19) {
        day_night = 'night';
      }


      var filename = 'experiment_report-' + day_night + "-" + timestamp + '.csv';
      jsPsych.data.get().localSave('csv', filename);
      jsPsych.data.displayData();
    }
  })

</script>
</html>