joke
This commit is contained in:
374
projects/Speaking Cards - Joke Bot Project.html
Normal file
374
projects/Speaking Cards - Joke Bot Project.html
Normal file
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0098)file:///Users/home/Downloads/deepseek_html_joke_bot_speaking_cards_final.html_20260202_d830c8.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>Speaking Cards - Joke Bot Project</title>
|
||||
<style>
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 1cm;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 21cm;
|
||||
min-height: 29.7cm;
|
||||
margin: 0 auto;
|
||||
padding: 0.5cm;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 0.8cm;
|
||||
height: 28cm;
|
||||
padding: 0.5cm;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border: 2px solid #3498db;
|
||||
border-radius: 8px;
|
||||
padding: 0.6cm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.3cm;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card-content strong {
|
||||
display: block;
|
||||
margin-bottom: 0.2cm;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.card-content ul {
|
||||
margin: 0.2cm 0;
|
||||
padding-left: 0.8cm;
|
||||
}
|
||||
|
||||
.card-content li {
|
||||
margin: 0.1cm 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.card-time {
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-top: 0.3cm;
|
||||
padding-top: 0.2cm;
|
||||
border-top: 1px dotted #ddd;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
height: auto;
|
||||
min-height: 27cm;
|
||||
}
|
||||
|
||||
.card {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Page 1: Cards 1-8 -->
|
||||
<div class="page">
|
||||
<div class="cards-grid">
|
||||
<!-- Card 1 -->
|
||||
<div class="card">
|
||||
<div class="card-number">1</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 1: Title Slide</strong>
|
||||
"Good morning! We are students from Technolyceum, and today we'll present our Joke Bot Development project."
|
||||
<br><br>
|
||||
"I'm [Your Name], and with me are my teammates: [List names]. We chose as a team to do a joke bot. Our supervisor is Bob Santos."
|
||||
<br><br>
|
||||
"Our journey took us from hardcoded jokes to a community-driven platform with AI integration."
|
||||
</div>
|
||||
<div class="card-time">45 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card">
|
||||
<div class="card-number">2</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 2: Development Journey</strong>
|
||||
"Our project followed a development with three distinct stages."
|
||||
<br><br>
|
||||
"Stage 1 started with hardcoded jokes using Telegram API for testing."
|
||||
<br><br>
|
||||
"Stage 2 explored Yandex AI API for dynamic joke generation."
|
||||
<br><br>
|
||||
"Stage 3 added database functionality with user-generated content and interactive voting."
|
||||
</div>
|
||||
<div class="card-time">50 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card">
|
||||
<div class="card-number">3</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 3: Phase 1 - Hardcoded Jokes</strong>
|
||||
"Let's look at Phase 1. This was our simplest implementation using the Telegram Bot API."
|
||||
<br><br>
|
||||
"We created a basic bot with two commands: /start for greeting users, and /joke to deliver a random joke from a pre-approved list."
|
||||
<br><br>
|
||||
"The jokes were hardcoded into the Python script and had limited user interaction."
|
||||
<br><br>
|
||||
"This stage helped introduce us to Python coding, basic bot functionality and API integration."
|
||||
</div>
|
||||
<div class="card-time">55 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="card">
|
||||
<div class="card-number">4</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 4: Phase 2 - AI Integration</strong>
|
||||
"For Phase 2, we briefly explored Yandex's AI API to generate jokes dynamically."
|
||||
<br><br>
|
||||
"Instead of static jokes, the bot used Yandex GPT to create original, context-aware humor."
|
||||
<br><br>
|
||||
"However the jokes were not so humorous. But it gave us some exposure to AI API services."
|
||||
</div>
|
||||
<div class="card-time">50 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<div class="card">
|
||||
<div class="card-number">5</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 5: Phase 3 - User-Generated Content</strong>
|
||||
"Phase 3 introduced us to databases, user sentiment capture and transformed our project into a community driven platform."
|
||||
<br><br>
|
||||
"We added an SQLite database to store jokes, user information, and a feature to allow users to rate jokes."
|
||||
<br><br>
|
||||
"Users could now submit their own jokes which required administrative approval before publication."
|
||||
<br><br>
|
||||
"We implemented a voting system where users rate jokes with thumbs up, down, or neutral."
|
||||
<br><br>
|
||||
"This user sentiment analysis is a feature often used in AI systems."
|
||||
</div>
|
||||
<div class="card-time">55 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<div class="card">
|
||||
<div class="card-number">6</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 6: System Demonstration</strong>
|
||||
"Let me demonstrate our final system's functionality."
|
||||
<br><br>
|
||||
"The command-line interface allows users to: get random jokes, add new jokes, and quit the program."
|
||||
<br><br>
|
||||
"Users can rate jokes immediately after viewing them, which can later be used for user sentiment analysis."
|
||||
<br><br>
|
||||
"This demonstrates a system with database, voting, and content management."
|
||||
</div>
|
||||
<div class="card-time">60 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 7 -->
|
||||
<div class="card">
|
||||
<div class="card-number">7</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 7: Technology Stack</strong>
|
||||
"Our project utilized several key technologies."
|
||||
<br><br>
|
||||
"Python 3.9+ formed our programming foundation."
|
||||
<br><br>
|
||||
"The Telegram Bot API handled all user interactions."
|
||||
<br><br>
|
||||
"SQLite managed our database needs for Phase 3."
|
||||
<br><br>
|
||||
"Yandex AI API provided AI capabilities in Phase 2."
|
||||
</div>
|
||||
<div class="card-time">55 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 8 -->
|
||||
<div class="card">
|
||||
<div class="card-number">8</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 8: Learning Outcomes</strong>
|
||||
"Through this project, we gained valuable technical skills."
|
||||
<br><br>
|
||||
"We learned API integration with both Telegram."
|
||||
<br><br>
|
||||
"Database design and management with SQLite."
|
||||
<br><br>
|
||||
"We practiced iterative development, starting simple and adding complexity."
|
||||
<br><br>
|
||||
"The three-phase approach taught us progressive system enhancement."
|
||||
</div>
|
||||
<div class="card-time">45 sec</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page 2: Cards 9-END + Helper Cards -->
|
||||
<div class="page">
|
||||
<div class="cards-grid">
|
||||
<!-- Card 9 -->
|
||||
<div class="card">
|
||||
<div class="card-number">9</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 9: Future Applications</strong>
|
||||
"Besides being able to integrate our joke bot with the schools existing Technolyceum_bot, our system's architecture has potential beyond joke sharing."
|
||||
<br><br>
|
||||
"It could adapt for capturing feedback from students, parents and school staff and to do sentiment analysis."
|
||||
<br><br>
|
||||
"The database structure could be scaled to work with surveys and polling systems."
|
||||
<br><br>
|
||||
"The design allows adaptation for various institutional needs."
|
||||
</div>
|
||||
<div class="card-time">50 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 10 -->
|
||||
<div class="card">
|
||||
<div class="card-number">10</div>
|
||||
<div class="card-content">
|
||||
<strong>Slide 10: Conclusion</strong>
|
||||
"In conclusion, our Telegram Joke Bot demonstrates practical application of programming concepts."
|
||||
<br><br>
|
||||
"We implemented a three-phase development from simple to complex."
|
||||
<br><br>
|
||||
"We practiced iterative improvement and feature addition."
|
||||
<br><br>
|
||||
"The project provided hands-on learning in API usage and database management."
|
||||
<br><br>
|
||||
"Thank you for your attention. We're happy to answer any questions about our development process."
|
||||
</div>
|
||||
<div class="card-time">50 sec</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Card -->
|
||||
<div class="card" style="border: 2px solid #2ecc71;">
|
||||
<div class="card-number" style="background: #2ecc71;">🤖</div>
|
||||
<div class="card-content">
|
||||
<strong>DEMO SCRIPT - Slide 6</strong>
|
||||
"Now, let me show you our system in action."
|
||||
<br><br>
|
||||
"Here's our command-line interface. I'll select option 1 to get a random joke."
|
||||
<br><br>
|
||||
[Show joke display]
|
||||
<br><br>
|
||||
"You can see the joke, the contributor, and the community rating."
|
||||
<br><br>
|
||||
"Now I'll rate this joke with 'u' for thumbs up."
|
||||
<br><br>
|
||||
"The system confirms my rating has been recorded in the database."
|
||||
</div>
|
||||
<div class="card-time">DEMO</div>
|
||||
</div>
|
||||
|
||||
<!-- Technical Terms Card -->
|
||||
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
||||
<div class="card-number" style="background: #ddd; color: #666;">!</div>
|
||||
<div class="card-content" style="color: #999; text-align: center;">
|
||||
<strong>Technical Terms:</strong>
|
||||
<br><br>
|
||||
• API = Application Programming Interface
|
||||
<br>
|
||||
• SQLite = Lightweight database
|
||||
<br>
|
||||
• GPT = Generative Pre-trained Transformer
|
||||
<br>
|
||||
• CLI = Command Line Interface
|
||||
</div>
|
||||
<div class="card-time">-</div>
|
||||
</div>
|
||||
|
||||
<!-- Q&A Card -->
|
||||
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
||||
<div class="card-number" style="background: #ddd; color: #666;">Q</div>
|
||||
<div class="card-content" style="color: #999; text-align: center;">
|
||||
<strong>Possible Questions:</strong>
|
||||
<br><br>
|
||||
• Why did you choose a joke bot?
|
||||
<br>
|
||||
• What was the hardest part?
|
||||
<br>
|
||||
• How do you moderate jokes?
|
||||
<br>
|
||||
• Can this work with school systems?
|
||||
</div>
|
||||
<div class="card-time">-</div>
|
||||
</div>
|
||||
|
||||
<!-- Timing Card -->
|
||||
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
||||
<div class="card-number" style="background: #ddd; color: #666;">⏱️</div>
|
||||
<div class="card-content" style="color: #999; text-align: center;">
|
||||
<strong>Timing:</strong>
|
||||
<br><br>
|
||||
• Total: 8 minutes
|
||||
<br>
|
||||
• Demo: 1 minute
|
||||
<br>
|
||||
• Q&A: 2 minutes
|
||||
<br>
|
||||
• Keep to time!
|
||||
</div>
|
||||
<div class="card-time">-</div>
|
||||
</div>
|
||||
|
||||
<!-- Presenter Tips Card -->
|
||||
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
||||
<div class="card-number" style="background: #ddd; color: #666;">🎤</div>
|
||||
<div class="card-content" style="color: #999; text-align: center;">
|
||||
<strong>Presenter Tips:</strong>
|
||||
<br><br>
|
||||
• Speak clearly and slowly
|
||||
<br>
|
||||
• Look at the audience
|
||||
<br>
|
||||
• Point to relevant code/screens
|
||||
<br>
|
||||
• Smile and be confident!
|
||||
</div>
|
||||
<div class="card-time">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user