RepDist_WebTask/TIprobe.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>TI Probe</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]});
    }
    Pairs.push({
        PairId: 5,
        Pos: ImgPerm['B'],
        Neg: ImgPerm['D']
    });
    Pairs.push({
        PairId: 6,
        Pos: ImgPerm['C'],
        Neg: ImgPerm['E']
    });
    Pairs.push({
        PairId: 7,
        Pos: ImgPerm['B'],
        Neg: ImgPerm['E']
    });
    TaskIO.Pairs = Pairs;

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

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

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