-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmicrobit_tutorial.html
More file actions
586 lines (504 loc) · 24.5 KB
/
Copy pathmicrobit_tutorial.html
File metadata and controls
586 lines (504 loc) · 24.5 KB
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
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SheCanEngineer - Space Rover Workshop</title>
<style>
:root {
--primary-color: #4f46e5;
--secondary-color: #db2777;
--dark-bg: #0f172a;
--text-dark: #1e293b;
--text-light: #f8fafc;
--bg-light: #f8fafc;
--card-bg: #ffffff;
--code-bg: #1e1e2e;
--zone-bg: #fff7ed;
--zone-border: #f97316;
--ext-bg: #f0fdf4;
--ext-border: #22c55e;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text-dark);
background-color: var(--bg-light);
line-height: 1.6;
}
header {
background: linear-gradient(135deg, var(--dark-bg) 0%, #1e1b4b 100%);
color: var(--text-light);
padding: 40px 20px;
text-align: center;
border-bottom: 5px solid var(--secondary-color);
}
.badge {
background-color: var(--secondary-color);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
display: inline-block;
margin-bottom: 15px;
}
header h1 {
font-size: 2.2rem;
margin-bottom: 10px;
}
header p {
color: #cbd5e1;
font-size: 1.1rem;
}
.container {
max-width: 850px;
margin: 30px auto;
padding: 0 20px;
}
.resources-box {
background-color: #e0f2fe;
border-left: 5px solid #0284c7;
padding: 20px;
border-radius: 0 8px 8px 0;
margin-bottom: 30px;
}
.resources-box h3 {
color: #0369a1;
margin-bottom: 5px;
}
.resources-box a {
color: #0284c7;
font-weight: bold;
text-decoration: none;
}
.step {
background-color: var(--card-bg);
border-radius: 12px;
padding: 30px;
margin-bottom: 25px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.step-number {
background-color: var(--primary-color);
color: white;
width: 35px;
height: 35px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: bold;
margin-right: 10px;
}
.step h2 {
display: flex;
align-items: center;
font-size: 1.35rem;
color: var(--dark-bg);
margin-bottom: 15px;
}
<!-- .rover-insight {-->
<!-- background-color: #f1f5f9;-->
<!-- border-left: 4px solid #64748b;-->
<!-- padding: 15px;-->
<!-- margin: 15px 0;-->
<!-- border-radius: 0 8px 8px 0;-->
<!-- display: flex;-->
<!-- gap: 15px;-->
<!-- align-items: center;-->
background-color: #fff7ed; /* Soft, warm cream background */
border-left: 4px solid #ea580c; /* Bold mars-amber border */
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
display: flex;
gap: 15px;
align-items: center;
}
.mission-briefing {
background-color: #f0f2fe; /* Light indigo tinted background */
border-left: 4px solid #4f46e5; /* Vibrant, bold indigo accent */
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
display: flex;
gap: 15px;
align-items: center;
<!--background-color: #fff7ed; /* Soft, warm cream background */-->
<!-- border-left: 4px solid #ea580c; /* Bold mars-amber border */-->
<!-- padding: 15px;-->
<!-- margin: 15px 0;-->
<!-- border-radius: 0 8px 8px 0;-->
<!-- display: flex;-->
<!-- gap: 15px;-->
<!-- align-items: center;-->
}
.rover-thumb {
width: 120px;
height: 120px;
background-color: #cbd5e1;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
font-size: 0.8rem;
color: #475569;
border-radius: 6px;
flex-shrink: 0;
border: 2px dashed #94a3b8;
}
.diagram-container {
text-align: center;
margin: 20px 0;
}
.diagram-img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.code-container {
position: relative;
margin: 15px 0;
}
pre {
background-color: var(--code-bg);
color: #f8f8f2;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95rem;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(255, 255, 255, 0.2);
color: white;
border: none;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
}
.copy-btn:hover {
background-color: var(--secondary-color);
}
.challenge-box {
background-color: var(--zone-bg);
border-left: 4px solid var(--zone-border);
padding: 15px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
}
.challenge-box h4 {
color: #c2410c;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 5px;
}
.extension-box {
background-color: var(--ext-bg);
border: 2px solid var(--ext-border);
padding: 20px;
margin: 30px 0;
border-radius: 12px;
}
.extension-box h3 {
color: #166534;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.alert-box {
background-color: #fee2e2;
border-left: 4px solid #dc2626;
padding: 15px;
margin-top: 15px;
border-radius: 0 4px 4px 0;
font-size: 0.95rem;
color: #991b1b;
}
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
font-size: 0.9rem;
}
th, td {
border: 1px solid #cbd5e1;
padding: 12px;
text-align: left;
}
th {
background-color: #f1f5f9;
color: var(--dark-bg);
}
footer {
text-align: center;
padding: 40px 20px;
color: #64748b;
font-size: 0.9rem;
}
ol {
margin-left: 20px;
padding-left: 5px;
}
ol li {
margin-bottom: 8px;
}
</style>
</head>
<body>
<header>
<span class="badge">INWED 2026 | MICRO:BIT LAB</span>
<h1>Project Rogue Rover: AI Space Mission</h1>
<p>Hack the rover or defend the ship using code and a real-time smart AI model!</p>
</header>
<div class="container">
<div class="resources-box">
<h3>💻 Your Coding Control Center</h3>
<p>We will write our micro:bit code here. Open this link in a new tab:</p>
<p style="margin-top: 5px;">
👉 <strong><a href="https://python.microbit.org/" target="_blank">Open the micro:bit Python Editor</a></strong>
</p>
</div>
<div class="step">
<h2> Your Mission Briefing 🛰️</h2>
<p>Today we are taking command of a deep space exploration rover. Deep space is a dangerous place—asteroids can strike the vehicle, environmental conditions can strain the system, and cyber attacks might try to mess with our steering controls.</p>
<p style="margin-top: 10px;">
Your instructor has created a <strong>Smart AI Shield</strong> to protect our spacecraft.
This AI has studied real space data to learn exactly how a healthy rover sounds, moves and responds.
</p>
<div class="mission-briefing">
<p style="margin-top: 5px;"><strong>Your mission</strong> is to program your <code>micro:bit</code> to feed data to the Smart AI Shield and see if your commands can <strong>slip through (outsmart)</strong> the AI's defenses.
</p>
</div>
<div class="rover-insight">
<!-- <div class="rover-thumb">-->
<img src="assets/NASA_Mars_Rover.jpg"
alt="NASA Mars Opportunity Rover" style="width: 140px; height: auto; border-radius: 6px; flex-shrink: 0; border: 1px solid #cbd5e1;">
<!-- </div>-->
<div>
<h4>🚀 Real-World Engineering Insight</h4>
<p>In space environments, handling physical stress is critical. NASA's famous <strong>Opportunity Rover</strong> landed on Mars in 2004. It was originally built to last 90 days but survived for nearly 15 years! It was finally decommissioned in 2018 after a colossal planetary dust storm completely blocked its solar panels. <a href="https://www.nasa.gov/mission_pages/mer/index.html" target="_blank">Read more about Opportunity's final mission on NASA's website</a>.</p>
</div>
</div>
</div>
<!-- <div class="step">-->
<!-- <h2><span class="step-number">2</span> How the Game Works (The DJ Mixing Deck Analogy) 🎛️</h2>-->
<!-- <p>Don't worry about the complex code running hidden away on the server—think of your micro:bit as a DJ soundboard. You don't need to know how every single internal chip is soldered together, you just need to slide the right dials!</p>-->
<!-- <p style="margin-top: 10px;">Your micro:bit controller will map live physics directly to two main server settings:</p>-->
<!-- <ol>-->
<!-- <li><strong>The Tilt Factor:</strong> Moving or tilting your micro:bit changes its G-force (a measure of acceleration or sudden movement). This is detected by the micro:bit's internal sensor, simulating structural stress or extreme terrain forces acting on the rover.</li>-->
<!-- <li><strong>Button A:</strong> Pressing this button triggers a simulated hack command, trying to slip a bypass signal past the AI.</li>-->
<!-- </ol>-->
<!-- </div>-->
<div class="step">
<h2><span class="step-number">1</span> Programming Your Rover Controller 🕹️</h2>
<p>Copy the code below and paste it completely into your micro:bit Python <a href="https://python.microbit.org/v/3" target="_blank">editor window</a>.</p>
<p><strong>Remember to replace the placeholder team name with your own!</strong></p>
<div class="code-container">
<button class="copy-btn" onclick="copyCode(this)">Copy Code</button>
<pre><code>from microbit import *
# =========================
# CONFIGURATION
# =========================
# Create a name for your team!
# Remove the hash at the beginning of the line below, and replace the placeholder name with your own team name!
# TEAM_ID = "REPLACE_WITH_YOUR_TEAM_NAME"
uart.init(baudrate=115200)
# Prevent spam: only send once per button press
last_a = False
last_b = False
def send_payload(is_attack, value):
msg = TEAM_ID + "," + str(is_attack).lower() + "," + str(value) + "\n"
print(msg)
while True:
x_tilt = accelerometer.get_x() / 500.0
a_pressed = button_a.is_pressed()
b_pressed = button_b.is_pressed()
# =========================
# ATTACK MODE (Button A)
# =========================
if a_pressed and not last_a:
attack_mode = True
# your “hack zone”
mod_value = x_tilt * 1.0
send_payload(attack_mode, mod_value)
# =========================
# NORMAL MODE (Button B)
# =========================
if b_pressed and not last_b:
attack_mode = False
mod_value = x_tilt
send_payload(attack_mode, mod_value)
last_a = a_pressed
last_b = b_pressed
# =========================
# TWO-WAY FEEDBACK
# =========================
if uart.any():
feedback = uart.readline().decode("utf-8", errors="ignore").strip()
# IMPORTANT FIX: handle True/False robustly
if "ai_caught:true" in feedback.lower():
display.show(Image.SKULL)
else:
display.show(Image.YES)
sleep(50)</code></pre>
</div>
</div>
<div class="step">
<h2><span class="step-number">2</span>Load your code onto the micro:bit 🚀</h2>
<p>Ready to deploy your software? Follow this checklist to load your code onto the hardware:</p>
<ol>
<li>Hook your micro:bit up to the computer using the micro-USB cable.</li>
<li>Open the MicroPython editor in your browser (use Chrome or Edge).</li>
<li>Click the purple <strong>Connect</strong> button in your browser editor tool, highlight your device, and click pair.</li>
<!-- <li>Click the <strong>Flash</strong> button.</li>-->
<li>Watch the light on the back of your board to finish blinking — this means your code is installed.</li>
</ol>
<br>
<h2><span class="step-number">3</span>Connect to the live system (Gateway setup) </h2>
<p>Now you need to connect your micro:bit to the AI system:</p>
<ol>
<li>Open <a href="https://rover-ai-shield-22216060250.europe-west2.run.app/gateway" target="_blank">this page</a> in Chrome or Edge.</li>
<li>Click the button: <strong>"Connect micro:bit"</strong>.</li>
<li>Select your device when prompted.</li>
<li>You should now see live activity logs, these are input and output messages in the log window.
<!-- <ul>-->
<!-- <li><strong>"Data link active"</strong></li>-->
<!-- <li>Live input and output messages appearing in the log window</li>-->
<!-- </ul>-->
</li>
</ol>
<p style="margin-top: 10px;">This means your micro:bit is successfully sending data to the AI system.</p>
<div class="diagram-container">
<!-- <h4>Your micro:bit has two distinct operational control modes: </h4>-->
<img src="assets/gateway_messages.png" alt="" class="diagram-img">
</div>
</div>
<div class="step">
<h2><span class="step-number">4</span> How to Play 🎮</h2>
<!-- <p></p>-->
<div class="diagram-container">
<h4>Your micro:bit has two distinct operational control modes: </h4>
<img src="assets/how_to_play.png" alt="<strong>🅰 Button A = ATTACK MODE</strong> and <strong>🅱 Button B = NORMAL MODE</strong>" class="diagram-img">
</div>
<!-- <ul style="margin-top: 10px;">-->
<!-- <li><strong>🅰 Button A = ATTACK MODE</strong>-->
<!-- <ul>-->
<!-- <li>Sends an “exploit attempt” to the AI system.</li>-->
<!-- <li>Counts as a hacking action on the leaderboard dashboard.</li>-->
<!-- <li>High point reward if successful, but carries a high risk of detection.</li>-->
<!-- <li><em>👉 Example: trying to “trick” the on-board AI security shield.</em></li>-->
<!-- </ul>-->
<!-- </li>-->
<!-- <li style="margin-top: 10px;"><strong>🅱 Button B = NORMAL MODE</strong>-->
<!-- <ul>-->
<!-- <li>Sends standard movement telemetry data.</li>-->
<!-- <li>Used for baseline exploration, testing, and debugging.</li>-->
<!-- <li>No hacking attempt recorded by the telemetry filters.</li>-->
<!-- <li><em>👉 Example: simulated safe rover driving behaviour.</em></li>-->
<!-- </ul>-->
<!-- </li>-->
<!-- </ul>-->
</div>
<div class="step">
<h2><span class="step-number">5</span> Play the Challenge 🎮</h2>
<p>Start interacting with the application and see how the AI Shield updates:</p>
<ol>
<li>Leave the micro:bit hardware completely flat on your work surface.</li>
<li>Press <strong>Button B</strong> to send standard, safe movement data.</li>
<li>Tilt the physical micro:bit sideways and observe how the system dynamic metrics react.</li>
<li>Press <strong>Button A</strong> while tilted to attempt an automated "hack" of the AI Shield.</li>
</ol>
<p style="margin-top: 10px;">Watch carefully: The AI may reward your team with high scores, or it could detect your hack and trigger a security shield warning block!</p>
<div class="alert-box" style="background-color: #fef2f2; border-left: 4px solid #dc2626; color: #991b1b; margin-top: 20px; padding: 15px;">
<strong style="font-size: 1.1rem;">💀 AI Feedback System</strong>
<p style="margin-top: 5px;">After each data transmission action, check your physical micro:bit board screen for instantaneous status flags:</p>
<ul style="margin-top: 5px; margin-left: 20px;">
<li><strong>✅ YES (Checkmark):</strong> Safe / accepted input.</li>
<li><strong>💀 SKULL:</strong> The AI detected unusual behaviour. The hack attempt was completely blocked! You're frozen out!</li>
</ul>
</div>
<div class="challenge-box" style="background-color: #fff7ed; border-left: 4px solid #f97316; padding: 15px; margin-top: 20px;">
<h4 style="color: #c2410c;">⚠️ Important System Rule</h4>
<p>Each button press sends <strong>one message only</strong>. Holding a button down will <strong>NOT</strong> spam the server system. You must experiment carefully with your tilt configuration, not just spam inputs blindly.</p>
</div>
</div>
<div class="step">
<h2><span class="step-number">6</span> Check Your Score 📊</h2>
<p>You can track your mission progress live on the central classroom monitor display or locally by viewing the app dashboard:</p>
<p style="margin-top: 10px; margin-bottom: 10px;">
👉 <strong><a href="https://rover-ai-shield-22216060250.europe-west2.run.app" target="_blank">Open Main App Leaderboard (/)</a></strong>
</p>
<p>On this main app monitor screen, you will watch live updates for:</p>
<ul style="margin-top: 5px;">
<li>🏆 <strong>Best Signal Score (Your "Personal Best"):</strong> The most accurate score your team has achieved on a single attempt. <strong>This is the main score that wins the game!</strong></li>
<li>💰 <strong>Current Score (All Your Scores Added Up):</strong> Your running point total. It goes up as you test safe signals, but drops heavily if you trigger a penalty. It is also used as the leaderboard tie-breaker!</li>
<li>⚠️ <strong>Security Alarm Levels:</strong> A live tracker showing how close the AI Shield is to detecting your signal adjustments. Keep an eye on this to stay under the radar!</li>
<li>🚫 <strong>Lockout Countdowns:</strong> Active freeze penalty timers that temporarily pause your team if you break physical limits or alert the AI Shield.</li>
<li>📡 <strong>Override Attempts & Connections:</strong> A live count tracking your team's total telemetry transmissions and manual signal override attempts.</li>
<li>📈 <strong>Real-time Ranking Changes:</strong> Watch rows flash and swap places automatically as teams discover better signals and the leaderboard shifts!</li>
</ul>
<div class="challenge-box">
<h4>💥 Exploration Challenge:</h4>
<p>Which range of values for mod_value result in the highest scores (the safe zone)? Which mod_value numbers cause lockouts and alarms to go off (the danger zone)?</p>
</div>
</div>
<div class="step">
<h2>Live Workshop Troubleshooting Guide</h2>
<div class="alert-box">
<strong>🚨 The micro:bit is flat, but it is showing a permanent SKULL image</strong>
<p style="margin-top: 5px;"><strong>Solution:</strong> The background link might be paused on your computer. Ask your group mentor to quickly restart the gateway script running on the master computer terminal to clear the active server buffer lines.</p>
</div>
<div class="alert-box" style="background-color: #fff7ed; border-color: #f97316; color: #7c2d12;">
<strong>⚠️ I am tilting the board and clicking buttons, but the grid stays completely blank</strong>
<p style="margin-top: 5px;"><strong>Solution:</strong> Your code could be missing a closing loop connection line. Re-verify that the entire <code>while True:</code> script was correctly highlighted and flashed down to the microcontroller from the top web browser compiler tool.</p>
</div>
</div>
<!-- <div class="extension-box">-->
<!-- <h3>⚡ Alternative Engineering Challenge: Tricking the AI Shield</h3>-->
<!-- <p>Finished early and looking to push your software skills further? Let's take on a realistic data-hacking puzzle.</p>-->
<!-- <p style="margin-top: 10px;">Right now, when you tilt the micro:bit sideways, the <code>stress_factor</code> value jumps wildly. The server's AI notices this sudden change and immediately sends a SKULL to your board because the movement looks suspicious.</p>-->
<!-- <p style="margin-top: 10px;"><strong>Your Task:</strong> Modify the code inside your <code>while True:</code> loop to "mask" (hide) or smooth out the data before it gets sent to the laptop. Find a way to alter the math or change the code so that you can tilt the physical board as much as you want, but the data arriving at the server always looks completely flat and safe.</p>-->
<!-- <p style="margin-top: 10px;"><em>Stuck for ideas? Try these software engineering tactics:</em></p>-->
<!-- <ul style="margin-left: 20px; margin-top: 5px;">-->
<!-- <li><strong>The Override:</strong> Can you use an <code>if</code> statement to check if the tilt is too high, and force the <code>stress_factor</code> to stay at a safe, fixed number?</li>-->
<!-- <li><strong>The Blender:</strong> Can you change the formula for <code>stress_factor</code> (e.g., dividing it by a much larger number) so the sudden tilts are too tiny for the AI to notice?</li>-->
<!-- <li><strong>The Absolute Value:</strong> Research the Python <code>abs()</code> function. How could forcing the number to always be positive change how the AI sees your movement?</li>-->
<!-- </ul>-->
<!-- </div>-->
</div>
<footer>
<p></p>
</footer>
<script>
function copyCode(button) {
const pre = button.nextElementSibling;
const code = pre.querySelector('code').innerText;
navigator.clipboard.writeText(code).then(() => {
const originalText = button.textContent;
button.textContent = "Copied! ✓";
button.style.backgroundColor = "#22c55e";
setTimeout(() => {
button.textContent = originalText;
button.style.backgroundColor = "";
}, 2000);
}).catch(err => {
console.error('Failed to copy text contents: ', err);
});
}
</script>
</body>
</html>