This page documents a workflow for turning presentation slides or handwritten notes into accessible HTML using UTSpark (in this case, ChatGPT). The goal is to produce “materials shown in class” that:

Mirror what’s on the slides/notes,
Are friendlier to screen readers and keyboard navigation, and
Don’t require you to re‑type all of your content.

How to create a “profile”

Step 1: Prepare your notes

Export your slide deck or notes file as a PDF. If using Keynote or Powerpoint, turn on accessibility features.

Step 2: Upload and prompt

Upload the PDF to any LLM in UTSpark with the prompt:

Convert these notes into accessible HTML for the Canvas LMS Rich Content Editor. Use LaTeX+MathJax for equations \( \), \[ \]. Use in-line CSS only, begin headings with <h2>, and return only clean HTML suitable for pasting into Canvas.

Step 3: Review in Canvas

Copy/paste the HTML into a Canvas Page and check that:

Headings make sense

Reading order is correct

Math renders correctly

Step 4: Refine behavior

Adjust output with additional prompts. Examples are below; apply only what you need.

Start headings at <h2>. Canvas already uses <h1> in a separate text field.
Treat slide/topic titles as <h2>.
In-slide headings such as ‘Theorem,’ ‘Proof,’ ‘Lemma,’ or ‘Note’ should usually be tagged <h3>.
Infer reading order from the slide layout.

Use LaTeX instead of MathML.
Use  for inline math and \[ \] for display math (Canvas does interpret $$ $$ correctly, but not $ $ ).

Wrap solutions in a <details> block labeled ‘Solution’.
<details> <summary>Solution</summary> ... </details>

Treat non-math images as decorative. Omit if possible.
Add alt text for meaningful figures and diagrams.

Use accessible tables only when the source is truly tabular. Otherwise convert to lists or paragraphs.

Preserve highlighted/emphasized text.
Do not rely on color alone for meaning.
Copy my text exactly; do not edit sentences.

Step 5: Create a reusable profile

Once you like the behavior, ask for refined instructions and copy/paste them as a reusable profile prompt (below).

Rewrite my current instructions as a reusable prompt for future chats. Preserve all requirements, constraints, and formatting preferences. Remove situation-specific wording. Make it concise, stable, and ready to paste into a new chat.

Authoring Habits for Reliable Conversion

This technique works well when your slides and notes are simple, linear, structured, and labeled.

This technique works less well with:

Slides that are screenshots of dense documents (poor OCR results)
Highly animated decks where builds are essential (can only be approximated)

Slides

Use structured layouts

Use built-in Title + Content layouts
Avoid free placement or scattered text boxes

Maintain clear flow

Order content top → bottom, left → right
Keep to one idea per slide

Use real, semantic content

Use real text (not images of text)
Use built-in bulleted/numbered lists
Do not simulate structure with font size or color

Use consistent structure

Slide title = main idea
Use short sections or bullets under the title

Label supporting content

Add short captions to visuals
Use descriptive link text (avoid “click here”)

Export

Export slides as PDF (not screenshots)

Handwritten notes

Structure clearly

Write in a linear order (top → bottom)
Mark sections consistently (e.g., Definition, Example, Proof)

Separate content

Use spacing between blocks
Start new ideas on new lines

Use standard forms

Write lists vertically
Keep math clear and standard

Label visuals

Add short captions to figures or diagrams

Avoid ambiguity

Do not rely on color alone
Avoid arrows, side notes, or crowded layouts

Troubleshooting

Coming soon.

Sample profile prompt

Purpose
Convert Keynote slides (PDF or images) into Canvas-ready, accessible HTML that can serve as “materials shown in class.”

Environment
- Canvas provides the page title (<h1>); do not output <h1>. Start at <h2>.
- All images are decorative unless I explicitly say otherwise.

Input
- PDF exported from Keynote and/or slide images (PNG/JPEG)
- Do not require manual text input; infer content and reading order from the source
- Reading order: top-left → bottom-right, column by column (left, then middle, then right). Ask only if ambiguous.

Output
- Return only Canvas-ready HTML + LaTeX (no explanations)
- Use MathJax (not MathML):
  - Inline: \( ... \)
  - Display: \[ ... \]

Allowed HTML
<h2>, <h3>, <h4>, <p>, <ul>, <ol>, <li>, <strong>, <em>, <span>, <a>, <details>, <summary>
<img> only if I explicitly mark an image as meaningful
Do not use <h1>, <header>, <main>, <aside>, <style>, scripts, or custom CSS

Structure
- Slide/topic titles → <h2>
- Subheadings (e.g., Theorem, Proof, Case) → <h3>
- Paragraphs → <p>
- Lists → <ul>/<ol>/<li>

Examples and proofs
- If a statement (problem/theorem/claim) has a worked solution or proof:

<h2>Title</h2>
<p>Statement and brief context</p>
<details>
  <summary style="cursor: pointer;">Solution or Proof</summary>
  <div style="border: thin solid #CCCCCC; padding: 5px 15px;">
    <!-- full solution/proof -->
  </div>
</details>

- Use “Proof” if it is explicitly a proof
- If no solution/proof is present, do not add <details>

Math
- Convert all math to LaTeX:
  - \frac{a}{b}, x^2, x^{n+1}, \sum_{i=1}^n
- Inline: \( ... \)
- Display: \[ ... \]
- If unclear, add <!-- unsure: ... -->

Images
- Omit decorative images
- If marked meaningful, prefer converting content to LaTeX/HTML instead of embedding

Accessibility
- Preserve logical reading order (headings → explanation → math → examples)
- Do not rely on color alone
- Keep structure simple and linear

Execution
When I say “convert this deck” or “apply my profile”:
- Extract content from the PDF/images
- Apply all rules above
- Return one clean block of HTML+LaTeX only

LLM → Canvas Pages