Added starter template
This commit is contained in:
@@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20251215_dacfff.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>API Exercises Starter Template</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>API Exercises</h1>
|
||||
|
||||
<h2>Task 1: GET All Users (READ)</h2>
|
||||
<button onclick="
|
||||
fetch('https://api.techshare.cc/api/users')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('First 3 users:', data.slice(0, 3));
|
||||
alert('Check console for first 3 users!');
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
">
|
||||
Get Users
|
||||
</button>
|
||||
|
||||
<h2>Task 2: GET Single User (READ)</h2>
|
||||
<button onclick="
|
||||
fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Single user:', data);
|
||||
alert('Check console for single user data!');
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
">
|
||||
Get User by _id
|
||||
</button>
|
||||
|
||||
<h2>Task 3: GET All Posts (READ)</h2>
|
||||
<button onclick="
|
||||
fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const titles = data.map(post => post.title);
|
||||
console.log('First 5 titles:', titles.slice(0, 5));
|
||||
alert('Check console for first 5 post titles!');
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
">
|
||||
Get Posts (Titles Only)
|
||||
</button>
|
||||
|
||||
<h2>Task 4: CREATE a Post (CREATE)</h2>
|
||||
<button onclick="
|
||||
fetch('https://api.techshare.cc/api/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: 'My First API Post',
|
||||
content: 'Learning APIs is fun!',
|
||||
userId: 1,
|
||||
published: true
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('New post created:', data);
|
||||
alert('Post created! Check console for details.');
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
">
|
||||
Create Post
|
||||
</button>
|
||||
|
||||
<h2>Bonus: Filter Posts by User (READ)</h2>
|
||||
<button onclick="
|
||||
fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(posts => {
|
||||
const userPosts = posts.filter(post => post.userId === 1);
|
||||
console.log('Posts by user 1:', userPosts);
|
||||
alert('Check console for posts by user 1!');
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
">
|
||||
Filter Posts by User
|
||||
</button>
|
||||
|
||||
<script>
|
||||
// Optional: You could move the functions here for cleaner separation
|
||||
// But keeping them in onclick handlers as requested
|
||||
console.log('API Exercises Template Ready!');
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
364
API Explorer - Starter Template.html
Normal file
364
API Explorer - Starter Template.html
Normal file
@@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20251218_ab3325%20(6).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>API Explorer - Starter Template</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #4361ee;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.api-url {
|
||||
background: #e8f4fd;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 1.1rem;
|
||||
border-left: 4px solid #4361ee;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 25px 0;
|
||||
border-left: 4px solid #4cc9f0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #3a0ca3;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #4361ee;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.task {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin: 15px 0;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #4361ee;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
margin: 5px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #3a0ca3;
|
||||
}
|
||||
|
||||
.output-area {
|
||||
background: #2d2d2d;
|
||||
color: #f8f8f2;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
min-height: 80px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.note {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
padding: 12px;
|
||||
margin: 15px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.note strong {
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
background: #e8f5e9;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #4caf50;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
margin: 10px 0;
|
||||
border-left: 3px solid #4361ee;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
background: #e8f4fd;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.explanation code {
|
||||
background: #e3f2fd;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input-group input[type="text"],
|
||||
.input-group input[type="number"],
|
||||
.input-group textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.input-group textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.checkbox-group input {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🚀 API Explorer</h1>
|
||||
<p class="subtitle">Learn to work with APIs using Fetch API</p>
|
||||
|
||||
<div class="api-url">
|
||||
🌐 Your API Base URL: <strong>https://api.techshare.cc/api</strong>
|
||||
</div>
|
||||
|
||||
<!-- Section 1: Basic Tasks -->
|
||||
<div class="section">
|
||||
<h2>🎮 Basic Tasks</h2>
|
||||
|
||||
<!-- Task 1 -->
|
||||
<div class="task">
|
||||
<h3>📋 Task 1: Get All Users</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/users')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('users').textContent = JSON.stringify(data);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>JSON.stringify(data)</strong> converts JavaScript objects to readable text.
|
||||
</div>
|
||||
<button onclick="runTask1()">Run Task 1</button>
|
||||
<div class="output-area" id="users">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
<!-- Task 2 -->
|
||||
<div class="task">
|
||||
<h3>👤 Task 2: Get a Specific User</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('user').textContent = JSON.stringify(data);
|
||||
})</div>
|
||||
<button onclick="runTask2()">Run Task 2</button>
|
||||
<div class="output-area" id="user">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
<!-- Task 3 -->
|
||||
<div class="task">
|
||||
<h3>📝 Task 3: Get All Posts</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const titles = data.map(post => post.title);
|
||||
document.getElementById('posts').textContent = JSON.stringify(titles);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>.map()</strong> extracts just the title from each post.
|
||||
</div>
|
||||
<button onclick="runTask3()">Run Task 3</button>
|
||||
<div class="output-area" id="posts">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
<!-- Task 4 -->
|
||||
<div class="task">
|
||||
<h3>➕ Task 4: Create a New Post</h3>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="postTitle">Post Title:</label>
|
||||
<input type="text" id="postTitle" value="My First API Post">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="postContent">Post Content:</label>
|
||||
<textarea id="postContent">Learning APIs is fun!</textarea>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="postPublished" checked="">
|
||||
<label for="postPublished">Published</label>
|
||||
</div>
|
||||
|
||||
<div class="code-block">const title = document.getElementById('postTitle').value;
|
||||
const content = document.getElementById('postContent').value;
|
||||
const published = document.getElementById('postPublished').checked;
|
||||
|
||||
fetch('https://api.techshare.cc/api/posts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: title,
|
||||
content: content,
|
||||
userId: '693c0a4357cce1118095f635',
|
||||
published: published
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('create').textContent = JSON.stringify(data);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>method: 'POST'</strong> creates new data.<br>
|
||||
<strong>userId</strong> is hardcoded to user 693c0a4357cce1118095f635.
|
||||
</div>
|
||||
<button onclick="runTask4()">Run Task 4</button>
|
||||
<div class="output-area" id="create">Results will appear here...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Bonus Challenges -->
|
||||
<div class="section">
|
||||
<h2>💡 Bonus Challenges</h2>
|
||||
|
||||
<div class="task">
|
||||
<h3>🔍 Challenge 1: Filter Posts by User ID</h3>
|
||||
<p>First, run Task 2 to see user details. Note the <code>id</code> field (not <code>_id</code>).</p>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="userIdInput">Enter User ID to filter by:</label>
|
||||
<input type="number" id="userIdInput" value="1">
|
||||
</div>
|
||||
|
||||
<div class="code-block">const userId = document.getElementById('userIdInput').value;
|
||||
|
||||
fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(posts => {
|
||||
const userPosts = posts.filter(post => post.userId === Number(userId));
|
||||
document.getElementById('filter').textContent =
|
||||
'Posts by user ID ' + userId + ': ' + JSON.stringify(userPosts);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>Number(userId)</strong> converts text to number for comparison.<br>
|
||||
Posts use <code>userId</code> (like 1, 2, 3), not MongoDB <code>_id</code>.
|
||||
</div>
|
||||
<button onclick="runChallenge1()">Run Challenge 1</button>
|
||||
<div class="output-area" id="filter">Results will appear here...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<strong>💡 Important:</strong>
|
||||
User ID in posts is different from MongoDB <code>_id</code>.
|
||||
Check Task 2 results: user <code>693c0a4357cce1118095f635</code> has <code>id: "1"</code>.
|
||||
So posts with <code>userId: 1</code> belong to this user.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTask1() {
|
||||
// Students type their code here
|
||||
}
|
||||
|
||||
function runTask2() {
|
||||
// Students type their code here
|
||||
}
|
||||
|
||||
function runTask3() {
|
||||
// Students type their code here
|
||||
}
|
||||
|
||||
function runTask4() {
|
||||
// Students type their code here
|
||||
}
|
||||
|
||||
function runChallenge1() {
|
||||
// Students type their code here
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('API Explorer Ready!');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
330
Presentation API Explorer - Starter Template.html
Normal file
330
Presentation API Explorer - Starter Template.html
Normal file
@@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20251218_ab3325%20(4).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>API Explorer - Starter Template</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #4361ee;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.api-url {
|
||||
background: #e8f4fd;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 1.1rem;
|
||||
border-left: 4px solid #4361ee;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 25px 0;
|
||||
border-left: 4px solid #4cc9f0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #3a0ca3;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #4361ee;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
.task {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin: 15px 0;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #4361ee;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
margin: 5px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #3a0ca3;
|
||||
}
|
||||
|
||||
.output-area {
|
||||
background: #2d2d2d;
|
||||
color: #f8f8f2;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
min-height: 80px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.note {
|
||||
background: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
padding: 12px;
|
||||
margin: 15px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.note strong {
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
background: #e8f5e9;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #4caf50;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
margin: 10px 0;
|
||||
border-left: 3px solid #4361ee;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
background: #e8f4fd;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.explanation code {
|
||||
background: #e3f2fd;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🚀 API Explorer</h1>
|
||||
<p class="subtitle">Learn to work with APIs using Fetch API</p>
|
||||
|
||||
<div class="api-url">
|
||||
🌐 Your API Base URL: <strong>https://api.techshare.cc/api</strong>
|
||||
</div>
|
||||
|
||||
<!-- Section 1: Basic Tasks -->
|
||||
<div class="section">
|
||||
<h2>🎮 Basic Tasks</h2>
|
||||
|
||||
<!-- Task 1 -->
|
||||
<div class="task">
|
||||
<h3>📋 Task 1: Get All Users</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/users')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('output_users').textContent = JSON.stringify(data);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>JSON.stringify(data)</strong> converts JavaScript objects to readable text.
|
||||
</div>
|
||||
<button onclick="runTask1()">Run Task 1</button>
|
||||
<div class="output-area" id="output_users">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
<!-- Task 2 -->
|
||||
<div class="task">
|
||||
<h3>👤 Task 2: Get a Specific User</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('output_user').textContent = JSON.stringify(data);
|
||||
})</div>
|
||||
<button onclick="runTask2()">Run Task 2</button>
|
||||
<div class="output-area" id="output_user">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
<!-- Task 3 -->
|
||||
<div class="task">
|
||||
<h3>📝 Task 3: Get All Posts</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const titles = data.map(post => post.title);
|
||||
document.getElementById('output_posts').textContent = JSON.stringify(titles);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>.map()</strong> extracts just the title from each post.
|
||||
</div>
|
||||
<button onclick="runTask3()">Run Task 3</button>
|
||||
<div class="output-area" id="output_posts">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
<!-- Task 4 -->
|
||||
<div class="task">
|
||||
<h3>➕ Task 4: Create a New Post</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/posts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: 'My First API Post',
|
||||
content: 'Learning APIs is fun!',
|
||||
userId: 1,
|
||||
published: true
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('output_create').textContent = JSON.stringify(data);
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>method: 'POST'</strong> creates new data. <strong>body:</strong> sends our data to the API.
|
||||
</div>
|
||||
<button onclick="runTask4()">Run Task 4</button>
|
||||
<div class="output-area" id="output_create">Results will appear here...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Bonus Challenges -->
|
||||
<div class="section">
|
||||
<h2>💡 Bonus Challenges</h2>
|
||||
|
||||
<div class="task">
|
||||
<h3>🔍 Challenge: Filter Posts by User</h3>
|
||||
<div class="code-block">fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(posts => {
|
||||
const userPosts = posts.filter(post => post.userId === 1);
|
||||
document.getElementById('output_filter').textContent =
|
||||
'Posts by user 1: ' + userPosts.length;
|
||||
})</div>
|
||||
<div class="explanation">
|
||||
<strong>.filter()</strong> keeps only items matching our condition.
|
||||
</div>
|
||||
<button onclick="runChallenge1()">Run Challenge</button>
|
||||
<div class="output-area" id="output_filter">Results will appear here...</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<strong>💡 Remember:</strong>
|
||||
<code>fetch()</code> gets data → <code>.then()</code> processes it → <code>JSON.stringify()</code> displays it.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Pre-written solutions for demonstration
|
||||
function runTask1() {
|
||||
fetch('https://api.techshare.cc/api/users')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('output_users').textContent = JSON.stringify(data);
|
||||
});
|
||||
}
|
||||
|
||||
function runTask2() {
|
||||
fetch('https://api.techshare.cc/api/users/693c0a4357cce1118095f635')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('output_user').textContent = JSON.stringify(data);
|
||||
});
|
||||
}
|
||||
|
||||
function runTask3() {
|
||||
fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const titles = data.map(post => post.title);
|
||||
document.getElementById('output_posts').textContent = JSON.stringify(titles);
|
||||
});
|
||||
}
|
||||
|
||||
function runTask4() {
|
||||
fetch('https://api.techshare.cc/api/posts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: 'My First API Post',
|
||||
content: 'Learning APIs is fun!',
|
||||
userId: 1,
|
||||
published: true
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('output_create').textContent = JSON.stringify(data);
|
||||
});
|
||||
}
|
||||
|
||||
function runChallenge1() {
|
||||
fetch('https://api.techshare.cc/api/posts')
|
||||
.then(response => response.json())
|
||||
.then(posts => {
|
||||
const userPosts = posts.filter(post => post.userId == '_693c0a4357cce1118095f635');
|
||||
document.getElementById('output_filter').textContent =
|
||||
'Posts by user 1: ' + userPosts;
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('API Explorer Ready!');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
940
Python Loops & Code Tracing.html
Normal file
940
Python Loops & Code Tracing.html
Normal file
@@ -0,0 +1,940 @@
|
||||
<!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>
|
||||
9
Python Loops & Code Tracing_files/all.min.css
vendored
Normal file
9
Python Loops & Code Tracing_files/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user