Brightspace Semester Checklist Widget

Brightspace Semester Checklist Widget

I created a personalized checklist widget for Brightspace D2L LMS, conditionally released to professors based on user role. It uses injected variables like {OrgUnitId} and {FirstName} to provide course-specific navigation links for semester start/end tasks. This helps professors quickly access tools for course setup, management, and closure.

Problem / Context

Professors in LMS systems need reminders for key tasks at semester start/end, but generic checklists lack personalization. Needed a role-based widget with dynamic links to course-specific pages, visible only to instructors.

Constraints / Goals

  • Role-based: show only to professors.
  • Personalized: use LMS variables for context.
  • Navigational: direct links to D2L tools.
  • Embeddable: HTML widget for homepages.
  • Accessible: icons, links, semantic structure.

Core Approach

HTML with Font Awesome icons, lists for start/end checklists. LMS injects {OrgUnitId} for course ID, {FirstName} for greeting. CSS loaded dynamically.

Dynamic CSS Loading

var cssId = "myCss";
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName("head")[0];
    var link = document.createElement("link");
    link.id = cssId;
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
    head.appendChild(link);
}

HTML Structure

<div id="sem-checklist">
    <h2>Semester Start</h2>
    <ul>
        <li><i class="fa fa-calendar-o"></i>Verify course <a href="https://elearn.pstcc.edu/d2l/lp/manageCourses/course_offering_info_viewedit.d2l?ou={OrgUnitId}">start and end dates</a></li>
        <!-- More items -->
    </ul>
    <h2>Semester End</h2>
    <ul>
        <li><i class="fa fa-check"></i><a href="https://elearn.pstcc.edu/d2l/lms/grades/admin/enter/grade_final_edit.d2l?ou={OrgUnitId}">Release grades</a></li>
        <!-- More items -->
    </ul>
    <p>{FirstName}, You can minimize this widget...</p>
</div>

Injected Variables

  • {OrgUnitId}: Course ID for URLs.
  • {FirstName}: Personal greeting.

Conditional Release

LMS settings restrict to professor roles.

Results / Impact

  • Guides professors through semester tasks.
  • Reduces navigation time with direct links.
  • Personalizes experience.

Trade-offs / Limitations

  • LMS-dependent variables.
  • Static checklists.
  • Requires Font Awesome load.

Next Steps

  • Dynamic checklists from API.
  • Progress tracking.
  • Student version.

Tech Summary

HTML, CSS, LMS variables, Font Awesome.

Summary Pattern Example

Problem: Professors need personalized LMS task reminders.
Approach: Role-based widget with injected course variables for navigation.
Result: Efficient semester management in D2L.

Portfolio javascriptbrightspacelmswidgetpersonalizationaccessibility