updates
This commit is contained in:
1 parent
364284553b
commit
462c7908a1
7 files changed
+906
-254
No files matched your search
+12
-4
@@ -1,13 +1,21 @@
|
|||||||
{
|
{
|
||||||
"student1": [],
|
"student1": [
|
||||||
|
"apple",
|
||||||
|
"banana",
|
||||||
|
"cherry",
|
||||||
|
"date",
|
||||||
|
"elderberry"
|
||||||
|
],
|
||||||
"admin1": [
|
"admin1": [
|
||||||
"boy",
|
"boy",
|
||||||
"bot",
|
"bot",
|
||||||
"snot"
|
"snot"
|
||||||
],
|
],
|
||||||
"nate": [
|
"nate": [
|
||||||
"not",
|
"computer",
|
||||||
"bot",
|
"keyboard",
|
||||||
"snot"
|
"mouse",
|
||||||
|
"screen",
|
||||||
|
"printer"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
+197
-188
@@ -1,201 +1,210 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
<title>Spelling App with Roles</title>
|
<title>Spelling App with Roles</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link href="styles.css" rel="stylesheet"/>
|
||||||
|
<!-- 🔧 Script Load Order -->
|
||||||
<!-- 🔧 Script Load Order -->
|
<script defer="" src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.2/sha.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.2/sha.js" defer></script>
|
<script defer="" src="js/auth.js"></script>
|
||||||
<script src="js/auth.js" defer></script>
|
<script defer="" src="js/ui.js"></script>
|
||||||
<script src="js/ui.js" defer></script>
|
<script defer="" src="js/themes.js"></script>
|
||||||
<script src="js/themes.js" defer></script>
|
<script src="js/game.js"></script>
|
||||||
<script src="js/admin.js" defer></script>
|
<script defer="" src="js/admin.js"></script>
|
||||||
<script src="js/game.js" defer></script>
|
<script defer="" src="js/main.js"></script>
|
||||||
<script src="js/main.js" defer></script>
|
<script defer="" src="js/typing.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Spelling Practice</h1>
|
<h1>Spelling Practice</h1>
|
||||||
|
<!-- 🏳️ Role Banner -->
|
||||||
<!-- 🏳️ Role Banner -->
|
<div class="banner hidden" id="roleBanner"></div>
|
||||||
<div id="roleBanner" class="banner hidden"></div>
|
<!-- 👤 Login Panel -->
|
||||||
|
<div id="loginPanel">
|
||||||
<!-- 👤 Login Panel -->
|
<h2>User Login</h2>
|
||||||
<div id="loginPanel">
|
<form onsubmit="event.preventDefault(); verifyLogin();">
|
||||||
<h2>User Login</h2>
|
<input id="username" placeholder="Username" required="" type="text"/>
|
||||||
<form onsubmit="event.preventDefault(); verifyLogin();">
|
<input id="password" placeholder="Password" required="" type="password"/>
|
||||||
<input type="text" id="username" placeholder="Username" required />
|
<button type="submit">Login</button>
|
||||||
<input type="password" id="password" placeholder="Password" required />
|
</form>
|
||||||
<button type="submit">Login</button>
|
<p id="loginMessage"></p>
|
||||||
</form>
|
</div>
|
||||||
<p id="loginMessage"></p>
|
<!-- 🔀 Role-Based Navigation -->
|
||||||
</div>
|
<div class="hidden" id="nav">
|
||||||
|
<p><strong id="userInfo"></strong></p>
|
||||||
<!-- 🔀 Role-Based Navigation -->
|
<button class="hidden" id="adminBtn" onclick="showAdmin()">Admin Panel</button>
|
||||||
<div id="nav" class="hidden">
|
<button class="hidden" id="studentBtn" onclick="showStudent()">Student Panel</button>
|
||||||
<p><strong id="userInfo"></strong></p>
|
<button id="logoutBtn" onclick="logoutUser()">Log Out</button>
|
||||||
<button onclick="showAdmin()" id="adminBtn" class="hidden">Admin Panel</button>
|
</div>
|
||||||
<button onclick="showStudent()" id="studentBtn" class="hidden">Student Panel</button>
|
<!-- 👨🏫 Admin Panel -->
|
||||||
<button onclick="logoutUser()" id="logoutBtn">Log Out</button>
|
<div class="hidden" id="adminPanel">
|
||||||
</div>
|
<h2>👨🏫 Admin Panel</h2>
|
||||||
|
<!-- 🔘 Tabs -->
|
||||||
<!-- 👨🏫 Admin Panel -->
|
<div id="adminTabs">
|
||||||
<div id="adminPanel" class="hidden">
|
<button class="active" onclick="switchTab('tabUsers')">👤 Manage Users</button>
|
||||||
<h2>👨🏫 Admin Panel</h2>
|
<button onclick="switchTab('tabWords')">📝 Word Lists</button>
|
||||||
|
<button onclick="switchTab('tabAnalytics')">📊 Analytics</button>
|
||||||
<!-- 🔘 Tabs -->
|
<button onclick="switchTab('tabResults')">📊 Results</button>
|
||||||
<div id="adminTabs">
|
<button onclick="switchTab('tabReports')">📘 Reports</button>
|
||||||
<button onclick="switchTab('tabUsers')" class="active">👤 Manage Users</button>
|
<button onclick="switchTab('tabSessions')">📆 Sessions</button>
|
||||||
<button onclick="switchTab('tabWords')">📝 Word Lists</button>
|
<button onclick="switchTab('tabBadges')">🎖 Badges</button>
|
||||||
<button onclick="switchTab('tabAnalytics')">📊 Analytics</button>
|
<button onclick="switchTab('tabTheme')">🎨 Theme</button>
|
||||||
<button onclick="switchTab('tabResults')">📊 Results</button>
|
<button onclick="switchTab('tabTyping')">⌨️ Typing Practice</button>
|
||||||
<button onclick="switchTab('tabReports')">📘 Reports</button>
|
</div>
|
||||||
<button onclick="switchTab('tabSessions')">📆 Sessions</button>
|
<!-- 👥 Users Tab -->
|
||||||
<button onclick="switchTab('tabBadges')">🎖 Badges</button>
|
<div class="adminTab" id="tabUsers">
|
||||||
<button onclick="switchTab('tabTheme')">🎨 Theme</button>
|
<h3>Add New User</h3>
|
||||||
</div>
|
<form onsubmit="event.preventDefault(); addNewUser();">
|
||||||
|
<input id="newUsername" placeholder="Username" required="" type="text"/>
|
||||||
<!-- 👥 Users Tab -->
|
<input id="newPassword" placeholder="Password" required="" type="password"/>
|
||||||
<div id="tabUsers" class="adminTab">
|
<select id="newRole">
|
||||||
<h3>Add New User</h3>
|
<option value="student">Student</option>
|
||||||
<form onsubmit="event.preventDefault(); addNewUser();">
|
<option value="admin">Admin</option>
|
||||||
<input type="text" id="newUsername" placeholder="Username" required />
|
</select>
|
||||||
<input type="password" id="newPassword" placeholder="Password" required />
|
<button type="submit">Add User</button>
|
||||||
<select id="newRole">
|
</form>
|
||||||
<option value="student">Student</option>
|
<h3>Delete Users</h3>
|
||||||
<option value="admin">Admin</option>
|
<select id="userDropdown" onchange="selectUserAction(this.value)">
|
||||||
</select>
|
<option value="">-- Select a user --</option>
|
||||||
<button type="submit">Add User</button>
|
</select>
|
||||||
</form>
|
</div>
|
||||||
|
<!-- 📝 Word List Tab -->
|
||||||
<h3>Delete Users</h3>
|
<div class="adminTab hidden" id="tabWords">
|
||||||
<select id="userDropdown" onchange="selectUserAction(this.value)">
|
<h3>Edit Word List for:</h3>
|
||||||
<option value="">-- Select a user --</option>
|
<select class="word-user-dropdown" id="wordUserSelect" onchange="loadWordsForSelectedUser()">
|
||||||
</select>
|
<option value="">-- Select a user --</option>
|
||||||
</div>
|
</select>
|
||||||
|
<h2>Enter Spelling Words</h2>
|
||||||
<!-- 📝 Word List Tab -->
|
<textarea id="wordInput" placeholder="Enter one word per line..."></textarea><br/>
|
||||||
<div id="tabWords" class="adminTab hidden">
|
<button onclick="saveWords()">Save Word List</button>
|
||||||
<h3>Edit Word List for:</h3>
|
<button onclick="clearWords()">Clear Saved Words</button>
|
||||||
<select id="wordUserSelect" class="word-user-dropdown" onchange="loadWordsForSelectedUser()">
|
<h3>Upload a Word File</h3>
|
||||||
<option value="">-- Select a user --</option>
|
<input accept=".txt,.csv" onchange="handleFileUpload(event)" type="file"/>
|
||||||
</select>
|
<p><strong>Current Word List:</strong></p>
|
||||||
|
<ul id="wordListDisplay"></ul>
|
||||||
<h2>Enter Spelling Words</h2>
|
<h3>📋 View Word List by User:</h3>
|
||||||
<textarea id="wordInput" placeholder="Enter one word per line..."></textarea><br/>
|
<select class="word-user-dropdown" id="viewUserSelect" onchange="displayWordListForSelectedUser()">
|
||||||
<button onclick="saveWords()">Save Word List</button>
|
<option value="">-- Select a user --</option>
|
||||||
<button onclick="clearWords()">Clear Saved Words</button>
|
</select>
|
||||||
|
<ul id="userWordListDisplay"></ul>
|
||||||
<h3>Upload a Word File</h3>
|
</div>
|
||||||
<input type="file" accept=".txt,.csv" onchange="handleFileUpload(event)" />
|
<!-- 📊 Results Tab -->
|
||||||
|
<div class="adminTab hidden" id="tabResults">
|
||||||
<p><strong>Current Word List:</strong></p>
|
<h3>🧾 Student Results Overview</h3>
|
||||||
<ul id="wordListDisplay"></ul>
|
<button onclick="loadStudentResults()">Refresh Results</button>
|
||||||
|
<ul id="resultsList"></ul>
|
||||||
<h3>📋 View Word List by User:</h3>
|
</div>
|
||||||
<select id="viewUserSelect" class="word-user-dropdown" onchange="displayWordListForSelectedUser()">
|
|
||||||
<option value="">-- Select a user --</option>
|
|
||||||
</select>
|
|
||||||
<ul id="userWordListDisplay"></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 📊 Results Tab -->
|
|
||||||
<div id="tabResults" class="adminTab hidden">
|
|
||||||
<h3>🧾 Student Results Overview</h3>
|
|
||||||
<button onclick="loadStudentResults()">Refresh Results</button>
|
|
||||||
<ul id="resultsList"></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 📊 Analytics Tab -->
|
<!-- 📊 Analytics Tab -->
|
||||||
<div id="tabAnalytics" class="adminTab hidden">
|
<div class="adminTab hidden" id="tabAnalytics">
|
||||||
<h3>Smart Analytics Overview</h3>
|
<h3>Smart Analytics Overview</h3>
|
||||||
<ul id="analyticsSummary">
|
<ul id="analyticsSummary">
|
||||||
<li><strong>Average Score:</strong> –</li>
|
<li><strong>Average Score:</strong> –</li>
|
||||||
<li><strong>Total Completed Sessions:</strong> –</li>
|
<li><strong>Total Completed Sessions:</strong> –</li>
|
||||||
<li><strong>Most Missed Word:</strong> –</li>
|
<li><strong>Most Missed Word:</strong> –</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<h4>Per-Student Breakdown</h4>
|
||||||
<h4>Per-Student Breakdown</h4>
|
<ul id="studentBreakdown"></ul>
|
||||||
<ul id="studentBreakdown"></ul>
|
<button onclick="refreshAnalytics()">🔄 Refresh</button>
|
||||||
|
|
||||||
<button onclick="refreshAnalytics()">🔄 Refresh</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 🎖 Badges -->
|
<!-- 🎖 Badges -->
|
||||||
<div id="tabBadges" class="adminTab hidden">
|
<div class="adminTab hidden" id="tabBadges">
|
||||||
<h3>🎖 Badge Viewer</h3>
|
<h3>🎖 Badge Viewer</h3>
|
||||||
<ul id="badgeUserList"></ul>
|
<ul id="badgeUserList"></ul>
|
||||||
<div id="badgeDetails" class="hidden">
|
<div class="hidden" id="badgeDetails">
|
||||||
<h4 id="badgeUserTitle"></h4>
|
<h4 id="badgeUserTitle"></h4>
|
||||||
<ul id="badgeUserBadges"></ul>
|
<ul id="badgeUserBadges"></ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 🎨 Theme Tab -->
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 🧾 Student Report Viewer -->
|
|
||||||
<div id="tabReports" class="adminTab hidden">
|
|
||||||
<h3>📘 Student Progress Report</h3>
|
|
||||||
<label for="reportUser">Select Student:</label>
|
|
||||||
<select id="reportUser" onchange="loadStudentReport(this.value)">
|
|
||||||
<option value="">-- Select --</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div id="reportContent" class="hidden">
|
|
||||||
<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>
|
||||||
|
<!-- 🎨 Theme Tab -->
|
||||||
<div id="tabSessions" class="adminTab hidden">
|
<div class="adminTab hidden" id="tabTheme">
|
||||||
<h3>📘 Archived Sessions</h3>
|
<h3>🎨 Select Theme</h3>
|
||||||
<label for="sessionUserSelect">Select Student:</label>
|
<select id="themeSelect" onchange="changeTheme(this.value)">
|
||||||
<select id="sessionUserSelect" onchange="loadUserSessions(this.value)">
|
<option value="playground">Playground</option>
|
||||||
<option value="">-- Select --</option>
|
<option value="chalkboard">Chalkboard</option>
|
||||||
</select>
|
<option value="galaxy">Galaxy</option>
|
||||||
|
<option value="nature">Nature</option>
|
||||||
<ul id="userSessionList"></ul>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 👩🎓 Student Panel -->
|
|
||||||
<div id="studentPanel" class="hidden">
|
|
||||||
<div id="toast" class="toast">Welcome, student!</div>
|
|
||||||
|
|
||||||
<button id="startGameBtn" class="hidden" onclick="startGame()">Start Game</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="Type your answer" autocomplete="off" />
|
|
||||||
<button onclick="submitAnswer()">Submit</button>
|
|
||||||
</div>
|
|
||||||
<div id="badgeDisplay" class="badgeSection hidden">
|
|
||||||
<h3>🎖 Badges Earned</h3>
|
|
||||||
<ul id="badgeList"></ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="summary" class="hidden"></div>
|
<!-- ⌨️ Typing Practice Tab -->
|
||||||
</div>
|
<div class="adminTab hidden" id="tabTyping">
|
||||||
</body>
|
<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>
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const user = JSON.parse(localStorage.getItem('loggedInUser'));
|
||||||
|
if (user) {
|
||||||
|
if (user.role === 'admin') {
|
||||||
|
showAdmin();
|
||||||
|
} else {
|
||||||
|
showStudent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div id="spellingSection"><h3>Spelling Game</h3><p id="spellingPrompt">Word will appear here...</p></div></body>
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,245 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Spelling App with Roles</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
|
||||||
|
<!-- 🔧 Script Load Order -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.4.2/sha.js" defer></script>
|
||||||
|
<script src="js/auth.js" defer></script>
|
||||||
|
<script src="js/ui.js" defer></script>
|
||||||
|
<script src="js/themes.js" defer></script>
|
||||||
|
<script src="js/game.js"></script>
|
||||||
|
<script src="js/admin.js" defer></script>
|
||||||
|
<script src="js/main.js" defer></script>
|
||||||
|
<script src="js/typing.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Spelling Practice</h1>
|
||||||
|
|
||||||
|
<!-- 🏳️ Role Banner -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 🔀 Role-Based 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" class="hidden">Student Panel</button>
|
||||||
|
<button onclick="logoutUser()" id="logoutBtn">Log Out</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 👨🏫 Admin Panel -->
|
||||||
|
<div id="adminPanel" class="hidden">
|
||||||
|
<h2>👨🏫 Admin Panel</h2>
|
||||||
|
|
||||||
|
<!-- 🔘 Tabs -->
|
||||||
|
<div id="adminTabs">
|
||||||
|
<button onclick="switchTab('tabUsers')" class="active">👤 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 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 List Tab -->
|
||||||
|
<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>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>
|
||||||
|
|
||||||
|
<!-- 📊 Results Tab -->
|
||||||
|
<div id="tabResults" class="adminTab hidden">
|
||||||
|
<h3>🧾 Student Results Overview</h3>
|
||||||
|
<button onclick="loadStudentResults()">Refresh Results</button>
|
||||||
|
<ul id="resultsList"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 📊 Analytics Tab -->
|
||||||
|
<div id="tabAnalytics" class="adminTab hidden">
|
||||||
|
<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 id="tabBadges" class="adminTab hidden">
|
||||||
|
<h3>🎖 Badge Viewer</h3>
|
||||||
|
<ul id="badgeUserList"></ul>
|
||||||
|
<div id="badgeDetails" class="hidden">
|
||||||
|
<h4 id="badgeUserTitle"></h4>
|
||||||
|
<ul id="badgeUserBadges"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 🎨 Theme Tab -->
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ⌨️ Typing Practice Tab -->
|
||||||
|
<div id="tabTyping" class="adminTab hidden">
|
||||||
|
<h3>⌨️ Typing Challenge Preview</h3>
|
||||||
|
|
||||||
|
<label for="typingUserSelect">Select Student:</label>
|
||||||
|
<select id="typingUserSelect" class="word-user-dropdown" onchange="loadTypingWords(this.value)">
|
||||||
|
<option value="">-- Select a user --</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button onclick="startTypingTest()">Start Typing Test</button>
|
||||||
|
|
||||||
|
<div id="typingTestArea" class="hidden">
|
||||||
|
<p><strong>Practice Sentence:</strong></p>
|
||||||
|
<p id="typingPrompt" class="typing-sentence"></p>
|
||||||
|
<input type="text" id="typingInput" placeholder="Type the spelling word here..." autocomplete="off" />
|
||||||
|
<button onclick="submitTyping()">Submit</button>
|
||||||
|
<p id="typingFeedback"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 🧾 Student Report Viewer -->
|
||||||
|
<div id="tabReports" class="adminTab hidden">
|
||||||
|
<h3>📘 Student Progress Report</h3>
|
||||||
|
<label for="reportUser">Select Student:</label>
|
||||||
|
<select id="reportUser" onchange="loadStudentReport(this.value)">
|
||||||
|
<option value="">-- Select --</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div id="reportContent" class="hidden">
|
||||||
|
<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 id="tabSessions" class="adminTab hidden">
|
||||||
|
<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 id="studentPanel" class="hidden">
|
||||||
|
<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 id="gameSection" class="hidden">
|
||||||
|
<h3>🎮 Spelling Game</h3>
|
||||||
|
<div id="wordBox" class="word-box"></div>
|
||||||
|
<div id="inputSection" class="hidden">
|
||||||
|
<input type="text" id="userInput" placeholder="Type the word you saw..." />
|
||||||
|
<button onclick="submitAnswer()">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Typing Practice Section -->
|
||||||
|
|
||||||
|
<div id="typingSection" class="hidden">
|
||||||
|
<h3>Typing Practice</h3>
|
||||||
|
<p id="typingPrompt">Type the word...</p>
|
||||||
|
<input type="text" id="typingInput" />
|
||||||
|
<button onclick="submitTyping()">Submit</button>
|
||||||
|
<p id="typingFeedback"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const user = JSON.parse(localStorage.getItem('loggedInUser'));
|
||||||
|
if (user) {
|
||||||
|
if (user.role === 'admin') {
|
||||||
|
showAdmin();
|
||||||
|
} else {
|
||||||
|
showStudent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+168
-55
@@ -1,82 +1,118 @@
|
|||||||
// 🌍 Game state
|
// 🌍 Game state
|
||||||
let allWords = [], words = [], current = 0, results = [];
|
let words = [];
|
||||||
|
let currentWord = '';
|
||||||
|
let currentIndex = 0;
|
||||||
|
let results = [];
|
||||||
|
let typingWords = [];
|
||||||
|
|
||||||
// 👩🎓 Show student interface
|
|
||||||
function showStudent() {
|
function showStudent() {
|
||||||
console.log("🔊 showStudent() executed");
|
console.log("🔊 Showing student panel");
|
||||||
|
|
||||||
const studentPanel = document.getElementById('studentPanel');
|
// Hide admin panel
|
||||||
const adminPanel = document.getElementById('adminPanel');
|
document.getElementById('adminPanel')?.classList.add('hidden');
|
||||||
studentPanel?.classList.remove('hidden');
|
|
||||||
adminPanel?.classList.add('hidden');
|
// Show student panel and its components
|
||||||
|
const studentPanel = document.getElementById('studentPanel');
|
||||||
setTimeout(() => {
|
studentPanel?.classList.remove('hidden');
|
||||||
const btn = document.getElementById('startGameBtn');
|
|
||||||
if (btn) {
|
// Get the buttons and explicitly set their properties
|
||||||
console.log("🎯 Button found in delayed reveal");
|
const gameBtn = document.getElementById('startGameBtn');
|
||||||
btn.classList.remove('hidden');
|
const typingBtn = document.getElementById('startTypingBtn');
|
||||||
btn.style.display = 'inline-block';
|
|
||||||
|
if (gameBtn && typingBtn) {
|
||||||
|
console.log("Found buttons, making visible");
|
||||||
|
// Remove all possible hiding classes/styles
|
||||||
|
gameBtn.classList.remove('hidden');
|
||||||
|
typingBtn.classList.remove('hidden');
|
||||||
|
|
||||||
|
// Explicitly set display style
|
||||||
|
gameBtn.style.cssText = 'display: inline-block !important; visibility: visible !important;';
|
||||||
|
typingBtn.style.cssText = 'display: inline-block !important; visibility: visible !important;';
|
||||||
} else {
|
} else {
|
||||||
console.warn("⚠️ Button still missing after timeout");
|
console.error("Could not find game buttons");
|
||||||
}
|
}
|
||||||
}, 100);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 🚀 Begin game session
|
// 🚀 Begin game session
|
||||||
async function startGame() {
|
async function startGame() {
|
||||||
const user = JSON.parse(localStorage.getItem('loggedInUser'));
|
console.log('🎮 Starting spelling game');
|
||||||
if (!user) return;
|
|
||||||
|
const user = JSON.parse(localStorage.getItem('loggedInUser'));
|
||||||
|
if (!user) {
|
||||||
|
alert('Please log in first');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const res = await fetch(`/getWordList?user=${encodeURIComponent(user.username)}`);
|
try {
|
||||||
allWords = await res.json();
|
// Show game section
|
||||||
|
document.getElementById('gameSection').classList.remove('hidden');
|
||||||
|
document.getElementById('wordBox').textContent = 'Loading...';
|
||||||
|
document.getElementById('summary')?.classList.add('hidden');
|
||||||
|
document.getElementById('badgeDisplay')?.classList.add('hidden');
|
||||||
|
|
||||||
if (!allWords.length) {
|
// Fetch words
|
||||||
alert("No words found. Please add words in Admin Panel.");
|
const response = await fetch(`/getWordList?username=${user.username}`);
|
||||||
return;
|
const data = await response.json();
|
||||||
}
|
console.log('Received words:', data);
|
||||||
|
|
||||||
words = [...allWords];
|
if (!data.words || data.words.length === 0) {
|
||||||
current = 0;
|
alert('No words found for practice');
|
||||||
results = [];
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('summary')?.classList.add('hidden');
|
// Start game
|
||||||
document.getElementById('badgeDisplay')?.classList.add('hidden');
|
words = [...data.words];
|
||||||
showWord();
|
currentIndex = 0;
|
||||||
|
results = []; // Reset results array
|
||||||
|
showWord();
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
alert('Failed to load words');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 🔤 Show a word, then hide after timeout
|
|
||||||
function showWord() {
|
function showWord() {
|
||||||
const wordBox = document.getElementById('wordBox');
|
if (currentIndex >= words.length) {
|
||||||
const wordEl = document.getElementById('word');
|
showSummary();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!words[current]) {
|
currentWord = words[currentIndex];
|
||||||
endGame(); return;
|
console.log('Current word:', currentWord);
|
||||||
}
|
|
||||||
|
|
||||||
wordEl.textContent = words[current];
|
// Show word briefly then hide
|
||||||
wordBox.classList.remove('hidden');
|
const wordBox = document.getElementById('wordBox');
|
||||||
|
const inputSection = document.getElementById('inputSection');
|
||||||
|
|
||||||
|
wordBox.textContent = currentWord;
|
||||||
|
inputSection.classList.add('hidden');
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
wordBox.classList.add('hidden');
|
wordBox.textContent = '';
|
||||||
document.getElementById('inputSection').classList.remove('hidden');
|
inputSection.classList.remove('hidden');
|
||||||
document.getElementById('userInput').value = '';
|
document.getElementById('userInput').value = '';
|
||||||
document.getElementById('userInput').focus();
|
document.getElementById('userInput').focus();
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 📝 Check user’s answer and move to next
|
// 📝 Check user’s answer and move to next
|
||||||
function submitAnswer() {
|
function submitAnswer() {
|
||||||
const input = document.getElementById('userInput').value.trim();
|
const input = document.getElementById('userInput').value.trim();
|
||||||
results.push({ word: words[current], attempt: input });
|
|
||||||
current++;
|
// Record the attempt
|
||||||
|
results.push({
|
||||||
|
word: currentWord,
|
||||||
|
attempt: input
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById('inputSection').classList.add('hidden');
|
if (input.toLowerCase() === currentWord.toLowerCase()) {
|
||||||
|
currentIndex++;
|
||||||
if (current < words.length) {
|
document.getElementById('inputSection').classList.add('hidden');
|
||||||
showWord();
|
showWord();
|
||||||
} else {
|
} else {
|
||||||
showSummary();
|
alert('Try again!');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 📊 Show results summary
|
// 📊 Show results summary
|
||||||
@@ -163,4 +199,81 @@ function retryMissed(missedWords) {
|
|||||||
document.getElementById('summary')?.classList.add('hidden');
|
document.getElementById('summary')?.classList.add('hidden');
|
||||||
document.getElementById('badgeDisplay')?.classList.add('hidden');
|
document.getElementById('badgeDisplay')?.classList.add('hidden');
|
||||||
showWord();
|
showWord();
|
||||||
|
}
|
||||||
|
|
||||||
|
// New function to start typing practice
|
||||||
|
async function startTypingPractice() {
|
||||||
|
console.log("⌨️ Starting typing practice...");
|
||||||
|
const user = JSON.parse(localStorage.getItem('loggedInUser'));
|
||||||
|
if (!user) {
|
||||||
|
console.error("No user logged in");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/getWordList?username=${encodeURIComponent(user.username)}`);
|
||||||
|
const data = await res.json();
|
||||||
|
const words = data.words || [];
|
||||||
|
|
||||||
|
if (!words.length) {
|
||||||
|
alert("No words found for practice. Please contact your teacher.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide game section, show typing section
|
||||||
|
document.getElementById('gameSection')?.classList.add('hidden');
|
||||||
|
document.getElementById('typingSection').classList.remove('hidden');
|
||||||
|
|
||||||
|
// Initialize typing practice
|
||||||
|
localStorage.setItem('typingWords', JSON.stringify(words));
|
||||||
|
showNextTypingSentence();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error starting typing practice:', error);
|
||||||
|
alert('Error loading typing practice. Please try again.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSentenceWithWord(word) {
|
||||||
|
const templates = [
|
||||||
|
`The word to spell is "${word}."`,
|
||||||
|
`Please spell the word "${word}."`,
|
||||||
|
`Type the word "${word}" carefully.`,
|
||||||
|
`Practice spelling "${word}" in this sentence.`
|
||||||
|
];
|
||||||
|
return templates[Math.floor(Math.random() * templates.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNextTypingSentence() {
|
||||||
|
console.log('Showing next sentence...'); // Debug log
|
||||||
|
|
||||||
|
if (!typingWords.length) {
|
||||||
|
document.getElementById('typingPrompt').textContent = '🎉 All done! Great job!';
|
||||||
|
document.getElementById('typingInput').disabled = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const word = typingWords[0];
|
||||||
|
currentSentence = createSentenceWithWord(word);
|
||||||
|
console.log('Current sentence:', currentSentence); // Debug log
|
||||||
|
|
||||||
|
document.getElementById('typingPrompt').textContent = currentSentence;
|
||||||
|
document.getElementById('typingInput').value = '';
|
||||||
|
document.getElementById('typingInput').disabled = false;
|
||||||
|
document.getElementById('typingInput').focus();
|
||||||
|
document.getElementById('typingFeedback').textContent = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitTyping() {
|
||||||
|
const input = document.getElementById('typingInput').value.trim();
|
||||||
|
const feedback = document.getElementById('typingFeedback');
|
||||||
|
|
||||||
|
if (input.toLowerCase() === currentSentence.toLowerCase()) {
|
||||||
|
feedback.textContent = '✅ Perfect!';
|
||||||
|
feedback.style.color = 'green';
|
||||||
|
typingWords.shift(); // Remove completed word
|
||||||
|
setTimeout(showNextTypingSentence, 1500);
|
||||||
|
} else {
|
||||||
|
feedback.textContent = '❌ Try again. Type the exact sentence as shown.';
|
||||||
|
feedback.style.color = 'red';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
// js/typing.js
|
||||||
|
// Global state
|
||||||
|
const typingState = {
|
||||||
|
words: [],
|
||||||
|
currentWord: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
async function startTypingPractice() {
|
||||||
|
console.log('Starting typing practice');
|
||||||
|
|
||||||
|
const user = JSON.parse(localStorage.getItem('loggedInUser'));
|
||||||
|
if (!user) return;
|
||||||
|
|
||||||
|
document.getElementById('gameSection').classList.add('hidden');
|
||||||
|
document.getElementById('typingSection').classList.remove('hidden');
|
||||||
|
|
||||||
|
const typingPrompt = document.getElementById('typingPrompt');
|
||||||
|
typingPrompt.textContent = 'Loading...';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/getWordList?username=${encodeURIComponent(user.username)}`);
|
||||||
|
const data = await response.json();
|
||||||
|
console.log('Words received:', data);
|
||||||
|
|
||||||
|
if (data.words?.length) {
|
||||||
|
typingState.words = [...data.words];
|
||||||
|
showNextWord();
|
||||||
|
} else {
|
||||||
|
typingPrompt.textContent = 'No words available';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error:', error);
|
||||||
|
typingPrompt.textContent = 'Error loading words';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNextWord() {
|
||||||
|
const promptEl = document.getElementById('typingPrompt');
|
||||||
|
const inputEl = document.getElementById('typingInput');
|
||||||
|
if (!promptEl || !inputEl) return;
|
||||||
|
|
||||||
|
if (!typingState.words.length) {
|
||||||
|
promptEl.textContent = '🎉 Practice complete!';
|
||||||
|
inputEl.disabled = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle both string and object formats
|
||||||
|
const wordObj = typingState.words[0];
|
||||||
|
typingState.currentWord = typeof wordObj === 'string' ? wordObj : wordObj.word;
|
||||||
|
|
||||||
|
console.log('Showing word:', typingState.currentWord);
|
||||||
|
promptEl.textContent = typingState.currentWord;
|
||||||
|
promptEl.style.display = 'block';
|
||||||
|
|
||||||
|
inputEl.value = '';
|
||||||
|
inputEl.disabled = false;
|
||||||
|
inputEl.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Reset input
|
||||||
|
inputEl.value = '';
|
||||||
|
inputEl.disabled = false;
|
||||||
|
inputEl.focus();
|
||||||
|
|
||||||
|
|
||||||
|
function submitTyping() {
|
||||||
|
const input = document.getElementById('typingInput')?.value.trim() || '';
|
||||||
|
const feedback = document.getElementById('typingFeedback');
|
||||||
|
if (!feedback) return;
|
||||||
|
|
||||||
|
if (input.toLowerCase() === typingState.currentWord.toLowerCase()) {
|
||||||
|
feedback.textContent = '✅ Correct!';
|
||||||
|
feedback.style.color = 'green';
|
||||||
|
typingState.words.shift();
|
||||||
|
setTimeout(showNextWord, 1500);
|
||||||
|
} else {
|
||||||
|
feedback.textContent = '❌ Try again';
|
||||||
|
feedback.style.color = 'red';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add event listener for Enter key
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const input = document.getElementById('typingInput');
|
||||||
|
if (input) {
|
||||||
|
input.addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter') submitTyping();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
+168
-1
@@ -77,7 +77,13 @@ body.nature button {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#wordBox {
|
#wordBox {
|
||||||
margin-top: 5rem;
|
font-size: 2em;
|
||||||
|
margin: 20px;
|
||||||
|
min-height: 60px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
.word-box {
|
.word-box {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
@@ -150,3 +156,164 @@ body.nature button {
|
|||||||
.adminTab:not(.hidden) {
|
.adminTab:not(.hidden) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.typing-sentence {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
min-height: 50px;
|
||||||
|
display: block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove these style classes if they exist */
|
||||||
|
.typing-section
|
||||||
|
.typing-container
|
||||||
|
.typing-prompt
|
||||||
|
.input-container
|
||||||
|
#typingInput
|
||||||
|
#typingFeedback
|
||||||
|
|
||||||
|
/* Fix for start buttons visibility */
|
||||||
|
#startGameBtn, #startTypingBtn {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#startGameBtn:hover, #startTypingBtn:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override any hidden class for these buttons */
|
||||||
|
#startGameBtn.hidden, #startTypingBtn.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button container for better spacing */
|
||||||
|
.button-container {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-controls {
|
||||||
|
display: block !important;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.student-btn {
|
||||||
|
display: inline-block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 24px;
|
||||||
|
margin: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override any hiding classes for these specific buttons */
|
||||||
|
#startGameBtn:not(.hidden),
|
||||||
|
#startTypingBtn:not(.hidden) {
|
||||||
|
display: inline-block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove this if it exists as it might conflict */
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add this to ensure student panel shows properly */
|
||||||
|
#studentPanel:not(.hidden) {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 📝 Typing Practice Styles */
|
||||||
|
.typing-section {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 20px auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typingPrompt {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 60px;
|
||||||
|
display: block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typingInput {
|
||||||
|
width: 300px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-word {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 50px;
|
||||||
|
display: block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typing-input-container {
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix student panel buttons */
|
||||||
|
#startGameBtn, #startTypingBtn {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure student panel visibility */
|
||||||
|
#studentPanel:not(.hidden) {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove any conflicting hidden styles */
|
||||||
|
#startGameBtn:not(.hidden),
|
||||||
|
#startTypingBtn:not(.hidden) {
|
||||||
|
display: inline-block !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
@@ -99,12 +99,30 @@ app.post('/deleteUser', (req, res) => {
|
|||||||
|
|
||||||
// 📚 Word list
|
// 📚 Word list
|
||||||
app.get('/getWordList', (req, res) => {
|
app.get('/getWordList', (req, res) => {
|
||||||
const username = req.query.user;
|
try {
|
||||||
if (!username || typeof username !== 'string') {
|
const { username } = req.query;
|
||||||
return res.status(400).send("Username required");
|
if (!username) {
|
||||||
}
|
return res.status(400).json({ error: 'Username is required' });
|
||||||
const wordlists = readJsonSafe(path.join(DATA_DIR, files.wordlists));
|
}
|
||||||
res.json(wordlists[username] || []);
|
|
||||||
|
// Add debug logging
|
||||||
|
console.log('Requested username:', username);
|
||||||
|
|
||||||
|
const wordListPath = path.join(DATA_DIR, 'wordlists.json');
|
||||||
|
console.log('Reading from:', wordListPath);
|
||||||
|
|
||||||
|
const wordLists = readJsonSafe(wordListPath, {});
|
||||||
|
console.log('Available wordlists:', Object.keys(wordLists));
|
||||||
|
|
||||||
|
// Get words for specific user
|
||||||
|
const userWords = wordLists[username] || [];
|
||||||
|
console.log(`Words found for ${username}:`, userWords);
|
||||||
|
|
||||||
|
res.json({ words: userWords });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error in getWordList:', error);
|
||||||
|
res.status(500).json({ error: 'Failed to get word list' });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.post('/saveWordList', (req, res) => {
|
app.post('/saveWordList', (req, res) => {
|
||||||
|
|||||||
Reference in new issue
Block a user