.png)
I've been posting learning targets in Canvas for years, but I wanted students to be able to actually check things off as they mastered them. I also wanted the checklists to remember what students had checked so they could come back later and see their progress.
I actually had a solution for this already. I was using a freemium product that allowed me to create interactive checklists and embed them in Canvas. It worked well enough, until I ran out of freebies. Continuing to use it for all my courses was going to be prohibitively expensive.
And I was not about to start paying a ridiculous amount of money for checkboxes.
So I started looking for another solution and ended up creating my own GitHub-hosted checklist that I can embed directly into Canvas pages.
I say "creating," but this was very much an AI-assisted project. I knew what I wanted it to do, and I worked through the implementation with ChatGPT. I am not a programmer, and I have no particular desire to become one.
Which brings me to the other reason I'm writing this post: I don't actually remember all the steps we took to make it work. 😆
And because I didn't know how to set it up in the first place and don't remember exactly how we did it, I had ChatGPT write this post using my actual code, Canvas embed, and instructions about what I wanted included. So if anything in this tutorial sounds suspiciously organized and coherent, that's probably why.
This is both a tutorial for anyone else who wants checkable learning targets in Canvas and documentation for myself, because six months from now I'll inevitably want to change something and have absolutely no recollection of how I set it up.
The best part? I can use the same system for all four of my Spanish courses, and I don't have to create a separate webpage for every unit.
What it looks like
 |
