nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major update

Browse Source
This commit is contained in:
nate@necloud.us committed 2025-07-15 10:57:27 -04:00
1 parent 266a064330
commit 5ac5626406
8 files changed
+268 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+71 -37
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<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"/>
@@ -35,6 +35,7 @@
</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>
@@ -44,6 +45,7 @@
<button id="logoutBtn" onclick="logoutUser()" class="btn-secondary">Sign Out</button>
</div>
</div>
<!-- Admin Panel -->
<div class="hidden" id="adminPanel">
<div class="card-header">
@@ -56,12 +58,13 @@
<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('tabResults')">📋 Results</button>
<button onclick="switchTab('tabReports')">📘 Reports</button>
<button onclick="switchTab('tabSessions')">� Sessions</button>
<button onclick="switchTab('tabBadges')">� Badges</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>
@@ -78,6 +81,7 @@
<button type="submit" class="btn-success">➕ Add User</button>
</form>
<p id="userAddMessage" style="margin-top: 1rem;"></p>
<small id="hashPreview" style="color: var(--text-secondary);"></small>
</div>
<div class="card">
<h4>Remove User</h4>
@@ -87,14 +91,14 @@
</div>
</div>
</div>
<!-- Word Lists Tab -->
<div class="adminTab hidden" id="tabWords">
<h3>📝 Word List Management</h3>
<div style="display: grid; gap: 2rem;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<div class="card">
<h4>Select Student</h4>
<h4>Select User</h4>
<select class="word-user-dropdown" id="wordUserSelect" onchange="loadWordsForSelectedUser()" style="width: 100%;">
<option value="">-- Select a student --</option>
<option value="">-- Select a user --</option>
</select>
</div>
@@ -126,6 +130,7 @@
</div>
</div>
</div>
<!-- Results Tab -->
<div class="adminTab hidden" id="tabResults">
<div class="card">
@@ -166,7 +171,7 @@
<!-- Badges Tab -->
<div class="adminTab hidden" id="tabBadges">
<div class="card">
<h3>� Student Badges</h3>
<h3>🏅 Student Badges</h3>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
<div>
<h4>Select Student</h4>
@@ -194,6 +199,7 @@
</select>
</div>
</div>
<!-- Reports Tab -->
<div class="adminTab hidden" id="tabReports">
<div class="card">
@@ -233,7 +239,7 @@
<!-- Sessions Tab -->
<div class="adminTab hidden" id="tabSessions">
<div class="card">
<h3>� Session History</h3>
<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;">
@@ -244,6 +250,7 @@
</div>
</div>
</div>
<!-- Student Panel -->
<div class="hidden" id="studentPanel">
<div class="card">
@@ -252,6 +259,18 @@
<p style="color: var(--text-secondary);">Choose an activity to start practicing</p>
</div>
<!-- Theme Selection for Students -->
<div class="card" style="margin-bottom: 1.5rem;">
<h4>🎨 Choose Your Theme</h4>
<select id="studentThemeSelect" 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 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">
@@ -262,43 +281,58 @@
</button>
</div>
</div>
<!-- Game Section -->
<div class="hidden" id="gameSection">
</div>
</div>
<!-- Game Section -->
<div class="hidden" id="gameSection">
<div class="card">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<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>
<button onclick="backToStudentDashboard()" class="btn-secondary" style="padding: 0.5rem 1rem;">
← Back to Dashboard
</button>
</div>
<!-- Typing Practice Section -->
<div class="hidden" id="typingSection">
<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>
</div>
<!-- Typing Practice Section -->
<div class="hidden" id="typingSection">
<div class="card">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<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>
<button onclick="backToStudentDashboard()" class="btn-secondary" style="padding: 0.5rem 1rem;">
← Back to Dashboard
</button>
</div>
<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>
<!-- Toast notification -->
<div id="toast" class="toast"></div>
</div> <script>
</div>
<script>
// Initialize the application when DOM is loaded
window.addEventListener('DOMContentLoaded', () => {
const user = JSON.parse(localStorage.getItem('loggedInUser'));
if (user) {
public/js/game.js
+5
View File
@@ -83,8 +83,13 @@ window.startGame = async function() {
}
try {
// Hide student dashboard and typing practice
document.getElementById('studentPanel').style.display = 'none';
document.getElementById('typingSection').style.display = 'none';
// Show game section
document.getElementById('gameSection').classList.remove('hidden');
document.getElementById('gameSection').style.display = 'block';
document.getElementById('wordBox').textContent = 'Loading...';
document.getElementById('summary')?.classList.add('hidden');
document.getElementById('badgeDisplay')?.classList.add('hidden');
public/js/main.js
+51 -1
View File
@@ -51,4 +51,54 @@ document.addEventListener("DOMContentLoaded", async () => {
}
console.log('✅ Application initialized');
});
});
// Function to return to student dashboard
window.backToStudentDashboard = function() {
console.log('🔙 Returning to student dashboard');
// Hide all sections
document.getElementById('gameSection').classList.add('hidden');
document.getElementById('gameSection').style.display = 'none';
document.getElementById('typingSection').classList.add('hidden');
document.getElementById('typingSection').style.display = 'none';
// Show student panel
document.getElementById('studentPanel').classList.remove('hidden');
document.getElementById('studentPanel').style.display = 'block';
// Reset any game/typing state
document.getElementById('userInput').value = '';
document.getElementById('typingInput').value = '';
document.getElementById('wordBox').textContent = '';
document.getElementById('typingPrompt').textContent = 'Get ready to type...';
document.getElementById('typingFeedback').textContent = '';
}
// Function to change theme (accessible to students)
window.changeTheme = function(themeName) {
console.log('🎨 Changing theme to:', themeName);
// Apply the theme
applyTheme(themeName);
// Save the preference in both possible keys
localStorage.setItem('selectedTheme', themeName);
localStorage.setItem('theme', themeName);
// Update both theme selects if they exist
const adminThemeSelect = document.getElementById('themeSelect');
const studentThemeSelect = document.getElementById('studentThemeSelect');
if (adminThemeSelect) {
adminThemeSelect.value = themeName;
}
if (studentThemeSelect) {
studentThemeSelect.value = themeName;
}
// Show toast notification
if (typeof showToast === 'function') {
showToast(`🎨 Theme changed to ${themeName}`);
}
}
public/js/themes.js
+5 -1
View File
@@ -1,10 +1,14 @@
// Modern theme system
function applySavedTheme() {
const savedTheme = localStorage.getItem('theme') || 'default';
const savedTheme = localStorage.getItem('theme') || localStorage.getItem('selectedTheme') || 'default';
applyTheme(savedTheme);
// Update both theme selectors
const themeSelector = document.getElementById('themeSelect');
const studentThemeSelector = document.getElementById('studentThemeSelect');
if (themeSelector) themeSelector.value = savedTheme;
if (studentThemeSelector) studentThemeSelector.value = savedTheme;
}
function changeTheme(themeName) {
public/js/typing.js
+4
View File
@@ -12,8 +12,12 @@ window.startTypingPractice = async function() {
const user = JSON.parse(localStorage.getItem('loggedInUser'));
if (!user) return;
// Hide student dashboard and game section
document.getElementById('studentPanel').style.display = 'none';
document.getElementById('gameSection').classList.add('hidden');
document.getElementById('gameSection').style.display = 'none';
document.getElementById('typingSection').classList.remove('hidden');
document.getElementById('typingSection').style.display = 'block';
const typingPrompt = document.getElementById('typingPrompt');
typingPrompt.textContent = 'Loading...';
public/js/ui.js
+8
View File
@@ -57,6 +57,7 @@ function showStudent() {
const studentPanel = document.getElementById('studentPanel');
if (studentPanel) {
studentPanel.classList.remove('hidden');
studentPanel.style.display = 'block';
// Ensure buttons are visible and functional
const gameBtn = document.getElementById('startGameBtn');
@@ -67,6 +68,13 @@ function showStudent() {
typingBtn.classList.remove('hidden');
console.log("✅ Student buttons are now visible");
}
// Update student theme selector to match current theme
const savedTheme = localStorage.getItem('theme') || localStorage.getItem('selectedTheme') || 'default';
const studentThemeSelect = document.getElementById('studentThemeSelect');
if (studentThemeSelect) {
studentThemeSelect.value = savedTheme;
}
}
}
public/styles.css
+97 -2
View File
@@ -105,7 +105,7 @@ button {
padding: 0.75rem 1.5rem;
margin: 0.25rem;
background: var(--primary);
color: white;
color: white !important;
border: none;
border-radius: var(--radius);
font-size: 1rem;
@@ -114,56 +114,126 @@ button {
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow);
text-decoration: none;
}
button:hover {
background: var(--primary-dark);
color: white !important;
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
button:active {
transform: translateY(0);
color: white !important;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
color: white !important;
}
/* Button variants */
.btn-secondary {
background: var(--secondary);
color: var(--text-primary);
color: var(--text-primary) !important;
}
.btn-secondary:hover {
background: var(--border);
color: var(--text-primary) !important;
}
.btn-success {
background: var(--success);
color: white !important;
}
.btn-success:hover {
background: #059669;
color: white !important;
}
.btn-warning {
background: var(--warning);
color: white !important;
}
.btn-warning:hover {
background: #d97706;
color: white !important;
}
.btn-error {
background: var(--error);
color: white !important;
}
.btn-error:hover {
background: #dc2626;
color: white !important;
}
/* Additional button contrast fixes */
#startGameBtn, #startTypingBtn {
background: var(--success) !important;
color: white !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
font-weight: 600 !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#startGameBtn:hover, #startTypingBtn:hover {
background: #059669 !important;
color: white !important;
transform: translateY(-2px) !important;
}
/* Typing Practice button specific styling */
#startTypingBtn {
background: var(--warning) !important;
}
#startTypingBtn:hover {
background: #d97706 !important;
}
/* Back to dashboard button */
button[onclick="backToStudentDashboard()"] {
background: var(--secondary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border) !important;
}
button[onclick="backToStudentDashboard()"]:hover {
background: var(--border) !important;
color: var(--text-primary) !important;
}
/* Theme-specific button fixes */
.theme-chalkboard button,
.theme-galaxy button {
border: 1px solid rgba(255, 255, 255, 0.3) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.theme-chalkboard .btn-secondary,
.theme-galaxy .btn-secondary {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.theme-chalkboard .btn-secondary:hover,
.theme-galaxy .btn-secondary:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
}
/* Cards and panels */
@@ -333,6 +403,31 @@ button:disabled {
box-shadow: var(--shadow);
}
/* Student controls specific styling */
.student-controls button {
min-height: 60px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
text-shadow: none !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.student-controls .btn-success {
background: linear-gradient(135deg, #10b981, #059669) !important;
color: white !important;
}
.student-controls .btn-warning {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
color: white !important;
}
.student-controls button:hover {
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}
/* Lists */
ul {
list-style: none;