Skip to content

Commit 77ab28e

Browse files
simonharrersimonharrer
committed
Update
1 parent 6067cf5 commit 77ab28e

File tree

2 files changed

+80
-31
lines changed

2 files changed

+80
-31
lines changed

‎rotation-timer.html

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,7 @@
1010
<body>
1111
<h1>Rotation Time</h1>
1212
<p><em>Time to next turn</em> is one of the main drivers of participant engagement. In other words, the higher the time to next turn, the higher the probability to become disengaged.</p>
13-
<p>We recommend aiming for a time to next turn of around 30 minutes.</p>
14-
<div>
15-
<label>
16-
Rotation in minutes
17-
<input id="rotation" name="rotation" type="number" value="10" onchange="update()" min="1" required/>
18-
</label>
19-
</div>
13+
2014
<div>
2115
<label>
2216
Participants
@@ -25,39 +19,26 @@ <h1>Rotation Time</h1>
2519
</div>
2620

2721
<div style="margin-top: 1em;">
28-
Time to next turn <strong><span id="timeToNextTurn">30</span> minutes</strong>
29-
30-
(or time for Twitter <img id="twitter" src="https://www.iconpacks.net/icons/2/free-twitter-logo-icon-2429-thumb.png" height="16">)
22+
<ul>
23+
<li>For a time to next turn of <strong>30 minutes</strong> you can have a rotation time of <strong><span id="rotationTime30Minutes">5</span> minutes</strong> at most (recommended)</li>
24+
<li>For a time to next turn of <strong>45 minutes</strong> you can have a rotation time of <strong><span id="rotationTime45Minutes">5</span> minutes</strong> at most</li>
25+
<li>For a time to next turn of <strong>60 minutes</strong> you can have a rotation time of <strong><span id="rotationTime60Minutes">5</span> minutes</strong> at most</li>
26+
</ul>
3127
</div>
3228

33-
<div>
34-
<h3>What if?</h3>
35-
<div>
36-
+1 participant: <span id="timeToNextTurnPlusOne">20</span> minutes
37-
</div>
38-
<div>
39-
-1 participant: <span id="timeToNextTurnMinusOne">40</span> minutes
40-
</div>
41-
</div>
4229

4330

4431
<script type="application/javascript">
45-
function timeToNextTurn(rotation, size) {
46-
return rotation * (size - 1)
32+
function rotationTime(size, timeToNextTurn) {
33+
return Math.round(timeToNextTurn / (size - 1))
4734
}
4835

36+
4937
function update() {
50-
let rotation = parseInt(document.getElementById('rotation').value)
5138
let size = parseInt(document.getElementById('size').value)
52-
53-
let timeToNextTurnInMinutes = timeToNextTurn(rotation, size);
54-
let upperBound = 120
55-
let timeToNextTurnInMinutesUpperBound = Math.min(upperBound, timeToNextTurnInMinutes)
56-
let opacity = (timeToNextTurnInMinutesUpperBound / upperBound)
57-
document.getElementById('timeToNextTurn').innerText = timeToNextTurnInMinutes
58-
document.getElementById('twitter').style = 'opacity: ' + opacity + ';'
59-
document.getElementById('timeToNextTurnPlusOne').innerText = timeToNextTurn(rotation, size + 1)
60-
document.getElementById('timeToNextTurnMinusOne').innerText = timeToNextTurn(rotation, size - 1)
39+
document.getElementById('rotationTime30Minutes').innerText = rotationTime(size, 30)
40+
document.getElementById('rotationTime45Minutes').innerText = rotationTime(size, 45)
41+
document.getElementById('rotationTime60Minutes').innerText = rotationTime(size, 60)
6142
}
6243

6344
update()

‎rotation-timer.html.old

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<html>
2+
3+
<head>
4+
<title>Rotation Time</title>
5+
6+
7+
8+
</head>
9+
10+
<body>
11+
<h1>Rotation Time</h1>
12+
<p><em>Time to next turn</em> is one of the main drivers of participant engagement. In other words, the higher the time to next turn, the higher the probability to become disengaged.</p>
13+
<p>We recommend aiming for a time to next turn of around 30 minutes.</p>
14+
<div>
15+
<label>
16+
Rotation in minutes
17+
<input id="rotation" name="rotation" type="number" value="10" onchange="update()" min="1" required/>
18+
</label>
19+
</div>
20+
<div>
21+
<label>
22+
Participants
23+
<input id="size" name="size" type="number" value="4" onchange="update()" min="3" required />
24+
</label>
25+
</div>
26+
27+
<div style="margin-top: 1em;">
28+
Time to next turn <strong><span id="timeToNextTurn">30</span> minutes</strong>
29+
30+
(or time for Twitter <img id="twitter" src="https://www.iconpacks.net/icons/2/free-twitter-logo-icon-2429-thumb.png" height="16">)
31+
</div>
32+
33+
<div>
34+
<h3>What if?</h3>
35+
<div>
36+
+1 participant: <span id="timeToNextTurnPlusOne">20</span> minutes
37+
</div>
38+
<div>
39+
-1 participant: <span id="timeToNextTurnMinusOne">40</span> minutes
40+
</div>
41+
</div>
42+
43+
44+
<script type="application/javascript">
45+
function timeToNextTurn(rotation, size) {
46+
return rotation * (size - 1)
47+
}
48+
49+
function update() {
50+
let rotation = parseInt(document.getElementById('rotation').value)
51+
let size = parseInt(document.getElementById('size').value)
52+
53+
let timeToNextTurnInMinutes = timeToNextTurn(rotation, size);
54+
let upperBound = 120
55+
let timeToNextTurnInMinutesUpperBound = Math.min(upperBound, timeToNextTurnInMinutes)
56+
let opacity = (timeToNextTurnInMinutesUpperBound / upperBound)
57+
document.getElementById('timeToNextTurn').innerText = timeToNextTurnInMinutes
58+
document.getElementById('twitter').style = 'opacity: ' + opacity + ';'
59+
document.getElementById('timeToNextTurnPlusOne').innerText = timeToNextTurn(rotation, size + 1)
60+
document.getElementById('timeToNextTurnMinusOne').innerText = timeToNextTurn(rotation, size - 1)
61+
}
62+
63+
update()
64+
</script>
65+
66+
</body>
67+
68+
</html>

0 commit comments

Comments
 (0)