969 lines
35 KiB
HTML
969 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260130_cd57ee.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>AI Joke Bot v2 - Community Ratings Added!</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8f9fa;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
}
|
|
|
|
.container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
height: calc(100vh - 60px);
|
|
}
|
|
|
|
.slide {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 30px 40px;
|
|
margin: 10px 0;
|
|
display: none;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
max-height: 82vh;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.slide.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
h1 {
|
|
color: #2c3e50;
|
|
font-size: 2.2rem;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h2 {
|
|
color: #2c3e50;
|
|
font-size: 1.8rem;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h3 {
|
|
color: #2c3e50;
|
|
font-size: 1.4rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.lesson-title {
|
|
color: #2980b9;
|
|
font-size: 1.8rem;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.subject-topic {
|
|
color: #27ae60;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.subject-title {
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 30px;
|
|
font-style: italic;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
margin: 15px 0;
|
|
color: #34495e;
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 15px 0 20px 30px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
color: #34495e;
|
|
}
|
|
|
|
li {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.rules-container {
|
|
background-color: #f8f9fa;
|
|
border-radius: 6px;
|
|
padding: 25px;
|
|
margin: 20px 0;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
|
|
.outcomes-container {
|
|
background-color: #e8f4fd;
|
|
border-radius: 6px;
|
|
padding: 25px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.why-container {
|
|
background-color: #f0f7ff;
|
|
border-radius: 6px;
|
|
padding: 25px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.content-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.terminal {
|
|
background-color: #2c3e50;
|
|
color: #ecf0f1;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
font-family: 'Courier New', monospace;
|
|
margin: 20px 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.terminal-command {
|
|
color: #2ecc71;
|
|
}
|
|
|
|
.terminal-comment {
|
|
color: #95a5a6;
|
|
font-style: italic;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: auto;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
button {
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 1rem;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-weight: 500;
|
|
min-width: 120px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
button:disabled {
|
|
background-color: #bdc3c7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.slide-counter {
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
font-size: 1rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1.2rem;
|
|
color: #7f8c8d;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
code {
|
|
background-color: #f1f2f3;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.feature-box {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.ai-icon {
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.sentiment-demo {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.sentiment-item {
|
|
text-align: center;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.positive {
|
|
background-color: #d4edda;
|
|
border: 2px solid #c3e6cb;
|
|
color: #155724;
|
|
}
|
|
|
|
.neutral {
|
|
background-color: #fff3cd;
|
|
border: 2px solid #ffeaa7;
|
|
color: #856404;
|
|
}
|
|
|
|
.negative {
|
|
background-color: #f8d7da;
|
|
border: 2px solid #f5c6cb;
|
|
color: #721c24;
|
|
}
|
|
|
|
.simple-explanation {
|
|
background-color: #e8f4fd;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border-left: 5px solid #3498db;
|
|
}
|
|
|
|
.simple-explanation h3 {
|
|
color: #2980b9;
|
|
}
|
|
|
|
.analogy-box {
|
|
background-color: #fff3cd;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border: 2px dashed #f39c12;
|
|
}
|
|
|
|
.cool-fact {
|
|
background-color: #d5f4e6;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
border-left: 4px solid #27ae60;
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.comparison-table th, .comparison-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.comparison-table th {
|
|
background-color: #3498db;
|
|
color: white;
|
|
}
|
|
|
|
.comparison-table tr:nth-child(even) {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.database-diagram {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border: 2px solid #3498db;
|
|
font-family: monospace;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.rating-demo {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.rating-button {
|
|
font-size: 2rem;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.rating-button:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.upvote {
|
|
background-color: #d4edda;
|
|
color: #28a745;
|
|
}
|
|
|
|
.neutral-vote {
|
|
background-color: #fff3cd;
|
|
color: #ffc107;
|
|
}
|
|
|
|
.downvote {
|
|
background-color: #f8d7da;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.community-box {
|
|
background-color: #e3f2fd;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border: 2px solid #2196f3;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 5px;
|
|
}
|
|
|
|
.container {
|
|
height: calc(100vh - 40px);
|
|
}
|
|
|
|
.slide {
|
|
padding: 20px 25px;
|
|
min-height: 300px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.lesson-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.subject-topic {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
p, ul, ol {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
button {
|
|
padding: 8px 16px;
|
|
font-size: 0.95rem;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.sentiment-demo, .rating-demo {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sentiment-item {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slide-counter" id="slide-counter">Slide 1 of 12</div>
|
|
|
|
<div class="container">
|
|
<!-- Slide 1: Title Slide -->
|
|
<div class="slide active" id="slide1">
|
|
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
|
|
<div class="ai-icon">🤖✨</div>
|
|
<div class="lesson-title">Joke Bot v2.0 Launch!</div>
|
|
<div class="subject-topic">AI + Community = Super Smart Bot!</div>
|
|
<div class="subject-title">Now with community ratings and smarter AI!</div>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn1" disabled="">Previous</button>
|
|
<button id="nextBtn1">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Rules -->
|
|
<div class="slide" id="slide2">
|
|
<h2>Class Rules</h2>
|
|
|
|
<div class="rules-container">
|
|
<h3>How to Earn Points Today:</h3>
|
|
|
|
<p><strong>+2 Points</strong> - You're here and ready to learn!</p>
|
|
<p><strong>+1 Point</strong> - You listen during instruction</p>
|
|
<p><strong>+1 Point</strong> - You try all the activities</p>
|
|
<p><strong>+1 Point</strong> - You complete all the work</p>
|
|
|
|
<div class="cool-fact">
|
|
<p><strong>✨ Cool Fact:</strong> You helped build this bot! Your ratings make it smarter!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn2" disabled="">Previous</button>
|
|
<button id="nextBtn2">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Learning Outcomes -->
|
|
<div class="slide" id="slide3">
|
|
<h2>What's New in v2.0?</h2>
|
|
<p class="subject-title">Our joke bot got a MAJOR upgrade!</p>
|
|
|
|
<div class="outcomes-container">
|
|
<ol>
|
|
<li><strong>🎭 Community Voting:</strong> Rate jokes with 👍, 👎, or 😐</li>
|
|
<li><strong>🧠 AI vs Humans:</strong> Compare computer guesses with real votes</li>
|
|
<li><strong>🗳️ Many-to-One:</strong> Many people can rate each joke</li>
|
|
<li><strong>📊 Smart Statistics:</strong> See what jokes are REALLY popular</li>
|
|
<li><strong>💾 Database Upgrade:</strong> New table for storing all votes</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="analogy-box">
|
|
<p><strong>🎮 Think of it like this:</strong> Our joke bot was good, but now it's like adding multiplayer mode to a game!</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn3" disabled="">Previous</button>
|
|
<button id="nextBtn3">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: The Big Upgrade -->
|
|
<div class="slide" id="slide4">
|
|
<h2>The Big Upgrade: Community Ratings!</h2>
|
|
|
|
<div class="simple-explanation">
|
|
<h3>v1.0: Just AI Guesses</h3>
|
|
<p>Old system: Only the computer guessed if jokes were funny.</p>
|
|
<div class="sentiment-demo">
|
|
<div class="sentiment-item positive">
|
|
<h4>AI Says: 😊 Positive</h4>
|
|
<p>"Why don't eggs tell jokes?"</p>
|
|
<small>Score: +0.90</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-box">
|
|
<h3>v2.0: AI + REAL People!</h3>
|
|
<p>New system: Both computer AND humans vote on jokes!</p>
|
|
|
|
<div class="rating-demo">
|
|
<div class="rating-button upvote">👍 85%</div>
|
|
<div class="rating-button neutral-vote">😐 10%</div>
|
|
<div class="rating-button downvote">👎 5%</div>
|
|
</div>
|
|
|
|
<p><strong>Example Joke:</strong> "Why don't scientists trust atoms?"</p>
|
|
<p><strong>AI Thinks:</strong> 😊 Positive (Score: +0.75)</p>
|
|
<p><strong>Community Says:</strong> 👍 92% funny! (46 votes)</p>
|
|
</div>
|
|
|
|
<div class="cool-fact">
|
|
<p><strong>🤯 Mind Blown Fact:</strong> This is how YouTube, TikTok, and Netflix work - they combine AI guesses with real user ratings!</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn4" disabled="">Previous</button>
|
|
<button id="nextBtn4">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: How It Works Now -->
|
|
<div class="slide" id="slide5">
|
|
<h2>Try It Yourself! 🎯</h2>
|
|
|
|
<div class="simple-explanation">
|
|
<h3>Step-by-Step Demo:</h3>
|
|
<ol>
|
|
<li><strong>Step 1:</strong> Bot shows you a joke</li>
|
|
<li><strong>Step 2:</strong> You see AI's guess (😊/😐/😒)</li>
|
|
<li><strong>Step 3:</strong> YOU get to vote! 👍, 👎, or 😐</li>
|
|
<li><strong>Step 4:</strong> Your vote gets saved with everyone else's</li>
|
|
<li><strong>Step 5:</strong> Next person sees the community score</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="community-box">
|
|
<h3>📱 What You See Now:</h3>
|
|
<div style="background-color: #2c3e50; color: white; padding: 20px; border-radius: 8px; margin: 15px 0;">
|
|
<p>🤣 "Why don't eggs tell jokes? They'd crack each other up!"</p>
|
|
<p>🤖 AI Mood: 😊 Positive (Score: +0.90)</p>
|
|
<p>👥 Community Rating: 👍 85% | 😐 10% | 👎 5%</p>
|
|
<p>🗳️ 124 people voted</p>
|
|
<hr style="margin: 15px 0; border-color: #444;">
|
|
<p><strong>Was this joke funny to YOU?</strong></p>
|
|
<p>1. 👍 Upvote 2. 😐 Neutral 3. 👎 Downvote</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analogy-box">
|
|
<p><strong>💡 This is like:</strong> YouTube comments + TikTok likes + Netflix ratings all in one joke bot!</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn5" disabled="">Previous</button>
|
|
<button id="nextBtn5">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: Database Upgrade -->
|
|
<div class="slide" id="slide6">
|
|
<h2>Behind the Scenes: Database Magic 🗄️</h2>
|
|
|
|
<div class="simple-explanation">
|
|
<h3>OLD Database (v1.0):</h3>
|
|
<div class="database-diagram">
|
|
jokes table:
|
|
├── id
|
|
├── joke_text
|
|
├── contributor
|
|
├── published_date
|
|
├── ai_score ← Only AI's guess
|
|
└── ai_mood_label
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-box">
|
|
<h3>NEW Database (v2.0):</h3>
|
|
<div class="database-diagram" style="background-color: #e8f4fd; border-color: #2196f3;">
|
|
jokes table: user_sentiments table:
|
|
├── id ├── id
|
|
├── joke_text ├── joke_id → Links to jokes
|
|
├── contributor ├── user_name
|
|
├── published_date ├── sentiment → 'up','down','neutral'
|
|
├── ai_score ← AI's guess └── timestamp
|
|
└── ai_mood_label └── ← MANY votes per joke!
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analogy-box">
|
|
<h3>🧩 Many-to-One Relationship:</h3>
|
|
<ul>
|
|
<li><strong>One Joke</strong> can have <strong>MANY votes</strong></li>
|
|
<li>Like one YouTube video → many likes/comments</li>
|
|
<li>Like one TikTok → many hearts</li>
|
|
<li>This is called a "foreign key" relationship</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn6" disabled="">Previous</button>
|
|
<button id="nextBtn6">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: The New Code -->
|
|
<div class="slide" id="slide7">
|
|
<h2>The Smart New Code ✨</h2>
|
|
|
|
<div class="content-container">
|
|
<h3>1. New Database Table:</h3>
|
|
<div class="terminal">
|
|
<span class="terminal-command">CREATE TABLE user_sentiments (</span>
|
|
id INTEGER PRIMARY KEY,
|
|
joke_id INTEGER, <span class="terminal-comment"># Which joke</span>
|
|
user_name TEXT, <span class="terminal-comment"># Who voted</span>
|
|
sentiment TEXT, <span class="terminal-comment"># 'up','down','neutral'</span>
|
|
timestamp TEXT, <span class="terminal-comment"># When they voted</span>
|
|
FOREIGN KEY (joke_id) REFERENCES jokes(id) <span class="terminal-comment"># The magic link!</span>
|
|
<span class="terminal-command">);</span>
|
|
</div>
|
|
|
|
<h3>2. Asking for Your Vote:</h3>
|
|
<div class="terminal">
|
|
<span class="terminal-comment"># After showing a joke...</span>
|
|
print("🤣 Why don't eggs tell jokes? They'd crack each other up!")
|
|
print("🤖 AI thinks: 😊 Positive (Score: +0.90)")
|
|
|
|
<span class="terminal-comment"># Get community rating</span>
|
|
<span class="terminal-command">community_score = get_community_rating(joke_id)</span>
|
|
print(f"👥 Community: 👍 {community_score['up']}%")
|
|
|
|
<span class="terminal-comment"># Ask for YOUR vote!</span>
|
|
print("🗳️ Was this funny to YOU?")
|
|
print("1. 👍 Upvote 2. 😐 Neutral 3. 👎 Downvote")
|
|
<span class="terminal-command">user_choice = input("Your choice: ")</span>
|
|
|
|
<span class="terminal-comment"># Save your vote</span>
|
|
<span class="terminal-command">save_user_vote(joke_id, your_name, user_choice)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cool-fact">
|
|
<p><strong>⚡ Pro Tip:</strong> The "FOREIGN KEY" is what links votes to specific jokes. It's like adding @mentions in social media!</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn7" disabled="">Previous</button>
|
|
<button id="nextBtn7">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: AI vs Humans - The Battle! -->
|
|
<div class="slide" id="slide8">
|
|
<h2>AI vs Humans - The Showdown! 🥊</h2>
|
|
|
|
<div class="simple-explanation">
|
|
<h3>Now We Can Compare:</h3>
|
|
<table class="comparison-table">
|
|
<tbody><tr>
|
|
<th>Joke</th>
|
|
<th>🤖 AI Guesses</th>
|
|
<th>👥 Humans Vote</th>
|
|
<th>Who's Right?</th>
|
|
</tr>
|
|
<tr>
|
|
<td>"Why don't scientists trust atoms?"</td>
|
|
<td>😊 Positive (+0.75)</td>
|
|
<td>👍 92% funny</td>
|
|
<td>✅ Both agree!</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"Parallel lines have so much in common..."</td>
|
|
<td>😒 Negative (-0.35)</td>
|
|
<td>👍 78% funny</td>
|
|
<td>❌ AI wrong!</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"I told my computer I needed a break..."</td>
|
|
<td>😐 Neutral (0.05)</td>
|
|
<td>👎 65% not funny</td>
|
|
<td>❌ AI wrong!</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</div>
|
|
|
|
<div class="analogy-box">
|
|
<h3>🎯 What This Teaches Us:</h3>
|
|
<ul>
|
|
<li><strong>AI gets it right sometimes</strong> - Good at obvious jokes</li>
|
|
<li><strong>AI gets it wrong sometimes</strong> - Bad at sarcasm/complex jokes</li>
|
|
<li><strong>Humans are better judges</strong> - We understand context</li>
|
|
<li><strong>Community voting is powerful</strong> - Wisdom of the crowd!</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="cool-fact">
|
|
<p><strong>🧠 Real AI Learning:</strong> Some AI systems use human votes like this to LEARN and get better! Your votes could train future AI!</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn8" disabled="">Previous</button>
|
|
<button id="nextBtn8">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 9: Real-World Examples -->
|
|
<div class="slide" id="slide9">
|
|
<h2>Where You've Seen This Before 🎬</h2>
|
|
|
|
<div class="simple-explanation">
|
|
<h3>Everywhere! This is how real apps work:</h3>
|
|
|
|
<div class="sentiment-demo">
|
|
<div class="sentiment-item positive" style="text-align: left;">
|
|
<h4>📱 YouTube</h4>
|
|
<p>👍👎 buttons</p>
|
|
<p>Comments + AI recommendations</p>
|
|
<small>Exactly like our joke bot!</small>
|
|
</div>
|
|
<div class="sentiment-item neutral" style="text-align: left;">
|
|
<h4>📸 TikTok/Instagram</h4>
|
|
<p>❤️ hearts = upvotes</p>
|
|
<p>AI suggests videos you'll like</p>
|
|
<small>Community + AI working together</small>
|
|
</div>
|
|
<div class="sentiment-item negative" style="text-align: left;">
|
|
<h4>🎮 Online Games</h4>
|
|
<p>Report systems</p>
|
|
<p>Player ratings</p>
|
|
<small>Community moderation</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="community-box">
|
|
<h3>🎯 The Big Idea:</h3>
|
|
<p><strong>Modern apps = AI + Community Feedback</strong></p>
|
|
<ul>
|
|
<li><strong>AI starts the guess</strong> (like our TextBlob sentiment)</li>
|
|
<li><strong>Humans give feedback</strong> (your 👍/👎 votes)</li>
|
|
<li><strong>System gets smarter</strong> (learns from both)</li>
|
|
<li><strong>Better experience for everyone!</strong></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="cool-fact">
|
|
<p><strong>🚀 Career Connection:</strong> Knowing how to build AI + community systems is a SUPER valuable skill for app developers!</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn9" disabled="">Previous</button>
|
|
<button id="nextBtn9">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 10: What You Built -->
|
|
<div class="slide" id="slide10">
|
|
<h2>What YOU Built Today 🏗️</h2>
|
|
|
|
<div class="content-container">
|
|
<p>Think about it - you helped build a system that:</p>
|
|
|
|
<ol>
|
|
<li><strong>🤖 Uses AI</strong> to analyze text feelings</li>
|
|
<li><strong>🗳️ Collects community votes</strong> from real people</li>
|
|
<li><strong>💾 Stores everything</strong> in a smart database</li>
|
|
<li><strong>🔗 Links votes to jokes</strong> with foreign keys</li>
|
|
<li><strong>📊 Shows statistics</strong> comparing AI vs humans</li>
|
|
</ol>
|
|
|
|
<div class="feature-box">
|
|
<p><strong>🌟 That's Professional-Level Work!</strong></p>
|
|
<p>Companies build apps the exact same way:</p>
|
|
<ul>
|
|
<li>YouTube = videos + likes/dislikes</li>
|
|
<li>Amazon = products + star ratings</li>
|
|
<li>Netflix = shows + thumbs up/down</li>
|
|
<li><strong>Our Joke Bot = jokes + 👍/👎 ratings!</strong></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="analogy-box">
|
|
<p><strong>💪 You're Not Just Learning - You're Building Real Stuff!</strong></p>
|
|
<p>The skills you learned today (AI + databases + user feedback) are exactly what tech companies look for!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn10" disabled="">Previous</button>
|
|
<button id="nextBtn10">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 11: Next Steps & Ideas -->
|
|
<div class="slide" id="slide11">
|
|
<h2>What Could We Build Next? 🚀</h2>
|
|
|
|
<div class="content-container">
|
|
<h3>Discussion Time:</h3>
|
|
<ul>
|
|
<li>What jokes did the AI get totally wrong? Why?</li>
|
|
<li>Should some people's votes count more? (Like joke experts?)</li>
|
|
<li>What if we could "train" the AI with our votes?</li>
|
|
<li>Could we predict which jokes will be popular?</li>
|
|
</ul>
|
|
|
|
<div class="analogy-box">
|
|
<h3>🎯 Cool Extension Ideas:</h3>
|
|
<ul>
|
|
<li><strong>Personalized Jokes:</strong> "Show me jokes that people LIKE ME enjoyed!"</li>
|
|
<li><strong>Joke Leaderboard:</strong> Top 10 most-liked jokes</li>
|
|
<li><strong>AI Trainer:</strong> Use votes to make TextBlob smarter</li>
|
|
<li><strong>Meme Version:</strong> Same system but for memes!</li>
|
|
<li><strong>Class Poll System:</strong> Use this code for classroom votes</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="community-box">
|
|
<h3>🧠 The Real Magic:</h3>
|
|
<p>You now have a template for ANY voting system:</p>
|
|
<p>Song ratings, game reviews, teacher feedback, club elections...</p>
|
|
<p><strong>Change the jokes to something else, keep the voting system!</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn11" disabled="">Previous</button>
|
|
<button id="nextBtn11">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 12: Thank You -->
|
|
<div class="slide" id="slide12">
|
|
<div class="content-container">
|
|
<div class="ai-icon">🤖👥✨</div>
|
|
<h1>You Built Version 2.0!</h1>
|
|
|
|
<div class="analogy-box">
|
|
<p><strong>🎯 Remember What You Accomplished:</strong></p>
|
|
<ul>
|
|
<li>Started with basic joke storage (v1.0)</li>
|
|
<li>Added AI mood detection (v1.5)</li>
|
|
<li>Now added COMMUNITY voting (v2.0!)</li>
|
|
<li>You built a system used by billion-dollar companies</li>
|
|
<li>You understand AI + Human collaboration</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="cool-fact">
|
|
<p><strong>📈 Career Superpower:</strong> You now know how to build interactive, community-driven, AI-enhanced apps. That's literally what modern software development is all about!</p>
|
|
</div>
|
|
|
|
<p style="margin-top: 30px;"><strong>Next Challenge:</strong> Can we make the AI LEARN from our votes? 🤔</p>
|
|
|
|
<p style="margin-top: 30px; color: #7f8c8d;">
|
|
ICT & Digital Technologies<br>
|
|
Year 9 - Building Real Apps
|
|
</p>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button id="prevBtn12" disabled="">Previous</button>
|
|
<button id="nextBtn12">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// ==================== CONFIGURATION ====================
|
|
const totalSlides = 12;
|
|
// =======================================================
|
|
|
|
let currentSlide = 1;
|
|
|
|
// Update slide counter
|
|
function updateSlideCounter() {
|
|
document.getElementById('slide-counter').textContent = `Slide ${currentSlide} of ${totalSlides}`;
|
|
}
|
|
|
|
// Slide navigation
|
|
function showSlide(slideNumber) {
|
|
// Hide all slides
|
|
for (let i = 1; i <= totalSlides; i++) {
|
|
const slide = document.getElementById(`slide${i}`);
|
|
if (slide) {
|
|
slide.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
// Show current slide
|
|
const currentSlideElement = document.getElementById(`slide${slideNumber}`);
|
|
if (currentSlideElement) {
|
|
currentSlideElement.classList.add('active');
|
|
currentSlide = slideNumber;
|
|
updateSlideCounter();
|
|
|
|
// Update button states
|
|
updateButtons();
|
|
}
|
|
}
|
|
|
|
function updateButtons() {
|
|
// Update previous button
|
|
const prevButtons = document.querySelectorAll('[id^="prevBtn"]');
|
|
prevButtons.forEach(btn => {
|
|
btn.disabled = currentSlide === 1;
|
|
});
|
|
|
|
// Update next button text on last slide
|
|
const nextButtons = document.querySelectorAll('[id^="nextBtn"]');
|
|
nextButtons.forEach(btn => {
|
|
if (currentSlide === totalSlides) {
|
|
btn.textContent = 'Mission Complete! 🎉';
|
|
} else {
|
|
btn.textContent = 'Next';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Next button functionality
|
|
document.querySelectorAll('[id^="nextBtn"]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if (currentSlide < totalSlides) {
|
|
showSlide(currentSlide + 1);
|
|
} else {
|
|
// Last slide - completion message
|
|
alert('🎉 INCREDIBLE WORK! You understand AI + Community systems - exactly how real apps work! Keep building amazing things! 🚀');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Previous button functionality
|
|
document.querySelectorAll('[id^="prevBtn"]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if (currentSlide > 1) {
|
|
showSlide(currentSlide - 1);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize the presentation
|
|
updateSlideCounter();
|
|
updateButtons();
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
|
|
if (currentSlide < totalSlides) {
|
|
showSlide(currentSlide + 1);
|
|
}
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
|
|
if (currentSlide > 1) {
|
|
showSlide(currentSlide - 1);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Initialize to first slide
|
|
showSlide(1);
|
|
</script>
|
|
|
|
</body></html> |