Student Progress Tracking in mdBook

[sfeeser]

Student Progress Tracking in mdBook

Prompt session that generated this: https://chatgpt.com/share/6783c18f-a2fc-8004-a973-b3ad16b96a43

Objective

Enhance the student experience in mdBook by:

1. Adding a compact section above the chapter content for progress tracking tools.
2. Using colorization in the Table of Contents (TOC) to visually indicate progress and make it easy to find the next chapter.

---

Features and Implementation

1. Progress Tracking Tools Above Chapter Content

• Description: A compact section is inserted at the top of the chapter content to display:

  • A completion checkbox for marking the chapter as complete.
  • A notes box for taking personal notes.
  • A report problem checkbox and comment box for reporting issues.

• Behavior:

  • This section scrolls away as the student scrolls down the chapter content.
  • Tools update dynamically for each chapter.

• HTML Structure:

  <div class="chapter-wrapper">
    <!-- Progress Tools -->
    <div class="chapter-tools">
      <div class="progress-section">
        <label>
          <input type="checkbox" id="completion-checkbox">
          Mark Chapter as Completed
        </label>
      </div>
      <div class="notes-section">
        <label for="notes">Notes:</label>
        <textarea id="notes" placeholder="Write your notes here..."></textarea>
      </div>
      <div class="report-section">
        <label>
          <input type="checkbox" id="report-problem-checkbox">
          Report Problem
        </label>
        <textarea id="problem-comments" placeholder="Describe the issue..." style="display: none;"></textarea>
      </div>
    </div>
  
    <!-- Chapter Content -->
    <div class="chapter-content">
      <!-- Rendered Markdown Content by mdBook -->
    </div>
  </div>

• CSS Styling:

  .chapter-tools {
    background-color: #f9f9f9;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  
  .chapter-tools textarea {
    width: 100%;
    margin-top: 10px;
    resize: none;
  }
  
  .chapter-content {
    padding: 20px;
  }

• JavaScript for Interactivity:

  document.getElementById("completion-checkbox").addEventListener("change", (e) => {
    const completed = e.target.checked;
    const chapterId = getCurrentChapterId(); // Implement logic to fetch the current chapter ID
    fetch("/api/save-progress", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ chapterId, completed }),
    });
  });
  
  document.getElementById("notes").addEventListener("input", (e) => {
    const notes = e.target.value;
    const chapterId = getCurrentChapterId();
    fetch("/api/save-notes", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ chapterId, notes }),
    });
  });
  
  document.getElementById("report-problem-checkbox").addEventListener("change", (e) => {
    const commentsBox = document.getElementById("problem-comments");
    commentsBox.style.display = e.target.checked ? "block" : "none";
  });

---

2. Colorization in the Table of Contents (TOC)

• Description: Use color cues to indicate the progress of each chapter in the TOC:

  • Completed Chapters: Grayed out or light green.
  • Current Chapter: Highlighted in bold or bright color (e.g., green or blue).
  • Upcoming Chapters: Default color (e.g., black).

• Behavior:

  • Automatically updates based on the student's progress.
  • Makes it easy to locate the next chapter after a break.

• CSS Styling:

  .toc .chapter.completed {
    color: gray;
    font-style: italic;
  }
  
  .toc .chapter.current {
    color: #4caf50; /* Green for current */
    font-weight: bold;
  }
  
  .toc .chapter.upcoming {
    color: black;
  }

• Dynamic TOC Updates with JavaScript:

  fetch(`/api/progress?student_id=${studentId}&course_id=${courseId}`)
    .then(response => response.json())
    .then(data => {
      document.querySelectorAll('.toc .chapter').forEach(chapter => {
        const chapterHash = chapter.getAttribute('data-hash');
        const progress = data.find(item => item.chapterHash === chapterHash);
  
        if (progress?.completed) {
          chapter.classList.add('completed');
        } else if (progress?.current) {
          chapter.classList.add('current');
        } else {
          chapter.classList.add('upcoming');
        }
      });
    });

---

Workflow

1. Backend Integration:

   • Parse the SUMMARY.md file to generate unique hashes for each chapter.
   • Track student progress using these hashes in a database.

2. Dynamic Content Rendering:

   • Modify the mdBook HTML template to include the chapter-tools section above the content.
   • Fetch student progress and dynamically update both the TOC and progress tools.

3. Student Experience:

   • Students see the progress tools at the top of the chapter, which scroll out of view as they read.
   • The TOC visually guides students to their next chapter using color-coded progress indicators.

---

Advantages

• Screen Real Estate Efficiency: Tools scroll out of view, keeping the focus on the content.
• Intuitive Navigation: Colorized TOC helps students locate their next chapter effortlessly.
• Personalization: Progress tracking is tied to individual students, ensuring a tailored experience.