RepDist_WebTask/TItrain.html at master · sj483/RepDist_WebTask · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>TI Training</title>

<!-- Set the favicon logo -->
<link rel="icon" href="./Assets/Logo.png" type="image/x-icon" />

<!-- Unpack the main JSpsych module -->
<script src="https://unpkg.com/jspsych@7.3.3"></script>

<!-- JSpsych dependency to fullscreen -->
<script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.1.2"></script>

<!-- JSpsych dependency for HTML button response -->
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.2"></script>

<!-- JSpsych dependency for preloading -->
<script src="https://unpkg.com/@jspsych/plugin-preload@1.1.2"></script>

<!-- JSpsych dependency for styling -->
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.3.3/css/jspsych.css" />

<!-- Styling -->
<style>
:root {
    --ImgWidth1: 516;
}
img:hover{border: 2px solid #00ffff;width: var(--ImgWidth1);}
body{background-color:#808080;}
</style>

<script>
// --- Session-specific global variables ---
var TimelineVars;
var ScreenHeight = window.screen.height;
var HeightFactor = 13/27;
var BorderWidth = 2;
var ImgWidth0 = ScreenHeight * HeightFactor;
var ImgWidth1 = ImgWidth0 - (2*BorderWidth);
document.documentElement.style.setProperty('--ImgWidth1',ImgWidth1+'px');

// --- Trial-specific global variables ---
var EnforceUnfocus = false;
var PairId = null;
var PosOnRight = null;
var StartTimeOfTrial = null;
var SelectedRight = null;
var Correct = null;
var RT = null;
var ResponseMade = false;

// --- TaskIO SETUP ---
var TaskIO = {};
TaskIO.SubjectId = null;
TaskIO.DateTime_Start = null;
TaskIO.ClientTimeZone = null;
TaskIO.GroupId = '';
TaskIO.Pairs = {};
TaskIO.Trials = [];
</script>

<!-- Get participant IDs passed in from URL -->
<script src="./Assets/GetPpantIds.js"></script>

<!-- Get DateTime_Start and ClientTimeZone (and add to TaskIO)  -->
<script src="./Assets/SetDateTime.js"></script>

<!-- Exclusion check -->
<script src="./Assets/ExclusionCheck.js"></script>

<!-- Import unfocus checking -->
<script src="./LogUnfocus.js"></script>

<!-- Import helper functions -->
<script src="./FunctionSpec.js"></script>

<!-- Import objects -->
<script src="./ObjectSpec.js"></script>

<!-- Helper for posting JSON data -->
<script src="./Assets/PostJson.js"></script>

<script>
// Chain together the following...
// ... 1) GetAssignment()
// ... 2) Make the Pairs variable
// ... 3) GetTimelineVars()
// ... 4) Make the TrialLoop
// ... 5) Call jsPsych.run([TrialLoop])
async function StartUp() {
    // (1)...
    var Assignment = await GetAssignment();
    TaskIO.GroupId = Assignment.GroupId;
    var ImgPerm = Assignment.ImgPerm

    // (2)...
    var Pairs = [];
    for (iPair = 0; iPair < 5; iPair++){
        var PosId = String.fromCharCode(65+iPair);
        var NegId = String.fromCharCode(66+iPair);
        Pairs.push({
            PairId: iPair,
            Pos: ImgPerm[PosId],
            Neg: ImgPerm[NegId]});
    }
    TaskIO.Pairs = Pairs;

    // (3)...
    TimelineVars = await GetTimelineVars(Pairs);

    // (4)...
    var TrialLoop = {
        timeline: [Fixation,Trial,Feedback],
        timeline_variables: TimelineVars,
        randomize_order: false
    };

    // (5)...
    jsPsych.run([PreloadImgs,EnterFullscreen,TrialLoop,ExitFullscreen]);
}
StartUp();
</script>
</head>
<body>
</body>
</html>