bunch of fixes

This commit is contained in:
nate@necloud.us committed 2025-07-15 10:16:59 -04:00
1 parent 462c7908a1
commit 266a064330
14 files changed
+1211 -868

No files matched your search

+297 -193
View File
@@ -1,200 +1,304 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Spelling App with Roles</title>
<link href="styles.css" rel="stylesheet"/>
<!-- 🔧 Script Load Order -->
<script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.2/sha.js"></script>
<script defer="" src="js/auth.js"></script>
<script defer="" src="js/ui.js"></script>
<script defer="" src="js/themes.js"></script>
<script src="js/game.js"></script>
<script defer="" src="js/admin.js"></script>
<script defer="" src="js/main.js"></script>
<script defer="" src="js/typing.js"></script>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>✨ Modern Spelling Practice</title>
<link href="styles.css" rel="stylesheet"/>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.2/sha.js"></script>
<script src="js/admin.js"></script>
<script src="js/auth.js"></script>
<script src="js/ui.js"></script>
<script src="js/themes.js"></script>
<script src="js/game.js"></script>
<script src="js/typing.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1>Spelling Practice</h1>
<!-- 🏳️ Role Banner -->
<div class="banner hidden" id="roleBanner"></div>
<!-- 👤 Login Panel -->
<div id="loginPanel">
<h2>User Login</h2>
<form onsubmit="event.preventDefault(); verifyLogin();">
<input id="username" placeholder="Username" required="" type="text"/>
<input id="password" placeholder="Password" required="" type="password"/>
<button type="submit">Login</button>
</form>
<p id="loginMessage"></p>
</div>
<!-- 🔀 Role-Based Navigation -->
<div class="hidden" id="nav">
<p><strong id="userInfo"></strong></p>
<button class="hidden" id="adminBtn" onclick="showAdmin()">Admin Panel</button>
<button class="hidden" id="studentBtn" onclick="showStudent()">Student Panel</button>
<button id="logoutBtn" onclick="logoutUser()">Log Out</button>
</div>
<!-- 👨‍🏫 Admin Panel -->
<div class="hidden" id="adminPanel">
<h2>👨‍🏫 Admin Panel</h2>
<!-- 🔘 Tabs -->
<div id="adminTabs">
<button class="active" onclick="switchTab('tabUsers')">👤 Manage Users</button>
<button onclick="switchTab('tabWords')">📝 Word Lists</button>
<button onclick="switchTab('tabAnalytics')">📊 Analytics</button>
<button onclick="switchTab('tabResults')">📊 Results</button>
<button onclick="switchTab('tabReports')">📘 Reports</button>
<button onclick="switchTab('tabSessions')">📆 Sessions</button>
<button onclick="switchTab('tabBadges')">🎖 Badges</button>
<button onclick="switchTab('tabTheme')">🎨 Theme</button>
<button onclick="switchTab('tabTyping')">⌨️ Typing Practice</button>
</div>
<!-- 👥 Users Tab -->
<div class="adminTab" id="tabUsers">
<h3>Add New User</h3>
<form onsubmit="event.preventDefault(); addNewUser();">
<input id="newUsername" placeholder="Username" required="" type="text"/>
<input id="newPassword" placeholder="Password" required="" type="password"/>
<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 List Tab -->
<div class="adminTab hidden" id="tabWords">
<h3>Edit Word List for:</h3>
<select class="word-user-dropdown" id="wordUserSelect" 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>Upload a Word File</h3>
<input accept=".txt,.csv" onchange="handleFileUpload(event)" type="file"/>
<p><strong>Current Word List:</strong></p>
<ul id="wordListDisplay"></ul>
<h3>📋 View Word List by User:</h3>
<select class="word-user-dropdown" id="viewUserSelect" onchange="displayWordListForSelectedUser()">
<option value="">-- Select a user --</option>
</select>
<ul id="userWordListDisplay"></ul>
</div>
<!-- 📊 Results Tab -->
<div class="adminTab hidden" id="tabResults">
<h3>🧾 Student Results Overview</h3>
<button onclick="loadStudentResults()">Refresh Results</button>
<ul id="resultsList"></ul>
</div>
<!-- 📊 Analytics Tab -->
<div class="adminTab hidden" id="tabAnalytics">
<h3>Smart Analytics Overview</h3>
<ul id="analyticsSummary">
<li><strong>Average Score:</strong> –</li>
<li><strong>Total Completed Sessions:</strong> –</li>
<li><strong>Most Missed Word:</strong> –</li>
</ul>
<h4>Per-Student Breakdown</h4>
<ul id="studentBreakdown"></ul>
<button onclick="refreshAnalytics()">🔄 Refresh</button>
</div>
<!-- 🎖 Badges -->
<div class="adminTab hidden" id="tabBadges">
<h3>🎖 Badge Viewer</h3>
<ul id="badgeUserList"></ul>
<div class="hidden" id="badgeDetails">
<h4 id="badgeUserTitle"></h4>
<ul id="badgeUserBadges"></ul>
</div>
</div>
<!-- 🎨 Theme Tab -->
<div class="adminTab hidden" id="tabTheme">
<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>
</div>
<!-- ⌨️ Typing Practice Tab -->
<div class="adminTab hidden" id="tabTyping">
<h3>⌨️ Typing Challenge Preview</h3>
<label for="typingUserSelect">Select Student:</label>
<select class="word-user-dropdown" id="typingUserSelect" onchange="loadTypingWords(this.value)">
<option value="">-- Select a user --</option>
</select>
<button onclick="startTypingTest()">Start Typing Test</button>
<div class="hidden" id="typingTestArea">
<p><strong>Practice Sentence:</strong></p>
<p class="typing-sentence" id="typingPrompt"></p>
<input autocomplete="off" id="typingInput" placeholder="Type the spelling word here..." type="text"/>
<button onclick="submitTyping()">Submit</button>
<p id="typingFeedback"></p>
</div>
</div>
<!-- 🧾 Student Report Viewer -->
<div class="adminTab hidden" id="tabReports">
<h3>📘 Student Progress Report</h3>
<label for="reportUser">Select Student:</label>
<select id="reportUser" onchange="loadStudentReport(this.value)">
<option value="">-- Select --</option>
</select>
<div class="hidden" id="reportContent">
<h4 id="reportTitle"></h4>
<p><strong>Last Score:</strong> <span id="reportScore"></span></p>
<p><strong>Words Attempted:</strong></p>
<ul id="reportWords"></ul>
<p><strong>Badges Earned:</strong></p>
<ul id="reportBadges"></ul>
<button onclick="window.print()">🖨️ Print Report</button>
<button onclick="copyReportToClipboard()">📋 Copy to Clipboard</button>
</div>
</div>
<div class="adminTab hidden" id="tabSessions">
<h3>📘 Archived Sessions</h3>
<label for="sessionUserSelect">Select Student:</label>
<select id="sessionUserSelect" onchange="loadUserSessions(this.value)">
<option value="">-- Select --</option>
</select>
<ul id="userSessionList"></ul>
</div>
<!-- 👩‍🎓 Student Panel -->
<div class="hidden" id="studentPanel">
<h2>Student Dashboard</h2>
<div class="student-controls">
<button id="startGameBtn" onclick="startGame()">Start Spelling Game</button>
<button id="startTypingBtn" onclick="startTypingPractice()">Start Typing Practice</button>
</div>
<!-- Game Section -->
<div class="hidden" id="gameSection">
<h3>🎮 Spelling Game</h3>
<div class="word-box" id="wordBox"></div>
<div class="hidden" id="inputSection">
<input id="userInput" placeholder="Type the word you saw..." type="text"/>
<button onclick="submitAnswer()">Submit</button>
</div>
</div>
<!-- Typing Practice Section -->
<div class="hidden" id="typingSection">
<h3>Typing Practice</h3>
<p id="typingPrompt">Type the word...</p>
<input id="typingInput" type="text"/>
<button onclick="submitTyping()">Submit</button>
<p id="typingFeedback"></p>
</div>
</div>
<script>
<div class="container">
<h1>✨ Spelling Practice</h1>
<!-- Role Banner -->
<div class="banner hidden" id="roleBanner"></div>
<!-- Login Panel -->
<div id="loginPanel" class="card">
<div class="card-header">
<h2 class="text-center">Welcome Back</h2>
<p class="text-center" style="color: var(--text-secondary);">Sign in to continue your spelling practice</p>
</div>
<form onsubmit="event.preventDefault(); verifyLogin();">
<input id="username" placeholder="Username" required type="text"/>
<input id="password" placeholder="Password" required type="password"/>
<button type="submit">Sign In</button>
</form>
<p id="loginMessage" style="margin-top: 1rem; text-align: center;"></p>
</div>
<!-- Navigation -->
<div id="nav" class="hidden">
<p><strong id="userInfo"></strong></p>
<div class="flex gap-4 justify-center" style="margin-top: 1rem;">
<button class="hidden" id="adminBtn" onclick="showAdmin()">👨‍💼 Admin Panel</button>
<button class="hidden" id="studentBtn" onclick="showStudent()">🎓 Student Panel</button>
<button id="logoutBtn" onclick="logoutUser()" class="btn-secondary">Sign Out</button>
</div>
</div>
<!-- Admin Panel -->
<div class="hidden" id="adminPanel">
<div class="card-header">
<h2>👨‍💼 Admin Dashboard</h2>
<p style="color: var(--text-secondary);">Manage users, word lists, and view analytics</p>
</div>
<!-- Admin Tabs -->
<div id="adminTabs">
<button class="active" onclick="switchTab('tabUsers')">👤 Users</button>
<button onclick="switchTab('tabWords')">📝 Word Lists</button>
<button onclick="switchTab('tabAnalytics')">📊 Analytics</button>
<button onclick="switchTab('tabResults')">� Results</button>
<button onclick="switchTab('tabReports')">📘 Reports</button>
<button onclick="switchTab('tabSessions')">� Sessions</button>
<button onclick="switchTab('tabBadges')">� Badges</button>
<button onclick="switchTab('tabTheme')">🎨 Themes</button>
</div>
<!-- Users Tab -->
<div id="tabUsers" class="adminTab">
<h3>👤 User Management</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem;">
<div class="card">
<h4>Add New User</h4>
<form onsubmit="event.preventDefault(); addNewUser();" style="display: flex; flex-direction: column; gap: 1rem;">
<input id="newUsername" placeholder="Username" required type="text"/>
<input id="newPassword" placeholder="Password" required type="password"/>
<select id="newRole">
<option value="student">🎓 Student</option>
<option value="admin">👨‍💼 Admin</option>
</select>
<button type="submit" class="btn-success">➕ Add User</button>
</form>
<p id="userAddMessage" style="margin-top: 1rem;"></p>
</div>
<div class="card">
<h4>Remove User</h4>
<select id="userDropdown" onchange="selectUserAction(this.value)" style="width: 100%;">
<option value="">-- Select a user to remove --</option>
</select>
</div>
</div>
</div>
<!-- Word Lists Tab -->
<div class="adminTab hidden" id="tabWords">
<h3>📝 Word List Management</h3>
<div style="display: grid; gap: 2rem;">
<div class="card">
<h4>Select Student</h4>
<select class="word-user-dropdown" id="wordUserSelect" onchange="loadWordsForSelectedUser()" style="width: 100%;">
<option value="">-- Select a student --</option>
</select>
</div>
<div class="card">
<h4>Manage Word List</h4>
<textarea id="wordInput" placeholder="Enter one word per line..."></textarea>
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
<button onclick="saveWords()" class="btn-success">💾 Save Words</button>
<button onclick="clearWords()" class="btn-error">🗑️ Clear All</button>
</div>
<div style="margin-top: 1.5rem;">
<h5>Upload Word File</h5>
<input accept=".txt,.csv" onchange="handleFileUpload(event)" type="file" style="margin: 0.5rem 0;"/>
</div>
</div>
<div class="card">
<h4>Current Word List</h4>
<ul id="wordListDisplay" style="max-height: 200px; overflow-y: auto;"></ul>
</div>
<div class="card">
<h4>View by Student</h4>
<select class="word-user-dropdown" id="viewUserSelect" onchange="displayWordListForSelectedUser()" style="width: 100%;">
<option value="">-- Select a student --</option>
</select>
<ul id="userWordListDisplay" style="max-height: 200px; overflow-y: auto; margin-top: 1rem;"></ul>
</div>
</div>
</div>
<!-- Results Tab -->
<div class="adminTab hidden" id="tabResults">
<div class="card">
<div class="card-header">
<h3>📋 Student Results Overview</h3>
<button onclick="loadStudentResults()" class="btn-primary">🔄 Refresh Results</button>
</div>
<ul id="resultsList" style="max-height: 400px; overflow-y: auto;"></ul>
</div>
</div>
<!-- Analytics Tab -->
<div class="adminTab hidden" id="tabAnalytics">
<div class="card">
<div class="card-header">
<h3>📊 Performance Analytics</h3>
<button onclick="refreshAnalytics()" class="btn-primary">🔄 Refresh Analytics</button>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<div>
<h4>Summary Statistics</h4>
<ul id="analyticsSummary" style="background: var(--bg-secondary); border-radius: var(--radius); padding: 1rem;">
<li><strong>Average Score:</strong> –</li>
<li><strong>Total Sessions:</strong> –</li>
<li><strong>Most Missed Word:</strong> –</li>
</ul>
</div>
<div>
<h4>Student Breakdown</h4>
<ul id="studentBreakdown" style="max-height: 300px; overflow-y: auto;"></ul>
</div>
</div>
</div>
</div>
<!-- Badges Tab -->
<div class="adminTab hidden" id="tabBadges">
<div class="card">
<h3>� Student Badges</h3>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
<div>
<h4>Select Student</h4>
<ul id="badgeUserList"></ul>
</div>
<div class="hidden" id="badgeDetails">
<h4 id="badgeUserTitle"></h4>
<ul id="badgeUserBadges"></ul>
</div>
</div>
</div>
</div>
<!-- Theme Tab -->
<div class="adminTab hidden" id="tabTheme">
<div class="card">
<h3>🎨 Application Themes</h3>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Choose a visual theme for the application</p>
<select id="themeSelect" onchange="changeTheme(this.value)" style="width: 100%; max-width: 300px;">
<option value="default">✨ Modern (Default)</option>
<option value="playground">🎪 Playground</option>
<option value="chalkboard">🎓 Chalkboard</option>
<option value="galaxy">🌌 Galaxy</option>
<option value="nature">🌿 Nature</option>
</select>
</div>
</div>
<!-- Reports Tab -->
<div class="adminTab hidden" id="tabReports">
<div class="card">
<h3>📘 Student Progress Reports</h3>
<div style="margin-bottom: 2rem;">
<label for="reportUser">Select Student:</label>
<select id="reportUser" onchange="loadStudentReport(this.value)" style="width: 100%; max-width: 300px;">
<option value="">-- Select a student --</option>
</select>
</div>
<div class="hidden" id="reportContent">
<div class="card" style="background: var(--bg-secondary);">
<h4 id="reportTitle"></h4>
<p><strong>Latest Score:</strong> <span id="reportScore"></span></p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem;">
<div>
<h5>Words Attempted</h5>
<ul id="reportWords" style="max-height: 200px; overflow-y: auto;"></ul>
</div>
<div>
<h5>Badges Earned</h5>
<ul id="reportBadges"></ul>
</div>
</div>
<div style="margin-top: 2rem; display: flex; gap: 1rem;">
<button onclick="window.print()" class="btn-secondary">🖨️ Print Report</button>
<button onclick="copyReportToClipboard()" class="btn-primary">📋 Copy to Clipboard</button>
</div>
</div>
</div>
</div>
</div>
<!-- Sessions Tab -->
<div class="adminTab hidden" id="tabSessions">
<div class="card">
<h3>� Session History</h3>
<div style="margin-bottom: 2rem;">
<label for="sessionUserSelect">Select Student:</label>
<select id="sessionUserSelect" onchange="loadUserSessions(this.value)" style="width: 100%; max-width: 300px;">
<option value="">-- Select a student --</option>
</select>
</div>
<ul id="userSessionList" style="max-height: 400px; overflow-y: auto;"></ul>
</div>
</div>
</div>
<!-- Student Panel -->
<div class="hidden" id="studentPanel">
<div class="card">
<div class="card-header">
<h2>🎓 Student Dashboard</h2>
<p style="color: var(--text-secondary);">Choose an activity to start practicing</p>
</div>
<div class="student-controls">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 600px; margin: 0 auto;">
<button id="startGameBtn" onclick="startGame()" class="btn-success">
🎮 Spelling Game
</button>
<button id="startTypingBtn" onclick="startTypingPractice()" class="btn-warning">
⌨️ Typing Practice
</button>
</div>
</div>
<!-- Game Section -->
<div class="hidden" id="gameSection">
<h3>🎮 Spelling Challenge</h3>
<div class="word-box" id="wordBox"></div>
<div class="hidden" id="inputSection" style="text-align: center;">
<input id="userInput" placeholder="Type the word you saw..." type="text" style="max-width: 400px;"/>
<button onclick="submitAnswer()" class="btn-primary">Submit Answer</button>
</div>
<!-- Game Summary -->
<div class="hidden" id="summary" class="card"></div>
<!-- Badge Display -->
<div class="hidden" id="badgeDisplay" class="card">
<h3>🏅 Congratulations!</h3>
<p>You've earned new badges:</p>
<ul id="badgeList"></ul>
</div>
</div>
<!-- Typing Practice Section -->
<div class="hidden" id="typingSection">
<h3>⌨️ Typing Practice</h3>
<div id="typingPrompt">Get ready to type...</div>
<div style="text-align: center; margin: 2rem 0;">
<input id="typingInput" type="text" style="max-width: 500px;"/>
<button onclick="submitTyping()" class="btn-primary">Submit</button>
</div>
<p id="typingFeedback" style="text-align: center; font-weight: 600;"></p>
</div>
</div>
</div>
<!-- Toast notification -->
<div id="toast" class="toast"></div>
</div> <script>
// Initialize the application when DOM is loaded
window.addEventListener('DOMContentLoaded', () => {
const user = JSON.parse(localStorage.getItem('loggedInUser'));
if (user) {
@@ -206,5 +310,5 @@
}
});
</script>
<div id="spellingSection"><h3>Spelling Game</h3><p id="spellingPrompt">Word will appear here...</p></div></body>
</body>
</html>