| Checkable learning targets embedded in Canvas! |
Each learning target has a checkbox next to it. Students check off the targets they feel they can accomplish without using notes, and their selections are saved in their browser.
There's also a reset button in case they want to start over.
I use the heading Sin usar apuntes, puedo… / Without using notes, I can… because I want students to think about what they can actually do independently, rather than what they can accomplish while looking at their notes.
These are self-assessment checklists, not graded assignments. I can't see which boxes individual students have checked, and the checkboxes aren't connected to the Canvas gradebook.
How it works
The checklist is a webpage hosted on GitHub Pages, which is a free service that allows you to publish webpages from a GitHub repository.
The webpage contains the learning targets for my different courses, semesters, weeks, and units. When I embed it in Canvas, I use a URL that tells the webpage which set of learning targets to display.
For example, here's the URL for my Spanish 1, semester 1, unit 1 checklist:
https://asaalfeld-afk.github.io/checklists/?course=S1&sem=1&week=U1
The three pieces at the end tell the webpage what to display:
course=S1means Spanish 1.sem=1means semester 1.week=U1means unit 1.
Despite the name week, I can use it for numbered weeks or entire units.
If I want the checklist for Spanish 4, semester 1, unit 2, I just change those values:
https://asaalfeld-afk.github.io/checklists/?course=S4&sem=1&week=U2
Same webpage, different learning targets.
This is a big deal for me because I'm always looking for ways to reduce the amount of repetitive maintenance my courses require.
Step 1: Get the code
I've made my checklist code available on GitHub:
Checkable Learning Targets — GitHub Repository
If you've never used GitHub before, don't panic. You do not need to be a programmer to use this.
You will need a free GitHub account.
Once you're signed in, open my repository and click Fork in the upper-right corner. This creates your own copy of the repository, which you can edit without changing mine.
You can keep the repository name checklists or choose something else.
Make sure your repository is public if you plan to use GitHub Pages with a free account.
Step 2: Publish your checklist using GitHub Pages
Once you've created your copy:
Open your new repository.
Click Settings.
Select Pages from the left-hand menu.
Under Build and deployment, choose Deploy from a branch.
Select the
mainbranch and the/ (root)folder.Click Save.
GitHub will publish your webpage. It may take a few minutes before the link starts working.
Your URL will generally look like this:
https://YOUR-USERNAME.github.io/checklists/
Replace YOUR-USERNAME with your GitHub username. If you gave your repository a different name, use that name instead of checklists.
Open the link to make sure your webpage is working.
You may initially see an error about an invalid course, semester, or week. That's expected if you haven't added any information to the URL yet.
Step 3: Customize your learning targets
Now comes the part that requires a little editing.
In your GitHub repository, open the file named index.html.
Click the pencil icon to edit the file.
Near the beginning of the JavaScript section, you'll see this comment:
EDIT OBJECTIVES HERE
Below that is a section beginning with:
const TARGETS = {
This is where the learning targets are stored.
Here's a simplified example of the structure:
const TARGETS = {
S1: {
name: "Spanish 1",
semesters: {
1: {
weeks: {
U1: [
"introduce myself in Spanish",
"greet others and say goodbye appropriately",
"exchange simple personal information in Spanish"
]
}
}
}
}
};In this example:
S1identifies the course.nameis the course name displayed on the checklist.1identifies the semester.U1identifies the unit.The sentences inside quotation marks are the learning targets.
You can replace my learning targets with your own and add additional courses, weeks, or units using the same structure.
A few important things: Keep the quotation marks around each learning target, separate the items with commas, and don't accidentally delete the brackets or braces. JavaScript is considerably less forgiving about punctuation than I am.
Also, don't delete the rest of the code! Below the learning targets, there's a section labeled DO NOT EDIT BELOW. That's the part that actually makes the checkboxes work.
When you've finished editing, click Commit changes to save your work.
GitHub Pages will update the published webpage automatically, although the changes may take a little time to appear.
An easier option: Let AI customize the code for you
If looking at all that code makes your eyes glaze over, there's another option: have AI do the editing for you.
That's essentially how I created mine. I knew what I wanted, but I didn't know how to write the code to make it happen.
You can do the same thing!
Open the
index.htmlfile in my GitHub repository.Click Raw and copy the entire code.
Open ChatGPT or another AI assistant and paste the code into the conversation. If it's too long to paste, save it as an HTML file and upload it.
Give the AI your own learning targets, organized by course, semester, and week or unit.
Ask it to replace my learning targets with yours while keeping the checklist functionality intact.
Have it return the complete updated HTML file, not just the section that changed.
Copy the updated code into your own GitHub repository's
index.htmlfile and commit the changes.
Here's a prompt you can use:
I'm a teacher creating interactive learning-target checklists to embed in Canvas. I'm providing the HTML and JavaScript code for an existing working checklist, along with my own learning targets.
Replace the existing learning targets with mine, organized by course, semester, and week or unit. Keep the checkboxes, browser-based saving, reset button, responsive layout, and accessibility features working exactly as they do now.
Do not change the underlying functionality unless it's necessary to accommodate my learning targets. Return the complete updated
index.htmlfile so I can copy and paste it into GitHub.Explain anything I need to change in the Canvas embed URLs.
One suggestion: Have the AI make changes one step at a time, and test the results before making additional changes. I've found that AI is very good at helping me create things I couldn't code myself, but it is also perfectly capable of breaking something that was already working. 😆
And keep a copy of your last working version! GitHub maintains a history of changes, so you can return to an earlier version if something goes wrong.
You don't need to learn JavaScript to use this system. You just need to know what you want it to do, provide your learning targets, and check that the finished product works.
Step 4: Embed the checklist in Canvas
This is actually the easy part.
Open the Canvas page where you want your checklist to appear and switch to the HTML editor.
Paste the following code:
<iframe
title="Spanish 1 · Semester 1 · Unit 1 Learning Targets"
src="https://YOUR-USERNAME.github.io/checklists/?course=S1&sem=1&week=U1"
width="100%"
height="560"
style="border: 0; border-radius: 16px;"
loading="lazy">
</iframe>You'll need to change the GitHub username and, if necessary, the repository name.
You'll also want to change the course, semester, and week or unit values to match the learning targets you want to display.
The title attribute describes the embedded content for accessibility, so make sure it accurately identifies the checklist.
The width="100%" setting allows the checklist to adjust to the width of the Canvas page, while height="560" controls how tall the embedded area is. You may need to increase the height for longer checklists.
Save your Canvas page, and your checklist should appear right there in Canvas.
[Insert screenshot of the checklist in Canvas]
Step 5: Reuse it!
Once you have the system set up, you don't have to repeat the GitHub setup for every new checklist.
You just add the new learning targets to your index.html file and change the URL parameters in Canvas to display the appropriate list.
You can also use the same checklist in multiple Canvas pages.
And if you discover a typo in one of your learning targets (not that I would know anything about that), you can correct it in GitHub instead of editing every Canvas page where that checklist appears.
This is exactly the kind of thing I mean when I talk about making instructional materials more sustainable.
A few things to know
The checkboxes are saved in the student's browser, not in Canvas. The code uses something called localStorage to remember which boxes have been checked.
This means students can generally return to a checklist and see their previous selections if they're using the same browser and device and their browser allows the storage to persist.
However, their selections won't automatically follow them to another computer or browser. They may also disappear if browser data is cleared or storage is blocked.
The checkboxes are not evidence of mastery. Students are reporting what they believe they can do. I still use other assessments to determine whether they've actually mastered the material.
Changing the order of the targets can affect saved checkmarks. The code remembers selections by their position in the list. If you rearrange or replace targets after students have started using a checklist, their saved selections may no longer correspond to the intended targets.
This isn't a Canvas assignment. There's no grade, no submission, and no way for me to monitor students' selections individually.
And that's fine, because that's not what I wanted it for.
Was it worth the trouble?
For me, yes.
I went from using a freemium product that was going to cost more than I was willing to pay to having a free, customizable system that I control.
I already had learning targets for my courses, so the biggest challenge was figuring out how to make them interactive without creating another enormous maintenance project for myself.
Now I have one place to maintain the checklists, and I can use them throughout my Canvas courses. I can update the targets without having to rebuild the Canvas pages, and I don't have to worry about running out of free checklists or paying a subscription fee.
Will every student use the checkboxes exactly as intended? Probably not. But the students who want to monitor their progress have a simple way to do it, and I don't have to grade anything.
And now, if I need to remember how I set everything up, I can just come back and read my own blog post. 😆
Want a customized version without the setup? I can create a checkable learning-target system using your own course objectives, ready to embed in Canvas. Contact me for pricing.
