# SDO-JDO Online Course Template

**Trigger phrases:** "Use SDO JD template", "SDO-JDO template", "JD Online template", "Sandra Day template"

**Canonical source:** Canvas course **222287** — `DEV-ASUO-SDO-JD` — "SDO-JDO Template" on `canvas.asu.edu`
**Owner:** ASU Sandra Day O'Connor College of Law (Online JD program)
**Snapshot date:** 2026-05-19
**Verified by pulling module list + page bodies via Canvas REST API**

When a user invokes one of the trigger phrases above, route all course-build, course-mockup, and course-config work for that course through this template's structure. Mirror the visual signatures, module ordering, and page-type inventory exactly. Do not substitute the ASUCB gold-standard 7-page module pattern (`overview / prepare-to-learn / lesson / knowledge-check / guided-practice / create-artifact / conclusion`) for SDO-JDO — they are different products.

---

## Course-level module sequence

Modules appear in Canvas in this order. Names use a `(MM/DD - MM/DD)` date-range prefix that the ID team fills in per term.

| # | Module name | Purpose |
|---|---|---|
| 1 | Orientation and Onboarding Review | Reminder of the separate onboarding course + required entry-task quiz |
| 2 | Module 0: Welcome and Start Here | Course introduction video, schedule, instructor bios, communication, support resources |
| 3..N | Module #: [Module Title] | Repeated per learning module. Internal SubHeader structure below. |
| N+1 | Course Evaluation [positioned after the last learning module] | Single page: "Reminder: Course Evaluation" |
| N+2 | [Spring/Fall] Break | Single page: "Reminder: [Fall/Spring] Break" |
| N+3 | Reading Period | Single page: "Reminder: Reading Period" |
| N+4..M | [Exam Name] | One module per proctored exam (mid-term, final). Contains: reminders page + practice exam + Examplify readiness check + actual exam. |

`courses/{id}/staging/` builds should mirror this exact ordering. The post-content reminder modules (Course Eval, Break, Reading Period) are SDO-JDO-specific scaffolding the ID team does not skip.

---

## Per-learning-module item list (template's Module 3 is the canonical exemplar)

Each learning module is structured with SubHeaders dividing items into four sections. SubHeaders are first-class Canvas module items (`type: SubHeader`). They render as plain section labels with no link target.

```
SubHeader: Overview
  Page: M#: Overview
  Page: M#: Task List
  Page: M# [2+]: Task List               (only if module spans multiple weeks)
  Page: [Placeholder - Update] Harmonize: M# Q&A Discussion

SubHeader: Learning Materials/[M#.1: Topic Title]
  Page: M#.1: [insert topic here]
  Page: M#.2: [insert topic here]
  (additional M#.N topic pages as needed)

SubHeader: Synchronous Class [Unpublish/Remove if not using]
  Page: M#: Synchronous Class # Resources

SubHeader: Coursework
  Page: [Use Only If No Coursework Items] M#: Coursework Reminder
  Assignment: [Placeholder - Update] M# Harmonize: [Graded/Open] Discussion
  Assignment: M# Submission: [Coursework Title]
  Quiz: M#: Practice Quiz
```

A minimal published module = Overview + Task List + at least one M#.1 topic + at least one Coursework item (assignment, quiz, or coursework-reminder page). Synchronous section is optional and unpublished by default. Harmonize Q&A discussion is the standard low-stakes student-question forum.

---

## Module 0 (Welcome and Start Here) item list

Module 0 has its own SubHeader structure and item set. It does not vary per course-content design.

```
SubHeader: Welcome to the Course
  Page: [Add Video] [Update/Fill in Template] Course Introduction Video
  Page: [Update] Course At-a-Glance
  Page: [Update] Course Schedule and Important Dates

SubHeader: Get to Know Your Course Team
  Page: [Add bio and pic] Meet Your Instructor
  Page: [Add bio and pic] Learn About Your IA(s) and Grader(s)
  Page: [Instructors: Set up Virtual Office Hours (e.g., Zoom) and update the page text] Virtual Office Hours

SubHeader: Synchronous Classes
  Page: [Update in Live] Synchronous Classes: Schedule & Access
  Page: Synchronous Classes: Expectations and Guidelines

SubHeader: Communication and Support Resources
  Page: [Details Pending] [Update] Contacts & Support
  Page: Additional ASU Support

SubHeader: Assignment[s]/Project[s]
  Pages: per-coursework overview pages (variable)
```

---

## Visual signatures (must replicate verbatim in generated pages)

The template's design language is plain Canvas HTML — no React-style components, no SVG, no design-system class library. All styling is inline. Specific markers below are how a generated page is recognized as "template-faithful."

### Section header H2 with gold underline

