nmemmertandClaude Sonnet 4.6
a7de24b1da
- Evidence on assignments: photo upload + notes + student self-note (needs help / not sure) - Evidence required/optional/none flag per item; grading queue shows evidence with lightbox thumbnail - Parent comment field when grading; shown to student on graded items - Offline tasks: 3-state status (not started → in progress → done) with inline evidence form - Retake policy per item: latest / highest / average — gradebook computes effective score accordingly - Grading queue expanded to include lessons and practices (not just assignments) when evidence present Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
174 lines
7.2 KiB
HTML
174 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Homeschool</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Kid picker -->
|
|
<section id="view-home" class="view">
|
|
<h1 class="app-title">🎓 Homeschool</h1>
|
|
<p class="subtitle">Who's learning today?</p>
|
|
<div id="kid-cards" class="kid-cards"></div>
|
|
<p id="no-kids" class="hint" hidden>No kids yet — a parent needs to add them.</p>
|
|
<a class="link-btn" href="admin.html">Parent dashboard</a>
|
|
</section>
|
|
|
|
<!-- Kid home: Today's work + nav -->
|
|
<section id="view-kid" class="view" hidden>
|
|
<button class="back-btn" data-nav="home">← Switch</button>
|
|
<h1 id="kid-greeting"></h1>
|
|
|
|
<div class="kid-nav">
|
|
<button class="nav-pill active" data-tab="today">📋 Today</button>
|
|
<button class="nav-pill" data-tab="courses">📚 My Courses</button>
|
|
<button class="nav-pill" data-tab="spelling">✏️ Spelling</button>
|
|
</div>
|
|
|
|
<div id="tab-today" class="tab-panel">
|
|
<div id="today-list" class="today-list"></div>
|
|
<p id="today-empty" class="hint" hidden>Nothing scheduled for today — check My Courses for anything else to work on!</p>
|
|
</div>
|
|
|
|
<div id="tab-courses" class="tab-panel" hidden>
|
|
<div id="course-cards" class="course-cards"></div>
|
|
<p id="courses-empty" class="hint" hidden>Not enrolled in any courses yet.</p>
|
|
</div>
|
|
|
|
<div id="tab-spelling" class="tab-panel" hidden>
|
|
<div id="kid-week" class="week-card"></div>
|
|
<div class="big-actions">
|
|
<button id="btn-practice" class="big-btn practice">✏️ Practice</button>
|
|
<button id="btn-test" class="big-btn test">⭐ Friday Test</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Course detail: units + items -->
|
|
<section id="view-course" class="view" hidden>
|
|
<button class="back-btn" data-back="course">← Back</button>
|
|
<h1 id="course-title"></h1>
|
|
<div id="course-units"></div>
|
|
</section>
|
|
|
|
<!-- Lesson viewer -->
|
|
<section id="view-lesson" class="view" hidden>
|
|
<button class="back-btn" data-back="lesson">← Back</button>
|
|
<div class="item-card">
|
|
<p class="item-kicker" id="lesson-kicker"></p>
|
|
<h1 id="lesson-title"></h1>
|
|
<div id="lesson-body" class="lesson-body"></div>
|
|
<button id="lesson-done-btn" class="check-btn">Done reading ✓</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Assignment viewer -->
|
|
<section id="view-assignment" class="view" hidden>
|
|
<button class="back-btn" data-back="assignment">← Back</button>
|
|
<div class="item-card">
|
|
<p class="item-kicker" id="assignment-kicker"></p>
|
|
<h1 id="assignment-title"></h1>
|
|
<p id="assignment-points" class="points-label"></p>
|
|
<div id="assignment-body" class="lesson-body"></div>
|
|
<div id="assignment-evidence-section" hidden>
|
|
<details id="assignment-evidence-details" class="evidence-form">
|
|
<summary>📎 Add evidence (photo or notes)</summary>
|
|
<div class="evidence-inner">
|
|
<textarea id="assignment-evidence-notes" placeholder="Notes about your work…" rows="3"></textarea>
|
|
<div class="evidence-photo-row">
|
|
<button type="button" id="assignment-photo-btn" class="secondary small">📷 Add photo</button>
|
|
<input type="file" id="assignment-photo-input" accept="image/*" capture="environment" hidden>
|
|
<span id="assignment-photo-status" class="hint"></span>
|
|
</div>
|
|
<label class="checkbox-label evidence-note-label">
|
|
<select id="assignment-student-note">
|
|
<option value="">I felt good about this</option>
|
|
<option value="needs_help">🙋 I need help with this</option>
|
|
<option value="not_sure">🤔 I did it but I'm not sure</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<button id="assignment-done-btn" class="check-btn">Mark as done ✓</button>
|
|
<div id="assignment-status" class="status-banner" hidden></div>
|
|
<div id="assignment-comment" class="parent-comment" hidden></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quiz -->
|
|
<section id="view-quiz" class="view" hidden>
|
|
<button class="back-btn" data-back="quiz">← Back</button>
|
|
<div class="item-card">
|
|
<p class="item-kicker" id="quiz-kicker"></p>
|
|
<h1 id="quiz-title"></h1>
|
|
<form id="quiz-form"></form>
|
|
<div id="quiz-result" class="status-banner" hidden></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Flashcards -->
|
|
<section id="view-flashcards" class="view" hidden>
|
|
<button class="back-btn" data-back="flashcards">← Stop</button>
|
|
<p id="flash-progress" class="progress-label"></p>
|
|
<div class="progress-track"><div id="flash-bar" class="progress-fill"></div></div>
|
|
|
|
<div id="flash-card" class="word-card flip-card">
|
|
<p class="prompt" id="flash-deck-name"></p>
|
|
<div class="flash-face" id="flash-front"></div>
|
|
<div class="flash-face" id="flash-back" hidden></div>
|
|
<button id="flash-reveal" class="check-btn">Show answer</button>
|
|
<div id="flash-grade-buttons" class="flash-grade-row" hidden>
|
|
<button id="flash-again" class="grade-btn again">🔁 Study more</button>
|
|
<button id="flash-got-it" class="grade-btn got-it">✅ Got it!</button>
|
|
</div>
|
|
</div>
|
|
<div id="flash-done" class="done-card" hidden></div>
|
|
</section>
|
|
|
|
<!-- Practice (spelling) -->
|
|
<section id="view-practice" class="view" hidden>
|
|
<button class="back-btn" data-back="practice">← Stop</button>
|
|
<p id="practice-progress" class="progress-label"></p>
|
|
<div class="progress-track"><div id="practice-bar" class="progress-fill"></div></div>
|
|
|
|
<div id="practice-card" class="word-card">
|
|
<button id="btn-speak" class="speak-btn" title="Hear the word again">🔊 Say it again</button>
|
|
<p id="practice-prompt" class="prompt">Listen, then type the word:</p>
|
|
<div id="feedback" class="feedback"></div>
|
|
<form id="practice-form" autocomplete="off">
|
|
<input id="practice-input" class="spell-input" type="text" autocomplete="off"
|
|
autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="Type the word">
|
|
<button type="submit" class="check-btn">Check ✓</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="practice-done" class="done-card" hidden></div>
|
|
</section>
|
|
|
|
<!-- Friday test (spelling) -->
|
|
<section id="view-test" class="view" hidden>
|
|
<button class="back-btn" data-back="test">← Cancel</button>
|
|
<p id="test-progress" class="progress-label"></p>
|
|
<div class="progress-track"><div id="test-bar" class="progress-fill test-fill"></div></div>
|
|
|
|
<div id="test-card" class="word-card">
|
|
<button id="btn-test-speak" class="speak-btn">🔊 Say it again</button>
|
|
<p class="prompt">Spell the word. No hints — you've got this!</p>
|
|
<form id="test-form" autocomplete="off">
|
|
<input id="test-input" class="spell-input" type="text" autocomplete="off"
|
|
autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="Spell the word">
|
|
<button type="submit" class="check-btn">Next →</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="test-done" class="done-card" hidden></div>
|
|
</section>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|