Skip to content

Commit 7194027

Browse files
dmccrearydmccreary
committed
Added first skulpt examples and got the mascot images
1 parent 59d754f commit 7194027

14 files changed

Lines changed: 586 additions & 0 deletions

File tree

‎docs/css/mascot.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/* ============================================
2+
Learning Mascot: Monty the Python
3+
Pedagogical agent for CoderDojo TC Python
4+
CoderDojo brand: primary #642580, accent #41BAC1
5+
============================================ */
6+
7+
:root {
8+
--mascot-primary: #642580; /* CoderDojo purple */
9+
--mascot-secondary: #41BAC1; /* CoderDojo teal */
10+
--mascot-bg: #f3eaf8; /* light purple tint */
11+
--mascot-border: #7a2f9e; /* medium purple */
12+
--mascot-size: 90px;
13+
}
14+
15+
/* ---- Shared base: match body font size, not MkDocs' smaller admonition default ---- */
16+
.md-typeset .admonition.mascot-welcome,
17+
.md-typeset .admonition.mascot-thinking,
18+
.md-typeset .admonition.mascot-tip,
19+
.md-typeset .admonition.mascot-warning,
20+
.md-typeset .admonition.mascot-celebration,
21+
.md-typeset .admonition.mascot-encourage,
22+
.md-typeset .admonition.mascot-neutral,
23+
.md-typeset details.mascot-welcome,
24+
.md-typeset details.mascot-thinking,
25+
.md-typeset details.mascot-tip,
26+
.md-typeset details.mascot-warning,
27+
.md-typeset details.mascot-celebration,
28+
.md-typeset details.mascot-encourage,
29+
.md-typeset details.mascot-neutral {
30+
font-size: inherit;
31+
}
32+
33+
/* ---- Welcome (chapter openings) — CoderDojo purple ---- */
34+
.md-typeset .admonition.mascot-welcome,
35+
.md-typeset details.mascot-welcome {
36+
border-color: var(--mascot-primary);
37+
background-color: var(--mascot-bg);
38+
}
39+
.md-typeset .mascot-welcome > .admonition-title,
40+
.md-typeset .mascot-welcome > summary {
41+
background-color: var(--mascot-primary);
42+
color: white;
43+
}
44+
45+
/* ---- Thinking (key concepts) — CoderDojo teal ---- */
46+
.md-typeset .admonition.mascot-thinking,
47+
.md-typeset details.mascot-thinking {
48+
border-color: var(--mascot-secondary);
49+
background-color: #e0f7fa;
50+
}
51+
.md-typeset .mascot-thinking > .admonition-title,
52+
.md-typeset .mascot-thinking > summary {
53+
background-color: var(--mascot-secondary);
54+
color: white;
55+
}
56+
57+
/* ---- Tip (hints) — emerald green (nod to Monty's green scales) ---- */
58+
.md-typeset .admonition.mascot-tip,
59+
.md-typeset details.mascot-tip {
60+
border-color: #2e7d32;
61+
background-color: #e8f5e9;
62+
}
63+
.md-typeset .mascot-tip > .admonition-title,
64+
.md-typeset .mascot-tip > summary {
65+
background-color: #2e7d32;
66+
color: white;
67+
}
68+
69+
/* ---- Warning (common mistakes) — red ---- */
70+
.md-typeset .admonition.mascot-warning,
71+
.md-typeset details.mascot-warning {
72+
border-color: #c62828;
73+
background-color: #ffebee;
74+
}
75+
.md-typeset .mascot-warning > .admonition-title,
76+
.md-typeset .mascot-warning > summary {
77+
background-color: #c62828;
78+
color: white;
79+
}
80+
81+
/* ---- Celebration (achievements) — deep purple with light text ---- */
82+
.md-typeset .admonition.mascot-celebration,
83+
.md-typeset details.mascot-celebration {
84+
border-color: #4a148c;
85+
background-color: #311b4f;
86+
color: #f3e5f5;
87+
}
88+
.md-typeset .mascot-celebration > .admonition-title,
89+
.md-typeset .mascot-celebration > summary {
90+
background-color: #4a148c;
91+
color: white;
92+
}
93+
94+
/* ---- Encourage (difficult content) — blue ---- */
95+
.md-typeset .admonition.mascot-encourage,
96+
.md-typeset details.mascot-encourage {
97+
border-color: #0277bd;
98+
background-color: #e1f5fe;
99+
}
100+
.md-typeset .mascot-encourage > .admonition-title,
101+
.md-typeset .mascot-encourage > summary {
102+
background-color: #0277bd;
103+
color: white;
104+
}
105+
106+
/* ---- Neutral (general purpose) — slate gray ---- */
107+
.md-typeset .admonition.mascot-neutral,
108+
.md-typeset details.mascot-neutral {
109+
border-color: #546e7a;
110+
background-color: #eceff1;
111+
}
112+
.md-typeset .mascot-neutral > .admonition-title,
113+
.md-typeset .mascot-neutral > summary {
114+
background-color: #546e7a;
115+
color: white;
116+
}
117+
118+
/* ---- Title bar: left-align text, hide default MkDocs icon ---- */
119+
.md-typeset [class*="mascot-"] > .admonition-title,
120+
.md-typeset [class*="mascot-"] > summary {
121+
text-align: left;
122+
padding-left: 0.8rem;
123+
}
124+
.md-typeset [class*="mascot-"] > .admonition-title::before,
125+
.md-typeset [class*="mascot-"] > summary::before {
126+
display: none;
127+
}
128+
129+
/* ---- Mascot image floated left inside admonition body ---- */
130+
.mascot-admonition-img {
131+
float: left;
132+
width: var(--mascot-size);
133+
height: var(--mascot-size);
134+
margin: 0 0.6em 0.2em 0;
135+
object-fit: contain;
136+
pointer-events: none;
137+
}

