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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS1300 AB Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #121212;
color: #fff;
padding: 5px 0 0 15px;
font-size: 120%;
}
button {
background-color: #e7e7e7;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
</style>
<script src="download-utils.js" defer></script>
<script defer>
// redirect user to either A or B, on click of start button
const redirectAB = () => {
// initialize local storage to store data, if not there
const data = localStorage.getItem("cs1300-ab-testing-data");
if (data == null) {
console.log('setting storage')
localStorage.setItem("cs1300-ab-testing-data", JSON.stringify([]));
}
// location.href = "a.html"; // NOTE: FOR TAs, uncomment this and comment the next line.
location.href = "b.html"; // students only use B.
// normally, you'd use the following line in a "true" AB test:
// location.href = Math.random() > .5 ? "a.html" : "b.html";
};
const downloadAB = () => {
// get the data from local storage, ensure not nullish
let data = localStorage.getItem("cs1300-ab-testing-data");
data = JSON.parse(data);
if (!data) {
alert("Error: local storage is corrupted or empty!");
console.error("Error: local storage is corrupted or empty!");
localStorage.clear();
return;
}
const csv = buildcsv(data);
download(csv);
// clear local storage for future uses
localStorage.clear();
}
</script>
</head>
<body>
<h2>
cs1300 AB Testing Start Screen
</h2>
<p>
<strong>Task: </strong> On the next page, do XYZ...
</p>
<button onclick="redirectAB()">Start Task</button>
<br />
<br />
<button onclick="downloadAB()">Download & Clear Current Data</button>
</body>
</html>
|
