1125 lines
48 KiB
HTML
1125 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260206_d29cd1.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 Joke Bot Learning Project Quiz</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: #1a1a1a;
|
|
line-height: 1.5;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.quiz-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quiz-header {
|
|
background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
|
|
color: white;
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.quiz-title {
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.quiz-subtitle {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.quiz-progress {
|
|
background: #f8f9fa;
|
|
padding: 15px 30px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: #e2e8f0;
|
|
border-radius: 3px;
|
|
margin: 0 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.question-container {
|
|
padding: 40px 30px;
|
|
display: none;
|
|
}
|
|
|
|
.question-container.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.question-number {
|
|
font-size: 0.9rem;
|
|
color: #3498db;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
margin-bottom: 30px;
|
|
color: #2c3e50;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.options-container {
|
|
display: grid;
|
|
gap: 15px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.option {
|
|
background: #f8fafc;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 18px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.option:hover {
|
|
background: #f0f7ff;
|
|
border-color: #3498db;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.option.selected {
|
|
background: #e6f0ff;
|
|
border-color: #3498db;
|
|
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
|
|
}
|
|
|
|
.option.correct {
|
|
background: #d4edda;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
.option.incorrect {
|
|
background: #f8d7da;
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.option-label {
|
|
background: #3498db;
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.option-text {
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.explanation {
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #3498db;
|
|
padding: 20px;
|
|
border-radius: 0 8px 8px 0;
|
|
margin-top: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.explanation.show {
|
|
display: block;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateX(-10px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
.explanation-title {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin-bottom: 10px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.quiz-footer {
|
|
padding: 20px 30px;
|
|
border-top: 1px solid #e2e8f0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 12px 24px;
|
|
background: #2c3e50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.nav-btn:hover:not(:disabled) {
|
|
background: #1a252f;
|
|
}
|
|
|
|
.nav-btn:disabled {
|
|
background: #cbd5e0;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.results-container {
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.results-container.show {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
.score-circle {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
|
|
margin: 0 auto 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
|
|
}
|
|
|
|
.results-title {
|
|
font-size: 2rem;
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.results-message {
|
|
color: #4a5568;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.results-details {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-top: 30px;
|
|
text-align: left;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.detail-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.restart-btn {
|
|
padding: 15px 40px;
|
|
background: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-top: 30px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.restart-btn:hover {
|
|
background: #2980b9;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.quiz-header {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.quiz-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.question-container {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.quiz-footer {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="quiz-container">
|
|
<div class="quiz-header">
|
|
<h1 class="quiz-title">Python Joke Bot Learning Project Quiz</h1>
|
|
<p class="quiz-subtitle">Test your knowledge of Python programming, APIs, and databases through this educational project</p>
|
|
</div>
|
|
|
|
<div class="quiz-progress">
|
|
<span id="current-question">Question 1</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill" style="width: 0%;"></div>
|
|
</div>
|
|
<span id="total-questions">of 15</span>
|
|
</div>
|
|
|
|
<!-- Question 1 -->
|
|
<div class="question-container active" id="question1">
|
|
<div class="question-number">Educational Objectives</div>
|
|
<h2 class="question-text">What was the primary educational objective of this Python Joke Bot project?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">To create a commercial joke application for profit</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">To teach students Python programming, API usage, and database introduction</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">To develop advanced AI algorithms for humor generation</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">To create a social media platform for joke sharing</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation1">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project was designed as an educational tool to teach students fundamental programming concepts through a practical, engaging project that demonstrates Python programming, API integration, and basic database usage.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(1)">Check Answer</button>
|
|
<span style="color: #666; font-size: 0.9rem;">Select an option to continue</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 2 -->
|
|
<div class="question-container" id="question2">
|
|
<div class="question-number">Programming Concepts</div>
|
|
<h2 class="question-text">Which programming concepts were introduced through the project's phased approach?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Basic Python syntax, API integration, SQL database operations</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Machine learning, neural networks, deep learning</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Blockchain development, smart contracts, cryptocurrency</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Game development, 3D graphics, physics engines</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation2">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project introduced students to basic Python syntax in Phase 1, API integration (Telegram Bot API) in Phase 2, and SQL database operations in Phase 3, providing a progressive learning path.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(2)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 3 -->
|
|
<div class="question-container" id="question3">
|
|
<div class="question-number">Phase 1 Learning Focus</div>
|
|
<h2 class="question-text">What was the main learning focus of Phase 1 (Hardcoded Jokes)?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Basic Python programming: variables, lists, functions, and random module</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Database normalization and SQL queries</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Artificial intelligence and machine learning</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Web development and HTML/CSS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation3">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Phase 1 focused on fundamental Python concepts: variables (JOKE_LIST), lists, functions (start(), send_joke()), importing modules (random), and basic control flow.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(3)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 4 -->
|
|
<div class="question-container" id="question4">
|
|
<div class="question-number">API Integration</div>
|
|
<h2 class="question-text">What did Phase 2 teach students about APIs?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">How to use external APIs (Telegram Bot API) and handle API responses</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">How to create their own API from scratch</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Advanced API security and encryption techniques</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">GraphQL API design and implementation</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation4">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Phase 2 introduced students to API concepts: registering a bot with BotFather, obtaining API tokens, making API requests, handling responses, and understanding API documentation.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(4)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 5 -->
|
|
<div class="question-container" id="question5">
|
|
<div class="question-number">Database Introduction</div>
|
|
<h2 class="question-text">What database concepts were introduced in Phase 3?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">SQLite basics, CRUD operations, and simple queries</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Advanced database optimization and indexing</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">NoSQL databases and document storage</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Distributed database systems and replication</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation5">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Phase 3 introduced SQLite database concepts: creating tables, basic CRUD (Create, Read, Update, Delete) operations, simple SELECT queries, and database connections using Python's sqlite3 module.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(5)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 6 -->
|
|
<div class="question-container" id="question6">
|
|
<div class="question-number">Teaching Methodology</div>
|
|
<h2 class="question-text">Why was the project structured in three progressive phases?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">To break complex concepts into manageable, building-block steps for beginners</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">To complete the project faster by parallel development</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">To test different programming languages simultaneously</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">To create separate applications for different platforms</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation6">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The phased approach allowed students to start with simple concepts (basic Python) and progressively add complexity (APIs, then databases), ensuring they mastered foundational skills before moving to more advanced topics.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(6)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 7 -->
|
|
<div class="question-container" id="question7">
|
|
<div class="question-number">Practical Application</div>
|
|
<h2 class="question-text">How did the project demonstrate practical application of programming concepts?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">By creating a working application that solves a real problem (joke sharing)</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">By focusing only on theoretical computer science concepts</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">By creating complex mathematical algorithms</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">By developing enterprise-level software architecture</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation7">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project showed students how programming concepts come together to create functional software, making abstract concepts concrete through a tangible, working application.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(7)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 8 -->
|
|
<div class="question-container" id="question8">
|
|
<div class="question-number">Learning Progression</div>
|
|
<h2 class="question-text">What was the progression of complexity in the three phases?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Simple code → API integration → Database management</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Database → API → Simple code (reverse order)</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">All concepts taught simultaneously</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Only one concept per phase with no progression</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation8">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project followed a logical progression: starting with basic Python programming, adding external API integration, then introducing database concepts - each phase building on the previous one.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(8)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 9 -->
|
|
<div class="question-container" id="question9">
|
|
<div class="question-number">Real-world Skills</div>
|
|
<h2 class="question-text">What real-world software development skills did students learn?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Problem-solving, code organization, and integrating different technologies</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Only theoretical computer science without practical skills</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Hardware programming and embedded systems</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Graphic design and user interface creation</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation9">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Beyond specific technologies, students learned how to break down problems, organize code logically, and integrate different components (Python + API + Database) to create a complete system.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(9)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 10 -->
|
|
<div class="question-container" id="question10">
|
|
<div class="question-number">Database Operations</div>
|
|
<h2 class="question-text">What basic database operations did students practice in Phase 3?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Creating tables, inserting data, querying data, and simple calculations</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Database clustering and replication</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Complex stored procedures and triggers</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Distributed transaction management</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation10">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Students practiced fundamental SQL operations: CREATE TABLE, INSERT, SELECT queries (including CASE statements for calculations), and basic data aggregation using SQL functions.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(10)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 11 -->
|
|
<div class="question-container" id="question11">
|
|
<div class="question-number">API Concepts</div>
|
|
<h2 class="question-text">What API-related concepts did students learn to handle?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Authentication (API tokens), request/response cycle, error handling</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Only how to use APIs without understanding how they work</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">API monetization and commercial licensing</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Low-level network protocol programming</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation11">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Students learned practical API skills: securing API tokens, making HTTP requests, parsing JSON responses, handling timeouts and errors, and understanding status codes.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(11)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 12 -->
|
|
<div class="question-container" id="question12">
|
|
<div class="question-number">Project Structure</div>
|
|
<h2 class="question-text">How did the project structure support learning?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Each phase built on previous knowledge with working examples and clear progression</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">All code was provided complete without student input</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Students worked on unrelated projects simultaneously</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Focus was on memorizing code rather than understanding concepts</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation12">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The structure provided clear milestones, working code examples at each stage, and logical progression that helped students understand how individual concepts combine to create complete applications.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(12)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 13 -->
|
|
<div class="question-container" id="question13">
|
|
<div class="question-number">Code Examples</div>
|
|
<h2 class="question-text">What programming patterns did students learn from the code examples?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Modular functions, error handling, and structured program flow</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Only copy-pasting code without understanding patterns</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Advanced design patterns like factories and observers</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Assembly language programming techniques</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation13">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The code demonstrated good programming practices: breaking code into functions, using try-except blocks for error handling, organizing imports, and creating clear program flow.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(13)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 14 -->
|
|
<div class="question-container" id="question14">
|
|
<div class="question-number">Educational Context</div>
|
|
<h2 class="question-text">Why was this project suitable for educational purposes?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Engaging topic, clear progression, practical skills, and working application</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">It focused on theoretical concepts without practical application</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">It required advanced prior programming knowledge</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">It was designed for professional developers only</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation14">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project was well-designed for education: joke-sharing is engaging for students, the progression is logical, skills are immediately applicable, and students end with a working program they can show others.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(14)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 15 -->
|
|
<div class="question-container" id="question15">
|
|
<div class="question-number">Skill Transfer</div>
|
|
<h2 class="question-text">How do the skills learned transfer to other programming projects?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Python basics, API usage, and database operations are fundamental to many applications</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Skills are only applicable to joke-related applications</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Students only learned project-specific skills with no general application</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Skills are outdated and not used in modern programming</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation15">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The core skills (Python programming, API integration, database operations) are fundamental to web development, data science, automation scripts, and many other programming domains, making them highly transferable.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(15)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Screen -->
|
|
<div class="results-container" id="results">
|
|
<div class="score-circle" id="score-circle">0%</div>
|
|
<h2 class="results-title" id="results-title">Quiz Complete!</h2>
|
|
<p class="results-message" id="results-message">You have completed the Python Joke Bot Learning Project Quiz.</p>
|
|
|
|
<div class="results-details">
|
|
<div class="detail-item">
|
|
<span>Total Questions:</span>
|
|
<span id="total-questions-result">15</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>Correct Answers:</span>
|
|
<span id="correct-answers">0</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>Incorrect Answers:</span>
|
|
<span id="incorrect-answers">0</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span>Accuracy:</span>
|
|
<span id="accuracy">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="restart-btn" onclick="restartQuiz()">Restart Quiz</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Quiz configuration
|
|
const totalQuestions = 15;
|
|
let currentQuestion = 1;
|
|
let score = 0;
|
|
let userAnswers = new Array(totalQuestions).fill(null);
|
|
const correctAnswers = {
|
|
1: "b", 2: "a", 3: "a", 4: "a", 5: "a",
|
|
6: "a", 7: "a", 8: "a", 9: "a", 10: "a",
|
|
11: "a", 12: "a", 13: "a", 14: "a", 15: "a"
|
|
};
|
|
|
|
// Initialize quiz
|
|
function initializeQuiz() {
|
|
updateProgress();
|
|
document.getElementById('total-questions').textContent = `of ${totalQuestions}`;
|
|
}
|
|
|
|
// Update progress bar and question counter
|
|
function updateProgress() {
|
|
const progress = ((currentQuestion - 1) / totalQuestions) * 100;
|
|
document.getElementById('progress-fill').style.width = `${progress}%`;
|
|
document.getElementById('current-question').textContent = `Question ${currentQuestion}`;
|
|
}
|
|
|
|
// Handle option selection
|
|
document.querySelectorAll('.option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// Remove selected class from all options in this question
|
|
const questionId = this.closest('.question-container').id;
|
|
document.querySelectorAll(`#${questionId} .option`).forEach(opt => {
|
|
opt.classList.remove('selected');
|
|
});
|
|
|
|
// Add selected class to clicked option
|
|
this.classList.add('selected');
|
|
|
|
// Enable check answer button if it exists
|
|
const checkBtn = document.querySelector(`#${questionId} .nav-btn`);
|
|
if (checkBtn && checkBtn.textContent.includes('Check')) {
|
|
checkBtn.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Check answer function
|
|
function checkAnswer(questionNum) {
|
|
const questionContainer = document.getElementById(`question${questionNum}`);
|
|
const selectedOption = questionContainer.querySelector('.option.selected');
|
|
|
|
if (!selectedOption) {
|
|
alert('Please select an answer before checking.');
|
|
return;
|
|
}
|
|
|
|
const selectedValue = selectedOption.getAttribute('data-value');
|
|
const isCorrect = selectedValue === correctAnswers[questionNum];
|
|
|
|
// Store user answer
|
|
userAnswers[questionNum - 1] = selectedValue;
|
|
|
|
// Show correct/incorrect styling
|
|
questionContainer.querySelectorAll('.option').forEach(option => {
|
|
const value = option.getAttribute('data-value');
|
|
if (value === correctAnswers[questionNum]) {
|
|
option.classList.add('correct');
|
|
} else if (value === selectedValue && !isCorrect) {
|
|
option.classList.add('incorrect');
|
|
}
|
|
option.style.pointerEvents = 'none'; // Disable further clicks
|
|
});
|
|
|
|
// Update score if correct
|
|
if (isCorrect) {
|
|
score++;
|
|
}
|
|
|
|
// Show explanation
|
|
const explanation = document.getElementById(`explanation${questionNum}`);
|
|
explanation.classList.add('show');
|
|
|
|
// Change button to Next Question
|
|
const checkBtn = questionContainer.querySelector('.nav-btn');
|
|
checkBtn.textContent = currentQuestion === totalQuestions ? 'View Results' : 'Next Question';
|
|
checkBtn.onclick = () => nextQuestion();
|
|
|
|
// Disable previous button during answer review
|
|
const prevBtn = questionContainer.querySelectorAll('.nav-btn')[1];
|
|
if (prevBtn && prevBtn.textContent.includes('Previous')) {
|
|
prevBtn.disabled = true;
|
|
}
|
|
}
|
|
|
|
// Next question function
|
|
function nextQuestion() {
|
|
// Hide current question
|
|
document.getElementById(`question${currentQuestion}`).classList.remove('active');
|
|
|
|
if (currentQuestion < totalQuestions) {
|
|
// Show next question
|
|
currentQuestion++;
|
|
document.getElementById(`question${currentQuestion}`).classList.add('active');
|
|
updateProgress();
|
|
} else {
|
|
// Show results
|
|
showResults();
|
|
}
|
|
}
|
|
|
|
// Previous question function
|
|
function previousQuestion() {
|
|
if (currentQuestion > 1) {
|
|
// Hide current question
|
|
document.getElementById(`question${currentQuestion}`).classList.remove('active');
|
|
|
|
// Show previous question
|
|
currentQuestion--;
|
|
document.getElementById(`question${currentQuestion}`).classList.add('active');
|
|
updateProgress();
|
|
}
|
|
}
|
|
|
|
// Show results function
|
|
function showResults() {
|
|
document.querySelector('.quiz-progress').style.display = 'none';
|
|
document.getElementById(`question${totalQuestions}`).classList.remove('active');
|
|
|
|
const resultsContainer = document.getElementById('results');
|
|
resultsContainer.classList.add('show');
|
|
|
|
// Calculate results
|
|
const accuracy = Math.round((score / totalQuestions) * 100);
|
|
|
|
// Update results display
|
|
document.getElementById('score-circle').textContent = `${accuracy}%`;
|
|
document.getElementById('correct-answers').textContent = score;
|
|
document.getElementById('incorrect-answers').textContent = totalQuestions - score;
|
|
document.getElementById('accuracy').textContent = `${accuracy}%`;
|
|
document.getElementById('total-questions-result').textContent = totalQuestions;
|
|
|
|
// Set results message based on score
|
|
const resultsTitle = document.getElementById('results-title');
|
|
const resultsMessage = document.getElementById('results-message');
|
|
|
|
if (accuracy >= 90) {
|
|
resultsTitle.textContent = 'Excellent!';
|
|
resultsMessage.textContent = 'You have a strong understanding of the educational objectives and learning progression of the Python Joke Bot project.';
|
|
} else if (accuracy >= 70) {
|
|
resultsTitle.textContent = 'Great Job!';
|
|
resultsMessage.textContent = 'You understand the main educational concepts behind the project. Review any missed questions to strengthen your knowledge.';
|
|
} else if (accuracy >= 50) {
|
|
resultsTitle.textContent = 'Good Effort!';
|
|
resultsMessage.textContent = 'You have basic understanding of the project\'s educational goals. Consider reviewing the learning progression and concepts.';
|
|
} else {
|
|
resultsTitle.textContent = 'Keep Learning!';
|
|
resultsMessage.textContent = 'Review how the Python Joke Bot project teaches programming concepts through progressive, practical application.';
|
|
}
|
|
}
|
|
|
|
// Restart quiz function
|
|
function restartQuiz() {
|
|
// Reset variables
|
|
currentQuestion = 1;
|
|
score = 0;
|
|
userAnswers.fill(null);
|
|
|
|
// Reset UI
|
|
document.querySelector('.quiz-progress').style.display = 'flex';
|
|
document.getElementById('results').classList.remove('show');
|
|
|
|
// Reset all questions
|
|
for (let i = 1; i <= totalQuestions; i++) {
|
|
const question = document.getElementById(`question${i}`);
|
|
question.classList.remove('active');
|
|
|
|
// Reset options
|
|
question.querySelectorAll('.option').forEach(option => {
|
|
option.classList.remove('selected', 'correct', 'incorrect');
|
|
option.style.pointerEvents = 'auto';
|
|
});
|
|
|
|
// Reset explanations
|
|
const explanation = document.getElementById(`explanation${i}`);
|
|
explanation.classList.remove('show');
|
|
|
|
// Reset buttons
|
|
const checkBtn = question.querySelector('.nav-btn');
|
|
checkBtn.textContent = 'Check Answer';
|
|
checkBtn.onclick = () => checkAnswer(i);
|
|
checkBtn.disabled = false;
|
|
|
|
const prevBtn = question.querySelectorAll('.nav-btn')[1];
|
|
if (prevBtn) {
|
|
prevBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Show first question
|
|
document.getElementById('question1').classList.add('active');
|
|
updateProgress();
|
|
}
|
|
|
|
// Initialize quiz on load
|
|
window.addEventListener('DOMContentLoaded', initializeQuiz);
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight') {
|
|
const activeQuestion = document.querySelector('.question-container.active');
|
|
const checkBtn = activeQuestion.querySelector('.nav-btn');
|
|
if (checkBtn && !checkBtn.disabled) {
|
|
checkBtn.click();
|
|
}
|
|
} else if (e.key === 'ArrowLeft') {
|
|
const activeQuestion = document.querySelector('.question-container.active');
|
|
const prevBtn = activeQuestion.querySelectorAll('.nav-btn')[1];
|
|
if (prevBtn && !prevBtn.disabled) {
|
|
prevBtn.click();
|
|
}
|
|
} else if (e.key >= '1' && e.key <= '4') {
|
|
const optionIndex = parseInt(e.key) - 1;
|
|
const activeQuestion = document.querySelector('.question-container.active');
|
|
const options = activeQuestion.querySelectorAll('.option');
|
|
if (options[optionIndex]) {
|
|
options[optionIndex].click();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body></html> |