-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAIDI_experiment_complete.html
223 lines (188 loc) · 7.95 KB
/
AIDI_experiment_complete.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>AIDI experiment</title>
<!-- Load jsPsych libraries -->
<script src="jspsych/dist/jspsych.js"></script>
<script src="jspsych/dist/plugin-instructions.js"></script>
<script src="jsPsych/dist/plugin-html-button-response.js"></script>
<script src="jspsych/dist/plugin-survey-text.js"></script>
<script src="jspsych/dist/plugin-survey-likert.js"></script>
<script src="jspsych/dist/plugin-survey-multi-choice.js"></script>
<script src="jspsych/dist/plugin-survey-multi-select.js"></script>
<script src="jspsych/dist/plugin-html-slider-response.js"></script>
<!-- Load stimuli from the JS script we made -->
<script src="stimuli/JS files/AIDI_stim.js"></script>
<!-- Load jsPsych's default CSS styling script (which handles aesthetics) -->
<link href="jspsych/dist/jspsych.css" rel="stylesheet" type="text/css" />
<style>
body {
background-color: #F0F0F0;
}
.jspsych-display-element {
line-height: 5em;
color: black;
}
</style>
</head>
<body></body>
<script>
//------------------------------------//
// Initialize jsPsych
//------------------------------------//
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
//------------------------------------//
// Initiate the jsPsych timeline
//------------------------------------//
var timeline = []
//------------------------------------//
// Text Instructions
//------------------------------------//
var welcome = {
type: jsPsychInstructions,
pages: function(){
pageOne = "<p><div style ='font-size:2.5vw;'>Welcome to the experiment.</div></p>" +
"<p><div style ='font-size:5vw; color: green;'>Click next to begin.</div></p>"
return [pageOne]
},
show_clickable_nav: true
}
// timeline.push(welcome);
//------------------------------------//
// Text + Image instructions
//------------------------------------//
var experiment_instructions = {
type: jsPsychInstructions,
pages: function(){
pageOne = "<p><div style ='font-size:2.5vw;'>Next, you will see human- and AI-generated rental listings.</div></p>" +
"<p><div style ='font-size:2.5vw;'>Your goal is to determine whether the rental listing</div></p>" +
"<p><div style ='font-size:2.5vw;'>was generated by a human or AI.</div></p>" +
"<img src='stimuli/question_mark.jpeg' style='width: 15vw; height: 25vh; position:fixed; right: 42vw; top: 2vh;''></img>"
return [pageOne]
},
show_clickable_nav: true
}
// timeline.push(experiment_instructions);
//------------------------------------//
// Rentals Trial
//------------------------------------//
var rentals_trial = {
type: jsPsychHtmlButtonResponse,
stimulus: () => {
return `<img src="${jsPsych.evaluateTimelineVariable('place_stimuli')}" <div style= "position:fixed; width: 25vw; height: 35vh; left: 55vw; top: 6vh;"></img>` +
`<img src="${jsPsych.evaluateTimelineVariable('face_stimuli')}" <div style= "position:fixed; width: 25vw; height: 35vh; left: 26vw; top: 6vh;"></img>` +
`<p><div style ='font-size: 1.7vw; font-family: Arial; text-align: left; position: fixed; left: 24vw; width: 56vw; height: 30vh; bottom: 22vh; line-height: 1.2em; border: .3vw transparent; padding: 1vh;'>${jsPsych.evaluateTimelineVariable('text_stimuli')}</p>`
},
choices: ["<p style ='font-size:2vw; position: fixed; left: 38vw; bottom: 8vh;'><b>Human</b></p>", "<p style ='font-size: 2vw;position: fixed; right: 41vw; bottom: 8vh'><b>AI</b></p>"],
button_html: (choice) => {
return `<button class="jspsych-btn" style="width: 15vw; height: 8vh; position: relative; top: 35vh;">${choice}</button>`
}
}
//------------------------------------//
// Rentals Timeline Procedure
//------------------------------------//
var rentals_procedure = {
timeline: [rentals_trial],
timeline_variables: rentals_stim,
};
// timeline.push(rentals_procedure);
//------------------------------------//
// Surveys/Questionnaires
//------------------------------------//
//------------------------------------//
// Likert-scale survey
//------------------------------------//
var QCAE_survey = {
type: jsPsychSurveyLikert,
preamble: "<p style ='font-size: 2.2vw;'><b>Please answer all of the questions on this page.</b></p>",
questions: [
{prompt: "<b>1. I sometimes find it difficult to see things from the 'other person's' point of view.</b>", name: 'QCAE_Q1', labels: ["Strongly Disagree", "Slightly Disagree", "Slightly Agree", "Strongly Agree"], required: true},
{prompt: "<b>2. I am usually objective when I watch a film or play, and I don't often get completely caught up in it.</b>", name: 'QCAE_Q2', labels: ["Strongly Disagree", "Slightly Disagree", "Slightly Agree", "Strongly Agree"], required: true},
{prompt: "<b>3. I try to look at everybody's side of a disagreement before I make a decision.</b>", name: 'QCAE_Q3', labels: ["Strongly Disagree", "Slightly Disagree", "Slightly Agree", "Strongly Agree"], required: true},
]
}
// timeline.push(QCAE_survey);
//------------------------------------//
// Multiple Choice survey
//------------------------------------//
var MTES_SAS = {
type: jsPsychSurveyMultiChoice,
questions: [
{
prompt: "<b>1. I have missed planned work due to smartphone use</b>",
name: 'MTES_SAS_MissedPlans',
options: ['Strongly Disagree', 'Disagree', 'Weakly Disagree', 'Weakly Agree', 'Agree', 'Strongly Agree'],
horizontal: true,
required: true
},
{
prompt: "<b>2. I have a hard time concentrating in class, while doing assignments, or while working due to smartphone use</b>",
name: 'MTES_SAS_Concentrating',
options: ['Strongly Disagree', 'Disagree', 'Weakly Disagree', 'Weakly Agree', 'Agree', 'Strongly Agree'],
horizontal: true,
required: true
},
{
prompt: "<b>3. I feel pain in my wrists or at the back of my neck while using a smartphone</b>",
name: 'MTES_SAS_Pain',
options: ['Strongly Disagree', 'Disagree', 'Weakly Disagree', 'Weakly Agree', 'Agree', 'Strongly Agree'],
horizontal: true,
required: true
}
],
};
// timeline.push(MTES_SAS);
//------------------------------------//
// Multiple Select survey
//------------------------------------//
var TechUse = {
type: jsPsychSurveyMultiSelect,
questions: [
{
prompt: "<p><div style = 'font-size: 1.5vw;'><b>Which of the following social media platforms do you use? (check all that apply)</b></div></p>",
options: ['Instagram','Twitter','Facebook','Snapchat', 'TikTok','YouTube','Reddit','LinkedIn', 'Pinterest', 'WhatsApp', 'None of the above'],
name: 'TechUse_socialmedia',
horizontal: false,
required: true,
},
{
prompt: "<p><div style = 'font-size: 1.5vw;'><b>Which of the following AI systems do you use?</b></div></p>",
options: ['ChatGPT', 'Google Gemini', 'Claude', 'None of the above'],
name: 'TechUse_AI',
horizontal: false,
required: true,
}
],
}
// timeline.push(TechUse);
//------------------------------------//
// Open-ended Text Response
//------------------------------------//
var AI_questions = {
type: jsPsychSurveyText,
questions: [
{prompt: "<p><div style ='font-size:2vw;'>What are your primary motivations for using AI?</div></p>",
rows: 15,
columns: 70,
name: "AI_motivations",
required: true}
]
}
// timeline.push(AI_questions);
//------------------------------------//
// Organize experimental procedure
//------------------------------------//
var AIDI_procedure = {
timeline: [welcome, experiment_instructions, rentals_procedure, QCAE_survey, MTES_SAS, TechUse, AI_questions],
}
timeline.push(AIDI_procedure);
//------------------------------------//
// Run the experiment
//------------------------------------//
jsPsych.run(timeline);
</script>
</html>