Zakaria/open-design
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

first-commit
ci / Validate workspace (push) Has been cancelled
Details
landing-page-ci / Validate landing page (push) Has been cancelled
Details
landing-page-deploy / Deploy landing page (push) Has been cancelled
Details
github-metrics / Generate repository metrics SVG (push) Has been cancelled
Details
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
Details

Browse Source
This commit is contained in:
Zakaria
2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/html-ppt/templates/full-decks/course-module/README.md
+8
View File
@@ -0,0 +1,8 @@
# course-module · 教学模块
7-slide teaching module: cover (title + meta), objectives, core concept, worked example, exercise, check-your-understanding (MCQ), summary.
Academic but friendly look: warm off-white paper, Playfair Display display type, a green/terracotta accent pair. A persistent **left sidebar** on content slides lists the module's learning objectives and checks them off as you progress — students always know where they are.
**Use when:** online course modules, lecture handouts, onboarding curricula, workshop units.
**Feel:** a good textbook opened to a chapter — structured, quiet, encouraging.
skills/html-ppt/templates/full-decks/course-module/index.html
+189
View File
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Module 04 · Recursion · CS101</title>
<link rel="stylesheet" href="../../../assets/fonts.css">
<link rel="stylesheet" href="../../../assets/base.css">
<link rel="stylesheet" href="../../../assets/animations/animations.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="tpl-course-module">
<div class="deck">
<!-- 1. Cover -->
<section class="slide full" data-title="Cover">
<p class="kicker">CS 101 · MODULE 04</p>
<h1 class="h1 mt-s">Recursion: solving<br>problems by <em>calling yourself</em>.</h1>
<p class="lede mt-l" style="max-width:62ch">In this module you'll learn why a function that calls itself is not a trick, but the most natural way to describe problems that contain smaller copies of themselves.</p>
<div class="row mt-l" style="gap:16px">
<span class="pill-academic">~ 45 min read</span>
<span class="pill-academic">prereq · functions, if/else</span>
<span class="pill-academic">lang · Python</span>
</div>
<div class="deck-footer"><span>Dr. A. Rivera · Spring 2026</span><span class="slide-number" data-current="1" data-total="7"></span></div>
</section>
<!-- 2. Objectives -->
<section class="slide" data-title="Objectives">
<aside class="sidebar">
<div class="brand">CS 101 · M04</div>
<h5>Learning objectives</h5>
<ul class="obj-list">
<li class="current">Define recursion</li>
<li>Identify a base case</li>
<li>Trace a recursive call</li>
<li>Convert loop ↔ recursion</li>
<li>Recognize when recursion helps</li>
</ul>
<h5>Module progress</h5>
<p class="dim" style="font-size:13px">Page 2 of 7 · ~5 min in</p>
</aside>
<div class="main">
<p class="kicker">OBJECTIVES</p>
<h2 class="h2 mt-s">By the end, you will be able to…</h2>
<div class="stack mt-l">
<div class="concept-box"><h4>① Explain recursion in one sentence.</h4><p class="dim">"A function that solves a problem by calling itself on a smaller version of that problem."</p></div>
<div class="concept-box"><h4>② Write a base case that always terminates.</h4><p class="dim">Every recursive function must have an exit door, or it runs forever.</p></div>
<div class="concept-box"><h4>③ Trace a call stack on paper.</h4><p class="dim">Given <code>fact(4)</code>, draw the stack frames top-to-bottom.</p></div>
<div class="concept-box"><h4>④ Convert a while-loop to a recursive equivalent.</h4><p class="dim">And explain when one is clearer than the other.</p></div>
</div>
</div>
</section>
<!-- 3. Concept -->
<section class="slide" data-title="Concept">
<aside class="sidebar">
<div class="brand">CS 101 · M04</div>
<h5>Learning objectives</h5>
<ul class="obj-list">
<li class="done">Define recursion</li>
<li class="current">Identify a base case</li>
<li>Trace a recursive call</li>
<li>Convert loop ↔ recursion</li>
<li>Recognize when recursion helps</li>
</ul>
<h5>Key terms</h5>
<p class="dim" style="font-size:13px">base case · recursive case · call stack · tail call</p>
</aside>
<div class="main">
<p class="kicker">CORE CONCEPT</p>
<h2 class="h2 mt-s">Two parts, always.</h2>
<p class="lede mt-m">A recursive function has exactly two things inside it: a <b>base case</b> (when to stop) and a <b>recursive case</b> (how to shrink the problem before calling yourself).</p>
<div class="callout">
<b>Rule of thumb.</b> If you can't name the base case out loud, don't write the recursion yet. Draw it on paper first.
</div>
<div class="grid g2 mt-l">
<div class="concept-box"><h4>Base case</h4><p class="dim">The smallest possible input — one the function answers directly, without calling itself.</p><p class="pill-academic">e.g. <b>n == 0</b></p></div>
<div class="concept-box"><h4>Recursive case</h4><p class="dim">Every other input — delegate to a smaller version of the same problem.</p><p class="pill-academic">e.g. <b>n × fact(n-1)</b></p></div>
</div>
</div>
</section>
<!-- 4. Example -->
<section class="slide" data-title="Example">
<aside class="sidebar">
<div class="brand">CS 101 · M04</div>
<h5>Learning objectives</h5>
<ul class="obj-list">
<li class="done">Define recursion</li>
<li class="done">Identify a base case</li>
<li class="current">Trace a recursive call</li>
<li>Convert loop ↔ recursion</li>
<li>Recognize when recursion helps</li>
</ul>
<h5>Try it yourself</h5>
<p class="dim" style="font-size:13px">Open repl.it and run the code on the right. Then try <code>fact(10)</code>.</p>
</aside>
<div class="main">
<p class="kicker">WORKED EXAMPLE</p>
<h2 class="h2 mt-s">Factorial, 7 lines.</h2>
<div class="code mt-m"><pre style="margin:0"><span class="cmt"># fact(n) = n × (n-1) × … × 1, and fact(0) = 1</span>
<span class="kw">def</span> fact(n):
<span class="kw">if</span> n == <span class="str">0</span>: <span class="cmt"># base case</span>
<span class="kw">return</span> <span class="str">1</span>
<span class="kw">return</span> n * fact(n - <span class="str">1</span>) <span class="cmt"># recursive case</span>
<span class="kw">print</span>(fact(<span class="str">4</span>)) <span class="cmt"># → 24</span></pre></div>
<div class="callout">
<b>Trace fact(4).</b> 4 × fact(3) → 4 × (3 × fact(2)) → 4 × 3 × (2 × fact(1)) → 4 × 3 × 2 × 1 × fact(0) → 4 × 3 × 2 × 1 × 1 = <b>24</b>.
</div>
</div>
</section>
<!-- 5. Exercise -->
<section class="slide" data-title="Exercise">
<aside class="sidebar">
<div class="brand">CS 101 · M04</div>
<h5>Learning objectives</h5>
<ul class="obj-list">
<li class="done">Define recursion</li>
<li class="done">Identify a base case</li>
<li class="done">Trace a recursive call</li>
<li class="current">Convert loop ↔ recursion</li>
<li>Recognize when recursion helps</li>
</ul>
<h5>Time</h5>
<p class="dim" style="font-size:13px">~10 minutes · solo</p>
</aside>
<div class="main">
<p class="kicker">EXERCISE 4.1</p>
<h2 class="h2 mt-s">Write <em>sum_to(n)</em>.</h2>
<p class="lede mt-m">Return <code>1 + 2 + … + n</code> using recursion — no loops allowed.</p>
<div class="exercise mt-l">
<p style="margin:0;font-size:18px;color:var(--text-1)"><b>Your task</b></p>
<ol style="color:var(--text-2);line-height:1.8;margin:10px 0 0">
<li>Write the base case. What does <code>sum_to(0)</code> return?</li>
<li>Write the recursive case in terms of <code>sum_to(n - 1)</code>.</li>
<li>Test it: <code>sum_to(5) == 15</code>, <code>sum_to(10) == 55</code>.</li>
<li>Bonus: what happens if you call <code>sum_to(-3)</code>? Fix it.</li>
</ol>
</div>
<p class="dim mt-m" style="font-size:14px">Stuck? Remember: a base case is the smallest input you already know the answer to.</p>
</div>
</section>
<!-- 6. Check understanding -->
<section class="slide" data-title="Check">
<aside class="sidebar">
<div class="brand">CS 101 · M04</div>
<h5>Learning objectives</h5>
<ul class="obj-list">
<li class="done">Define recursion</li>
<li class="done">Identify a base case</li>
<li class="done">Trace a recursive call</li>
<li class="done">Convert loop ↔ recursion</li>
<li class="current">Recognize when recursion helps</li>
</ul>
<h5>Self-assess</h5>
<p class="dim" style="font-size:13px">You should get 3/3.</p>
</aside>
<div class="main">
<p class="kicker">CHECK YOUR UNDERSTANDING</p>
<h2 class="h2 mt-s">Which function will recurse forever?</h2>
<div class="mt-l">
<div class="mcq"><div class="letter">A</div><div><b>def f(n): return 1 if n == 0 else n * f(n - 1)</b><p class="dim" style="font-size:13px;margin:4px 0 0">Base case <code>n == 0</code>, shrinks toward it. Terminates.</p></div></div>
<div class="mcq correct"><div class="letter">B</div><div><b>def f(n): return n + f(n + 1)</b><p class="dim" style="font-size:13px;margin:4px 0 0"><b style="color:var(--accent)">✓ Correct.</b> No base case, and <code>n</code> grows — infinite recursion.</p></div></div>
<div class="mcq"><div class="letter">C</div><div><b>def f(n): return n if n &lt; 2 else f(n - 1) + f(n - 2)</b><p class="dim" style="font-size:13px;margin:4px 0 0">Classic Fibonacci. Base case on <code>n &lt; 2</code>. Terminates.</p></div></div>
</div>
</div>
</section>
<!-- 7. Summary -->
<section class="slide full" data-title="Summary">
<p class="kicker">SUMMARY · MODULE 04</p>
<h1 class="h1 mt-s">You can now…</h1>
<div class="grid g2 mt-l">
<div class="concept-box"><h4>✓ Define recursion</h4><p class="dim">A function that calls itself on a smaller input.</p></div>
<div class="concept-box"><h4>✓ Write a safe base case</h4><p class="dim">Every recursion needs an exit door.</p></div>
<div class="concept-box"><h4>✓ Trace a call stack</h4><p class="dim">You can unwind <code>fact(4)</code> by hand.</p></div>
<div class="concept-box"><h4>✓ Judge when to use it</h4><p class="dim">Trees and self-similar problems → recursion. Flat iteration → loop.</p></div>
</div>
<div class="callout mt-l">
<b>Up next · Module 05.</b> Divide &amp; conquer: merge sort. We'll use everything you just learned — but on lists, not numbers.
</div>
</section>
</div>
<script src="../../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/full-decks/course-module/style.css
+46
View File
@@ -0,0 +1,46 @@
/* course-module — academic but friendly */
.tpl-course-module{
--bg:#fbfaf6;--bg-soft:#f4f1e8;--surface:#ffffff;--surface-2:#f6f3ea;
--border:rgba(60,45,20,.12);--border-strong:rgba(60,45,20,.24);
--text-1:#2a2418;--text-2:#5a5140;--text-3:#8a7f68;
--accent:#2d7d6e;--accent-2:#d88a3a;--accent-3:#c4593f;
--grad:linear-gradient(135deg,#2d7d6e,#4ea893);
--radius:14px;--radius-lg:20px;
--shadow:0 12px 30px rgba(60,45,20,.07);
font-family:'Inter','Noto Sans SC',sans-serif;
}
.tpl-course-module .slide{padding:64px 80px;background:var(--bg);display:grid;grid-template-columns:260px 1fr;gap:56px;align-content:start}
.tpl-course-module .slide.full{grid-template-columns:1fr;display:flex;flex-direction:column;justify-content:center}
.tpl-course-module .sidebar{border-right:1px solid var(--border);padding-right:32px;position:relative}
.tpl-course-module .sidebar .brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--accent)}
.tpl-course-module .sidebar .brand::before{content:"✦ ";color:var(--accent-2)}
.tpl-course-module .sidebar h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin:32px 0 12px}
.tpl-course-module .obj-list{list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-2);line-height:1.5}
.tpl-course-module .obj-list li{padding:8px 0 8px 22px;position:relative;border-bottom:1px dashed var(--border)}
.tpl-course-module .obj-list li::before{content:"○";position:absolute;left:0;top:8px;color:var(--accent)}
.tpl-course-module .obj-list li.done::before{content:"●";color:var(--accent)}
.tpl-course-module .obj-list li.current{color:var(--text-1);font-weight:700}
.tpl-course-module .obj-list li.current::before{content:"▸";color:var(--accent-2)}
.tpl-course-module .main{min-width:0}
.tpl-course-module .h1{font-family:'Playfair Display',serif;font-size:72px;line-height:1.02;font-weight:800;letter-spacing:-.02em;color:var(--text-1)}
.tpl-course-module .h2{font-family:'Playfair Display',serif;font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-.015em;color:var(--text-1)}
.tpl-course-module h3,.tpl-course-module h4{color:var(--text-1)}
.tpl-course-module .kicker{color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.14em}
.tpl-course-module .lede{font-size:20px;color:var(--text-2);line-height:1.7}
.tpl-course-module .callout{border-left:4px solid var(--accent-2);background:var(--surface-2);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin-top:24px}
.tpl-course-module .callout b{color:var(--accent-2)}
.tpl-course-module .concept-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
.tpl-course-module .concept-box h4{margin-top:0;color:var(--accent)}
.tpl-course-module .exercise{background:#fff8ed;border:1.5px dashed var(--accent-2);border-radius:var(--radius);padding:24px 28px}
.tpl-course-module .exercise::before{content:"✎ Exercise";display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent-2);margin-bottom:10px;text-transform:uppercase}
.tpl-course-module .code{background:#2a2418;color:#f4f1e8;border-radius:var(--radius);padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.7;overflow:auto}
.tpl-course-module .code .cmt{color:#8a7f68;font-style:italic}
.tpl-course-module .code .kw{color:#e8a770}
.tpl-course-module .code .str{color:#8ec6b2}
.tpl-course-module .mcq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.tpl-course-module .mcq .letter{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--text-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--text-2)}
.tpl-course-module .mcq.correct{border-color:var(--accent);background:rgba(45,125,110,.06)}
.tpl-course-module .mcq.correct .letter{border-color:var(--accent);background:var(--accent);color:#fff}
.tpl-course-module .pill-academic{display:inline-block;padding:4px 12px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--text-2);font-family:'JetBrains Mono',monospace}
.tpl-course-module .slide.full .h1{font-size:88px}
.tpl-course-module .deck-footer{color:var(--text-3)}