-
Notifications
You must be signed in to change notification settings - Fork 0
/
intro.html
executable file
·251 lines (216 loc) · 12.1 KB
/
intro.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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visualization Insights</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/timeme.js"></script>
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script type="text/javascript">
var urlParams = new URLSearchParams(window.location.search);
var prolific_PID = urlParams.get('PROLIFIC_PID');
var session_ID = urlParams.get('SESSION_ID');
var mod = urlParams.get('modulo');
var conditions = urlParams.get('vis').split(",");
var prev_param = urlParams.get('ret');
var charts = urlParams.get('ch').split(",");
if (charts == "m") {n_regions = 12} else {n_regions = 8};
if (prev_param == undefined) {
prev_trial = JSON.parse("[" + window.atob("MCwgbnVsbCwgbnVsbCwgbnVsbCwgbnVsbCwgMA") + "]");
} else {
prev_trial = JSON.parse("[" + window.atob( prev_param ) + "]");
}
console.log(prev_trial);
zip = zip = (...rows) => [...rows[0]].map((_,c) => rows.map(row => row[c]));
var count = prev_trial[0];
var prev = zip(['tp', 'tn', 'fp', 'fn'], prev_trial.slice(1, 5)).reduce(function(map, obj) {
map[obj[0]] = obj[1];
return map;
}, {});
var cumulative_payout = prev_trial[5];
// TimeMe.initialize({
// currentPageName: "trial-1", // current page
// idleTimeoutInSeconds: 120, // stop recording time due to inactivity
// });
</script>
</head>
<body>
<div class="row">
<div class="container-fluid">
<div class="col-sm-10 col-sm-offset-1">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h2 class="margin-top-md">Visualization Insights study</h2>
</div>
</div>
<!-- Description for confidence intervals -->
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h4 class="prev-trial-review margin-top-sm">Review</h4>
<p class = "prev-trial-review">
<span id="payoff">Total Payoff: 0</span><br>
</p>
</div>
</div>
<div class = "row">
<div class="col-lg-10 col-lg-offset-1">
<h4 class="prev-trial-review margin-top-sm">Introduction</h4>
<div class="condition-intro" id="ci">
<p><img class="vis-desc" src="images/ci_calc_plot.png" align="right"/>
This is the <span class="block-num">first</span> block of trials. Each block consists of 35 trials. <br><br>
You've only received sales data for 20 random stores (out of 200) in each region.
To help you evaluate the regional profits with incomplete data, your business analyst used statistics and created plots. Each plot shows the estimated average profit (in thousands of dollars) for a region based on the 20-store sample, and some uncertainty around the estimate (95% confidence interval).
</p>
</div>
</div>
<!-- Description for raw data -->
<div class="col-lg-10 col-lg-offset-1">
<div class="condition-intro" id="raw-data">
<p><img class="vis-desc" src="images/rawdata_calc_plot.png" align="right"/>
<!-- In this block, each visualization will present one region. Each dot represents the profit from one of the 20-store samples, which were randomly selected from each region. -->
This is the <span class="block-num">first</span> block of trials. Each block consists of 35 trials. <br><br>
You've only received sales data for 20 random stores (out of 200) in each region.
To help you evaluate the regional profits with incomplete data, your business analyst created plots like the one to the right. The points show the profits made by the twenty-store sample in a given region. Keep in mind that there are 200 stores in total in each region, so your data are incomplete.
</p>
</div>
</div>
<!-- Description for Probability density plot -->
<div class="col-lg-10 col-lg-offset-1">
<div class="condition-intro" id="halfeye">
<p><img class="vis-desc" src="images/pdf_calc_plot.png" align="right"/>
<!-- Your job is to pick out the promising regions where the average store is making a profit (profit > 0). -->
This is the <span class="block-num">first</span> block of trials. Each block consists of 35 trials. <br><br>
You've only received sales data for 20 random stores (out of 200) in each region.
To help you evaluate the regional profits with incomplete data, your business analyst used statistics and created plots. Each plot shows the estimated average profit (in thousands of dollars) for a region based on the 20-store sample, and some uncertainty around the estimate (95% confidence interval). In addition, the grey blob shows the density of the average estimate: the blob is wider around estimates of profits that are more likely.
</p>
</div>
</div>
<!-- Description for Probability density plot -->
<div class="col-lg-10 col-lg-offset-1">
<div class="condition-intro" id="dotplot">
<p><img class="vis-desc" src="images/dotplot_calc_plot.png" align="right"/>
<!-- Your job is to pick out the promising regions where the average store is making a profit (profit > 0). -->
This is the <span class="block-num">first</span> block of trials. Each block consists of 35 trials. <br><br>
You've only received sales data for 20 random stores (out of 200) in each region.
To help you evaluate the regional profits with incomplete data,
your business analyst used statistics and created dot plots, see
the example on the right. Each big blue dot shows a possible
average profit for a region (an educated guess) based on your
partial data. Since there is uncertainty around the profit
values, your analyst plotted twenty dots/guesses.
</p>
</div>
</div>
<!-- Description for HOPs (draws from the quantile distribution) -->
<div class="col-lg-10 col-lg-offset-1">
<div class="condition-intro" id="hops-1">
<p><img class="vis-desc-alt" src="images/hops-1_calc_plot.png" align="right"/>
<img class="hops-position" src="images/hops-1.gif" align="right"/>
<!-- Your job is to pick out the promising regions where the average store is making a profit (profit > 0). -->
This is the <span class="block-num">first</span> block of trials. Each block consists of 35 trials. <br><br>
You've only received sales data for 20 random stores (out of 200) in each region.
To help you evaluate with incomplete data,
your business analyst used statistics and created animations like the ones on the
right. Each frame shows an educated guess of the average
profit, and the animation shows 20 guesses in total.
<!-- Each plot shows possible estimated values of the average profit (in thousands of dollars) for a region based on the 20-store sample. There is some uncertainty around the estimate of the average profit, and so the analyst decide to animate the 20 possible values of the average profit. -->
</p>
</div>
</div>
<!-- Description for HOPs (sampling with replacement from the data) -->
<div class="col-lg-10 col-lg-offset-1">
<div class="condition-intro" id="hops-2">
<p><img class="vis-desc-alt" src="images/hops-2_calc_plot.png" align="right"/>
<img class="hops-position" src="images/hops-2.gif" align="right"/>
<!-- Your job is to pick out the promising regions where the average store is making a profit (profit > 0). -->
This is the <span class="block-num">first</span> block of trials. Each block consists of 35 trials. <br><br>
Since you've only received incomplete sales data, i.e., 20 random stores
out of 200 in each region, your analyst made some educated
guesses about the real profits using statistics. On the right, the animation shows
one guess in each frame --- what the profits could be for
any 20 stores in the region.
<!-- To help you evaluate the regional profits with incomplete data, your business analyst used statistics and created plots like the one to the right. The points show the profits made by the twenty-store sample in a given region. Keep in mind that there are 200 stores in total in each region, so your data are incomplete. Hence, the analyst animated to show what hypothetical profits for 20 stores would look like based on the available information. -->
</p>
</div>
</div>
<div class="col-lg-10 col-lg-offset-1">
<div class="row">
<div class="col-sm-12">
<h3>Reward structure</h3>
<p><img id="payoff-img" src="images/payoff_5.png" align="right">
<!-- Please read the incentive structure carefully as it will change for every block of trial -->
<ul>
<li>If you <b>click</b> on a region, and that region <b>does have</b> a profit greater than zero, on average, you will receive 20 points. <!-- This is a <i>True Positive</i>.--></li>
<li>If you <b>click</b> on a region, and that region <b>does not</b> have a profit greater than zero, on average, you will lose <span class="highlight" id="fp-val">380 points.</span><!-- This is a <i>False Positive</i>. --></li>
<li>If you <b>do not click</b> on a region, and that region <b>does not</b> have a profit greater than zero on average, you will receive 20 points. <!-- This is a <i>True Negative</i>. --></li>
<li>If you <b>do not click</b> on a region, and that region <b>does have</b> a profit greater than zero, on average, you will lose 20 points. <!-- This is a <i>False Negative</i>. --></li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "row">
<div class="container">
<div class="btn-container">
<div class="btn" id="submit-btn">Proceed</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var n = 35;
var b = [...Array(n).keys()].map( i => ++i );
var trial_order = b.map( i => (i * mod) % 36);
var selected = [];
trial_idx = count % n;
cond_idx = Math.floor(count / n);
cond = conditions[cond_idx];
alpha = 0.05; // parseInt(incentives[cond_idx])/100;
block_id = "first"
if (cond_idx == 0) {block_id = "first"} else if (cond_idx == 1) {block_id = "second"} else { block_id = "third" }
$("span.block-num").html(block_id);
$("span#fp-val").text("" + Math.round(((1-alpha)/alpha) * 2) * 10 + " points");
$("img#payoff-img").attr("src", "images/payoff_"+ (alpha * 100) +".png");
$("div.condition-intro").hide();
$("div#"+cond).show();
var total_pay = cumulative_payout;
if (count > 0 & prev != "NA") {
$("span#payoff").html("<i>Total Payout:</i> " + total_pay);
}
$("div#submit-btn").on('click', submitResponse);
// send response to DB
function submitResponse() {
// uses global value for 'selected'
// Time spent on page
if (count >= (conditions.length * n - 1)){
var get_uuid_url = 'https://w8vewq61bf.execute-api.us-east-2.amazonaws.com/prod/user_records?user=old&PROLIFIC_PID='+prolific_PID+'&SESSION_ID=' + session_ID + '';
$.get(get_uuid_url, function(data, status) {
uuid = data;
window.location.href = 'https://umich.qualtrics.com/jfe/form/SV_0O0FsjvFas9tzKd?PROLIFIC_PID='+prolific_PID+'&SESSION_ID='+session_ID+'&uuid='+uuid+'';
})
} else {
window.location.href = 'trial.html?PROLIFIC_PID='+prolific_PID+'&SESSION_ID='+session_ID+'&modulo='+mod+'&vis='+conditions+'&ch='+charts+'&ret='+prev_param+'';;
}
}
// Disabling the return to this page from the survey
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
</html>