Skip to content

Commit 5c898bf

Browse files
malcolmbarrettmalcolmbarrett
committed
add countdown and re-render slides
1 parent 2ac22b3 commit 5c898bf

File tree

6 files changed

+633
-0
lines changed

6 files changed

+633
-0
lines changed

‎slides/pdf/03-causal-inference-with-group-by-and-summarise.pdf‎

145 KB
Binary file not shown.

‎slides/raw/03-causal-inference-with-group-by-and-summarise.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,8 @@
385385
margin-right: 0;
386386
}
387387
</style>
388+
<link href="03-causal-inference-with-group-by-and-summarise_files/libs/countdown-0.4.0/countdown.css" rel="stylesheet">
389+
<script src="03-causal-inference-with-group-by-and-summarise_files/libs/countdown-0.4.0/countdown.js"></script>
388390
</head>
389391
<body class="quarto-light">
390392
<div class="reveal">
@@ -543,6 +545,7 @@ <h2>Simulation</h2>
543545
<h2><em>Your Turn 1</em> (<code>03-ci-with-group-by-and-summarise-exercises.qmd</code>)</h2>
544546
<h3 id="group-the-dataset-by-confounder-and-exposure">Group the dataset by <code>confounder</code> and <code>exposure</code></h3>
545547
<h3 id="calculate-the-mean-of-the-outcome-for-the-groups">Calculate the mean of the <code>outcome</code> for the groups</h3>
548+
<p></p><div class="countdown" id="timer_9b22e929" data-update-every="1" tabindex="0" style="right:0;bottom:0;"> <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div> <code class="countdown-time"><span class="countdown-digits minutes">03</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code> </div><p></p>
546549
</section>
547550
<section id="your-turn-1" class="slide level2">
548551
<h2><em>Your Turn 1</em></h2>
@@ -680,6 +683,7 @@ <h2><em>Your Turn 2</em></h2>
680683
4 1 1 -0.00275</code></pre>
681684
</div>
682685
</div>
686+
<p></p><div class="countdown" id="timer_c45b9d8d" data-update-every="1" tabindex="0" style="right:0;bottom:0;"> <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div> <code class="countdown-time"><span class="countdown-digits minutes">02</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code> </div><p></p>
683687
</section>
684688
<section id="simulation-6" class="slide level2">
685689
<h2>Simulation</h2>
@@ -820,6 +824,7 @@ <h2><em>Your Turn 3</em></h2>
820824
<h3 id="use-ntile-from-dplyr-to-calculate-a-binned-version-of-confounder-called-confounder_q.-well-create-a-variable-with-5-bins.">Use <code>ntile()</code> from dplyr to calculate a binned version of <code>confounder</code> called <code>confounder_q</code>. We’ll create a variable with 5 bins.</h3>
821825
<h3 id="group-the-dataset-by-the-binned-variable-you-just-created-and-exposure">Group the dataset by the binned variable you just created and exposure</h3>
822826
<h3 id="calculate-the-mean-of-the-outcome-for-the-groups-2">Calculate the mean of the outcome for the groups</h3>
827+
<p></p><div class="countdown" id="timer_03285137" data-update-every="1" tabindex="0" style="right:0;bottom:0;"> <div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div> <code class="countdown-time"><span class="countdown-digits minutes">03</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code> </div><p></p>
823828
</section>
824829
<section id="your-turn-3-1" class="slide level2">
825830
<h2><em>Your Turn 3</em></h2>

‎slides/raw/03-causal-inference-with-group-by-and-summarise.qmd‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ sim |>
129129
### Group the dataset by `confounder` and `exposure`
130130
### Calculate the mean of the `outcome` for the groups
131131

132+
`r countdown::countdown(minutes = 3)`
133+
132134
## *Your Turn 1*
133135

134136
```{r}
@@ -222,6 +224,8 @@ sim2 |>
222224
summarise(estimate = x_1 - x_0)
223225
```
224226

227+
`r countdown::countdown(minutes = 2)`
228+
225229
## Simulation
226230

227231
:::: {.columns .tiny}
@@ -319,6 +323,8 @@ lm(outcome ~ exposure, data = sim3)
319323
### Group the dataset by the binned variable you just created and exposure
320324
### Calculate the mean of the outcome for the groups
321325

326+
`r countdown::countdown(minutes = 3)`
327+
322328
## *Your Turn 3*
323329

