124 lines
4.1 KiB
HTML
124 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Spelling App with Roles</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.2/sha.js"></script>
|
|
<script src="script.js" defer></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Spelling Practice</h1>
|
|
<div id="roleBanner" class="banner hidden"></div>
|
|
<!-- 👤 Login Panel -->
|
|
<div id="loginPanel">
|
|
<h2>User Login</h2>
|
|
<form onsubmit="event.preventDefault(); verifyLogin();">
|
|
<input type="text" id="username" placeholder="Username" required />
|
|
<input type="password" id="password" placeholder="Password" required />
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
<p id="loginMessage"></p>
|
|
</div>
|
|
|
|
<!-- 🔀 Navigation -->
|
|
<div id="nav" class="hidden">
|
|
<p><strong id="userInfo"></strong></p>
|
|
<button onclick="showAdmin()" id="adminBtn" class="hidden">Admin Panel</button>
|
|
<button onclick="showStudent()" id="studentBtn">Student Panel</button>
|
|
<button onclick="logoutUser()">Log Out</button>
|
|
</div>
|
|
|
|
<div id="adminPanel" class="hidden">
|
|
<h2>👨🏫 Admin Panel</h2>
|
|
|
|
<!-- Tab Controls -->
|
|
<div id="adminTabs">
|
|
<button onclick="switchTab('tabUsers')" class="active">👤 Manage Users</button>
|
|
<button onclick="switchTab('tabWords')">📝 Word Lists</button>
|
|
<button onclick="switchTab('tabResults')">📊 Results</button>
|
|
<button onclick="switchTab('tabTheme')">🎨 Theme</button>
|
|
</div>
|
|
|
|
<!-- Manage Users -->
|
|
<div id="tabUsers" class="adminTab">
|
|
<h3>Add New User</h3>
|
|
<form onsubmit="event.preventDefault(); addNewUser();">
|
|
<input type="text" id="newUsername" placeholder="Username" required />
|
|
<input type="password" id="newPassword" placeholder="Password" required />
|
|
<select id="newRole">
|
|
<option value="student">Student</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
<button type="submit">Add User</button>
|
|
</form>
|
|
|
|
<h3>Delete Users</h3>
|
|
<select id="userDropdown" onchange="selectUserAction(this.value)">
|
|
<option value="">-- Select a user --</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Word Lists -->
|
|
<div id="tabWords" class="adminTab hidden">
|
|
<h3>Edit Word List for:</h3>
|
|
<select id="wordUserSelect" class="word-user-dropdown" onchange="loadWordsForSelectedUser()">
|
|
<option value="">-- Select a user --</option>
|
|
</select>
|
|
|
|
<h2>Enter Spelling Words</h2>
|
|
<textarea id="wordInput" placeholder="Enter one word per line..."></textarea><br/>
|
|
<button onclick="saveWords()">Save Word List</button>
|
|
<button onclick="clearWords()">Clear Saved Words</button>
|
|
|
|
<h3>Or Upload a Word File</h3>
|
|
<input type="file" accept=".txt,.csv" onchange="handleFileUpload(event)" />
|
|
<p><strong>Current Word List:</strong></p>
|
|
<ul id="wordListDisplay"></ul>
|
|
|
|
<h3>📋 View Word List by User:</h3>
|
|
<select id="viewUserSelect" class="word-user-dropdown" onchange="displayWordListForSelectedUser()">
|
|
<option value="">-- Select a user --</option>
|
|
</select>
|
|
|
|
<ul id="userWordListDisplay"></ul>
|
|
</div>
|
|
|
|
<!-- Student Results -->
|
|
<div id="tabResults" class="adminTab hidden">
|
|
<h3>🧾 Student Results Overview</h3>
|
|
<button onclick="loadStudentResults()">Refresh Results</button>
|
|
<ul id="resultsList"></ul>
|
|
</div>
|
|
|
|
<!-- Theme Selection -->
|
|
<div id="tabTheme" class="adminTab hidden">
|
|
<h3>🎨 Select Theme</h3>
|
|
<select id="themeSelect" onchange="changeTheme(this.value)">
|
|
<option value="playground">Playground</option>
|
|
<option value="chalkboard">Chalkboard</option>
|
|
<option value="galaxy">Galaxy</option>
|
|
<option value="nature">Nature</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 👩🎓 Student Panel -->
|
|
<div id="studentPanel" class="hidden">
|
|
<button onclick="startGame()">Start Practice</button>
|
|
|
|
<div id="wordBox" class="hidden">
|
|
<div id="word" class="word-box"></div>
|
|
</div>
|
|
|
|
<div id="inputSection" class="hidden">
|
|
<input type="text" id="userInput" placeholder="Spell the word" />
|
|
<button onclick="submitAnswer()">Submit</button>
|
|
</div>
|
|
|
|
<div id="summary" class="hidden"></div>
|
|
</div>
|
|
<div id="toast" class="toast"></div>
|
|
</body>
|
|
</html>
|