Scribd
Upload
11 views

DOCTYPE

The document outlines the structure and functionality of an E-Learning platform, including login, dashboard, subjects, courses, quizzes, and assignments. It features HTML pages with embedded JavaScript for user authentication and session management using local storage. The design emphasizes user interaction with forms and navigation links for seamless access to educational resources.

Uploaded by

Enoch Kojo Otoo Mensah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
11 views

DOCTYPE

The document outlines the structure and functionality of an E-Learning platform, including login, dashboard, subjects, courses, quizzes, and assignments. It features HTML pages with embedded JavaScript for user authentication and session management using local storage. The design emphasizes user interaction with forms and navigation links for seamless access to educational resources.

Uploaded by

Enoch Kojo Otoo Mensah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 13

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login & Logout</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

.container {

text-align: center;

background: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

input {
padding: 10px;

margin: 5px 0;

width: 100%;

box-sizing: border-box;

button {

padding: 10px 20px;

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

border-radius: 4px;

button:hover {

background-color: #0056b3;

.hidden {

display: none;

</style>

</head>

<body>

<!-- Login Form -->

<div id="login-container" class="container">

<h2>Login</h2>
<input type="text" id="username" placeholder="Username" required />

<input type="password" id="password" placeholder="Password" required />

<button onclick="handleLogin()">Login</button>

<p id="login-error" style="color: red; margin-top: 10px;"></p>

</div>

<!-- Homepage -->

<div id="home-container" class="container hidden">

<h2>Welcome to the Homepage!</h2>

<button onclick="handleLogout()">Logout</button>

</div>

<script src="script.js"></script>

</body>

</html>

// Function to handle login

function handleLogin() {

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

// Simulated credentials (replace with actual authentication logic)

const validUsername = 'admin';

const validPassword = 'password';


if (username === validUsername && password === validPassword) {

// Store user session in local storage

localStorage.setItem('isLoggedIn', 'true');

localStorage.setItem('username', username);

// Redirect to homepage

showHomepage();

} else {

// Show error message

document.getElementById('login-error').textContent = 'Invalid username or password';

// Function to handle logout

function handleLogout() {

// Clear user session from local storage

localStorage.removeItem('isLoggedIn');

localStorage.removeItem('username');

// Redirect to login page

showLoginPage();

// Function to show the homepage


function showHomepage() {

document.getElementById('login-container').classList.add('hidden');

document.getElementById('home-container').classList.remove('hidden');

// Function to show the login page

function showLoginPage() {

document.getElementById('home-container').classList.add('hidden');

document.getElementById('login-container').classList.remove('hidden');

// Check if the user is already logged in when the page loads

window.onload = function () {

const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';

if (isLoggedIn) {

showHomepage();

} else {

showLoginPage();

};
E learning website

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>E-Learning Platform</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Welcome to the E-Learning Platform</h1>

<nav>

<a href="login.html">Login</a>

<a href="dashboard.html">Dashboard</a>

</nav>

</header>

<main>

<p>Enhance your knowledge with interactive lessons, quizzes, and assignments.</p>

</main>

</body>

</html>
login.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h2>Login to Your Account</h2>

<form id="loginForm">

<input type="text" id="username" placeholder="Enter Username" required>

<input type="password" id="password" placeholder="Enter Password" required>

<button type="submit">Login</button>

</form>

<script src="script.js"></script>

</body>

</html>

dashboard.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dashboard</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h2>Welcome to Your Dashboard</h2>

<nav>

<a href="subjects.html">Subjects</a>

<a href="profile.html">Profile</a>

<a href="results.html">Results</a>

<a href="login.html" onclick="logout()">Logout</a>

</nav>

<script src="script.js"></script>

</body>

</html>

subjects.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Subjects</title>

<link rel="stylesheet" href="styles.css">

</head>
<body>

<h2>Select a Subject</h2>

<ul>

<li><a href="course.html?subject=Math">Mathematics</a></li>

<li><a href="course.html?subject=Science">Science</a></li>

</ul>

</body>

</html>

course.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Course Page</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h2 id="courseTitle"></h2>

<nav>

<a href="quiz.html">Take Quiz</a>

<a href="assignments.html">Assignments</a>

<a href="projects.html">Projects</a>
</nav>

<script>

document.getElementById("courseTitle").innerText = new
URLSearchParams(window.location.search).get("subject") + " Course";

</script>

</body>

</html>

quiz.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Quiz</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h2>Quiz Section</h2>

<div id="quizContainer"></div>

<button onclick="submitQuiz()">Submit Quiz</button>

<script src="script.js"></script>

</body>

</html>
assignments.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Assignments</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h2>Assignments</h2>

<p>Upload your assignment below:</p>

<input type="file" id="assignmentUpload">

<button>Submit Assignment</button>

</body>

</html>

script.js

// Simple Authentication

document.getElementById("loginForm")?.addEventListener("submit", function(event) {

event.preventDefault();

let username = document.getElementById("username").value;

let password = document.getElementById("password").value;


if (username === "student" && password === "password") {

localStorage.setItem("authenticated", "true");

window.location.href = "dashboard.html";

} else {

alert("Invalid credentials!");

});

// Logout

function logout() {

localStorage.removeItem("authenticated");

window.location.href = "login.html";

// Quiz Timer (Example)

let timeLeft = 60;

let timer = setInterval(() => {

timeLeft--;

if (timeLeft <= 0) {

clearInterval(timer);

alert("Time's up! Quiz submitted.");

}, 1000);

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy