|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EduLearn - eLearning for High School</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4F46E5', |
|
|
secondary: '#10B981', |
|
|
dark: '#1F2937', |
|
|
light: '#F9FAFB', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.screen { |
|
|
display: none; |
|
|
height: 100vh; |
|
|
overflow-y: auto; |
|
|
position: relative; |
|
|
} |
|
|
.active-screen { |
|
|
display: block; |
|
|
} |
|
|
.video-container { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.video-container iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.quiz-option { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.quiz-option:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.correct { |
|
|
background-color: #10B981 !important; |
|
|
color: white !important; |
|
|
} |
|
|
.incorrect { |
|
|
background-color: #EF4444 !important; |
|
|
color: white !important; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans text-dark"> |
|
|
|
|
|
<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden relative h-screen"> |
|
|
|
|
|
<div id="splash-screen" class="screen active-screen flex flex-col items-center justify-center bg-primary text-white"> |
|
|
<div class="text-center fade-in"> |
|
|
<i class="fas fa-graduation-cap text-6xl mb-4"></i> |
|
|
<h1 class="text-3xl font-bold">EduLearn</h1> |
|
|
<p class="mt-2 text-light">Learning made simple for high school</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="auth-container"> |
|
|
|
|
|
<div id="login-screen" class="screen p-6"> |
|
|
<div class="flex justify-center mb-8"> |
|
|
<i class="fas fa-graduation-cap text-primary text-5xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold text-center mb-6">Welcome Back</h1> |
|
|
|
|
|
<form id="login-form" class="space-y-4"> |
|
|
<div> |
|
|
<label for="login-email" class="block text-sm font-medium mb-1">Email</label> |
|
|
<input type="email" id="login-email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="student@example.com" required> |
|
|
<p id="login-email-error" class="text-red-500 text-xs mt-1 hidden">Invalid email format</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="login-password" class="block text-sm font-medium mb-1">Password</label> |
|
|
<input type="password" id="login-password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="••••••••" required> |
|
|
<p id="login-password-error" class="text-red-500 text-xs mt-1 hidden">Password must be at least 6 characters</p> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-primary text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition duration-200">Log In</button> |
|
|
|
|
|
<div class="text-center"> |
|
|
<p class="text-sm">Don't have an account? <button id="show-register-btn" class="text-primary font-medium">Register</button></p> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="register-screen" class="screen p-6 hidden"> |
|
|
<div class="flex justify-center mb-8"> |
|
|
<i class="fas fa-user-plus text-primary text-5xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold text-center mb-6">Create Account</h1> |
|
|
|
|
|
<form id="register-form" class="space-y-4"> |
|
|
<div> |
|
|
<label for="register-name" class="block text-sm font-medium mb-1">Full Name</label> |
|
|
<input type="text" id="register-name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="John Doe" required> |
|
|
<p id="register-name-error" class="text-red-500 text-xs mt-1 hidden">Name is required</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="register-email" class="block text-sm font-medium mb-1">Email</label> |
|
|
<input type="email" id="register-email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="student@example.com" required> |
|
|
<p id="register-email-error" class="text-red-500 text-xs mt-1 hidden">Invalid email format</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="register-password" class="block text-sm font-medium mb-1">Password</label> |
|
|
<input type="password" id="register-password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="••••••••" required> |
|
|
<p id="register-password-error" class="text-red-500 text-xs mt-1 hidden">Password must be at least 6 characters</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="register-confirm" class="block text-sm font-medium mb-1">Confirm Password</label> |
|
|
<input type="password" id="register-confirm" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="••••••••" required> |
|
|
<p id="register-confirm-error" class="text-red-500 text-xs mt-1 hidden">Passwords don't match</p> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-primary text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition duration-200">Register</button> |
|
|
|
|
|
<div class="text-center"> |
|
|
<p class="text-sm">Already have an account? <button id="show-login-btn" class="text-primary font-medium">Log In</button></p> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="app-container" class="hidden"> |
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3 z-10 max-w-md mx-auto"> |
|
|
<button class="nav-btn active-nav" data-target="home-screen"> |
|
|
<i class="fas fa-home text-primary text-xl"></i> |
|
|
<span class="text-xs mt-1">Home</span> |
|
|
</button> |
|
|
<button class="nav-btn" data-target="my-courses-screen"> |
|
|
<i class="fas fa-book text-gray-400 text-xl"></i> |
|
|
<span class="text-xs mt-1">My Courses</span> |
|
|
</button> |
|
|
<button class="nav-btn" data-target="progress-screen"> |
|
|
<i class="fas fa-chart-line text-gray-400 text-xl"></i> |
|
|
<span class="text-xs mt-1">Progress</span> |
|
|
</button> |
|
|
<button class="nav-btn" data-target="profile-screen"> |
|
|
<i class="fas fa-user text-gray-400 text-xl"></i> |
|
|
<span class="text-xs mt-1">Profile</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="home-screen" class="screen pb-24 fade-in"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h1 class="text-xl font-bold">Welcome back, <span id="username-display">Student</span>!</h1> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-gray4 00 text-xl"></i> |
|
|
<span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 relative"> |
|
|
<input type="text" placeholder="Search courses..." class="w-full py-2 pl-10 pr-4 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<h2 class="text-lg font-semibold mb-3">Featured Categories</h2> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="category-card bg-gradient-to-r from-primary to-indigo-400 rounded-lg p-4 text-white cursor-pointer" data-category="math"> |
|
|
<i class="fas calculator text-2xl mb-2"></i> |
|
|
<h3 class="font-medium">Mathematics</h3> |
|
|
<p class="text-xs opacity-80">12 courses</p> |
|
|
</div> |
|
|
<div class="category-card bg-gradient-to-r from-green-500 to-secondary rounded-lg p-4 text-white cursor-pointer" data-category="science"> |
|
|
<i class="fas fa-flask text-2xl mb-2"></i> |
|
|
<h3 class="font-medium">Science</h3> |
|
|
<p class="text-xs opacity-80">8 courses</p> |
|
|
</div> |
|
|
<div class="category-card bg-gradient-to-r from-amber-500 to-yellow-400 rounded-lg p-4 text-white cursor-pointer" data-category="english"> |
|
|
<i class="fas fa-book-open text-2xl mb-2"></i> |
|
|
<h3 class="font-medium">English</h3> |
|
|
<p class="text-xs opacity-80">5 courses</p> |
|
|
</div> |
|
|
<div class="category-card bg-gradient-to-r from-pink-500 to-rose-400 rounded-lg p-4 text-white cursor-pointer" data-category="history"> |
|
|
<i class="fas fa-landmark text-2xl mb-2"></i> |
|
|
<h3 class="font-medium">History</h3> |
|
|
<p class="text-xs opacity-80">6 courses</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-lg font-semibold mt-6 mb-3">Popular Courses</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="course-card rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-course="algebra"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Algebra" class="w-full h-32 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-primary text-white text-xs px-2 py-1 rounded">Mathematics</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-semibold">Algebra Fundamentals</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Master the basics of algebraic expressions and equations</p> |
|
|
<div class="flex justify-between items-center mt-2 text-xs"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span>4.7 (1.2k)</span> |
|
|
</div> |
|
|
<button class="text-primary font-medium text-xs hover:underline">View Course</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="course-card rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-course="biology"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Biology" class="w-full h-32 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">Science</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-semibold">Introduction to Biology</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Explore the basics of living organisms and their interactions</p> |
|
|
<div class="flex justify-between items-center mt-2 text-xs"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span>4.5 (956)</span> |
|
|
</div> |
|
|
<button class="text-primary font-medium text-xs hover:underline">View Course</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="my-courses-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200"> |
|
|
<h1 class="text-xl font-bold">My Courses</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div id="enrolled-courses" class="space-y-4"> |
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center"> |
|
|
<i class="fas fa-book-open text-gray-300 text-3xl mb-2"></i> |
|
|
<p class="text-gray-500">You haven't enrolled in any courses yet</p> |
|
|
<button class="text-primary font-medium mt-2 hover:underline">Browse Courses</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-lg font-semibold mt-6 mb-3">Continue Learning</h2> |
|
|
<div id="continue-learning" class="space-y-4"> |
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center"> |
|
|
<i class="fas fa-compass text-gray-300 text-3xl mb-2"></i> |
|
|
<p class="text-gray-500">No recent activity</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="progress-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200"> |
|
|
<h1 class="text-xl font-bold">My Progress</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 space-y-6"> |
|
|
<div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200"> |
|
|
<h2 class="font-semibold mb-3">Overall Progress</h2> |
|
|
<div class="flex items-center justify-center h-40 relative w-40 mx-auto"> |
|
|
<svg class="w-full h-full" viewBox="0 0 100 100"> |
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#E5E7EB" stroke-width="8"/> |
|
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#10B981" stroke-width="8" stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="141.5"> |
|
|
<animate attributeName="stroke-dashoffset" from="283" to="141.5" dur="1.5s" fill="freeze"/> |
|
|
</circle> |
|
|
<text x="50" y="53" text-anchor="middle" font-size="16" font-weight="bold">50%</text> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="mt-4 text-center"> |
|
|
<p class="text-sm text-gray-600">You've completed <span class="font-semibold">3</span> out of <span class="font-semibold">6</span> started courses</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="font-semibold mb-3">Course Progress</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="border border-gray-200 rounded-lg p-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium">Algebra Fundamentals</h3> |
|
|
<span class="text-xs bg-blue-50 text-primary px-2 py-1 rounded">Mathematics</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-2"> |
|
|
<div class="progress-bar bg-primary rounded-full h-2" style="width: 30%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>3 of 10 lessons</span> |
|
|
<span>30% completed</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<h3 class="font-medium">Introduction to Biology</h3> |
|
|
<span class="text-xs bg-green-50 text-green-700 px-2 py-1 rounded">Science</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-2"> |
|
|
<div class="progress-bar bg-green-500 rounded-full h-2" style="width: 75%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>6 of 8 lessons</span> |
|
|
<span>75% completed</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="profile-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200"> |
|
|
<h1 class="text-xl font-bold">My Profile</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 space-y-6"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="relative mb-3"> |
|
|
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Profile" class="w-24 h-24 rounded-full border-4 border-primary p-1"> |
|
|
<button class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center"> |
|
|
<i class="fas fa-pencil-alt text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold" id="profile-name">John Doe</h2> |
|
|
<p class="text-gray-600 text-sm" id="profile-email">john.doe@example.com</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="border border-gray-200 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-3">Account Settings</h3> |
|
|
<div class="space-y-3"> |
|
|
<button class="flex justify-between items-center w-full text-left"> |
|
|
<span><i class="fas fa-user-edit text-primary mr-2"></i> Edit Profile</span> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button class="flex justify-between items-center w-full text-left"> |
|
|
<span><i class="fas fa-lock text-primary mr-2"></i> Change Password</span> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button class="flex justify-between items-center w-full text-left"> |
|
|
<span><i class="fas fa-bell text-primary mr-2"></i> Notification Settings</span> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4"> |
|
|
<h3 class="font-medium mb-3">More</h3> |
|
|
<div class="space-y-3"> |
|
|
<button class="flex justify-between items-center w-full text-left"> |
|
|
<span><i class="fas fa-question-circle text-primary mr-2"></i> Help Center</span> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button class="flex justify-between items-center w-full text-left"> |
|
|
<span><i class="fas fa-share-alt text-primary mr-2"></i> Share App</span> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
<button id="logout-btn" class="flex justify-between items-center w-full text-left text-red-500"> |
|
|
<span><i class="fas fa-sign-out-alt mr-2"></i> Logout</span> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="category-courses-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200 flex items-center"> |
|
|
<button id="back-to-home" class="mr-3"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold" id="category-title">Category</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-2 gap-4" id="category-courses-list"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="course-detail-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200 flex items-center"> |
|
|
<button id="back-to-category" class="mr-3"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold truncate" id="course-title">Course Title</h1> |
|
|
</div> |
|
|
|
|
|
<div id="course-detail-content"> |
|
|
<div class="relative"> |
|
|
<img id="course-detail-image" src="" alt="Course" class="w-full h-48 object-cover"> |
|
|
<div class="absolute bottom-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded" id="course-detail-category"></div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span id="course-rating">4.5 (1.2k)</span> |
|
|
</div> |
|
|
<div class="text-sm" id="course-length">10 Lessons</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-800 mb-4" id="course-description">Course description goes here...</p> |
|
|
|
|
|
<button id="enroll-course-btn" class="w-full bg-primary text-white py-2 rounded-lg font-medium mb-4 hover:bg-indigo-700 transition duration-200"> |
|
|
Enroll Now |
|
|
</button> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4"> |
|
|
<h3 class="font-semibold mb-3">About this course</h3> |
|
|
<p id="course-about" class="text-sm text-gray-700 mb-4">Detailed about section for the course...</p> |
|
|
|
|
|
<h3 class="font-semibold mb-3">What you'll learn</h3> |
|
|
<ul id="course-learn-list" class="space-y-2 text-sm text-gray-700 list-disc list-inside"> |
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-200 pt-4 mt-4"> |
|
|
<h3 class="font-semibold mb-3">Course Lessons</h3> |
|
|
<div id="course-lessons-list" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="lesson-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200 flex items-center"> |
|
|
<button id="back-to-course" class="mr-3"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold truncate" id="lesson-title">Lesson Title</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="text-sm text-gray-600" id="lesson-progress">Lesson 2 of 10</div> |
|
|
<div class="text-sm text-gray-600" id="lesson-duration">8 min</div> |
|
|
</div> |
|
|
|
|
|
<div id="lesson-content" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="fixed bottom-16 left-0 right-0 bg-white border-t border-gray-200 p-3 flex justify-between max-w-md mx-auto"> |
|
|
<button id="prev-lesson-btn" class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition duration-200"> |
|
|
<i class="fas fa-arrow-left mr-2"></i> Previous |
|
|
</button> |
|
|
<button id="next-lesson-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition duration-200"> |
|
|
Next <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quiz-screen" class="screen pb-24 hidden"> |
|
|
<div class="p-4 sticky top-0 bg-white z-10 border-b border-gray-200 flex items-center"> |
|
|
<button id="back-from-quiz" class="mr-3"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold truncate">Quiz</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-4"> |
|
|
<div id="quiz-progress-bar" class="progress-bar bg-primary rounded-full h-2" style="width: 0%"></div> |
|
|
</div> |
|
|
|
|
|
<div id="quiz-container" class="space-y-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<button id="submit-quiz-btn" class="w-full bg-primary text-white py-2 rounded-lg font-medium mt-6 hover:bg-indigo-700 transition duration-200 hidden"> |
|
|
Submit Quiz |
|
|
</button> |
|
|
|
|
|
<div id="quiz-result" class="hidden"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mockUser = { |
|
|
name: "John Doe", |
|
|
email: "john.doe@example.com" |
|
|
}; |
|
|
|
|
|
const mockCourses = { |
|
|
math: [ |
|
|
{ |
|
|
id: "algebra", |
|
|
title: "Algebra Fundamentals", |
|
|
description: "Master the basics of algebraic expressions and equations", |
|
|
category: "Mathematics", |
|
|
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.7 (1.2k)", |
|
|
length: "10 lessons", |
|
|
about: "This course covers the fundamental concepts of algebra, including variables, expressions, equations, inequalities, and functions. Perfect for high school students or anyone looking to build a strong foundation in mathematics.", |
|
|
learn: [ |
|
|
"Understand and work with variables and algebraic expressions", |
|
|
"Solve linear equations and inequalities", |
|
|
"Graph linear equations and understand slope", |
|
|
"Work with systems of equations", |
|
|
"Explore polynomial and quadratic functions" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [ |
|
|
{ |
|
|
id: "algebra-1", |
|
|
title: "Introduction to Variables", |
|
|
duration: "5 min", |
|
|
content: [ |
|
|
"<p>Variables are symbols used to represent unknown values in mathematics. They allow us to create general rules and formulas that can be applied to many different situations.</p>", |
|
|
"<img src='https://images.unsplash.com/photo-1596495577886-d920f1fb7238?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>", |
|
|
"<p>Common variable letters include <b>x</b>, <b>y</b>, and <b>z</b>. In the expression <b>2x + 5</b>, <b>x</b> is the variable.</p>", |
|
|
"<div class='video-container my-3'><iframe src='https://www.youtube.com/embed/N-XH6hBTQ9Q' frameborder='0' allowfullscreen></iframe></div>", |
|
|
"<p>Variables can represent:</p><ul class='list-disc list-inside ml-4'><li>Unknown quantities in equations</li><li>Changing values in formulas</li><li>General patterns in mathematical relationships</li></ul>" |
|
|
], |
|
|
quiz: [ |
|
|
{ |
|
|
question: "What is a variable in algebra?", |
|
|
options: [ |
|
|
"A fixed number", |
|
|
"A symbol representing an unknown value", |
|
|
"A type of equation", |
|
|
"A mathematical operation" |
|
|
], |
|
|
answer: 1, |
|
|
explanation: "In algebra, a variable is a symbol (usually a letter) that stands for an unknown numerical value in an equation or expression." |
|
|
}, |
|
|
{ |
|
|
question: "Which of these is a variable?", |
|
|
options: [ |
|
|
"5", |
|
|
"+", |
|
|
"x", |
|
|
"=" |
|
|
], |
|
|
answer: 2, |
|
|
explanation: "In mathematics, letters like x, y, or z are commonly used as variables to represent unknown values." |
|
|
} |
|
|
], |
|
|
completed: false |
|
|
}, |
|
|
{ |
|
|
id: "algebra-2", |
|
|
title: "Solving Linear Equations", |
|
|
duration: "8 min", |
|
|
content: [ |
|
|
"<p>A linear equation is an equation for a straight line. The standard form is <b>ax + b = c</b>, where <b>x</b> is the variable.</p>", |
|
|
"<img src='https://images.unsplash.com/photo-1610375465447-0ad49a219f9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>", |
|
|
"<p>To solve for <b>x</b>:</p><ol class='list-decimal list-inside ml-4'><li>Subtract <b>b</b> from both sides: <b>ax = c - b</b></li><li>Divide both sides by <b>a</b>: <b>x = (c - b)/a</b></li></ol>", |
|
|
"<div class='bg-blue-50 p-3 rounded-lg my-3'><p class='font-medium'>Example:</p><p>Solve <b>3x + 5 = 14</b> for <b>x</b>:</p><p>1. Subtract 5: <b>3x = 9</b></p><p>2. Divide by 3: <b>x = 3</b></p></div>" |
|
|
], |
|
|
quiz: [ |
|
|
{ |
|
|
question: "What is the solution to 2x + 3 = 9?", |
|
|
options: [ |
|
|
"x = 2", |
|
|
"x = 3", |
|
|
"x = 4", |
|
|
"x = 6" |
|
|
], |
|
|
answer: 1, |
|
|
explanation: "First subtract 3 from both sides (2x = 6), then divide both sides by 2 (x = 3)." |
|
|
} |
|
|
], |
|
|
completed: false |
|
|
}, |
|
|
{ |
|
|
id: "algebra-3", |
|
|
title: "Graphing Linear Equations", |
|
|
duration: "10 min", |
|
|
content: [ |
|
|
"<p>Linear equations can be graphed on the coordinate plane. The standard form is <b>y = mx + b</b>, where:</p>", |
|
|
"<ul class='list-disc list-inside ml-4'><li><b>m</b> is the slope (steepness)</li><li><b>b</b> is the y-intercept (where it crosses the y-axis)</li></ul>", |
|
|
"<img src='https://images.unsplash.com/photo-1581092921461-39b2f2fc563f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>", |
|
|
"<div class='video-container my-3'><iframe src='https://www.youtube.com/embed/xyitzhI5U_w' frameborder='0' allowfullscreen></iframe></div>" |
|
|
], |
|
|
quiz: [], |
|
|
completed: false |
|
|
} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
id: "geometry", |
|
|
title: "Geometry Basics", |
|
|
description: "Learn about shapes, angles, and geometric proofs", |
|
|
category: "Mathematics", |
|
|
image: "https://images.unsplash.com/photo-1606327785662-86951903d3f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.4 (876)", |
|
|
length: "8 lessons", |
|
|
about: "This course introduces the basic concepts of Euclidean geometry, including points, lines, angles, triangles, quadrilaterals, circles, area, perimeter, and volume. Students will learn to construct geometric proofs and solve problems using geometric properties.", |
|
|
learn: [ |
|
|
"Identify and classify geometric shapes", |
|
|
"Calculate perimeter, area, and volume", |
|
|
"Understand angle relationships", |
|
|
"Construct geometric proofs", |
|
|
"Solve real-world problems using geometry" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [ |
|
|
{ |
|
|
id: "geometry-1", |
|
|
title: "Points, Lines, and Planes", |
|
|
duration: "6 min", |
|
|
content: [ |
|
|
"<p>Geometry is built on three undefined terms: point, line, and plane.</p>", |
|
|
"<ul class='list-disc list-inside ml-4'><li><b>Point</b> - A location with no size</li><li><b>Line</b> - A straight path that extends infinitely in both directions</li><li><b>Plane</b> - A flat surface that extends infinitely in all directions</li></ul>", |
|
|
"<img src='https://images.unsplash.com/photo-1581092918056-0c4d85a5261e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>" |
|
|
], |
|
|
quiz: [ |
|
|
{ |
|
|
question: "Which of these is an undefined term in geometry?", |
|
|
options: [ |
|
|
"Triangle", |
|
|
"Point", |
|
|
"Circle", |
|
|
"Square" |
|
|
], |
|
|
answer: 1, |
|
|
explanation: "Point, line, and plane are the undefined terms that form the basis of geometry." |
|
|
} |
|
|
], |
|
|
completed: false |
|
|
} |
|
|
], |
|
|
} |
|
|
], |
|
|
science: [ |
|
|
{ |
|
|
id: "biology", |
|
|
title: "Introduction to Biology", |
|
|
description: "Explore the basics of living organisms and their interactions", |
|
|
category: "Science", |
|
|
image: "https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.5 (956)", |
|
|
length: "8 lessons", |
|
|
about: "This course provides an introduction to the study of living organisms, including cells, genetics, evolution, and ecology. Students will explore the fundamental principles that govern life at all levels of organization, from molecules to ecosystems.", |
|
|
learn: [ |
|
|
"Understand cell structure and function", |
|
|
"Learn about genetics and inheritance", |
|
|
"Explore evolutionary processes", |
|
|
"Study ecological relationships", |
|
|
"Apply the scientific method to biological questions" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [ |
|
|
{ |
|
|
id: "biology-1", |
|
|
title: "The Cell: Life's Basic Unit", |
|
|
duration: "7 min", |
|
|
content: [ |
|
|
"<p>The cell is the basic structural and functional unit of all known living organisms.</p>", |
|
|
"<p>There are two main types of cells:</p><ul class='list-disc list-inside ml-4'><li><b>Prokaryotic cells</b> - Simple, small cells without a nucleus (bacteria)</li><li><b>Eukaryotic cells</b> - Complex cells with membrane-bound organelles (plants, animals, fungi)</li></ul>", |
|
|
"<img src='https://images.unsplash.com/photo-1635070041106-7c8e6b9f0474?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>", |
|
|
"<div class='video-container my-3'><iframe src='https://www.youtube.com/embed/URUJD5NEXC8' frameborder='0' allowfullscreen></iframe></div>" |
|
|
], |
|
|
quiz: [ |
|
|
{ |
|
|
question: "Which organelle is known as the 'powerhouse' of the cell?", |
|
|
options: [ |
|
|
"Nucleus", |
|
|
"Mitochondria", |
|
|
"Ribosome", |
|
|
"Golgi apparatus" |
|
|
], |
|
|
answer: 1, |
|
|
explanation: "Mitochondria are often called the powerhouse of the cell because they generate most of the cell's supply of ATP, used as a source of chemical energy." |
|
|
} |
|
|
], |
|
|
completed: false |
|
|
}, |
|
|
{ |
|
|
id: "biology-2", |
|
|
title: "DNA and Genetics", |
|
|
duration: "9 min", |
|
|
content: [ |
|
|
"<p>DNA (deoxyribonucleic acid) is the hereditary material in humans and almost all other organisms.</p>", |
|
|
"<img src='https://images.unsplash.com/photo-1635070041364-680110a845d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>", |
|
|
"<p>Key concepts in genetics:</p><ul class='list-disc list-inside ml-4'><li><b>Genes</b> - Segments of DNA that code for proteins</li><li><b>Chromosomes</b> - Thread-like structures made of DNA and proteins</li><li><b>Alleles</b> - Different versions of the same gene</li></ul>" |
|
|
], |
|
|
quiz: [ |
|
|
{ |
|
|
question: "What does DNA stand for?", |
|
|
options: [ |
|
|
"Deoxy nucleic acid", |
|
|
"Deoxyribonucleic acid", |
|
|
"Double nucleic acid", |
|
|
"Dinucleotide acid" |
|
|
], |
|
|
answer: 1, |
|
|
explanation: "DNA stands for deoxyribonucleic acid, which is the molecule that carries genetic instructions in all living organisms." |
|
|
} |
|
|
], |
|
|
completed: false |
|
|
} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
id: "chemistry", |
|
|
title: "Chemistry Fundamentals", |
|
|
description: "Discover the building blocks of matter and chemical reactions", |
|
|
category: "Science", |
|
|
image: "https://images.unsplash.com/photo-1532187863483-0b2a2d275c31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.2 (783)", |
|
|
length: "12 lessons", |
|
|
about: "This course introduces the fundamental concepts of chemistry, including atomic structure, chemical bonding, periodic trends, and basic chemical reactions. Students will learn to balance chemical equations and understand the properties of matter.", |
|
|
learn: [ |
|
|
"Understand atomic structure and the periodic table", |
|
|
"Learn about chemical bonding and reactions", |
|
|
"Balance chemical equations", |
|
|
"Calculate molar masses and stoichiometric relationships", |
|
|
"Explore states of matter and phase changes" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [ |
|
|
{ |
|
|
id: "chemistry-1", |
|
|
title: "Atoms and Elements", |
|
|
duration: "6 min", |
|
|
content: [ |
|
|
"<p>An atom is the smallest unit of ordinary matter that forms a chemical element.</p>", |
|
|
"<p>Atoms consist of three subatomic particles:</p><ul class='list-disc list-inside ml-4'><li><b>Protons</b> - Positively charged, in nucleus</li><li><b>Neutrons</b> - No charge, in nucleus</li><li><b>Electrons</b> - Negatively charged, orbiting nucleus</li></ul>", |
|
|
"<img src='https://images.unsplash.com/photo-1610220943874-00f8b46095ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80' class='w-full rounded-lg my-3'>" |
|
|
], |
|
|
quiz: [ |
|
|
{ |
|
|
question: "Which subatomic particle has a positive charge?", |
|
|
options: [ |
|
|
"Electron", |
|
|
"Neutron", |
|
|
"Proton", |
|
|
"Photon" |
|
|
], |
|
|
answer: 2, |
|
|
explanation: "Protons are the positively charged particles in the nucleus of an atom." |
|
|
} |
|
|
], |
|
|
completed: false |
|
|
} |
|
|
] |
|
|
} |
|
|
], |
|
|
english: [ |
|
|
{ |
|
|
id: "grammar", |
|
|
title: "English Grammar Essentials", |
|
|
description: "Master the rules of English grammar and usage", |
|
|
category: "English", |
|
|
image: "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.3 (654)", |
|
|
length: "7 lessons", |
|
|
about: "This course covers the essential rules of English grammar, including parts of speech, sentence structure, verb tenses, punctuation, and common grammatical errors. Students will improve their writing and communication skills through practical exercises and examples.", |
|
|
learn: [ |
|
|
"Identify and use all parts of speech correctly", |
|
|
"Construct grammatically correct sentences", |
|
|
"Apply proper punctuation rules", |
|
|
"Use verb tenses appropriately", |
|
|
"Avoid common grammatical mistakes" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [] |
|
|
}, |
|
|
{ |
|
|
id: "literature", |
|
|
title: "Introduction to Literature", |
|
|
description: "Explore classic and contemporary literary works", |
|
|
category: "English", |
|
|
image: "https://images.unsplash.com/photo-1544947950-2a05f1bc5c61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.6 (721)", |
|
|
length: "5 lessons", |
|
|
about: "This course introduces students to the study of literature, including fiction, poetry, and drama. Students will learn to analyze literary elements such as theme, character, plot, setting, and symbolism, while exploring works from different historical periods and cultural contexts.", |
|
|
learn: [ |
|
|
"Analyze literary elements in various genres", |
|
|
"Understand different literary periods and movements", |
|
|
"Interpret symbolism and themes", |
|
|
"Develop critical reading and thinking skills", |
|
|
"Express literary analysis in clear writing" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [] |
|
|
} |
|
|
], |
|
|
history: [ |
|
|
{ |
|
|
id: "world-history", |
|
|
title: "World History Overview", |
|
|
description: "Survey of world civilizations from ancient to modern times", |
|
|
category: "History", |
|
|
image: "https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.1 (589)", |
|
|
length: "6 lessons", |
|
|
about: "This course provides a broad overview of world history, from the emergence of early civilizations to contemporary global issues. Students will examine political, economic, social, and cultural developments that have shaped human societies across time and space.", |
|
|
learn: [ |
|
|
"Understand major developments in world history", |
|
|
"Compare different civilizations and cultures", |
|
|
"Analyze primary and secondary historical sources", |
|
|
"Identify causes and effects of historical events", |
|
|
"Connect historical events to contemporary issues" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [] |
|
|
}, |
|
|
{ |
|
|
id: "us-history", |
|
|
title: "U.S. History Foundations", |
|
|
description: "Key events and themes in American history from colonial era to present", |
|
|
category: "History", |
|
|
image: "https://images.unsplash.com/photo-1577720584742-6734a57c7344?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", |
|
|
rating: "4.0 (542)", |
|
|
length: "9 lessons", |
|
|
about: "This course surveys the major themes and events in United States history from the colonial period to the present. Students will explore political, economic, social, and cultural developments that have shaped the American experience, with attention to diverse perspectives and interpretations.", |
|
|
learn: [ |
|
|
"Understand key events in U.S. history timeline", |
|
|
"Analyze founding documents and principles", |
|
|
"Examine social movements and reforms", |
|
|
"Assess U.S. role in global context", |
|
|
"Interpret historical evidence and perspectives" |
|
|
], |
|
|
enrolled: false, |
|
|
progress: 0, |
|
|
lessons: [] |
|
|
} |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
let currentUser = null; |
|
|
let currentCategory = null; |
|
|
let currentCourse = null; |
|
|
let currentLessonIndex = 0; |
|
|
let quizAnswers = {}; |
|
|
|
|
|
|
|
|
const storage = { |
|
|
getItem: (key) => { |
|
|
const data = localStorage.getItem(key); |
|
|
return data ? JSON.parse(data) : null; |
|
|
}, |
|
|
setItem: (key, value) => { |
|
|
localStorage.setItem(key, JSON.stringify(value)); |
|
|
}, |
|
|
removeItem: (key) => { |
|
|
localStorage.removeItem(key); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const screens = document.querySelectorAll('.screen'); |
|
|
const navBtns = document.querySelectorAll('.nav-btn'); |
|
|
const loginForm = document.getElementById('login-form'); |
|
|
const registerForm = document.getElementById('register-form'); |
|
|
const showRegisterBtn = document.getElementById('show-register-btn'); |
|
|
const showLoginBtn = document.getElementById('show-login-btn'); |
|
|
const logoutBtn = document.getElementById('logout-btn'); |
|
|
const backToHome = document.getElementById('back-to-home'); |
|
|
const backToCategory = document.getElementById('back-to-category'); |
|
|
const backToCourse = document.getElementById('back-to-course'); |
|
|
const backFromQuiz = document.getElementById('back-from-quiz'); |
|
|
const categoryCards = document.querySelectorAll('.category-card'); |
|
|
const courseCards = document.querySelectorAll('.course-card'); |
|
|
const enrollCourseBtn = document.getElementById('enroll-course-btn'); |
|
|
const prevLessonBtn = document.getElementById('prev-lesson-btn'); |
|
|
const nextLessonBtn = document.getElementById('next-lesson-btn'); |
|
|
const submitQuizBtn = document.getElementById('submit-quiz-btn'); |
|
|
|
|
|
|
|
|
function init() { |
|
|
|
|
|
const user = storage.getItem('currentUser'); |
|
|
if (user) { |
|
|
currentUser = user; |
|
|
showScreen('home-screen'); |
|
|
updateProfileDisplay(); |
|
|
setupCourseInteractions(); |
|
|
} else { |
|
|
|
|
|
setTimeout(() => { |
|
|
showScreen('login-screen'); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
setupEventListeners(); |
|
|
} |
|
|
|
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
loginForm.addEventListener('submit', handleLogin); |
|
|
registerForm.addEventListener('submit', handleRegister); |
|
|
showRegisterBtn.addEventListener('click', () => showScreen('register-screen')); |
|
|
showLoginBtn.addEventListener('click', () => showScreen('login-screen')); |
|
|
logoutBtn.addEventListener('click', handleLogout); |
|
|
|
|
|
|
|
|
navBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const target = btn.getAttribute('data-target'); |
|
|
showScreen(target); |
|
|
|
|
|
|
|
|
navBtns.forEach(b => b.classList.remove('active-nav')); |
|
|
btn.classList.add('active-nav'); |
|
|
|
|
|
|
|
|
const icon = btn.querySelector('i'); |
|
|
if (target === 'home-screen') { |
|
|
icon.classList.remove('text-gray-400'); |
|
|
icon.classList.add('text-primary'); |
|
|
} else if (target === 'my-courses-screen') { |
|
|
icon.classList.remove('text-gray-400'); |
|
|
icon.classList.add('text-primary'); |
|
|
} else if (target === 'progress-screen') { |
|
|
icon.classList.remove('text-gray-400'); |
|
|
icon.classList.add('text-primary'); |
|
|
} else if (target === 'profile-screen') { |
|
|
icon.classList.remove('text-gray-400'); |
|
|
icon.classList.add('text-primary'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
backToHome.addEventListener('click', () => { |
|
|
showScreen('home-screen'); |
|
|
navBtns.forEach(b => { |
|
|
if (b.getAttribute('data-target') === 'home-screen') { |
|
|
b.click(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
backToCategory.addEventListener('click', () => { |
|
|
showScreen('category-courses-screen'); |
|
|
}); |
|
|
|
|
|
backToCourse.addEventListener('click', () => { |
|
|
showScreen('course-detail-screen'); |
|
|
}); |
|
|
|
|
|
backFromQuiz.addEventListener('click', () => { |
|
|
showScreen('lesson-screen'); |
|
|
}); |
|
|
|
|
|
|
|
|
categoryCards.forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
const category = card.getAttribute('data-category'); |
|
|
showCategoryCourses(category); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
enrollCourseBtn.addEventListener('click', enrollInCourse); |
|
|
|
|
|
|
|
|
prevLessonBtn.addEventListener('click', goToPreviousLesson); |
|
|
nextLessonBtn.addEventListener('click', goToNextLesson); |
|
|
|
|
|
|
|
|
submitQuizBtn.addEventListener('click', submitQuiz); |
|
|
} |
|
|
|
|
|
|
|
|
function setupCourseInteractions() { |
|
|
|
|
|
document.querySelectorAll('.course-card').forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
const courseId = card.getAttribute('data-course'); |
|
|
showCourseDetail(courseId); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showScreen(screenId) { |
|
|
screens.forEach(screen => { |
|
|
screen.classList.remove('active-screen'); |
|
|
screen.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
const screen = document.getElementById(screenId); |
|
|
if (screen) { |
|
|
screen.classList.add('active-screen'); |
|
|
screen.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
if (screenId === 'home-screen') { |
|
|
document.getElementById('app-container').classList.remove('hidden'); |
|
|
document.getElementById('auth-container').classList.add('hidden'); |
|
|
} else if (screenId === 'login-screen' || screenId === 'register-screen') { |
|
|
document.getElementById('app-container').classList.add('hidden'); |
|
|
document.getElementById('auth-container').classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleLogin(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const email = document.getElementById('login-email').value; |
|
|
const password = document.getElementById('login-password').value; |
|
|
|
|
|
|
|
|
let isValid = true; |
|
|
|
|
|
|
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|
|
if (!emailRegex.test(email)) { |
|
|
document.getElementById('login-email-error').classList.remove('hidden'); |
|
|
isValid = false; |
|
|
} else { |
|
|
document.getElementById('login-email-error').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
if (password.length < 6) { |
|
|
document.getElementById('login-password-error').classList.remove('hidden'); |
|
|
isValid = false; |
|
|
} else { |
|
|
document.getElementById('login-password-error').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
if (isValid) { |
|
|
|
|
|
currentUser = { |
|
|
name: "John Doe", |
|
|
email: email |
|
|
}; |
|
|
|
|
|
|
|
|
storage.setItem('currentUser', currentUser); |
|
|
|
|
|
|
|
|
showScreen('home-screen'); |
|
|
updateProfileDisplay(); |
|
|
document.getElementById('app-container').classList.remove('hidden'); |
|
|
document.getElementById('auth-container').classList.add('hidden'); |
|
|
|
|
|
|
|
|
loginForm.reset(); |
|
|
|
|
|
|
|
|
navBtns.forEach(b => { |
|
|
if (b.getAttribute('data-target') === 'home-screen') { |
|
|
b.classList.add('active-nav'); |
|
|
b.querySelector('i').classList.remove('text-gray-400'); |
|
|
b.querySelector('i').classList.add('text-primary'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleRegister(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const name = document.getElementById('register-name').value; |
|
|
const email = document.getElementById('register-email').value; |
|
|
const password = document.getElementById('register-password').value; |
|
|
const confirm = document.getElementById('register-confirm').value; |
|
|
|
|
|
|
|
|
let isValid = true; |
|
|
|
|
|
|
|
|
if (name.trim() === '') { |
|
|
document.getElementById('register-name-error').classList.remove('hidden'); |
|
|
isValid = false; |
|
|
} else { |
|
|
document.getElementById('register-name-error').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|
|
if (!emailRegex.test(email)) { |
|
|
document.getElementById('register-email-error').classList.remove('hidden'); |
|
|
isValid = false; |
|
|
} else { |
|
|
document.getElementById('register-email-error').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
if (password.length < 6) { |
|
|
document.getElementById('register-password-error').classList.remove('hidden'); |
|
|
isValid = false; |
|
|
} else { |
|
|
document.getElementById('register-password-error').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
if (password !== confirm) { |
|
|
document.getElementById('register-confirm-error').classList.remove('hidden'); |
|
|
isValid = false; |
|
|
} else { |
|
|
document.getElementById('register-confirm-error').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
if (isValid) { |
|
|
|
|
|
currentUser = { |
|
|
name: name, |
|
|
email: email |
|
|
}; |
|
|
|
|
|
|
|
|
storage.setItem('currentUser', currentUser); |
|
|
|
|
|
|
|
|
showScreen('home-screen'); |
|
|
updateProfileDisplay(); |
|
|
document.getElementById('app-container').classList.remove('hidden'); |
|
|
document.getElementById('auth-container').classList.add('hidden'); |
|
|
|
|
|
|
|
|
registerForm.reset(); |
|
|
|
|
|
|
|
|
navBtns.forEach(b => { |
|
|
if (b.getAttribute('data-target') === 'home-screen') { |
|
|
b.classList.add('active-nav'); |
|
|
b.querySelector('i').classList.remove('text-gray-400'); |
|
|
b.querySelector('i').classList.add('text-primary'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleLogout() { |
|
|
currentUser = null; |
|
|
storage.removeItem('currentUser'); |
|
|
showScreen('login-screen'); |
|
|
document.getElementById('app-container').classList.add('hidden'); |
|
|
document.getElementById('auth-container').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function updateProfileDisplay() { |
|
|
if (currentUser) { |
|
|
document.getElementById('username-display').textContent = currentUser.name.split(' ')[0]; |
|
|
document.getElementById('profile-name').textContent = currentUser.name; |
|
|
document.getElementById('profile-email').textContent = currentUser.email; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showCategoryCourses(category) { |
|
|
currentCategory = category; |
|
|
|
|
|
|
|
|
let categoryTitle = ''; |
|
|
switch(category) { |
|
|
case 'math': |
|
|
categoryTitle = 'Mathematics'; |
|
|
break; |
|
|
case 'science': |
|
|
categoryTitle = 'Science'; |
|
|
break; |
|
|
case 'english': |
|
|
categoryTitle = 'English'; |
|
|
break; |
|
|
case 'history': |
|
|
categoryTitle = 'History'; |
|
|
break; |
|
|
default: |
|
|
categoryTitle = 'Category'; |
|
|
} |
|
|
|
|
|
document.getElementById('category-title').textContent = categoryTitle; |
|
|
|
|
|
|
|
|
const courses = mockCourses[category]; |
|
|
|
|
|
|
|
|
const container = document.getElementById('category-courses-list'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
courses.forEach(course => { |
|
|
const courseCard = document.createElement('div'); |
|
|
courseCard.className = 'course-card rounded-lg border border-gray-200 overflow-hidden cursor-pointer'; |
|
|
courseCard.setAttribute('data-course', course.id); |
|
|
|
|
|
let categoryColor = 'bg-primary'; |
|
|
if (course.category === 'Science') categoryColor = 'bg-green-500'; |
|
|
else if (course.category === 'English') categoryColor = 'bg-amber-500'; |
|
|
else if (course.category === 'History') categoryColor = 'bg-pink-500'; |
|
|
|
|
|
courseCard.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="${course.image}" alt="${course.title}" class="w-full h-32 object-cover"> |
|
|
<div class="absolute bottom-2 right-2 ${categoryColor} text-white text-xs px-2 py-1 rounded">${course.category}</div> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-semibold">${course.title}</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">${course.description}</p> |
|
|
<div class="flex justify-between items-center mt-2 text-xs"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span>${course.rating}</span> |
|
|
</div> |
|
|
<button class="text-primary font-medium text-xs hover:underline">View Course</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
courseCard.addEventListener('click', () => { |
|
|
showCourseDetail(course.id); |
|
|
}); |
|
|
|
|
|
container.appendChild(courseCard); |
|
|
}); |
|
|
|
|
|
|
|
|
showScreen('category-courses-screen'); |
|
|
} |
|
|
|
|
|
|
|
|
function showCourseDetail(courseId) { |
|
|
|
|
|
let course = null; |
|
|
for (const category in mockCourses) { |
|
|
course = mockCourses[category].find(c => c.id === courseId); |
|
|
if (course) { |
|
|
currentCategory = category; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
if (!course) return; |
|
|
|
|
|
currentCourse = course; |
|
|
|
|
|
|
|
|
document.getElementById('course-title').textContent = course.title; |
|
|
document.getElementById('course-detail-image').src = course.image; |
|
|
document.getElementById('course-detail-image').alt = course.title; |
|
|
document.getElementById('course-detail-category').textContent = course.category; |
|
|
document.getElementById('course-rating').textContent = course.rating; |
|
|
document.getElementById('course-description').textContent = course.description; |
|
|
document.getElementById('course-length').textContent = course.length; |
|
|
document.getElementById('course-about').textContent = course.about; |
|
|
|
|
|
|
|
|
let categoryColor = 'text-primary'; |
|
|
if (course.category === 'Science') categoryColor = 'text-green-500'; |
|
|
else if (course.category === 'English') categoryColor = 'text-amber-500'; |
|
|
else if (course.category === 'History') categoryColor = 'text-pink-500'; |
|
|
document.getElementById('course-detail-category').className = `absolute bottom-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded ${categoryColor.replace('text-', 'bg-')}`; |
|
|
|
|
|
|
|
|
const learnList = document.getElementById('course-learn-list'); |
|
|
learnList.innerHTML = ''; |
|
|
course.learn.forEach(item => { |
|
|
const li = document.createElement('li'); |
|
|
li.className = 'flex items-start'; |
|
|
li.innerHTML = `<span class="mr-2">•</span>${item}`; |
|
|
learnList.appendChild(li); |
|
|
}); |
|
|
|
|
|
|
|
|
const lessonsList = document.getElementById('course-lessons-list'); |
|
|
lessonsList.innerHTML = ''; |
|
|
|
|
|
if (course.lessons && course.lessons.length > 0) { |
|
|
course.lessons.forEach((lesson, index) => { |
|
|
const lessonItem = document.createElement('div'); |
|
|
lessonItem.className = 'flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer'; |
|
|
lessonItem.setAttribute('data-lesson-index', index); |
|
|
|
|
|
const completedIcon = lesson.completed ? 'text-green-500' : 'text-gray-300'; |
|
|
|
|
|
lessonItem.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3"> |
|
|
<span class="text-sm font-medium">${index + 1}</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">${lesson.title}</h4> |
|
|
<p class="text-xs text-gray-500">${lesson.duration}</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas ${lesson.completed ? 'fa-check-circle' : 'fa-circle'} ${completedIcon}"></i> |
|
|
`; |
|
|
|
|
|
lessonItem.addEventListener('click', () => { |
|
|
showLesson(index); |
|
|
}); |
|
|
|
|
|
lessonsList.appendChild(lessonItem); |
|
|
}); |
|
|
} else { |
|
|
lessonsList.innerHTML = '<p class="text-gray-500 text-center py-4">No lessons available yet</p>'; |
|
|
} |
|
|
|
|
|
|
|
|
if (course.enrolled) { |
|
|
enrollCourseBtn.textContent = 'Continue Learning'; |
|
|
enrollCourseBtn.className = 'w-full bg-green-500 text-white py-2 rounded-lg font-medium mb-4 hover:bg-green-600 transition duration-200'; |
|
|
} else { |
|
|
enrollCourseBtn.textContent = 'Enroll Now'; |
|
|
enrollCourseBtn.className = 'w-full bg-primary text-white py-2 rounded-lg font-medium mb-4 hover:bg-indigo-700 transition duration-200'; |
|
|
} |
|
|
|
|
|
|
|
|
showScreen('course-detail-screen'); |
|
|
} |
|
|
|
|
|
|
|
|
function enrollInCourse() { |
|
|
if (!currentCourse) return; |
|
|
|
|
|
currentCourse.enrolled = true; |
|
|
|
|
|
|
|
|
enrollCourseBtn.textContent = 'Continue Learning'; |
|
|
enrollCourseBtn.className = 'w-full bg-green-500 text-white py-2 rounded-lg font-medium mb-4 hover:bg-green-600 transition duration-200'; |
|
|
|
|
|
|
|
|
showLesson(0); |
|
|
} |
|
|
|
|
|
|
|
|
function showLesson(index) { |
|
|
if (!currentCourse || !currentCourse.enrolled || !currentCourse.lessons || index < 0 || index >= currentCourse.lessons.length) { |
|
|
return; |
|
|
} |
|
|
|
|
|
currentLessonIndex = index; |
|
|
const lesson = currentCourse.lessons[index]; |
|
|
|
|
|
|
|
|
document.getElementById('lesson-title').textContent = lesson.title; |
|
|
document.getElementById('lesson-progress').textContent = `Lesson ${index + 1} of ${currentCourse.lessons.length}`; |
|
|
document.getElementById('lesson-duration').textContent = lesson.duration; |
|
|
|
|
|
|
|
|
const contentContainer = document.getElementById('lesson-content'); |
|
|
contentContainer.innerHTML = ''; |
|
|
|
|
|
lesson.content.forEach(content => { |
|
|
const div = document.createElement('div'); |
|
|
div.innerHTML = content; |
|
|
contentContainer.appendChild(div); |
|
|
}); |
|
|
|
|
|
|
|
|
if (lesson.quiz && lesson.quiz.length > 0) { |
|
|
const quizBtn = document.createElement('button'); |
|
|
quizBtn.className = 'w-full bg-secondary text-white py-2 rounded-lg font-medium mt-4 hover:bg-green-600 transition duration-200'; |
|
|
quizBtn.textContent = 'Take Quiz'; |
|
|
quizBtn.addEventListener('click', () => { |
|
|
showQuiz(lesson.quiz); |
|
|
}); |
|
|
contentContainer.appendChild(quizBtn); |
|
|
} |
|
|
|
|
|
|
|
|
prevLessonBtn.disabled = index === 0; |
|
|
nextLessonBtn.disabled = index === currentCourse.lessons.length - 1; |
|
|
|
|
|
|
|
|
if (!lesson.completed) { |
|
|
lesson.completed = true; |
|
|
currentCourse.progress = (currentLessonIndex + 1) / currentCourse.lessons.length; |
|
|
|
|
|
|
|
|
const lessonItems = document.querySelectorAll('#course-lessons-list > div'); |
|
|
if (lessonItems[index]) { |
|
|
const icon = lessonItems[index].querySelector('i'); |
|
|
icon.classList.remove('fa-circle', 'text-gray-300'); |
|
|
icon.classList.add('fa-check-circle', 'text-green-500'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
showScreen('lesson-screen'); |
|
|
} |
|
|
|
|
|
|
|
|
function goToPreviousLesson() { |
|
|
if (currentLessonIndex > 0) { |
|
|
showLesson(currentLessonIndex - 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function goToNextLesson() { |
|
|
if (currentLessonIndex < currentCourse.lessons.length - 1) { |
|
|
showLesson(currentLessonIndex + 1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showQuiz(questions) { |
|
|
quizAnswers = {}; |
|
|
|
|
|
const quizContainer = document.getElementById('quiz-container'); |
|
|
quizContainer.innerHTML = ''; |
|
|
|
|
|
document.getElementById('quiz-progress-bar').style.width = '0%'; |
|
|
document.getElementById('submit-quiz-btn').classList.add('hidden'); |
|
|
document.getElementById('quiz-result').classList.add('hidden'); |
|
|
|
|
|
questions.forEach((q, qIndex) => { |
|
|
const questionDiv = document.createElement('div'); |
|
|
questionDiv.className = 'border border-gray-200 rounded-lg p-4'; |
|
|
questionDiv.id = `quiz-question-${qIndex}`; |
|
|
|
|
|
let optionsHtml = ''; |
|
|
q.options.forEach((option, oIndex) => { |
|
|
optionsHtml += ` |
|
|
<div class="quiz-option flex items-center p-3 border border-gray-200 rounded-lg mb-2 hover:bg-gray-50 cursor-pointer" data-question="${qIndex}" data-option="${oIndex}"> |
|
|
<div class="w-5 h-5 rounded-full border border-gray-300 mr-3 flex items-center justify-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-gray-200 hidden"></div> |
|
|
</div> |
|
|
<span>${option}</span> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
questionDiv.innerHTML = ` |
|
|
<h3 class="font-medium mb-3">${qIndex + 1}. ${q.question}</h3> |
|
|
<div class="space-y-2"> |
|
|
${optionsHtml} |
|
|
</div> |
|
|
`; |
|
|
|
|
|
quizContainer.appendChild(questionDiv); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.quiz-option').forEach(option => { |
|
|
option.addEventListener('click', selectQuizOption); |
|
|
}); |
|
|
|
|
|
|
|
|
showScreen('quiz-screen'); |
|
|
} |
|
|
|
|
|
|
|
|
function selectQuizOption(e) { |
|
|
const questionIndex = parseInt(this.getAttribute('data-question')); |
|
|
const optionIndex = parseInt(this.getAttribute('data-option')); |
|
|
|
|
|
|
|
|
quizAnswers[questionIndex] = optionIndex; |
|
|
|
|
|
|
|
|
const questionDiv = this.closest(`#quiz-question-${questionIndex}`); |
|
|
questionDiv.querySelectorAll('.quiz-option').forEach(opt => { |
|
|
const optIndex = parseInt(opt.getAttribute('data-option')); |
|
|
const radio = opt.querySelector('div > div'); |
|
|
|
|
|
if (optIndex === optionIndex) { |
|
|
opt.classList.add('bg-blue-50', 'border-primary'); |
|
|
radio.classList.remove('hidden'); |
|
|
radio.classList.add('bg-primary'); |
|
|
} else { |
|
|
opt.classList.remove('bg-blue-50', 'border-primary'); |
|
|
radio.classList.add('hidden'); |
|
|
radio.classList.remove('bg-primary'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const totalQuestions = document.querySelectorAll('#quiz-container > div').length; |
|
|
const answeredQuestions = Object.keys(quizAnswers).length; |
|
|
document.getElementById('quiz-progress-bar').style.width = `${(answeredQuestions / totalQuestions) * 100}%`; |
|
|
|
|
|
|
|
|
if (answeredQuestions === totalQuestions) { |
|
|
document.getElementById('submit-quiz-btn').classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function submitQuiz() { |
|
|
const quizContainer = document.getElementById('quiz-container'); |
|
|
const questions = quizContainer.querySelectorAll('div[class*="quiz-question"]'); |
|
|
const quizData = currentCourse.lessons[currentLessonIndex].quiz; |
|
|
|
|
|
let score = 0; |
|
|
|
|
|
questions.forEach((q, qIndex) => { |
|
|
const selectedOption = quizAnswers[qIndex]; |
|
|
const correctAnswer = quizData[qIndex].answer; |
|
|
const options = q.querySelectorAll('.quiz-option'); |
|
|
|
|
|
|
|
|
options.forEach((opt, oIndex) => { |
|
|
const radio = opt.querySelector('div > div'); |
|
|
|
|
|
if (oIndex === correctAnswer) { |
|
|
|
|
|
opt.classList.add('correct'); |
|
|
radio.classList.add('bg-white'); |
|
|
} else if (oIndex === selectedOption && selectedOption !== correctAnswer) { |
|
|
|
|
|
opt.classList.add('incorrect'); |
|
|
} |
|
|
|
|
|
|
|
|
opt.style.pointerEvents = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
if (selectedOption === correctAnswer) { |
|
|
score++; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const resultDiv = document.getElementById('quiz-result'); |
|
|
resultDiv.innerHTML = ` |
|
|
<div class="text-center p-4 border border-gray-200 rounded-lg mt-4"> |
|
|
<h3 class="text-lg font-medium mb-2">Quiz Result</h3> |
|
|
<p class="text-2xl font-bold ${score === questions.length ? 'text-green-500' : 'text-blue-500'} mb-2">${score} / ${questions.length}</p> |
|
|
<p class="text-sm text-gray-600 mb-4">${getQuizFeedback(score, questions.length)}</p> |
|
|
<button id="close-quiz-btn" class="w-full bg-primary text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition duration-200">Continue to Next Lesson</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
resultDiv.classList.remove('hidden'); |
|
|
document.getElementById('submit-quiz-btn').classList.add('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('close-quiz-btn').addEventListener('click', () => { |
|
|
|
|
|
if (currentLessonIndex < currentCourse.lessons.length - 1) { |
|
|
showLesson(currentLessonIndex + 1); |
|
|
} else { |
|
|
|
|
|
showScreen('course-detail-screen'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function getQuizFeedback(score, total) { |
|
|
const percentage = (score / total) * 100; |
|
|
|
|
|
if (percentage === 100) { |
|
|
return "Perfect! You've mastered this lesson!"; |
|
|
} else if (percentage >= 75) { |
|
|
return "Great job! You have a solid understanding of this material."; |
|
|
} else if (percentage >= 50) { |
|
|
return "Good effort! Review the material and try again."; |
|
|
} else { |
|
|
return "Keep practicing! Review the lesson and retake the quiz."; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', init); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NSMaepa/mp-ground" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