```html
<h2 style="clear: both; margin-top: 5px; padding-bottom: 5px; border-bottom: solid 4px #FFC627;">
  <strong>
    <img id="116975863" role="presentation" src="https://canvas.asu.edu/courses/222287/files/116975863/preview" alt="" width="55" height="55" data-api-endpoint="..." data-api-returntype="File" loading="lazy">
    Lecture Video/Playlist: [Title] (00 min)
  </strong>
</h2>
```

The 4px `#FFC627` (ASU gold) bottom border under H2 is the template's primary section divider. Icon images sized 50-55px live inside the H2 next to the text. Generated mockups can substitute Unicode hex entities (e.g., `&#127909;` for video, `&#128218;` for readings) when the canonical Canvas-hosted icon file IDs are not available.

Common H2 section labels:
- `&#128218; Readings`
- `&#127909; Lecture Video/Playlist: [Title] (00 min)`
- `&#128221;` Assignment / coursework
- `&#10067;` Practice Quiz / Knowledge Check

### Yellow `#fbeeb8` placeholder span

Every page in the template carries one or more yellow-highlighted spans wrapping bracketed instructions:

```html
<span style="background-color: #fbeeb8;">[Update this text per your course content. Delete the highlighting and brackets when done.]</span>
```

Yellow highlights are deletable-in-production placeholders. Mockup pages keep them for items still pending faculty decision (banner image, video embed, transcripts, slide-deck links, IA bios). Production publish must contain zero yellow highlights.

### Table-cell 70/30 video + sidebar layout

Lecture pages use a `<div style="display: table; width: 100%;">` container with two table-cells. The 69%-width cell holds the embedded video (or placeholder for it); the 30%-width cell is a vertical-bar-separated sidebar with resources (transcript, slide deck).

```html
<div style="display: table; width: 100%;">
  <p style="display: table-cell; vertical-align: top; width: 69%; padding-right: 10px;">
    <span style="background-color: #fbeeb8;">[Embed video]</span>
  </p>
  <div style="display: table-cell; vertical-align: middle; width: 30%; border-left: 2px solid #000; padding-left: 15px;">
    <div role="region" aria-label="...">
      <p><strong>Resources</strong></p>
      <ul>
        <li><span style="background-color: #fbeeb8;">[Transcript]</span></li>
        <li><span style="background-color: #fbeeb8;">[Slide Deck PDF]</span></li>
      </ul>
    </div>
  </div>
</div>
```

### `<section aria-labelledby>` regions

Lecture video sections wrap in `<section style="width: 100%;" aria-labelledby="lecture-title-N">` for accessibility. Sidebar resource regions use `<div role="region" aria-label="...">`.

### No `<style>` blocks

Canvas strips `<style>` tags and most CSS classes from page content. All styling must be inline. Template never uses class-based styling.

---

## Page-by-page template inventory

Sample HTML bodies are saved under `templates/canvas-templates/sdo-jdo-online/` (pulled from course 222287 via Canvas REST API on 2026-05-19). Use these as starter HTML when generating new pages — copy the structure verbatim, then replace yellow-highlighted bracketed text with course-specific content.

| Template page | File | Purpose |
|---|---|---|
| Module Overview | (see `m-number-overview-2.html` if added later) | Banner, module description, intro video, Learning Objectives list, Topics list, Key Cases, Glossary |
| Module Task List | (see `m-number-task-list-2.html` if added later) | Get Organized + Checklist + Looking Ahead sections |
| Module M#.N Topic | (see `m-number-1-insert-topic-here.html` if added later) | Readings section + Lecture Video section (combined or split per ID call) |
| Synchronous Class Resources | (see `m-number-synchronous-class-number-resources-2.html`) | Optional resources list (slide deck links) |
| Coursework Reminder (empty-module) | (see `use-only-if-no-coursework-items-m-number-coursework-reminder-2.html`) | "No graded coursework this module — reflect and prepare" |
| Course Introduction Video | `add-video-update-slash-fill-in-template-course-introduction-video.html` | Module 0 intro video page |
| Course At-a-Glance | `update-course-at-a-glance.html` | Module 0 summary card grid |
| Course Schedule and Important Dates | `update-course-schedule-and-important-dates.html` | Module 0 calendar overview |
| Meet Your Instructor | `add-bio-and-pic-meet-your-instructor.html` | Module 0 instructor bio template |
| Synchronous Classes: Expectations and Guidelines | `synchronous-classes-expectations-and-guidelines.html` | Module 0 sync-class etiquette |
| Additional ASU Support | `additional-asu-support.html` | Module 0 student-support links |
| Course Evaluation Reminder | `reminder-course-evaluation.html` | End-of-course module |
| Break Reminder | `reminder-fall-slash-spring-break.html` | Break module |
| Reading Period Reminder | `reminder-reading-period.html` | Reading-period module |
| Practice/Proctored Exam Reminders | `pending-details-update-slash-fill-in-template-reminders-practice-and-proctored-exam-name.html` | Exam module |

