My Progress

Track your mastery across all primitives

Your Learning Dashboard

<label for="progress-student-id">Enter your Student ID:</label>
<input type="text" id="progress-student-id" class="form-control" placeholder="Student ID">
<button id="load-progress" class="btn btn-primary" style="margin-top: 10px;">Load My Progress</button>

Understanding the Mastery System

How Mastery Works

Attempt Problem → Correct? → Yes → Streak +1
                          → No  → Streak = 0

Streak reaches 3 → MASTERY ACHIEVED ✓

Mastery Levels

Visual	Meaning	Streak
⬜	Not started	0 attempts
🟥	Struggling	0 streak, multiple attempts
🟨	In progress	1-2 streak
🟩	Mastered	3+ correct in a row

Tips for Success

Don’t rush — Read problems carefully
Learn from mistakes — Study the worked examples
Use hints wisely — They help you learn, not just guess
Practice regularly — Short daily sessions beat cramming
Review mastered topics — Keep skills fresh

Stuck on a topic?

Go back to the lecture, watch the interactive demos, then try practice again. Mastery comes with understanding, not repetition.

--- title: "My Progress" subtitle: "Track your mastery across all primitives" format: html: include-after-body: - text: | <script src="js/progress.js"></script> --- ## Your Learning Dashboard <div id="student-login"> <div class="form-group"> <label for="progress-student-id">Enter your Student ID:</label> <input type="text" id="progress-student-id" class="form-control" placeholder="Student ID"> <button id="load-progress" class="btn btn-primary" style="margin-top: 10px;">Load My Progress</button> </div> </div> <div id="dashboard" style="display: none;"> ## Overview <div id="stats-cards" class="stats-grid"> <div class="stat-card"> <div class="stat-number" id="total-mastered">0</div> <div class="stat-label">Topics Mastered</div> </div> <div class="stat-card"> <div class="stat-number" id="total-attempts">0</div> <div class="stat-label">Total Attempts</div> </div> <div class="stat-card"> <div class="stat-number" id="current-streak">0</div> <div class="stat-label">Best Streak</div> </div> <div class="stat-card"> <div class="stat-number" id="completion-pct">0%</div> <div class="stat-label">Course Complete</div> </div> </div> --- ## Mastery Grid <div id="mastery-grid">  </div> --- ## Progress by Primitive <div id="primitive-progress">  </div> --- ## Recent Activity <div id="recent-activity"> <p>Loading activity...</p> </div> --- ## Recommendations <div id="recommendations"> <p>Complete some practice problems to get personalized recommendations.</p> </div> </div> --- ## Understanding the Mastery System ### How Mastery Works ``` Attempt Problem → Correct? → Yes → Streak +1 → No → Streak = 0 Streak reaches 3 → MASTERY ACHIEVED ✓ ``` ### Mastery Levels | Visual | Meaning | Streak | |--------|---------|--------| | ⬜ | Not started | 0 attempts | | 🟥 | Struggling | 0 streak, multiple attempts | | 🟨 | In progress | 1-2 streak | | 🟩 | Mastered | 3+ correct in a row | ### Tips for Success 1. **Don't rush** — Read problems carefully 2. **Learn from mistakes** — Study the worked examples 3. **Use hints wisely** — They help you learn, not just guess 4. **Practice regularly** — Short daily sessions beat cramming 5. **Review mastered topics** — Keep skills fresh --- ::: {.callout-tip} ## Stuck on a topic? Go back to the lecture, watch the interactive demos, then try practice again. Mastery comes with understanding, not repetition. :::