Jamilah Lambert

Interactive learning resources in Canvas

Build RMIT-branded interactive HTML learning resources with Claude, and embed them into Canvas pages while thinking about and improving accessibility.

Download PDF

How to generate an interactive HTML learning object with an AI assistant, then embed it into a Canvas page

This process demonstrates how to use a large language model to generate and refine a self-contained, interactive HTML learning object. By providing specific, iterative prompts, you can create custom educational resources, such as an interactive SWOT analysis, complete with accessibility features like text-size controls. The resulting HTML file can then be embedded directly into a learning management system like Canvas, offering a way to create more engaging and accessible student experiences without needing to write code from scratch.

  1. 00:10 Prompt the AI to add accessibility controls. In the AI chat interface (e.g., Claude), provide a detailed prompt instructing it to add controls for adjusting the text size. For example, ask it to place buttons in the header to make the text smaller, larger, or return to a default size.
  2. 00:27 Test the generated interactive element. After the AI generates the new version, test the new features directly in the preview window to ensure they function as expected. Continue refining your prompts and iterating until you are satisfied with the result.
  3. 01:08 Download the final HTML file. Once the interactive is complete, use the AI tool's download function to save the code as a single .html file to your computer.
  4. 01:19 Upload the HTML file to your Canvas course files. In your Canvas course, navigate to the 'Files' section and upload the .html file you just downloaded.
  5. 01:27 Find the unique File ID for the uploaded file. In the Canvas 'Files' list, hover your mouse over the link for the uploaded HTML file. Look at the URL preview that appears in the bottom-left of your browser window. Note the long number that appears after /files/. This is the File ID.
  6. 01:47 Add an iframe embed code to a Canvas page. Create or edit a Canvas page. Switch to the HTML editor view (</>) and paste in the standard iframe embed code. You will need to replace the placeholder COURSEID with your course's ID number (from the browser's address bar) and FILEID with the number you noted in the previous step.
  7. 02:23 Save and publish the page. Switch back to the standard editor view to preview the embedded interactive. Adjust the height attribute in the iframe code as needed to avoid scrollbars. Once satisfied, save and publish the page.

Tools

This workflow uses Claude for AI generation and Canvas as the learning management system.

Example prompt

The presenter used a prompt to add accessibility controls: "Place three buttons to manage the right of the page header labeled Smaller, Default, Larger. Preceded by the label 'Adjust text size'."

Embed code

Use the following iframe structure to embed the file on a Canvas page, replacing the placeholders: <p><iframe src="/courses/COURSEID/files/FILEID/download" width="100%" height="1200"></iframe></p>

Output format

The AI tool generates a single, self-contained .html file that can be downloaded.

Caveat

Achieving a final, functional interactive often requires significant iteration; expect to use between 10 to 15 prompts to refine the output to a satisfactory state.

Related skills

  • Refine and iterate prompts — This activity requires refining prompts to add specific features, such as accessibility controls, to the AI-generated HTML output.
  • Create multimodal outputs — This process moves beyond simple text generation to create a functional, interactive HTML element as a multimodal learning resource.
  • Integrate multiple tools into workflows — This workflow demonstrates a practical process of generating a resource in one tool (Claude) and integrating it into another (Canvas).
  • Apply human judgement to validate AI outputs — You must test the generated interactive element to ensure the code is functional and meets the pedagogical requirements before embedding it.