-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
143 lines (122 loc) · 7.94 KB
/
index.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
<html>
<head>
<title>Reproduction project</title>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i,700,700i" rel="stylesheet">
<script src = "assets/stickyfill.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel = "stylesheet" href="assets/style.css">
</head>
<body>
<div id="left" class="column">
<div class="top-left">Project for Visualizing Uncertainty</div>
<div class="bottom" id="bottomleft">
<div class="keys">
<div class='introkeys'>
<h1>Behind the curtain: measuring issues on studies' replication </h1>
<small>
1. Fill the first box with a valid email<br>
2. Check one answer for each question. <br>
3. Scroll down to see all questions. <br>
4. After selecting all answers, hit the send button.<br>
5. A confirmation page will appear; click on the option 'I am not a robot'
</small>
</div>
<br>
<div class='formspot'>
<form method="POST" action="https://formspree.io/santf655@newschool.edu">
<input type="email" name="email" placeholder="Fill a valid email"> <br><br>
1. The information presented in this visualization is clear to me. Do you:<br>
<input type="radio" name="gender1" value="strongly disagree"> strongly disagree<br>
<input type="radio" name="gender1" value="disagree"> disagree<br>
<input type="radio" name="gender1" value="slightly disagree"> slightly disagree <br>
<input type="radio" name="gender1" value="slightly agree"> slightly agree<br>
<input type="radio" name="gender1" value="agree"> agree<br>
<input type="radio" name="gender1" value="strongly agree"> strongly agree<br>
<br>
2. From this visualization, I can compare differences between the original and replicated study outcomes. Do you:<br>
<input type="radio" name="gender2" value="strongly disagree"> strongly disagree<br>
<input type="radio" name="gender2" value="disagree"> disagree<br>
<input type="radio" name="gender2" value="slightly disagree"> slightly disagree <br>
<input type="radio" name="gender2" value="slightly agree"> slightly agree<br>
<input type="radio" name="gender2" value="agree"> agree<br>
<input type="radio" name="gender2" value="strongly agree"> strongly agree<br>
<br>
3. When interpreting "The face of success: Inferences from Chief Executive Officers' appearance predict company profits", I believe the differences between the original and replicated study are:<br>
<input type="radio" name="gender3" value="very similar"> very similar<br>
<input type="radio" name="gender3" value="similar"> similar<br>
<input type="radio" name="gender3" value="somewhat similar"> somewhat similar<br>
<input type="radio" name="gender3" value="somewhat dissimilar"> somewhat dissimilar<br>
<input type="radio" name="gender3" value="dissimilar"> dissimilar<br>
<input type="radio" name="gender3" value="very dissimilar"> very dissimilar<br>
<br>
4. When interpreting "Where do We Look During Potentially Offensive Behavior", I believe the differences between the original and replicated study are:<br>
<input type="radio" name="gender4" value="very similar"> very similar<br>
<input type="radio" name="gender4" value="similar"> similar<br>
<input type="radio" name="gender4" value="somewhat similar"> somewhat similar<br>
<input type="radio" name="gender4" value="somewhat dissimilar"> somewhat dissimilar<br>
<input type="radio" name="gender4" value="dissimilar"> dissimilar<br>
<input type="radio" name="gender4" value="very dissimilar"> very dissimilar<br>
<br>
5. When interpreting "Sex differences in mate preferences revisited: Do people know what they initially desire in a romantic partner?", I believe the differences between the original and replicated study are:<br>
<input type="radio" name="gender5" value="very similar"> very similar<br>
<input type="radio" name="gender5" value="similar"> similar<br>
<input type="radio" name="gender5" value="somewhat similar"> somewhat similar<br>
<input type="radio" name="gender5" value="somewhat dissimilar"> somewhat dissimilar<br>
<input type="radio" name="gender5" value="dissimilar"> dissimilar<br>
<input type="radio" name="gender5" value="very dissimilar"> very dissimilar<br>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
<div id="right" class="column">
<div class="top-right">The data is available from <a link href='https://cos.io/?_ga=2.173557856.23221923.1525186457-1454588847.1525186457'>Open Science Project</a>.</div>
<div class="bottom" id="bottomright">
<div class='introholder'>
<div class="int">The robustness of a scientific finding must be judged not just by the merits of the original experiments, but also by the ability of these findings to be independently reproduced. Concerns that published findings, however, are commonly failing to reproduce have shaken trust in science, and led to calls for reforms in how scientific findings are evaluated and transmitted.
</div>
<div class='int'>
<img src="assets/boxCurves.svg" width='300px'></img>
</div>
</div>
<div class='colors'>
<small>M E A S U R E S:</small>
<span id='e'>Effect Size</span>
<span id='s'>Sample Size</span>
<span id='p'>PValues</span>
<span id='r'>Recreated Effect Size</span>
<span id='t'>TTest Value</span><br>
</div>
<div class='viz'>
</div>
</div>
</div>
</body>
<script>
document.getElementById("bottomright").onscroll = function() {manualSticky();};
function manualSticky() {
//logging vertical space
var heightTop = document.getElementsByClassName("top-right")[0].scrollHeight;
var heightIntro = document.getElementsByClassName("int")[0].scrollHeight;
var introMargin = document.getElementsByClassName("int")[0].style.marginBottom;
var totalHeightBefore = heightTop + heightIntro + introMargin;
console.log('heightTop is:' + heightTop + '; heightIntro is: ' + heightIntro + '; introMargin is: ' + introMargin);
console.log('total is:' + totalHeightBefore);
//logging horizontal space
var widthGraph = document.getElementsByClassName('viz')[0].scrollWidth;
console.log(widthGraph);
if (document.getElementById("bottomright").scrollTop > totalHeightBefore || document.getElementById("bottomright").scrollTop > totalHeightBefore) {
document.getElementsByClassName("colors")[0].style.position = "absolute";
document.getElementsByClassName("colors")[0].style.top = "70px";
document.getElementsByClassName("colors")[0].style.width = widthGraph + "px";
console.log('wut');
} else {
document.getElementsByClassName("colors")[0].style.position = "";
document.getElementsByClassName("colors")[0].style.top = "70px";
}
}
</script>
<script type="text/javascript" src="assets/sketch.js"></script>
</html>