Hugging Face's logo

Spaces:
galipalli
/
test4ai
Running

App Files Community
test4ai / index.html
galipalli's picture
galipalli
undefined - Initial Deployment
f40e583 verified
raw
history blame contribute delete
77.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExamPro - Online Examination Platform</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">
<style>
/* Custom styles that can't be easily done with Tailwind */
.question-editor {
min-height: 150px;
border: 1px solid #e2e8f0;
padding: 1rem;
border-radius: 0.375rem;
}
.exam-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Animation for notifications */
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.notification {
animation: slideIn 0.3s ease-out;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation -->
<nav class="bg-indigo-700 text-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-graduation-cap text-2xl mr-2"></i>
<span class="text-xl font-bold">ExamPro</span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-center space-x-4">
<a href="#" id="home-link" class="bg-indigo-800 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" id="exams-link" class="text-indigo-200 hover:bg-indigo-600 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Exams</a>
<a href="#" id="results-link" class="text-indigo-200 hover:bg-indigo-600 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Results</a>
<a href="#" id="profile-link" class="text-indigo-200 hover:bg-indigo-600 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Profile</a>
</div>
</div>
<div class="flex items-center">
<button id="login-btn" class="bg-white text-indigo-700 px-4 py-1 rounded-md text-sm font-medium mr-2">Login</button>
<button id="register-btn" class="bg-indigo-500 text-white px-4 py-1 rounded-md text-sm font-medium">Register</button>
<div id="user-dropdown" class="hidden ml-3 relative">
<div>
<button class="flex items-center text-sm text-white focus:outline-none" id="user-menu-button">
<span class="mr-2">John Doe</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
<div id="dropdown-menu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-indigo-200 hover:text-white hover:bg-indigo-600 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Login Modal -->
<div id="login-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900">Login to ExamPro</h3>
<button id="close-login-modal" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign in</button>
</div>
</form>
<div class="mt-4 text-center text-sm">
<p>Don't have an account? <a href="#" id="switch-to-register" class="text-indigo-600 hover:text-indigo-500">Register here</a></p>
</div>
</div>
</div>
<!-- Register Modal -->
<div id="register-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900">Create an Account</h3>
<button id="close-register-modal" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<form class="space-y-6">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700">Full Name</label>
<div class="mt-1">
<input id="full-name" name="full-name" type="text" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
<div>
<label for="register-email" class="block text-sm font-medium text-gray-700">Email address</label>
<div class="mt-1">
<input id="register-email" name="register-email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
<div>
<label for="register-password" class="block text-sm font-medium text-gray-700">Password</label>
<div class="mt-1">
<input id="register-password" name="register-password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirm Password</label>
<div class="mt-1">
<input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Account Type</label>
<div class="mt-1 flex space-x-4">
<div class="flex items-center">
<input id="student-role" name="role" type="radio" checked class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="student-role" class="ml-2 block text-sm text-gray-900">Student</label>
</div>
<div class="flex items-center">
<input id="teacher-role" name="role" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="teacher-role" class="ml-2 block text-sm text-gray-900">Teacher</label>
</div>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Register</button>
</div>
</form>
<div class="mt-4 text-center text-sm">
<p>Already have an account? <a href="#" id="switch-to-login" class="text-indigo-600 hover:text-indigo-500">Login here</a></p>
</div>
</div>
</div>
<!-- Notification Area -->
<div id="notification-area" class="fixed top-4 right-4 z-50 space-y-2"></div>
<!-- Dashboard Content -->
<div id="home-content" class="tab-content active">
<div class="bg-white shadow rounded-lg p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Welcome to ExamPro</h2>
<p class="text-gray-600 mb-6">Your complete online examination platform for students and teachers. Create, manage, and take exams with ease.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-indigo-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-book text-indigo-600 text-xl"></i>
</div>
<h3 class="text-lg font-semibold text-gray-800">For Students</h3>
</div>
<p class="text-gray-600">Take exams anytime, anywhere. Get instant results and detailed feedback on your performance.</p>
</div>
<div class="bg-purple-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-chalkboard-teacher text-purple-600 text-xl"></i>
</div>
<h3 class="text-lg font-semibold text-gray-800">For Teachers</h3>
</div>
<p class="text-gray-600">Create comprehensive exams with various question types. Monitor student progress and performance.</p>
</div>
<div class="bg-green-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-chart-line text-green-600 text-xl"></i>
</div>
<h3 class="text-lg font-semibold text-gray-800">Analytics</h3>
</div>
<p class="text-gray-600">Get detailed analytics on exam performance, question difficulty, and student progress.</p>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Upcoming Exams</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border border-gray-200 rounded-lg p-4 exam-card transition duration-300">
<div class="flex justify-between items-start mb-2">
<h3 class="font-semibold text-lg text-gray-800">Mathematics Midterm</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Upcoming</span>
</div>
<p class="text-gray-600 text-sm mb-3">Algebra and Geometry concepts</p>
<div class="flex items-center text-sm text-gray-500 mb-3">
<i class="far fa-calendar-alt mr-2"></i>
<span>Due: May 15, 2023</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="far fa-clock mr-2"></i>
<span>Duration: 60 minutes</span>
</div>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700 transition duration-300">View Details</button>
</div>
<div class="border border-gray-200 rounded-lg p-4 exam-card transition duration-300">
<div class="flex justify-between items-start mb-2">
<h3 class="font-semibold text-lg text-gray-800">History Final</h3>
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Upcoming</span>
</div>
<p class="text-gray-600 text-sm mb-3">World History from 1900-2000</p>
<div class="flex items-center text-sm text-gray-500 mb-3">
<i class="far fa-calendar-alt mr-2"></i>
<span>Due: June 5, 2023</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="far fa-clock mr-2"></i>
<span>Duration: 90 minutes</span>
</div>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700 transition duration-300">View Details</button>
</div>
<div class="border border-gray-200 rounded-lg p-4 exam-card transition duration-300">
<div class="flex justify-between items-start mb-2">
<h3 class="font-semibold text-lg text-gray-800">Science Quiz</h3>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Available</span>
</div>
<p class="text-gray-600 text-sm mb-3">Basic Chemistry and Physics</p>
<div class="flex items-center text-sm text-gray-500 mb-3">
<i class="far fa-calendar-alt mr-2"></i>
<span>Due: May 10, 2023</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="far fa-clock mr-2"></i>
<span>Duration: 30 minutes</span>
</div>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700 transition duration-300">Start Exam</button>
</div>
</div>
</div>
</div>
<!-- Exams Content -->
<div id="exams-content" class="tab-content">
<div class="bg-white shadow rounded-lg p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Available Exams</h2>
<div class="flex space-x-2">
<button id="create-exam-btn" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700 hidden">Create Exam</button>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Subjects</option>
<option>Mathematics</option>
<option>Science</option>
<option>History</option>
<option>Literature</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exam Title</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="font-medium text-gray-900">Mathematics Midterm</div>
<div class="text-sm text-gray-500">Algebra and Geometry</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mathematics</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60 min</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Upcoming</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
<button class="text-green-600 hover:text-green-900">Start</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="font-medium text-gray-900">Science Quiz</div>
<div class="text-sm text-gray-500">Basic Chemistry</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Science</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 10, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30 min</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Available</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
<button class="text-green-600 hover:text-green-900">Start</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="font-medium text-gray-900">History Final</div>
<div class="text-sm text-gray-500">World History 1900-2000</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">History</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">June 5, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90 min</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Upcoming</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
<button class="text-green-600 hover:text-green-900">Start</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Results Content -->
<div id="results-content" class="tab-content">
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Exam Results</h2>
<div class="mb-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">Completed Exams</h3>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>All Subjects</option>
<option>Mathematics</option>
<option>Science</option>
<option>History</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down text-xs"></i>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-semibold text-gray-800">Science Midterm</h4>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completed</span>
</div>
<p class="text-gray-600 text-sm mb-3">Basic Physics and Chemistry</p>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-500">Score</span>
<span class="font-semibold">85/100</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-500">Percentage</span>
<span class="font-semibold">85%</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-500">Date Taken</span>
<span class="text-sm">Apr 20, 2023</span>
</div>
<button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">View Details</button>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-semibold text-gray-800">Literature Quiz</h4>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completed</span>
</div>
<p class="text-gray-600 text-sm mb-3">Shakespeare and Modern Poetry</p>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-500">Score</span>
<span class="font-semibold">92/100</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-500">Percentage</span>
<span class="font-semibold">92%</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-500">Date Taken</span>
<span class="text-sm">Mar 15, 2023</span>
</div>
<button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">View Details</button>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-semibold text-gray-800">Algebra Test</h4>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completed</span>
</div>
<p class="text-gray-600 text-sm mb-3">Linear Equations and Functions</p>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-500">Score</span>
<span class="font-semibold">78/100</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-500">Percentage</span>
<span class="font-semibold">78%</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-sm text-gray-500">Date Taken</span>
<span class="text-sm">Feb 28, 2023</span>
</div>
<button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">View Details</button>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 mb-4">Performance Overview</h3>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="h-64 flex items-center justify-center">
<p class="text-gray-500">Performance chart would be displayed here</p>
</div>
</div>
</div>
</div>
</div>
<!-- Profile Content -->
<div id="profile-content" class="tab-content">
<div class="bg-white shadow rounded-lg p-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0">
<div class="flex flex-col items-center">
<img class="h-32 w-32 rounded-full mb-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
<h3 class="text-xl font-semibold text-gray-800">John Doe</h3>
<p class="text-gray-600">Student</p>
<button class="mt-4 bg-indigo-600 text-white py-2 px-4 rounded-md text-sm hover:bg-indigo-700">Change Photo</button>
</div>
</div>
<div class="md:w-2/3 md:pl-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Personal Information</h3>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" id="first-name" value="John" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" id="last-name" value="Doe" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" value="john.doe@example.com" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="bio" class="block text-sm font-medium text-gray-700">Bio</label>
<textarea id="bio" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">Computer Science student interested in web development and machine learning.</textarea>
</div>
<div class="pt-4 border-t border-gray-200">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Change Password</h3>
<div class="space-y-4">
<div>
<label for="current-password" class="block text-sm font-medium text-gray-700">Current Password</label>
<input type="password" id="current-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="new-password" class="block text-sm font-medium text-gray-700">New Password</label>
<input type="password" id="new-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="confirm-new-password" class="block text-sm font-medium text-gray-700">Confirm New Password</label>
<input type="password" id="confirm-new-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
</div>
<div class="flex justify-end pt-4">
<button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Cancel</button>
<button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Exam Creation Content (for teachers) -->
<div id="exam-creation-content" class="tab-content hidden">
<div class="bg-white shadow rounded-lg p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-gray-800">Create New Exam</h2>
<button id="save-exam-btn" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700">Save Exam</button>
</div>
<div class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="exam-title" class="block text-sm font-medium text-gray-700">Exam Title</label>
<input type="text" id="exam-title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. Midterm Exam">
</div>
<div>
<label for="exam-subject" class="block text-sm font-medium text-gray-700">Subject</label>
<select id="exam-subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Mathematics</option>
<option>Science</option>
<option>History</option>
<option>Literature</option>
<option>Computer Science</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label for="exam-date" class="block text-sm font-medium text-gray-700">Exam Date</label>
<input type="date" id="exam-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="exam-duration" class="block text-sm font-medium text-gray-700">Duration (minutes)</label>
<input type="number" id="exam-duration" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="60">
</div>
<div>
<label for="exam-total-marks" class="block text-sm font-medium text-gray-700">Total Marks</label>
<input type="number" id="exam-total-marks" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="100">
</div>
</div>
<div>
<label for="exam-description" class="block text-sm font-medium text-gray-700">Description</label>
<textarea id="exam-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Brief description of the exam content"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Instructions</label>
<div id="exam-instructions" class="mt-1 space-y-2">
<div class="flex items-start">
<input type="text" value="Answer all questions" class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex items-start">
<input type="text" value="No calculators allowed" class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<button id="add-instruction-btn" class="mt-2 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500">
<i class="fas fa-plus mr-1"></i> Add Instruction
</button>
</div>
<div class="pt-4 border-t border-gray-200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-800">Questions</h3>
<div class="relative">
<button id="add-question-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 flex items-center">
<i class="fas fa-plus mr-2"></i> Add Question
</button>
</div>
</div>
<div id="questions-container" class="space-y-6">
<!-- Question 1 -->
<div class="border border-gray-200 rounded-lg p-4 question-item">
<div class="flex justify-between items-start mb-4">
<h4 class="font-medium text-gray-800">Question 1</h4>
<div class="flex space-x-2">
<select class="question-type border border-gray-300 rounded-md pl-2 pr-8 py-1 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="mcq">Multiple Choice</option>
<option value="true-false">True/False</option>
<option value="short-answer">Short Answer</option>
<option value="essay">Essay</option>
<option value="matching">Matching</option>
</select>
<button class="text-red-500 hover:text-red-700 delete-question">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Question Text</label>
<div class="question-editor bg-white">What is the capital of France?</div>
</div>
<div class="question-options space-y-2">
<div class="flex items-center">
<input type="radio" name="q1-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<input type="text" value="Paris" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex items-center">
<input type="radio" name="q1-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<input type="text" value="London" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex items-center">
<input type="radio" name="q1-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<input type="text" value="Berlin" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<button class="mt-2 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500 add-option-btn">
<i class="fas fa-plus mr-1"></i> Add Option
</button>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="q1-marks" class="block text-sm font-medium text-gray-700">Marks</label>
<input type="number" id="q1-marks" value="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="q1-difficulty" class="block text-sm font-medium text-gray-700">Difficulty</label>
<select id="q1-difficulty" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Easy</option>
<option selected>Medium</option>
<option>Hard</option>
</select>
</div>
</div>
</div>
<!-- Question 2 -->
<div class="border border-gray-200 rounded-lg p-4 question-item">
<div class="flex justify-between items-start mb-4">
<h4 class="font-medium text-gray-800">Question 2</h4>
<div class="flex space-x-2">
<select class="question-type border border-gray-300 rounded-md pl-2 pr-8 py-1 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="mcq">Multiple Choice</option>
<option value="true-false" selected>True/False</option>
<option value="short-answer">Short Answer</option>
<option value="essay">Essay</option>
<option value="matching">Matching</option>
</select>
<button class="text-red-500 hover:text-red-700 delete-question">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Question Text</label>
<div class="question-editor bg-white">The Earth is flat.</div>
</div>
<div class="question-options space-y-2">
<div class="flex items-center">
<input type="radio" name="q2-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
<span class="ml-2">True</span>
</div>
<div class="flex items-center">
<input type="radio" name="q2-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<span class="ml-2">False</span>
</div>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="q2-marks" class="block text-sm font-medium text-gray-700">Marks</label>
<input type="number" id="q2-marks" value="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="q2-difficulty" class="block text-sm font-medium text-gray-700">Difficulty</label>
<select id="q2-difficulty" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Easy</option>
<option selected>Medium</option>
<option>Hard</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Exam Taking Interface -->
<div id="exam-taking-content" class="tab-content hidden">
<div class="bg-white shadow rounded-lg p-6">
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Science Quiz</h2>
<p class="text-gray-600">Basic Chemistry and Physics</p>
</div>
<div class="flex items-center">
<div class="bg-gray-100 px-4 py-2 rounded-md mr-4">
<span class="font-medium">Time Left: </span>
<span id="exam-timer" class="font-bold">59:45</span>
</div>
<button id="submit-exam-btn" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700">Submit Exam</button>
</div>
</div>
<div class="border-t border-gray-200 pt-4">
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Instructions</h3>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Answer all questions</li>
<li>No calculators allowed</li>
<li>You have 60 minutes to complete the exam</li>
</ul>
</div>
<div id="exam-questions" class="space-y-8">
<!-- Question 1 -->
<div class="border-b border-gray-200 pb-6 question-container">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center">
<span class="font-medium text-gray-800 mr-2">Question 1</span>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">1 point</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flag-question" data-question="1">
<i class="far fa-flag mr-1"></i> Flag
</button>
</div>
<div class="mb-4">
<p class="text-gray-800">What is the capital of France?</p>
</div>
<div class="space-y-2">
<div class="flex items-center">
<input type="radio" id="q1-option1" name="q1" value="Paris" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="q1-option1" class="ml-3 block text-gray-700">Paris</label>
</div>
<div class="flex items-center">
<input type="radio" id="q1-option2" name="q1" value="London" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="q1-option2" class="ml-3 block text-gray-700">London</label>
</div>
<div class="flex items-center">
<input type="radio" id="q1-option3" name="q1" value="Berlin" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="q1-option3" class="ml-3 block text-gray-700">Berlin</label>
</div>
<div class="flex items-center">
<input type="radio" id="q1-option4" name="q1" value="Madrid" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="q1-option4" class="ml-3 block text-gray-700">Madrid</label>
</div>
</div>
</div>
<!-- Question 2 -->
<div class="border-b border-gray-200 pb-6 question-container">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center">
<span class="font-medium text-gray-800 mr-2">Question 2</span>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">1 point</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flag-question" data-question="2">
<i class="far fa-flag mr-1"></i> Flag
</button>
</div>
<div class="mb-4">
<p class="text-gray-800">The Earth is flat.</p>
</div>
<div class="space-y-2">
<div class="flex items-center">
<input type="radio" id="q2-true" name="q2" value="true" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="q2-true" class="ml-3 block text-gray-700">True</label>
</div>
<div class="flex items-center">
<input type="radio" id="q2-false" name="q2" value="false" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="q2-false" class="ml-3 block text-gray-700">False</label>
</div>
</div>
</div>
<!-- Question 3 -->
<div class="border-b border-gray-200 pb-6 question-container">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center">
<span class="font-medium text-gray-800 mr-2">Question 3</span>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">2 points</span>
</div>
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flag-question" data-question="3">
<i class="far fa-flag mr-1"></i> Flag
</button>
</div>
<div class="mb-4">
<p class="text-gray-800">Explain the difference between an element and a compound.</p>
</div>
<div>
<textarea rows="4" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Your answer..."></textarea>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-between items-center">
<button id="prev-question-btn" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50" disabled>
Previous Question
</button>
<div class="flex space-x-2">
<button class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-gray-200 question-nav-btn" data-question="1">1</button>
<button class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-gray-200 question-nav-btn" data-question="2">2</button>
<button class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm font-medium hover:bg-gray-200 question-nav-btn" data-question="3">3</button>
</div>
<button id="next-question-btn" class="bg-indigo-600 text-white py-2 px-4 rounded-md shadow-sm text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Next Question
</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">ExamPro</h3>
<p class="text-gray-400">The complete online examination platform for students and teachers.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">For Students</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Take Exams</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">View Results</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Study Resources</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">For Teachers</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Create Exams</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Manage Classes</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Analytics</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Contact Us</h3>
<ul class="space-y-2">
<li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> support@exampro.com</li>
<li class="text-gray-400"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li>
<li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Education St, Learning City</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400">© 2023 ExamPro. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</footer>
<script>
// DOM Elements
const loginBtn = document.getElementById('login-btn');
const registerBtn = document.getElementById('register-btn');
const loginModal = document.getElementById('login-modal');
const registerModal = document.getElementById('register-modal');
const closeLoginModal = document.getElementById('close-login-modal');
const closeRegisterModal = document.getElementById('close-register-modal');
const switchToRegister = document.getElementById('switch-to-register');
const switchToLogin = document.getElementById('switch-to-login');
const notificationArea = document.getElementById('notification-area');
const createExamBtn = document.getElementById('create-exam-btn');
const examCreationContent = document.getElementById('exam-creation-content');
const saveExamBtn = document.getElementById('save-exam-btn');
const addInstructionBtn = document.getElementById('add-instruction-btn');
const examInstructions = document.getElementById('exam-instructions');
const addQuestionBtn = document.getElementById('add-question-btn');
const questionsContainer = document.getElementById('questions-container');
const submitExamBtn = document.getElementById('submit-exam-btn');
const examTakingContent = document.getElementById('exam-taking-content');
const prevQuestionBtn = document.getElementById('prev-question-btn');
const nextQuestionBtn = document.getElementById('next-question-btn');
const questionNavBtns = document.querySelectorAll('.question-nav-btn');
const flagQuestions = document.querySelectorAll('.flag-question');
const examTimer = document.getElementById('exam-timer');
// Tab navigation
const tabLinks = {
'home-link': 'home-content',
'exams-link': 'exams-content',
'results-link': 'results-content',
'profile-link': 'profile-content'
};
// Current user state
let currentUser = null;
let isTeacher = false;
// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
// Set up tab navigation
Object.keys(tabLinks).forEach(linkId => {
document.getElementById(linkId).addEventListener('click', (e) => {
e.preventDefault();
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Show selected tab content
document.getElementById(tabLinks[linkId]).classList.add('active');
// Update active tab styling
document.querySelectorAll('nav a').forEach(navLink => {
navLink.classList.remove('bg-indigo-800', 'text-white');
navLink.classList.add('text-indigo-200', 'hover:bg-indigo-600', 'hover:text-white');
});
e.target.classList.add('bg-indigo-800', 'text-white');
e.target.classList.remove('text-indigo-200', 'hover:bg-indigo-600', 'hover:text-white');
});
});
// Set up modal interactions
loginBtn.addEventListener('click', () => loginModal.classList.remove('hidden'));
registerBtn.addEventListener('click', () => registerModal.classList.remove('hidden'));
closeLoginModal.addEventListener('click', () => loginModal.classList.add('hidden'));
closeRegisterModal.addEventListener('click', () => registerModal.classList.add('hidden'));
switchToRegister.addEventListener('click', (e) => {
e.preventDefault();
loginModal.classList.add('hidden');
registerModal.classList.remove('hidden');
});
switchToLogin.addEventListener('click', (e) => {
e.preventDefault();
registerModal.classList.add('hidden');
loginModal.classList.remove('hidden');
});
// Handle login form submission
const loginForm = loginModal.querySelector('form');
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Simulate login
currentUser = {
name: 'John Doe',
email: email,
role: isTeacher ? 'teacher' : 'student'
};
loginModal.classList.add('hidden');
showNotification('Login successful!', 'success');
// Update UI for logged in user
loginBtn.classList.add('hidden');
registerBtn.classList.add('hidden');
document.getElementById('user-dropdown').classList.remove('hidden');
// If teacher, show create exam button
if (isTeacher) {
createExamBtn.classList.remove('hidden');
}
});
// Handle register form submission
const registerForm = registerModal.querySelector('form');
registerForm.addEventListener('submit', (e) => {
e.preventDefault();
const fullName = document.getElementById('full-name').value;
const email = document.getElementById('register-email').value;
const password = document.getElementById('register-password').value;
const confirmPassword = document.getElementById('confirm-password').value;
isTeacher = document.getElementById('teacher-role').checked;
if (password !== confirmPassword) {
showNotification('Passwords do not match!', 'error');
return;
}
// Simulate registration
currentUser = {
name: fullName,
email: email,
role: isTeacher ? 'teacher' : 'student'
};
registerModal.classList.add('hidden');
showNotification('Registration successful! Please login.', 'success');
// Auto-fill login form
document.getElementById('email').value = email;
});
// Teacher-specific functionality
createExamBtn.addEventListener('click', () => {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Show exam creation content
examCreationContent.classList.remove('hidden');
examCreationContent.classList.add('active');
});
saveExamBtn.addEventListener('click', () => {
showNotification('Exam saved successfully!', 'success');
// Return to exams tab
document.getElementById('exams-link').click();
});
addInstructionBtn.addEventListener('click', (e) => {
e.preventDefault();
const newInstruction = document.createElement('div');
newInstruction.className = 'flex items-start';
newInstruction.innerHTML = `
<input type="text" class="flex-1 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="New instruction">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
`;
examInstructions.appendChild(newInstruction);
// Add event listener to remove button
newInstruction.querySelector('button').addEventListener('click', () => {
newInstruction.remove();
});
});
addQuestionBtn.addEventListener('click', () => {
const questionCount = document.querySelectorAll('.question-item').length + 1;
const newQuestion = document.createElement('div');
newQuestion.className = 'border border-gray-200 rounded-lg p-4 question-item';
newQuestion.innerHTML = `
<div class="flex justify-between items-start mb-4">
<h4 class="font-medium text-gray-800">Question ${questionCount}</h4>
<div class="flex space-x-2">
<select class="question-type border border-gray-300 rounded-md pl-2 pr-8 py-1 text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="mcq">Multiple Choice</option>
<option value="true-false">True/False</option>
<option value="short-answer">Short Answer</option>
<option value="essay">Essay</option>
<option value="matching">Matching</option>
</select>
<button class="text-red-500 hover:text-red-700 delete-question">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Question Text</label>
<div class="question-editor bg-white" contenteditable="true">Enter your question here...</div>
</div>
<div class="question-options space-y-2">
<div class="flex items-center">
<input type="radio" name="q${questionCount}-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<input type="text" value="Option 1" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="flex items-center">
<input type="radio" name="q${questionCount}-answer" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<input type="text" value="Option 2" class="ml-2 flex-1 border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<button class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<button class="mt-2 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500 add-option-btn">
<i class="fas fa-plus mr-1"></i> Add Option
</button>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<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=galipalli/test4ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>