1301 lines
61 KiB
HTML
1301 lines
61 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0063)file:///Users/home/Downloads/deepseek_html_20260205_70e904.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>School Scheduling System - Comprehensive 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">School Scheduling System Quiz</h1>
|
|
<p class="quiz-subtitle">Test your knowledge of the AI-Enabled Database Upgrade Project</p>
|
|
</div>
|
|
|
|
<div class="quiz-progress">
|
|
<span id="current-question">Question 18</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill" style="width: 85%;"></div>
|
|
</div>
|
|
<span id="total-questions">of 20</span>
|
|
</div>
|
|
|
|
<!-- Question 1 -->
|
|
<div class="question-container" id="question1">
|
|
<div class="question-number">Problem Statement</div>
|
|
<h2 class="question-text">What is the core problem identified with current school scheduling systems using spreadsheets?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Spreadsheets are too expensive to maintain</div>
|
|
</div>
|
|
<div class="option selected correct" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Data duplication, inefficient queries, inconsistency, and limited accessibility</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Teachers don't know how to use spreadsheet software</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Spreadsheets cannot handle basic mathematical calculations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation1">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project identified four major spreadsheet limitations: 1) Data duplication across multiple files, 2) Inefficient queries requiring manual searching, 3) Data inconsistency when updates don't propagate, and 4) Limited accessibility for real-time information.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(1)">Next Question</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">Project Goals</div>
|
|
<h2 class="question-text">What were the primary performance objectives of the database system?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Reduce hardware costs by 50% and increase storage capacity</div>
|
|
</div>
|
|
<div class="option selected correct" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">90% reduction in data entry time and sub-second query responses</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Make the system compatible with all operating systems</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Implement blockchain technology for security</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation2">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project set specific performance targets: 90% reduction in data entry time, 100% elimination of duplicate data, real-time query response in less than 1 second, and support for 1,000+ concurrent users.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(2)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 3 -->
|
|
<div class="question-container" id="question3">
|
|
<div class="question-number">Methodology</div>
|
|
<h2 class="question-text">What was the systematic approach used in the project methodology?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Analysis, design, migration, interface creation, and validation implementation</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Survey, prototype, testing, deployment, and maintenance</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Requirements gathering, coding, debugging, and documentation</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Market research, funding acquisition, team building, and product launch</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation3">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project followed a 5-step systematic approach: 1) Analyze current spreadsheet structure, 2) Design normalized database, 3) Develop migration tools, 4) Create query interface, and 5) Implement validation systems.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(3)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 4 -->
|
|
<div class="question-container" id="question4">
|
|
<div class="question-number">Schedule Complexity</div>
|
|
<h2 class="question-text">What makes school scheduling particularly complex for spreadsheet management?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Students being in multiple groups simultaneously with different affiliations</div>
|
|
</div>
|
|
<div class="option selected incorrect" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Spreadsheets have row and column limitations that schools exceed</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Teachers frequently change their schedules without notice</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Schools use different spreadsheet software that aren't compatible</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation4">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>School schedules involve complex overlapping systems: students are in multiple groups (classes, English levels, tech tracks, clubs) simultaneously, with different temporal structures and 5+ simultaneous affiliations per student.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(4)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 5 -->
|
|
<div class="question-container" id="question5">
|
|
<div class="question-number">System Architecture</div>
|
|
<h2 class="question-text">What two main diagrams were created to show system architecture?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Data Flow Diagram (DFD) and Entity Relationship Diagram (ERD)</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">UML Class Diagram and Sequence Diagram</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Network Topology Diagram and Security Architecture Diagram</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Gantt Chart and Work Breakdown Structure</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation5">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project created a Data Flow Diagram (DFD) to show system workflow and an Entity Relationship Diagram (ERD) to show database structure. The DFD addresses data flow issues, while the ERD solves structural problems.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(5)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 6 -->
|
|
<div class="question-container" id="question6">
|
|
<div class="question-number">Database Design</div>
|
|
<h2 class="question-text">How many tables were designed in the database schema and what was the key principle?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">8 tables with everything connecting through the People table</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">12 tables with centralized security management</div>
|
|
</div>
|
|
<div class="option selected correct" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">17 tables with everything connecting through the Schedule Entries table</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">25 tables with distributed relationship management</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation6">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The database was designed with 17 normalized tables organized into three layers: Security Layer (top), Core Data (middle), and Connection Hub (bottom). The key principle is that everything connects through the central Schedule Entries table.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(6)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 7 -->
|
|
<div class="question-container" id="question7">
|
|
<div class="question-number">Functional Prototype</div>
|
|
<h2 class="question-text">What platform was used for the functional prototype and what commands did it support?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Web application with login, schedule view, and edit functions</div>
|
|
</div>
|
|
<div class="option selected correct" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Telegram bot with /whereis, /schedule, and /tomorrow commands</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Mobile app with push notifications and calendar integration</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Desktop application with offline access and reporting</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation7">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>A Telegram bot was developed as the functional prototype, supporting commands like /whereis (find student location), /schedule (show daily schedule), and /tomorrow (display tomorrow's schedule), demonstrating query efficiency improvements.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(7)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 8 -->
|
|
<div class="question-container" id="question8">
|
|
<div class="question-number">Technology Stack</div>
|
|
<h2 class="question-text">Which technologies were used in the project implementation?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Python, SQLite, Telegram, Pandas, and Flask</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Java, MySQL, WhatsApp, Spring Boot, and Hibernate</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">JavaScript, MongoDB, Facebook Messenger, Node.js, and Express</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">C#, SQL Server, Microsoft Teams, .NET, and Entity Framework</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation8">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project used Python for programming, SQLite for the database, Telegram for the bot platform, Pandas for data transformation, and Flask for API integration and web framework.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(8)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 9 -->
|
|
<div class="question-container" id="question9">
|
|
<div class="question-number">Efficiency Comparison</div>
|
|
<h2 class="question-text">What was the query efficiency comparison between spreadsheet and database systems?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Spreadsheets: 5-10 minutes vs Database: less than 1 second</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Spreadsheets: 1-2 minutes vs Database: 10-15 seconds</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Both systems respond in similar time frames</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Spreadsheets are actually faster for simple queries</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation9">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The manual spreadsheet method for finding a student's location takes 5-10 minutes across multiple files, while the database system provides responses in less than 1 second through optimized queries.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(9)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 10 -->
|
|
<div class="question-container" id="question10">
|
|
<div class="question-number">Future Development</div>
|
|
<h2 class="question-text">What were the proposed future development steps?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">System deployment, web portal, AI optimization, and analytics dashboard</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Mobile app development, cloud migration, and internationalization</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Virtual reality interface, voice commands, and IoT integration</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Blockchain integration, cryptocurrency payments, and NFT schedules</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation10">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Future development includes: 1) Full system deployment replacing spreadsheets, 2) Parent/student web portal, 3) AI scheduling optimization, and 4) Analytics dashboard for data-driven insights.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(10)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 11 -->
|
|
<div class="question-container" id="question11">
|
|
<div class="question-number">Implementation Timeline</div>
|
|
<h2 class="question-text">What was the estimated timeline for full implementation?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">3 months: migration, development, and optimization phases</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">6 months: research, design, development, testing, and deployment</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">1 year for complete system overhaul</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">2 weeks for rapid deployment</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation11">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project estimated a 3-month implementation timeline: Month 1 for data migration and system setup, Month 2 for portal development and staff training, and Month 3 for full implementation and optimization.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(11)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 12 -->
|
|
<div class="question-container" id="question12">
|
|
<div class="question-number">Data Flow Diagram</div>
|
|
<h2 class="question-text">What problems does the Data Flow Diagram (DFD) specifically address?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Centralized data flow, automated synchronization, and real-time validation</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Network security, data encryption, and access control</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">User interface design and user experience optimization</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Hardware requirements and server infrastructure</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation12">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The DFD addresses: 1) Centralized data flow (vs scattered spreadsheet files), 2) Automated synchronization (updates propagate instantly), 3) Single source of truth (eliminates duplicate entries), and 4) Real-time validation (catches errors immediately).</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(12)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 13 -->
|
|
<div class="question-container" id="question13">
|
|
<div class="question-number">ERD Core Tables</div>
|
|
<h2 class="question-text">What are the core database tables in the Entity Relationship Diagram?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Students, teachers, subjects, schedule_entries, and audit_log</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Users, permissions, logs, backups, and settings</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Courses, departments, buildings, equipment, and finances</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Attendance, grades, assignments, exams, and reports</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation13">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Core tables include: students, teachers, subjects (centralized entities), schedule_entries (main scheduling table), and audit_log (comprehensive change tracking). Relationship tables handle student_subjects and student_groups connections.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(13)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 14 -->
|
|
<div class="question-container" id="question14">
|
|
<div class="question-number">Database Layers</div>
|
|
<h2 class="question-text">How is the 17-table database organized into layers?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Security Layer (top), Core Data (middle), Connection Hub (bottom)</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Presentation Layer, Business Logic Layer, Data Access Layer</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">User Interface Layer, Application Layer, Database Layer</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Frontend Layer, Backend Layer, Storage Layer</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation14">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The database is organized into three conceptual layers: 1) Security Layer (users, audit_log), 2) Core Data (people, places, groups), and 3) Connection Hub (schedule_entries, time_management, special_groups).</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(14)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 15 -->
|
|
<div class="question-container" id="question15">
|
|
<div class="question-number">Student Group Types</div>
|
|
<h2 class="question-text">What types of student groups contribute to scheduling complexity?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Primary classes, English levels, tech tracks, olympiad groups, and extracurriculars</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Sports teams, music bands, art clubs, and drama groups</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Study groups, project teams, and tutoring sessions</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Grade levels, homerooms, and advisory groups</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation15">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Students belong to multiple simultaneous groups: 1) Primary class groups (4A, 4B), 2) English proficiency groups (E1-E6), 3) Technology track groups, 4) Olympiad groups, and 5) Extracurricular activities, each potentially in separate spreadsheets.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(15)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 16 -->
|
|
<div class="question-container" id="question16">
|
|
<div class="question-number">Technical Features</div>
|
|
<h2 class="question-text">What technical features specifically address spreadsheet problems?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Structured design, API layer, data migration, query optimization, real-time updates</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Cloud storage, machine learning, natural language processing, computer vision</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Virtual machines, containerization, microservices, serverless architecture</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Blockchain, smart contracts, decentralized storage, cryptocurrency</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation16">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Technical solutions include: 1) Structured design prevents duplication, 2) API layer provides real-time access, 3) Data migration transforms spreadsheets, 4) Query optimization enables sub-second responses, and 5) Real-time updates ensure synchronization.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(16)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 17 -->
|
|
<div class="question-container" id="question17">
|
|
<div class="question-number">Operational Impact</div>
|
|
<h2 class="question-text">What is the operational impact of current spreadsheet limitations?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Significant administrative time spent, multiple file updates needed, no real-time access</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">High software licensing costs, frequent crashes, data loss risks</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Compatibility issues, version conflicts, training requirements</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Limited features, poor user interface, slow performance</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation17">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>Current limitations cause: 1) Administrative staff spend significant time reconciling information, 2) Room changes require updates in multiple files, 3) Parents/students lack real-time access, and 4) Manual searching takes 5-10 minutes.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(17)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 18 -->
|
|
<div class="question-container active" id="question18">
|
|
<div class="question-number">Project Scope</div>
|
|
<h2 class="question-text">What was the scope of the project demonstration?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option selected correct" data-value="a" style="pointer-events: none;">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Analysis, design, prototype, and implementation plan</div>
|
|
</div>
|
|
<div class="option" data-value="b" style="pointer-events: none;">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Complete production system with all features implemented</div>
|
|
</div>
|
|
<div class="option" data-value="c" style="pointer-events: none;">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Market analysis, competitor research, and business plan</div>
|
|
</div>
|
|
<div class="option" data-value="d" style="pointer-events: none;">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Hardware procurement and network infrastructure setup</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation show" id="explanation18">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project scope included: 1) Problem analysis and requirements, 2) System design (DFD/ERD), 3) Functional prototype (Telegram bot), and 4) Implementation plan with timeline and technology stack.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(18)">Next Question</button>
|
|
<button class="nav-btn" onclick="previousQuestion()" disabled="">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 19 -->
|
|
<div class="question-container" id="question19">
|
|
<div class="question-number">Data Migration</div>
|
|
<h2 class="question-text">How does the project handle migration from spreadsheets to database?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Python scripts using Pandas to extract, transform, and load data</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Manual data entry by administrative staff</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Third-party conversion software purchase</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Gradual transition keeping both systems running</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation19">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project develops Python scripts using the Pandas library to extract data from multiple spreadsheets, transform it into normalized format, and load it into the SQLite database, eliminating manual data entry.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(19)">Check Answer</button>
|
|
<button class="nav-btn" onclick="previousQuestion()">Previous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 20 -->
|
|
<div class="question-container" id="question20">
|
|
<div class="question-number">Conclusion</div>
|
|
<h2 class="question-text">What does the project conclude about database solutions for school scheduling?</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option" data-value="a">
|
|
<div class="option-label">A</div>
|
|
<div class="option-text">Database systems address spreadsheet limitations and provide foundation for future AI development</div>
|
|
</div>
|
|
<div class="option" data-value="b">
|
|
<div class="option-label">B</div>
|
|
<div class="option-text">Spreadsheets are sufficient for most school scheduling needs with proper training</div>
|
|
</div>
|
|
<div class="option" data-value="c">
|
|
<div class="option-label">C</div>
|
|
<div class="option-text">Custom software development is too expensive for schools</div>
|
|
</div>
|
|
<div class="option" data-value="d">
|
|
<div class="option-label">D</div>
|
|
<div class="option-text">Cloud-based solutions are the only viable option</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="explanation" id="explanation20">
|
|
<div class="explanation-title">Explanation</div>
|
|
<p>The project concludes that database systems effectively address spreadsheet limitations (duplication, inefficient queries, inconsistency, limited access) while providing a foundation for future AI capabilities and practical implementation.</p>
|
|
</div>
|
|
|
|
<div class="quiz-footer">
|
|
<button class="nav-btn" onclick="checkAnswer(20)">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 School Scheduling System Quiz.</p>
|
|
|
|
<div class="results-details">
|
|
<div class="detail-item">
|
|
<span>Total Questions:</span>
|
|
<span id="total-questions-result">20</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 = 20;
|
|
let currentQuestion = 1;
|
|
let score = 0;
|
|
let userAnswers = new Array(totalQuestions).fill(null);
|
|
const correctAnswers = {
|
|
1: "b", 2: "b", 3: "a", 4: "a", 5: "a",
|
|
6: "c", 7: "b", 8: "a", 9: "a", 10: "a",
|
|
11: "a", 12: "a", 13: "a", 14: "a", 15: "a",
|
|
16: "a", 17: "a", 18: "a", 19: "a", 20: "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 mastered the School Scheduling System project concepts. Your understanding is comprehensive and detailed.';
|
|
} else if (accuracy >= 70) {
|
|
resultsTitle.textContent = 'Great Job!';
|
|
resultsMessage.textContent = 'You have a solid understanding of the project. Review the explanations for any missed questions to strengthen your knowledge.';
|
|
} else if (accuracy >= 50) {
|
|
resultsTitle.textContent = 'Good Effort!';
|
|
resultsMessage.textContent = 'You have basic understanding of the project. Consider reviewing the presentation materials and explanations.';
|
|
} else {
|
|
resultsTitle.textContent = 'Keep Learning!';
|
|
resultsMessage.textContent = 'Review the project materials and explanations to improve your understanding of the School Scheduling System.';
|
|
}
|
|
}
|
|
|
|
// 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> |