---

## Per-page content contracts

### Module Overview page

Required sections, in this order:

1. Yellow placeholder for course banner image
2. Yellow placeholder for module description (one paragraph: the module's value, what students will be able to do, why it matters)
3. `<h3>Module Introduction Video</h3>` with one-paragraph standard text + yellow placeholder for video embed + bullet list with transcript and slide-deck links
4. `<hr>`
5. `<h2><strong>Learning Objectives</strong></h2>` + "By the end of this module, students will be able to:" + numbered list (typically 2-3 MLOs)
6. `<h3>Topics</h3>` + "In this module, we will cover:" + numbered list (4-6 topics)
7. `<h3>[Key Cases - if applicable]</h3>` + bullet list of cases with citations (law-specific section; optional for non-law courses)
8. `<h3>[Glossary - optional]</h3>` + one-paragraph standard text + numbered list of `<strong>Term</strong>: definition` items (5-10 terms)

### Module Task List page

Required sections, in this order:

1. `<h2><strong>Your Task List for Success</strong></h2>` + one-paragraph value-of-planning standard text
2. `<h3 data-heading-variant="h2semibold">Get Organized and Committed</h3>` + bullet list of organizing items (Onboarding, Syllabus, Assignment Overviews, Proctoring, Course Readiness, Make the Commitment)
3. `<h2 data-heading-variant="h2semibold"><strong>Checklist</strong></h2>` + module-specific ordered task list
4. `<h2><strong>Looking Ahead</strong></h2>` + one-paragraph preview of the next module + bullet list of next-module major coursework

### M#.N Topic page (Readings + Lecture combined)

Required sections:

1. ID-note yellow placeholder
2. `<h2 style="...border-bottom: solid 4px #FFC627;"><strong>&#128218; Readings</strong></h2>`
3. One or more reading entries with `<h3>` titles + reading description + supplemental file links (yellow placeholders)
4. `<section style="width: 100%;" aria-labelledby="lecture-title-N">` wrapping the lecture H2 header
5. `<h2 id="lecture-title-N" style="...border-bottom: 4px solid #FFC627;"><strong>&#127909; Lecture Video/Playlist: [Title] (00 min)</strong></h2>`
6. Yellow placeholder for video summary
7. `<h3>Directions</h3>` + standard "Watch the lecture video. Stay actively engaged…" paragraph
8. 70/30 table-cell layout: video embed (left) + Resources sidebar (right)

If split (Readings page separate from Lecture page), each gets its own page with the relevant half of the structure.

---

## How to route mockup/course-build/course-config against this template

When the user's trigger phrase activates this template:

1. `course-mockup` skill — generate one page per template entry in the per-learning-module list. Filename convention: `m{N}-{position}-{slug}.html`. Use the established `m{N}-01-overview.html` → `m{N}-08-practice-quiz.html` ordering for learning modules (Overview, Task List, Harmonize Q&A, M#.1, M#.2, Submission A, Submission B, Practice Quiz). Use SubHeader items (`page_type: "subheader"`) for the four section dividers inside each module: Overview, Learning Materials, Synchronous Class, Coursework. Position SubHeaders with alpha-suffixed positions (e.g., `m1-00a-overview-section.html`, `m1-04a-learning-materials.html`).
2. `course-build` skill — push pages via `staging_manager` → `push_to_canvas.py` (no body writes from raw API). Create Canvas module items in the order shown above.
3. `course-config.json` — modules array entries should declare `template: "sdo-jdo-online"` so the SubHeader expansion can be auto-applied on rebuild.
4. `course-audit` skill — alignment audits must check for: (a) zero yellow-highlight residue in published pages, (b) presence of all four SubHeader dividers per learning module, (c) Module 0 + Course Eval + Break + Reading Period + Exam wrapper modules present.

---

## Provenance and resync

- Pulled 2026-05-19 from Canvas course 222287 via REST API (modules + items + page bodies).
- Resync schedule: every 6 months OR whenever the SDO-JDO program reports a template update. Whichever is sooner.
- Resync command:
  ```bash
  python3 scripts/canvas_api.py --course-id 222287 --dump-modules --dump-pages --out templates/canvas-templates/sdo-jdo-online/
  ```
  (Add this script affordance if not present; current dump was done with an inline Python REST loop.)

## Sister templates planned

- **ASU Online QM template** — NOT YET SAVED. Needs source course ID + same snapshot pass.

Add additional sister templates as their own files in this directory.
