Adolfo Reyna
71 lines
6.0 KiB
HTML
71 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="A private local Grade 3 Core Knowledge curriculum library and interactive lesson pilot.">
|
||
<title>Grade 3 Learning Studio</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<a class="brand" href="#top" aria-label="Grade 3 Learning Studio home">Grade 3 <span>Learning Studio</span></a>
|
||
<nav aria-label="Primary navigation"><a href="#library">Library</a><a href="#interactive-session">Interactive lesson</a></nav>
|
||
</header>
|
||
<main id="top">
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div>
|
||
<p class="eyebrow">Private family curriculum pilot</p>
|
||
<h1 id="hero-title">A whole Grade 3 year—organized around real teaching.</h1>
|
||
<p class="lede">Browse the downloaded Core Knowledge units, open their original teacher plans and student materials, then use interactive sessions for the moments where practice benefits from response and feedback.</p>
|
||
<div class="hero-actions"><a class="button" href="#library">Explore Grade 3</a><a class="button quiet" href="#interactive-session">Try the math session</a></div>
|
||
</div>
|
||
<aside class="hero-note" aria-label="What this demo includes">
|
||
<p class="note-label">Tonight’s working demo</p>
|
||
<p><strong id="unit-count">…</strong> Grade 3 units indexed</p>
|
||
<p><strong id="guide-count">…</strong> teacher-guide PDFs ready to open</p>
|
||
<p><strong id="student-count">…</strong> student resources indexed</p>
|
||
<hr>
|
||
<p class="small">No account, AI, analytics, or learner records. The source files stay in the verified local curriculum archive.</p>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="teacher-bridge" aria-labelledby="teacher-bridge-title">
|
||
<div><p class="eyebrow">Teacher-led by design</p><h2 id="teacher-bridge-title">The lesson plan stays in charge.</h2></div>
|
||
<p>Each unit keeps its original teacher guide—learning goals, materials, talk moves, expected responses, and support for misunderstandings. Interactive activities are a layer on top, not a replacement for the teacher.</p>
|
||
</section>
|
||
|
||
<section id="library" class="library-section" aria-labelledby="library-title">
|
||
<div class="section-head"><div><p class="eyebrow">The downloaded collection</p><h2 id="library-title">Grade 3 curriculum library</h2></div><p id="library-status" class="small" aria-live="polite">Loading the verified local catalog…</p></div>
|
||
<div id="subject-filters" class="filters" role="group" aria-label="Filter units by subject"></div>
|
||
<div id="unit-grid" class="unit-grid"></div>
|
||
</section>
|
||
|
||
<section id="interactive-session" class="interactive-wrap" aria-labelledby="interactive-title">
|
||
<div class="section-head"><div><p class="eyebrow">Interactive lesson example</p><h2 id="interactive-title">Math · Unit 1 · Equal groups</h2></div><p class="small">Based on the Unit 1 teacher-plan activity: represent equal-group situations with concrete objects or drawings.</p></div>
|
||
<div class="progress" role="group" aria-label="Session progress"><span class="active" id="progress-1"></span><span id="progress-2"></span><span id="progress-3"></span></div>
|
||
<section class="session" id="activity-1" aria-labelledby="activity-1-title">
|
||
<h3 id="activity-1-title">1. Build the situation</h3>
|
||
<p class="prompt">There are <strong>7 people</strong> wearing shoes. Each person is wearing <strong>2 shoes</strong>. Build the equal groups.</p>
|
||
<div class="groups" id="groups" role="group" aria-label="Seven groups of shoes"></div>
|
||
<button id="add-pair" type="button">Add a pair of shoes</button>
|
||
<p class="feedback" id="build-feedback" aria-live="polite">Add one pair for each person.</p>
|
||
<div class="answer-row" id="total-row" hidden><label for="total">How many shoes altogether?</label><input id="total" inputmode="numeric" autocomplete="off" aria-describedby="total-help"><button id="check-total" type="button">Check total</button></div>
|
||
<p class="tip" id="total-help">Count by twos or add 2 seven times.</p><p class="feedback" id="total-feedback" aria-live="polite"></p>
|
||
</section>
|
||
<section class="session" id="activity-2" aria-labelledby="activity-2-title" hidden>
|
||
<h3 id="activity-2-title">2. Name it with multiplication</h3><p class="prompt">Write an equation for the groups you built. You can use <strong>×</strong> or <strong>x</strong>.</p>
|
||
<div class="answer-row"><label for="equation">Equation</label><input id="equation" autocomplete="off" placeholder="7 × 2 = 14"><button id="check-equation" type="button">Check equation</button></div><p class="feedback" id="equation-feedback" aria-live="polite"></p><p class="tip">Both 7 × 2 = 14 and 2 × 7 = 14 describe the same total.</p>
|
||
</section>
|
||
<section class="session" id="activity-3" aria-labelledby="activity-3-title" hidden>
|
||
<h3 id="activity-3-title">3. Show your thinking</h3><p class="prompt">How did the groups help you know there are 14 shoes?</p><label for="reasoning">Your explanation</label><textarea id="reasoning" placeholder="I saw 7 groups of 2. I added…"></textarea><div class="answer-row"><button id="check-reasoning" type="button">Finish session</button></div><p class="feedback" id="reasoning-feedback" aria-live="polite"></p>
|
||
</section>
|
||
</section>
|
||
|
||
<p class="source">Curriculum source: Core Knowledge Foundation, downloaded from <a href="https://www.coreknowledge.org/download-free-curriculum/">Core Knowledge</a>. This private, non-commercial pilot links to the original local curriculum materials and retains each source unit’s embedded license and attribution notice. Confirm the embedded license before adapting or sharing any additional unit.</p>
|
||
</main>
|
||
<script type="module" src="app.mjs"></script>
|
||
<script type="module" src="library-app.mjs"></script>
|
||
</body>
|
||
</html>
|