324330
```{r}

‎slides/raw/03-causal-inference-with-group-by-and-summarise_files/libs/countdown-0.4.0/countdown.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
.countdown {
2+
background: inherit;
3+
position: absolute;
4+
cursor: pointer;
5+
font-size: 3rem;
6+
line-height: 1;
7+
border-color: #ddd;
8+
border-width: 3px;
9+
border-style: solid;
10+
border-radius: 15px;
11+
box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
12+
-webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
13+
margin: 0.6em;
14+
padding: 10px 15px;
15+
text-align: center;
16+
z-index: 10;
17+
-webkit-user-select: none;
18+
-moz-user-select: none;
19+
-ms-user-select: none;
20+
user-select: none;
21+
}
22+
.countdown {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
}
27+
.countdown .countdown-time {
28+
background: none;
29+
font-size: 100%;
30+
padding: 0;
31+
}
32+
.countdown-digits {
33+
color: inherit;
34+
}
35+
.countdown.running {
36+
border-color: #2A9B59FF;
37+
background-color: #43AC6A;
38+
}
39+
.countdown.running .countdown-digits {
40+
color: #002F14FF;
41+
}
42+
.countdown.finished {
43+
border-color: #DE3000FF;
44+
background-color: #F04124;
45+
}
46+
.countdown.finished .countdown-digits {
47+
color: #4A0900FF;
48+
}
49+
.countdown.running.warning {
50+
border-color: #CEAC04FF;
51+
background-color: #E6C229;
52+
}
53+
.countdown.running.warning .countdown-digits {
54+
color: #3A2F02FF;
55+
}
56+
57+
.countdown.running.blink-colon .countdown-digits.colon {
58+
opacity: 0.1;
59+
}
60+
61+
/* ------ Controls ------ */
62+
.countdown:not(.running) .countdown-controls {
63+
display: none;
64+
}
65+
66+
.countdown-controls {
67+
position: absolute;
68+
top: -0.5rem;
69+
right: -0.5rem;
70+
left: -0.5rem;
71+
display: flex;
72+
justify-content: space-between;
73+
margin: 0;
74+
padding: 0;
75+
}
76+
77+
.countdown-controls > button {
78+
font-size: 1.5rem;
79+
width: 1rem;
80+
height: 1rem;
81+
display: inline-block;
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
justify-content: center;
86+
font-family: monospace;
87+
padding: 10px;
88+
margin: 0;
89+
background: inherit;
90+
border: 2px solid;
91+
border-radius: 100%;
92+
transition: 50ms transform ease-in-out, 150ms opacity ease-in;
93+
--countdown-transition-distance: 10px;
94+
}
95+
96+
.countdown .countdown-controls > button:last-child {
97+
transform: translate(calc(-1 * var(--countdown-transition-distance)), var(--countdown-transition-distance));
98+
opacity: 0;
99+
color: #002F14FF;
100+
background-color: #43AC6A;
101+
border-color: #2A9B59FF;
102+
}
103+
104+
.countdown .countdown-controls > button:first-child {
105+
transform: translate(var(--countdown-transition-distance), var(--countdown-transition-distance));
106+
opacity: 0;
107+
color: #4A0900FF;
108+
background-color: #F04124;
109+
border-color: #DE3000FF;
110+
}
111+
112+
.countdown.running:hover .countdown-controls > button,
113+
.countdown.running:focus-within .countdown-controls > button{
114+
transform: translate(0, 0);
115+
opacity: 1;
116+
}
117+
118+
.countdown.running:hover .countdown-controls > button:hover,
119+
.countdown.running:focus-within .countdown-controls > button:hover{
120+
transform: translate(0, calc(var(--countdown-transition-distance) / -2));
121+
box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
122+
-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
123+
}
124+
125+
.countdown.running:hover .countdown-controls > button:active,
126+
.countdown.running:focus-within .countdown-controls > button:active{
127+
transform: translate(0, calc(var(--coutndown-transition-distance) / -5));
128+
}
129+
130+
/* ----- Fullscreen ----- */
131+
.countdown.countdown-fullscreen {
132+
z-index: 0;
133+
}
134+
135+
.countdown-fullscreen.running .countdown-controls {
136+
top: 1rem;
137+
left: 0;
138+
right: 0;
139+
justify-content: center;
140+
}
141+
142+
.countdown-fullscreen.running .countdown-controls > button + button {
143+
margin-left: 1rem;
144+
}

0 commit comments

Comments
 (0)