940 lines
37 KiB
HTML
940 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20251218_7310ad.html -->
|
||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Python Loops & Code Tracing</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: white;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.slide {
|
||
display: none;
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 40px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.slide.active {
|
||
display: block;
|
||
animation: fadeIn 0.5s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.slide-title {
|
||
text-align: center;
|
||
color: #2c3e50;
|
||
font-size: 2.5rem;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 3px solid #3498db;
|
||
}
|
||
|
||
.section-title {
|
||
color: #2c3e50;
|
||
font-size: 1.8rem;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.nav-buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30px;
|
||
gap: 15px;
|
||
}
|
||
|
||
.nav-btn {
|
||
background: #3498db;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
background: #2980b9;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
.nav-btn:disabled {
|
||
background: #95a5a6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.nav-indicator {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.indicator-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #bdc3c7;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.indicator-dot.active {
|
||
background: #3498db;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.code-container {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-left: 4px solid #3498db;
|
||
overflow-x: auto;
|
||
font-family: 'Courier New', monospace;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.code-keyword {
|
||
color: #e74c3c;
|
||
}
|
||
|
||
.code-function {
|
||
color: #27ae60;
|
||
}
|
||
|
||
.code-comment {
|
||
color: #7f8c8d;
|
||
}
|
||
|
||
.code-string {
|
||
color: #e67e22;
|
||
}
|
||
|
||
.code-number {
|
||
color: #9b59b6;
|
||
}
|
||
|
||
.trace-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
background: white;
|
||
border: 2px solid #3498db;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.trace-table th, .trace-table td {
|
||
padding: 12px 15px;
|
||
text-align: center;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.trace-table th {
|
||
background: #3498db;
|
||
color: white;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.interactive-area {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
margin: 25px 0;
|
||
border: 2px solid #3498db;
|
||
}
|
||
|
||
.input-group {
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.input-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #2c3e50;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.input-group input, .input-group select {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
border: 2px solid #ddd;
|
||
background: white;
|
||
color: #333;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.run-btn {
|
||
background: #27ae60;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 25px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
margin: 10px 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.run-btn:hover {
|
||
background: #219653;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.live-output {
|
||
background: white;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
margin-top: 15px;
|
||
border: 1px solid #ddd;
|
||
font-family: 'Courier New', monospace;
|
||
white-space: pre-wrap;
|
||
min-height: 100px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.simple-explanation {
|
||
background: #ecf0f1;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 15px 0;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.learning-outcomes {
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 25px;
|
||
margin: 30px 0;
|
||
border-left: 5px solid #3498db;
|
||
}
|
||
|
||
.learning-outcomes h2 {
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.learning-outcomes ul {
|
||
list-style-type: none;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.learning-outcomes li {
|
||
margin-bottom: 12px;
|
||
padding-left: 25px;
|
||
position: relative;
|
||
}
|
||
|
||
.learning-outcomes li:before {
|
||
content: "✓";
|
||
color: #27ae60;
|
||
position: absolute;
|
||
left: 0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.title-slide {
|
||
text-align: center;
|
||
padding: 80px 20px;
|
||
background: linear-gradient(135deg, #3498db, #2c3e50);
|
||
color: white;
|
||
border-radius: 10px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.title-slide h1 {
|
||
font-size: 3.5rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.title-slide p {
|
||
font-size: 1.5rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.title-slide h1 {
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
.nav-buttons {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.slide {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="./Python Loops & Code Tracing_files/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav-indicator">
|
||
<div class="indicator-dot" data-section="0"></div>
|
||
<div class="indicator-dot" data-section="1"></div>
|
||
<div class="indicator-dot" data-section="2"></div>
|
||
<div class="indicator-dot" data-section="3"></div>
|
||
<div class="indicator-dot active" data-section="4"></div>
|
||
<div class="indicator-dot" data-section="5"></div>
|
||
<div class="indicator-dot" data-section="6"></div>
|
||
<div class="indicator-dot" data-section="7"></div>
|
||
</div>
|
||
|
||
<!-- Slide 1: Title Only -->
|
||
<div class="slide" id="section-0">
|
||
<div class="title-slide">
|
||
<h1><i class="fas fa-code"></i> Python Loops & Code Tracing</h1>
|
||
<p>Learn to "read" code like a detective - essential skill for all programmers!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2: Learning Outcomes -->
|
||
<div class="slide" id="section-1">
|
||
<div class="section-title">
|
||
<i class="fas fa-bullseye"></i> What You'll Learn
|
||
</div>
|
||
|
||
<div class="learning-outcomes">
|
||
<ul>
|
||
<li>Understand Python for and while loops (step by step)</li>
|
||
<li>Trace code execution to find hidden bugs</li>
|
||
<li>See why automated tools can't replace human thinking</li>
|
||
<li>Practice with simple, real-world examples</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3: Why Manual Tracing Still Matters -->
|
||
<div class="slide" id="section-2">
|
||
<div class="section-title">
|
||
<i class="fas fa-search"></i> Why Manual Tracing Still Matters
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>Why Loops Matter</h3>
|
||
<p>Loops handle repetitive tasks - like processing lists of data, counting items, or repeating actions until a condition is met.</p>
|
||
<p>Tracing loops helps you understand exactly how data changes with each repetition.</p>
|
||
</div>
|
||
|
||
<h3>Automated Tools vs. Human Thinking</h3>
|
||
<table class="trace-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Tool</th>
|
||
<th>Limitation</th>
|
||
<th>Why You Need Tracing</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Debugger</strong></td>
|
||
<td>Doesn't know where to look</td>
|
||
<td>You need to understand the flow</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Unit Tests</strong></td>
|
||
<td>Miss logic errors in edge cases</td>
|
||
<td>Tests don't explain WHY things are wrong</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Static Analyzer</strong></td>
|
||
<td>Can't understand business logic</td>
|
||
<td>Only you know what code should really do</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Slide 4: Python For Loops -->
|
||
<div class="slide" id="section-3">
|
||
<div class="section-title">
|
||
<i class="fas fa-redo"></i> Python For Loops
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>What is a "sequence"?</h3>
|
||
<p>A sequence is just a list of things:</p>
|
||
<ul>
|
||
<li>Your shopping list: 🍎 Apple, 🍌 Banana, 🍒 Cherry</li>
|
||
<li>Names in your phone contacts</li>
|
||
<li>Numbers from 1 to 10</li>
|
||
</ul>
|
||
<p>A <strong>for loop</strong> goes through each item in your list, one by one.</p>
|
||
</div>
|
||
|
||
<div class="code-container">
|
||
<span class="code-comment"># Simple for loop example</span><br>
|
||
fruits = [<span class="code-string">"apple"</span>, <span class="code-string">"banana"</span>, <span class="code-string">"cherry"</span>]<br>
|
||
<span class="code-keyword">for</span> fruit <span class="code-keyword">in</span> fruits:<br>
|
||
<span class="code-function">print</span>(fruit)<br>
|
||
</div>
|
||
|
||
<div class="interactive-area">
|
||
<h3>Try It Live!</h3>
|
||
<p>Enter items (comma separated):</p>
|
||
<div class="input-group">
|
||
<input type="text" id="for-loop-input" value="apple, banana, cherry, date, egg">
|
||
</div>
|
||
<button class="run-btn" onclick="runForLoopExample()">
|
||
<i class="fas fa-play"></i> Run For Loop
|
||
</button>
|
||
|
||
<div class="live-output" id="for-loop-output"><div>Starting for loop...</div><div>Print: "apple"</div><div>Print: "banana"</div><div>Print: "cherry"</div><div>Print: "date"</div><div>Print: "egg"</div><div>Loop finished! Processed 5 items.</div></div>
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>Real Example: Counting Website Visitors</h3>
|
||
<div class="code-container">
|
||
<span class="code-comment"># Count visitors each hour</span><br>
|
||
hourly_visitors = [<span class="code-number">45</span>, <span class="code-number">12</span>, <span class="code-number">78</span>, <span class="code-number">23</span>, <span class="code-number">56</span>, <span class="code-number">89</span>, <span class="code-number">34</span>]<br>
|
||
total_visitors = <span class="code-number">0</span><br><br>
|
||
|
||
<span class="code-keyword">for</span> visitors <span class="code-keyword">in</span> hourly_visitors:<br>
|
||
total_visitors += visitors<br>
|
||
<span class="code-function">print</span>(<span class="code-string">"Print:"</span>, visitors, <span class="code-string">"visitors → Total:"</span>, total_visitors)<br>
|
||
</div>
|
||
<button class="run-btn" onclick="runVisitorExample()" style="margin-top: 10px;">
|
||
<i class="fas fa-users"></i> Run Visitor Counter
|
||
</button>
|
||
<div class="live-output" id="visitor-output"><div>Counting website visitors by hour...</div><div>Print 1: 45 visitors → Total: 45</div><div>Print 2: 12 visitors → Total: 57</div><div>Print 3: 78 visitors → Total: 135</div><div>Print 4: 23 visitors → Total: 158</div><div>Print 5: 56 visitors → Total: 214</div><div>Print 6: 89 visitors → Total: 303</div><div>Print 7: 34 visitors → Total: 337</div><div>Total visitors today: 337</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 5: Python While Loops -->
|
||
<div class="slide active" id="section-4">
|
||
<div class="section-title">
|
||
<i class="fas fa-sync-alt"></i> Python While Loops
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>While = "Keep doing this as long as..."</h3>
|
||
<p>Examples:</p>
|
||
<ul>
|
||
<li>Keep cooking while the timer is running ⏱️</li>
|
||
<li>Keep driving while you have gas ⛽</li>
|
||
<li>Keep counting while number is less than 10 🔢</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="code-container">
|
||
<span class="code-comment"># Simple while loop example</span><br>
|
||
counter = <span class="code-number">1</span><br>
|
||
<span class="code-keyword">while</span> counter <= <span class="code-number">5</span>:<br>
|
||
<span class="code-function">print</span>(<span class="code-string">"Counting:"</span>, counter)<br>
|
||
counter += <span class="code-number">1</span><br>
|
||
</div>
|
||
|
||
<div class="interactive-area">
|
||
<h3>Try a While Loop</h3>
|
||
<div class="input-group">
|
||
<label for="while-limit">Count up to:</label>
|
||
<input type="number" id="while-limit" value="5" min="1" max="20">
|
||
</div>
|
||
<button class="run-btn" onclick="runWhileLoopExample()">
|
||
<i class="fas fa-play"></i> Run While Loop
|
||
</button>
|
||
|
||
<div class="live-output" id="while-loop-output">
|
||
<em>Counting will happen step by step...</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 6: Tracing Code - Step by Step -->
|
||
<div class="slide" id="section-5">
|
||
<div class="section-title">
|
||
<i class="fas fa-magnifying-glass"></i> Tracing Code - Step by Step
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>What is Tracing?</h3>
|
||
<p>Tracing is like reading a recipe while cooking:</p>
|
||
<ol>
|
||
<li>Read the first instruction</li>
|
||
<li>Do it</li>
|
||
<li>Check what changed</li>
|
||
<li>Write it down</li>
|
||
<li>Repeat for next instruction</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>Real Bug Hunt: Finding the Smallest Number</h3>
|
||
<p>The Task: Find the smallest number in a list</p>
|
||
<p>Given: [24, 16, 35, 42, 7] → Should find: 7</p>
|
||
</div>
|
||
|
||
<div class="code-container">
|
||
items = [<span class="code-number">24</span>, <span class="code-number">16</span>, <span class="code-number">35</span>, <span class="code-number">42</span>, <span class="code-number">7</span>]<br>
|
||
lowest = items[<span class="code-number">0</span>]<br><br>
|
||
|
||
<span class="code-keyword">for</span> current <span class="code-keyword">in</span> <span class="code-function">range</span>(<span class="code-number">1</span>, <span class="code-function">len</span>(items)):<br>
|
||
<span class="code-keyword">if</span> lowest < items[current]:<br>
|
||
lowest = items[current]<br><br>
|
||
|
||
<span class="code-function">print</span>(<span class="code-string">"Lowest number:"</span>, lowest)
|
||
</div>
|
||
|
||
<h3>Let's Trace Through to Find the Bug</h3>
|
||
<table class="trace-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Step</th>
|
||
<th>lowest</th>
|
||
<th>Condition</th>
|
||
<th>[0]</th>
|
||
<th>[1]</th>
|
||
<th>[2]</th>
|
||
<th>[3]</th>
|
||
<th>[4]</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="bug-trace-table">
|
||
<tr>
|
||
<td>1</td>
|
||
<td>24</td>
|
||
<td></td>
|
||
<td>24</td>
|
||
<td>16</td>
|
||
<td>35</td>
|
||
<td>42</td>
|
||
<td>7</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<button class="run-btn" onclick="traceBugStepByStep()">
|
||
<i class="fas fa-search"></i> Trace Step by Step
|
||
</button>
|
||
|
||
<div class="interactive-area">
|
||
<h3>Find and Fix the Bug</h3>
|
||
<p>The code doesn't find the correct smallest number. Can you figure out why?</p>
|
||
<p>Look at the trace table above. What should the comparison operator be?</p>
|
||
|
||
<div class="input-group">
|
||
<label>Select the correct comparison operator:</label>
|
||
<select id="bug-fix">
|
||
<option value="<">less than (<)</option>
|
||
<option value=">">greater than (>)</option>
|
||
<option value="==">equals (==)</option>
|
||
<option value="!=">not equals (!=)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="run-btn" onclick="testBugFix()">
|
||
<i class="fas fa-check"></i> Test Your Fix
|
||
</button>
|
||
|
||
<div class="live-output" id="bug-fix-output"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 7: AI Learning & Tracing -->
|
||
<div class="slide" id="section-6">
|
||
<div class="section-title">
|
||
<i class="fas fa-robot"></i> AI Learning & Tracing
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>How AI Learns from Mistakes</h3>
|
||
<p>Even AI systems need debugging! When an AI makes wrong predictions, we need to trace through its "thinking" to find why.</p>
|
||
</div>
|
||
|
||
<div class="simple-explanation">
|
||
<h3>The Cat/Dog Classifier Problem</h3>
|
||
<p>Imagine an AI that should tell cats from dogs, but it keeps saying cats with collars are dogs.</p>
|
||
<p>Why? Let's trace through what it learned:</p>
|
||
</div>
|
||
|
||
<div class="code-container">
|
||
<span class="code-comment"># Simplified AI thinking process</span><br>
|
||
<span class="code-keyword">def</span> <span class="code-function">check_animal</span>(features):<br>
|
||
<span class="code-comment"># features: [pointy_ears, fluffy_tail, has_collar]</span><br>
|
||
<span class="code-comment"># weights: how important each feature is</span><br>
|
||
weights_for_cat = [<span class="code-number">0.8</span>, <span class="code-number">0.6</span>, <span class="code-number">-0.2</span>]<br>
|
||
weights_for_dog = [<span class="code-number">0.3</span>, <span class="code-number">0.7</span>, <span class="code-number">0.9</span>]<br>
|
||
<br>
|
||
cat_score = <span class="code-number">0</span><br>
|
||
dog_score = <span class="code-number">0</span><br>
|
||
<br>
|
||
<span class="code-keyword">for</span> i <span class="code-keyword">in</span> <span class="code-function">range</span>(<span class="code-function">len</span>(features)):<br>
|
||
cat_score += features[i] * weights_for_cat[i]<br>
|
||
dog_score += features[i] * weights_for_dog[i]<br>
|
||
<br>
|
||
<span class="code-keyword">if</span> cat_score > dog_score:<br>
|
||
<span class="code-keyword">return</span> <span class="code-string">"Cat"</span><br>
|
||
<span class="code-keyword">else</span>:<br>
|
||
<span class="code-keyword">return</span> <span class="code-string">"Dog"</span>
|
||
</div>
|
||
|
||
<div class="interactive-area">
|
||
<h3>Test the AI Classifier</h3>
|
||
<p>Enter features (1 = yes, 0 = no):</p>
|
||
<div class="input-group">
|
||
<label>Pointy ears? <input type="number" id="pointy-ears" value="1" min="0" max="1"></label>
|
||
<label>Fluffy tail? <input type="number" id="fluffy-tail" value="1" min="0" max="1"></label>
|
||
<label>Has collar? <input type="number" id="has-collar" value="1" min="0" max="1"></label>
|
||
</div>
|
||
<button class="run-btn" onclick="runAIClassifier()">
|
||
<i class="fas fa-brain"></i> Check Animal
|
||
</button>
|
||
|
||
<div class="live-output" id="ai-output"></div>
|
||
|
||
<h3 style="margin-top: 20px;">Tracing the AI Classification</h3>
|
||
<table class="trace-table" id="ai-trace-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Step</th>
|
||
<th>Feature</th>
|
||
<th>Value</th>
|
||
<th>Cat Weight</th>
|
||
<th>Dog Weight</th>
|
||
<th>Cat Contribution</th>
|
||
<th>Dog Contribution</th>
|
||
<th>Cat Score</th>
|
||
<th>Dog Score</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="ai-trace-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 8: Summary -->
|
||
<div class="slide" id="section-7">
|
||
<div class="section-title">
|
||
<i class="fas fa-graduation-cap"></i> What You've Learned
|
||
</div>
|
||
|
||
<div class="learning-outcomes">
|
||
<ul>
|
||
<li>For loops go through lists item by item</li>
|
||
<li>While loops keep going while condition is true</li>
|
||
<li>Tracing means following code step by step like a detective</li>
|
||
<li>Bugs hide in logic - automated tools can't always find them</li>
|
||
<li>You're the detective - tracing helps you understand WHY code works (or doesn't)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-buttons">
|
||
<button class="nav-btn" id="prev-btn" onclick="prevSection()">
|
||
<i class="fas fa-arrow-left"></i> Previous
|
||
</button>
|
||
<button class="nav-btn" id="next-btn" onclick="nextSection()">Next <i class="fas fa-arrow-right"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Navigation
|
||
let currentSection = 0;
|
||
const totalSections = 8;
|
||
|
||
function updateNavigation() {
|
||
document.querySelectorAll('.indicator-dot').forEach((dot, index) => {
|
||
dot.classList.toggle('active', index === currentSection);
|
||
});
|
||
|
||
document.querySelectorAll('.slide').forEach((slide, index) => {
|
||
slide.classList.toggle('active', index === currentSection);
|
||
});
|
||
|
||
document.getElementById('prev-btn').disabled = currentSection === 0;
|
||
document.getElementById('next-btn').disabled = currentSection === totalSections - 1;
|
||
|
||
if (currentSection === totalSections - 1) {
|
||
document.getElementById('next-btn').innerHTML = 'Finish <i class="fas fa-flag-checkered"></i>';
|
||
} else {
|
||
document.getElementById('next-btn').innerHTML = 'Next <i class="fas fa-arrow-right"></i>';
|
||
}
|
||
}
|
||
|
||
function nextSection() {
|
||
if (currentSection < totalSections - 1) {
|
||
currentSection++;
|
||
updateNavigation();
|
||
}
|
||
}
|
||
|
||
function prevSection() {
|
||
if (currentSection > 0) {
|
||
currentSection--;
|
||
updateNavigation();
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('.indicator-dot').forEach((dot, index) => {
|
||
dot.addEventListener('click', () => {
|
||
currentSection = index;
|
||
updateNavigation();
|
||
});
|
||
});
|
||
|
||
// For Loop Example with Live Output
|
||
async function runForLoopExample() {
|
||
const input = document.getElementById('for-loop-input').value;
|
||
const items = input.split(',').map(item => item.trim()).filter(item => item);
|
||
const output = document.getElementById('for-loop-output');
|
||
output.innerHTML = '';
|
||
|
||
output.innerHTML += '<div>Starting for loop...</div>';
|
||
await delay(500);
|
||
|
||
for (let i = 0; i < items.length; i++) {
|
||
output.innerHTML += `<div>Print: "${items[i]}"</div>`;
|
||
output.scrollTop = output.scrollHeight;
|
||
await delay(600);
|
||
}
|
||
|
||
output.innerHTML += `<div>Loop finished! Processed ${items.length} items.</div>`;
|
||
}
|
||
|
||
// Visitor Counter Example
|
||
async function runVisitorExample() {
|
||
const hourly_visitors = [45, 12, 78, 23, 56, 89, 34];
|
||
let total_visitors = 0;
|
||
const output = document.getElementById('visitor-output');
|
||
output.innerHTML = '';
|
||
|
||
output.innerHTML += '<div>Counting website visitors by hour...</div>';
|
||
await delay(500);
|
||
|
||
for (let i = 0; i < hourly_visitors.length; i++) {
|
||
total_visitors += hourly_visitors[i];
|
||
output.innerHTML += `<div>Print ${i + 1}: ${hourly_visitors[i]} visitors → Total: ${total_visitors}</div>`;
|
||
output.scrollTop = output.scrollHeight;
|
||
await delay(700);
|
||
}
|
||
|
||
output.innerHTML += `<div>Total visitors today: ${total_visitors}</div>`;
|
||
}
|
||
|
||
// While Loop Example with Live Output
|
||
async function runWhileLoopExample() {
|
||
const limit = parseInt(document.getElementById('while-limit').value) || 5;
|
||
const output = document.getElementById('while-loop-output');
|
||
output.innerHTML = '';
|
||
|
||
let counter = 1;
|
||
|
||
output.innerHTML += '<div>Starting while loop...</div>';
|
||
await delay(500);
|
||
|
||
while (counter <= limit) {
|
||
output.innerHTML += `<div>Counter = ${counter} (${counter} <= ${limit} is true)</div>`;
|
||
output.innerHTML += `<div>Print: "Counting: ${counter}"</div>`;
|
||
output.scrollTop = output.scrollHeight;
|
||
await delay(700);
|
||
counter++;
|
||
}
|
||
|
||
output.innerHTML += `<div>Loop finished! Counter is now ${counter}</div>`;
|
||
}
|
||
|
||
// Bug Tracing Step by Step
|
||
async function traceBugStepByStep() {
|
||
const items = [24, 16, 35, 42, 7];
|
||
const tableBody = document.getElementById('bug-trace-table');
|
||
|
||
// Clear existing rows except first
|
||
while (tableBody.rows.length > 1) {
|
||
tableBody.deleteRow(1);
|
||
}
|
||
|
||
let lowest = items[0];
|
||
|
||
for (let i = 1; i < items.length; i++) {
|
||
const current = items[i];
|
||
const condition = lowest < current;
|
||
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td>${i + 1}</td>
|
||
<td>${lowest}</td>
|
||
<td>${lowest} < ${current} = ${condition}</td>
|
||
<td>${i === 1 ? '' : items[0]}</td>
|
||
<td>${i === 1 ? '' : items[1]}</td>
|
||
<td>${i === 1 ? '' : items[2]}</td>
|
||
<td>${i === 1 ? '' : items[3]}</td>
|
||
<td>${i === 1 ? '' : items[4]}</td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
|
||
if (condition) {
|
||
lowest = current;
|
||
}
|
||
|
||
await delay(1000);
|
||
}
|
||
|
||
// Add final row
|
||
const finalRow = document.createElement('tr');
|
||
finalRow.innerHTML = `
|
||
<td colspan="8">Final result: ${lowest} (Expected: 7)</td>
|
||
`;
|
||
tableBody.appendChild(finalRow);
|
||
}
|
||
|
||
// Test Bug Fix
|
||
async function testBugFix() {
|
||
const operator = document.getElementById('bug-fix').value;
|
||
const items = [24, 16, 35, 42, 7];
|
||
let lowest = items[0];
|
||
|
||
const output = document.getElementById('bug-fix-output');
|
||
output.innerHTML = '';
|
||
|
||
output.innerHTML += '<div>Testing with operator: ' + operator + '</div>';
|
||
await delay(500);
|
||
|
||
for (let i = 1; i < items.length; i++) {
|
||
let shouldUpdate = false;
|
||
|
||
if (operator === '<' && lowest < items[i]) {
|
||
shouldUpdate = true;
|
||
} else if (operator === '>' && lowest > items[i]) {
|
||
shouldUpdate = true;
|
||
} else if (operator === '==' && lowest == items[i]) {
|
||
shouldUpdate = true;
|
||
} else if (operator === '!=' && lowest != items[i]) {
|
||
shouldUpdate = true;
|
||
}
|
||
|
||
output.innerHTML += `<div>Checking ${items[i]}: ${lowest} ${operator} ${items[i]} = ${shouldUpdate}</div>`;
|
||
|
||
if (shouldUpdate) {
|
||
lowest = items[i];
|
||
output.innerHTML += `<div>Updated lowest to ${lowest}</div>`;
|
||
}
|
||
|
||
await delay(700);
|
||
}
|
||
|
||
const correctAnswer = 7;
|
||
|
||
if (lowest === correctAnswer) {
|
||
output.innerHTML += `<div>Correct! Found the smallest number: ${lowest}</div>`;
|
||
} else {
|
||
output.innerHTML += `<div>Incorrect. Found: ${lowest} (should be ${correctAnswer})</div>`;
|
||
}
|
||
}
|
||
|
||
// AI Classifier with Tracing Table
|
||
async function runAIClassifier() {
|
||
const pointyEars = parseInt(document.getElementById('pointy-ears').value) || 0;
|
||
const fluffyTail = parseInt(document.getElementById('fluffy-tail').value) || 0;
|
||
const hasCollar = parseInt(document.getElementById('has-collar').value) || 0;
|
||
|
||
const features = [pointyEars, fluffyTail, hasCollar];
|
||
const featureNames = ["Pointy ears", "Fluffy tail", "Has collar"];
|
||
const weightsForCat = [0.8, 0.6, -0.2];
|
||
const weightsForDog = [0.3, 0.7, 0.9];
|
||
|
||
const output = document.getElementById('ai-output');
|
||
const traceBody = document.getElementById('ai-trace-body');
|
||
|
||
output.innerHTML = '';
|
||
traceBody.innerHTML = '';
|
||
|
||
output.innerHTML += '<div>Analyzing animal features...</div>';
|
||
await delay(500);
|
||
|
||
let catScore = 0;
|
||
let dogScore = 0;
|
||
|
||
output.innerHTML += `<div>Features: [${features.join(', ')}]</div>`;
|
||
await delay(600);
|
||
|
||
for (let i = 0; i < features.length; i++) {
|
||
const catContribution = features[i] * weightsForCat[i];
|
||
const dogContribution = features[i] * weightsForDog[i];
|
||
|
||
catScore += catContribution;
|
||
dogScore += dogContribution;
|
||
|
||
// Add row to trace table
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td>${i + 1}</td>
|
||
<td>${featureNames[i]}</td>
|
||
<td>${features[i]}</td>
|
||
<td>${weightsForCat[i]}</td>
|
||
<td>${weightsForDog[i]}</td>
|
||
<td>${catContribution.toFixed(2)}</td>
|
||
<td>${dogContribution.toFixed(2)}</td>
|
||
<td>${catScore.toFixed(2)}</td>
|
||
<td>${dogScore.toFixed(2)}</td>
|
||
`;
|
||
traceBody.appendChild(row);
|
||
|
||
output.innerHTML += `<div>${featureNames[i]}: ${features[i]} × ${weightsForCat[i]} = ${catContribution.toFixed(2)} (cat)</div>`;
|
||
output.innerHTML += `<div>${featureNames[i]}: ${features[i]} × ${weightsForDog[i]} = ${dogContribution.toFixed(2)} (dog)</div>`;
|
||
await delay(800);
|
||
}
|
||
|
||
output.innerHTML += `<div>Cat total score: ${catScore.toFixed(2)}</div>`;
|
||
output.innerHTML += `<div>Dog total score: ${dogScore.toFixed(2)}</div>`;
|
||
await delay(600);
|
||
|
||
const result = catScore > dogScore ? "Cat 🐱" : "Dog 🐶";
|
||
output.innerHTML += `<div>Prediction: ${result}</div>`;
|
||
}
|
||
|
||
// Utility function for delays
|
||
function delay(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms));
|
||
}
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
updateNavigation();
|
||
});
|
||
</script>
|
||
|
||
</body></html> |