‎docs/css/skulpt.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Skulpt embedded Python editor — shared styles for all Skulpt labs */
2+
3+
#skulpt-lab {
4+
display: flex;
5+
gap: 16px;
6+
flex-wrap: wrap;
7+
margin: 1.5em 0;
8+
font-family: monospace;
9+
}
10+
11+
#editor-container {
12+
display: flex;
13+
flex-direction: column;
14+
flex: 1;
15+
min-width: 280px;
16+
}
17+
18+
#code {
19+
width: 100%;
20+
height: 260px;
21+
padding: 10px;
22+
font-size: 14px;
23+
font-family: 'Courier New', monospace;
24+
border: 2px solid #642580;
25+
border-radius: 6px 6px 0 0;
26+
background: #1e1e2e;
27+
color: #cdd6f4;
28+
resize: vertical;
29+
box-sizing: border-box;
30+
tab-size: 4;
31+
}
32+
33+
#code:focus {
34+
outline: none;
35+
border-color: #41BAC1;
36+
}
37+
38+
#button-row {
39+
display: flex;
40+
gap: 8px;
41+
margin-top: 8px;
42+
}
43+
44+
#run-btn,
45+
#reset-btn {
46+
padding: 8px 20px;
47+
font-size: 15px;
48+
border: none;
49+
border-radius: 4px;
50+
cursor: pointer;
51+
font-weight: bold;
52+
}
53+
54+
#run-btn { background: #642580; color: white; }
55+
#run-btn:hover { background: #7a2f9e; }
56+
#reset-btn { background: #41BAC1; color: white; }
57+
#reset-btn:hover { background: #2fa8b0; }
58+
59+
#output {
60+
margin-top: 8px;
61+
padding: 8px;
62+
min-height: 36px;
63+
background: #f5f5f5;
64+
border: 1px solid #ddd;
65+
border-radius: 4px;
66+
font-size: 13px;
67+
color: #c0392b;
68+
white-space: pre-wrap;
69+
}
70+
71+
#canvas-container {
72+
flex: 0 0 auto;
73+
}
74+
75+
#turtle-target {
76+
width: 400px;
77+
height: 400px;
78+
border: 2px solid #642580;
79+
border-radius: 6px;
80+
background: white;
81+
overflow: hidden;
82+
}

‎docs/img/mascot/celebration.png‎

1.25 MB
Loading

‎docs/img/mascot/encouraging.png‎

1.15 MB
Loading

‎docs/img/mascot/neutral.png‎

1000 KB
Loading

‎docs/img/mascot/thinking.png‎

1.06 MB
Loading

‎docs/img/mascot/tip.png‎

1.18 MB
Loading

‎docs/img/mascot/warning.png‎

1.21 MB
Loading

‎docs/img/mascot/welcome.png‎

1.1 MB
Loading

‎docs/js/skulpt.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* Skulpt embedded Python editor — shared functions for all Skulpt labs */
2+
3+
function outf(text) {
4+
var el = document.getElementById('output');
5+
if (el) el.textContent += text;
6+
}
7+
8+
function builtinRead(x) {
9+
if (Sk.builtinFiles === undefined || Sk.builtinFiles['files'][x] === undefined)
10+
throw "File not found: '" + x + "'";
11+
return Sk.builtinFiles['files'][x];
12+
}
13+
14+
function runSkulpt() {
15+
var target = document.getElementById('turtle-target');
16+
var output = document.getElementById('output');
17+
var code = document.getElementById('code');
18+
if (!target || !output || !code) return;
19+
20+
target.innerHTML = '';
21+
output.textContent = '';
22+
23+
Sk.pre = 'output';
24+
Sk.configure({
25+
output: outf,
26+
read: builtinRead,
27+
__future__: Sk.python3,
28+
killableWhile: true,
29+
killableFor: true,
30+
});
31+
32+
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'turtle-target';
33+
Sk.TurtleGraphics.width = 400;
34+
Sk.TurtleGraphics.height = 400;
35+
36+
Sk.misceval.asyncToPromise(function () {
37+
return Sk.importMainWithBody('<stdin>', false, code.value, true);
38+
}).catch(function (err) {
39+
output.textContent = err.toString();
40+
});
41+
}
42+
43+
function resetSkulpt() {
44+
var code = document.getElementById('code');
45+
var target = document.getElementById('turtle-target');
46+
var output = document.getElementById('output');
47+
if (code && window._skulptOriginalCode !== undefined)
48+
code.value = window._skulptOriginalCode;
49+
if (target) target.innerHTML = '';
50+
if (output) output.textContent = '';
51+
}
52+
53+
function _initSkulptEditor() {
54+
var code = document.getElementById('code');
55+
if (!code) return;
56+
window._skulptOriginalCode = code.value;
57+
code.addEventListener('keydown', function (e) {
58+
if (e.key === 'Tab') {
59+
e.preventDefault();
60+
var s = code.selectionStart;
61+
code.value = code.value.substring(0, s) + ' ' + code.value.substring(code.selectionEnd);
62+
code.selectionStart = code.selectionEnd = s + 4;
63+
}
64+
});
65+
}
66+
67+
if (document.readyState === 'loading') {
68+
document.addEventListener('DOMContentLoaded', _initSkulptEditor);
69+
} else {
70+
_initSkulptEditor();
71+
}

0 commit comments

Comments
 (0)