This post was sort of inspired by a question to the Community - Solved: Clickable Check Boxes in a to-do list - Instructure Community - 606531 (canvaslms.com) asking about Check boxes for a to-do list.
My go to list creator is https://interactlist.com/ as it is free and allows embedding in a Canvas page. it also does some neat stuff like providing different backgrounds, allowing students to return to the list if not finished and confetti rewards when the list is done.
We use web2.0 tools with the large health warning that they may not be around for long, could start costing you money or could change their approach. So whilst the design of a list that is similar to Interactlist is not something new or original or one I will now use, it may not be the case this time next year.
The design of the list through ChatGPT followed the same path as all previous designs. I wrote the prompt, copied and pasted the code into Notepad, published and checked it, then went back to the prompt to make changes.
This was not my most successful bit of prompting ever. For some reason, Chat GPT did not like my request to create a progress bar in one colour that would change incrementally to another as a task was ticked off. I also learned a valuable lesson in not assuming stuff and making sure my prompts cover all possible options. I wanted the progress bar to increase by 10% as one of the tasks was checked off. What I didn't want was the progress bar to carry increasing by 10% if I unchecked and then checked the same task! Whilst I profess very little knowledge of JavaScript, I realised that in this task it was quite a limiting factor when the progress checker started to take away 10% giving minus progress scores.
After longer than I wanted, I have ended up with a fairly effective checker. It covers most things that Interactlist does. it includes a progress bar and percentage check. A pop-up message appears when all the tasks are done and you score 100%. It remembers where you were when you leave and comes back. It has a reset button to reset everything back to 0%.
As with all the other html designs, it was uploaded to the Canvas course and then the link copied and pasted into iFrame generator to create the iframe. This was then copied and put into the page HTML via the Rich Content Editor feature. I used some <div> styling on the page to give it a border and background:
Here are some designs:
As fun as it is to try doing this, the designs need to be usable by everyone and currently that means editing and saving some HTML files (with directions).
I'm not sure how else I might be able to do this unless you can create some sort of executable file that cleverly allows you to enter the details in a form, press a button and the webpage is made (inside the iframe too!).
I'm not sure this is possible. If anyone has some ideas to share then I would love to hear from you...
One Week on.....
So, I updated the prompt to try to make the task checker one where students would enter the tasks themselves. After 20 or so iterations, I think I have now got a Webpage that I can embed in a Canvas Page and have as a page for any staff to add to their course.
A few print screens of my new design:
How the template looks when you first open it:
Pressing the Enter Task button and writing a task to be done:
The first task is entered into the table:
More tasks added and some ticked off:
Reordering the Tasks
Completing all the Tasks:
Ive attached the html and prompt as a PDF file below if anyone want to copy, develop and use..
