-
Notifications
You must be signed in to change notification settings - Fork 2
/
berlin.html
336 lines (295 loc) · 14.9 KB
/
berlin.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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!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.0">
<title>Interactive Code Playgrounds</title>
<!-- Main Reveal Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.css">
<!-- Blood Reveal Theme Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/theme/blood.css" id="theme">
<!-- Custom stylesheet to make reveal work with our playgrounds -->
<link rel="stylesheet" href="https://lucademenego99.github.io/icp-bundle/base/custom-style.css">
<!-- Bundle containing the code playground web components -->
<script src="https://lucademenego99.github.io/icp-bundle/base/full.iife.js"></script>
<style>
li {
padding-bottom: 2vmin;
}
</style>
</head>
<!-- For more information on reveal.js: https://revealjs.com/ -->
<body class="h-screen full-page-demo reveal-viewport" data-page="icp" style="transition: transform 0.8s ease 0s;">
<div class="reveal slide focused has-horizontal-slides ready" role="application" data-transition-speed="default"
data-background-transition="fade">
<div class="slides">
<!-- Each <section> is a slide -->
<section>
<!-- title class: custom style for titles -->
<h3 class="title">Interactive Code Playgrounds</h3>
<!-- subtitle class: custom style for subtitles -->
<p class="subtitle">A platform-agnostic technology to rethink<br />
the programming slides user experience</p>
<div>
<p>Lorenzo Angeli and Luca De Menego<br />
University of Trento<br />
Berlin, June 1st 2022, OpenU WP3 Peer Learning Meeting</p>
</div>
</section>
<section>
<h5>The typical programming lab slide</h5>
<div class="row" style="width: 90%; margin-top: 8vh;">
<div class="col" style="text-align: left;">
<ul class="fragment fade-out" data-fragment-index="1" style="list-style-type: none;">
<li>Code embedded in slides as images/plain text</li>
<li>Hard (or impossible) to copy/paste</li>
<li>As teacher, changes are hard to make</li>
<li>Not accessible for e.g., screen readers</li>
</ul>
<h6 class="fragment" data-fragment-index="1">Most importantly:<br />checking code results isn't
easy!</h6>
</div>
<div class="col">
<img style="width: 100vmin;" src="assets/codeSample.png"
alt="A piece of code illustrating a bubblesort algorithm">
</div>
</div>
</section>
<section>
<div class="r-stack">
<div class="fragment fade-out" style="display: flex; flex-direction: column; gap: 3em;"
data-fragment-index="1">
<img src="assets/copy-code-diagram-blackarrows.png"
alt="Diagram of the typical case in which you want to copy the code from a slide">
<img src="assets/find-files-diagram-blackarrows.png"
alt="Diagram of the typical case in which you want to find a file containing the code explained in a slide">
</div>
<div>
<img style="height: 80vmin;" class="fragment fade-in" data-fragment-index="1"
src="assets/ide.png" alt="Image of an IDE">
</div>
</div>
</section>
<section>
<h5>Interactive Code Playgrounds</h5>
<!-- row class: custom class to set up a two-columns layout - you need to use row + two columns -->
<div class="row" style="width: 90%">
<!-- col class: first column of the row defined before -->
<div class="col" style="text-align: left;">
<ul style="list-style-type: none;">
<li>Run code directly on slide</li>
<li>Easy to modify/fix mistakes</li>
<li>No need to install anything</li>
</ul>
</div>
<!-- col class: second column of the row defined before -->
<!-- Note: the editor takes the size of the parent, so it must be specified -->
<!-- in this case the parent is 100% width, 60vh height -->
<div class="col" style="flex: 2; height: 60vh; margin: 2vh">
<!-- Normal editor, set the language and the code inside it -->
<!-- to create editable parts, just use <EDITABLE>...</EDITABLE> -->
<!-- for more info: https://github.com/lucademenego99/icp-bundle -->
<!-- Note: for reveal.js to work we need to set content editable to true -->
<python-editor contenteditable="true" theme="dark" type="vertical" code="elements = [39,12,18,85,72,10,2,18]
print('Unsorted list is\n', elements)
# Sort the list (with bubblesort)
for n in range(len(elements)-1, 0, -1):
for i in range(n):
if elements[i] > elements[i+1]:
elements[i], elements[i+1] = elements[i+1], elements[i]
print('\nSorted list is\n', elements)" />
</div>
</section>
<section>
<div class="row" style="width: 100%">
<div class="col" style="flex: 2">
<p>Other features in <span class="emph">Interactive Code Playgrounds</span></p>
</div>
<div class="r-stack col" style="height: 70vh; flex: 3;">
<div class="fragment fade-out" data-fragment-index="1" style="width: 100%">
<p>Restricted Editing</p>
<div style="height: 60vh;">
<python-editor type="vertical" contenteditable="true" theme="dark" code="elements = [<EDITABLE>39,12,18,85,72,10,2,18</EDITABLE>]
print('Unsorted list is\n', elements)
# Sort the list (with bubblesort)
for n in range(len(elements)-1, 0, -1):
for i in range(n):
if elements[i] > elements[i+1]:
elements[i], elements[i+1] = elements[i+1], elements[i]
print('\nSorted list is\n', elements)" />
</div>
</div>
<div class="fragment fade-in" data-fragment-index="1" style="width: 100%">
<p>Light Theme and Different Layouts</p>
<div style="height: 60vh;">
<python-editor contenteditable="true" code="elements = [39,12,18,85,72,10,2,18]
print('Unsorted list is\n', elements)
# Sort the list (with bubblesort)
for n in range(len(elements)-1, 0, -1):
for i in range(n):
if elements[i] > elements[i+1]:
elements[i], elements[i+1] = elements[i+1], elements[i]
print('\nSorted list is\n', elements)" />
</div>
</div>
</div>
</section>
<!-- Start another slide -->
<section>
<div class="row" style="width: 100%">
<div class="col" style="flex: 2;">
<p>Other <span class="emph">languages</span></p>
</div>
<div class="r-stack col" style="height: 70vh; flex: 3;">
<div class="fragment fade-out" data-fragment-index="1" style="width: 100%;">
<p>Typescript (and Javascript)</p>
<div style="height: 60vh;">
<typescript-editor contenteditable="true" code="let elements = [39,12,18,85,72,10,2,18];
console.log('Unsorted list is\n', elements);
// Sort the list
for (let n = elements.length-1; n >= 0; n--) {
for (let i = 0; i < n; i++) {
if (elements[i] > elements[i+1]) {
const tmp = elements[i];
elements[i] = elements[i+1];
elements[i+1] = tmp;
}
}
}
console.log('Sorted list is\n', elements);" />
</div>
</div>
<div class="fragment fade-in-then-out" data-fragment-index="1" style="width: 100%;">
<p>Java</p>
<div style="height: 60vh;">
<java-editor contenteditable="true" theme="dark" code='public class BubbleSort {
public static void main(String[] args) {
int[] elements = {39,12,18,85,72,10,2,18};
System.out.println("Unsorted list:");
printArray(elements);
// Sort the list
for (int n = elements.length-1; n >= 0; n--) {
for (int i = 0; i < n; i++) {
if (elements[i] > elements[i+1]) {
int tmp = elements[i];
elements[i] = elements[i+1];
elements[i+1] = tmp;
}
}
}
System.out.println("Sorted list:");
printArray(elements);
}
private static void printArray(int[] array) {
for (int i = 0; i < array.length; i++) {
System.out.print(array[i] + " ");
}
System.out.print("\n");
}
}' />
</div>
</div>
<div class="fragment fade-in" data-fragment-index="2" style="width: 100%;">
<p>SQL</p>
<div style="height: 60vh;">
<sql-editor contenteditable="true" code="DROP TABLE IF EXISTS elements;
-- Create the table
CREATE TABLE elements(number integer);
-- Insert some data
INSERT INTO elements VALUES (39), (12), (18), (85), (72), (10), (2), (18);
-- Select the numbers ordering them
SELECT number from elements ORDER BY number;
" />
</div>
</div>
</div>
</section>
<section>
<h4>Development</h4>
<p class="fragment">Activity technical goal: make an MVP/proof of concept</p>
<p class="fragment">Current solution is quite "tape-and-glue"</p>
<p class="fragment"><a href="https://revealjs.com/">RevealJS</a> for the slides</p>
<p class="fragment"><a href="https://codemirror.net/">CodeMirror</a> for the code editors</p>
<p class="fragment"><a href="https://pyodide.org/en/stable/">Pyodide</a> for Python, <a
href="https://teavm.org/">Teavm</a> for Java, <a
href="https://sql.js.org/documentation/">SQL.js</a> for SQLite</p>
<p class="fragment"><a href="https://redbean.dev/">redbean</a> for deployment</p>
</section>
<section>
<img src="assets/arch.webp" alt="Project's Architecture">
</section>
<section>
<h4>Pedagogical implications</h4>
<p class="fragment">Reduced learning curve for beginners (especially non-specialists)</p>
<p class="fragment">Enable scaffolded learning</p>
<p class="fragment">Smooth transition from traditional slides</p>
</section>
<section>
<h4>Policy implications</h4>
<p class="fragment">Platform independence</p>
<p class="fragment">Easy integration (not "yet another tool")</p>
<p class="fragment">Promotes innovative learning (learning-by-tinkering)</p>
<p class="fragment">More accessible (esp. for screen reader users)</p>
<p class="fragment">Can work offline (doesn't exclude students with low internet access)</p>
</section>
</div>
</div>
<!-- Import the main reveal script -->
<script src=" https://cdn.jsdelivr.net/npm/reveal.js@4.1.0/dist/reveal.js">
</script>
<!-- Initialize reveal -->
<script>
Reveal.initialize({
// Display an help overlay when ? is pressed
help: false,
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// Push each slide change to the browser history
history: true,
// Enable keyboard shortcuts for navigation
keyboard: true,
// Enable the slide overview mode
overview: true,
// Set the width of the slides
width: "90%",
// Set the height of the slides
height: "90%",
// Vertical centering of slides
center: true,
// Loop the presentation
loop: false,
// Enables touch navigation on devices with touch input
touch: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// Transition style for full page slide backgrounds
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
// Select a theme
theme: 'blood',
// Select the type of slides transition
transition: 'slide',
// IMPORTANT: disable the default layout (centering and scaling) to make the code editors work correctly
disableLayout: true
});
</script>
<!-- If the user asks for the pdf version, set section height to auto -->
<!-- Otherwise reveal.js breaks if the section height is set to 100% -->
<script>
if (window.location.href.indexOf('?print-pdf') > -1) {
// Create a new css element setting the height of .section to none
var css = document.createElement("style");
// Modify section height to fix the layout
// Modify .reveal .slides>section.stack pointer events, otherwise the code editors won't work
// Hide the slide context (the slide number)
css.innerHTML = "section { height: auto !important; } .reveal .slides>section.stack {pointer-events: all !important;} .slide-context {display: none;}";
// Append the css to the head
document.head.appendChild(css);
const printVersionText = document.getElementById('print-version-text');
printVersionText.innerHTML = `<a href="?">Clicca qui</a> per tornare alle slide`;
}
</script>
</body>
</html>