Creating Embedded Task Checklists with ChatGPT - Updated!!

GideonWilliams
Community Champion
7
1173

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:

pic1.PNGpic2.PNGpic3.PNG

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:

T1.PNG

Pressing the Enter Task button and writing a task to be done:

T2.PNG

The first task is entered into the table:

T3.PNG

More tasks added and some ticked off:

T4.PNG

Reordering the Tasks

T5.PNG

Completing all the Tasks:

T6.PNG

Ive attached the html and prompt as a PDF file below if anyone want to copy, develop and use..

 

7 Comments
JordanFinn
Community Explorer

@GideonWilliams 

Gideon, 

I was wondering if you could provide some insight into the code you were able to generate for this? I have been trying to get chatgpt to create a code for just a clickable checkbox even, but it never is able to create the interactive piece. It can create a regular box, but I have tried several times to argue with it enough to make them clickable and no luck. 

GideonWilliams
Community Champion
Author

@JordanFinn 

I've now added the prompt and a copy of the html page used to make the fully interactive page. You will see it in the attached in a PDF file.

Hope this helps...

JordanFinn
Community Explorer

Thank you so much! I will be playing with it this afternoon!

JordanFinn
Community Explorer

@GideonWilliams When you put this into Canvas, are you copying and pasting the code into the html screen in the rich content editor? The issue I am having is that when I try and place the code into the rich content editor it doesn't work. 

GideonWilliams
Community Champion
Author

@JordanFinn 

Now there is the trick. If I pasted in the raw html, Canvas strips everything out so these are the steps I take:

1. Upload the html page into the Files area of your course.

2. Right click on the uploaded file and choose Copy Link.

3. Go to https://www.iframe-generator.com/ and paste in the link in the iframeURL box

4. Press the </> Generate button to create the iframe code

5. Go back to the course and make a new blank page

6. Change the HTML view and paste in the iframe code

7. You usually have to adjust the width and height (I use width: 95% and height 600px)

8. Save the page

 

I am hoping that should do the trick. Let me know!

'Afternoon'. Are you in Europe?

JordanFinn
Community Explorer

@GideonWilliams This worked so well! Thank you so much for the help. And no, I am in the US! 

kmoraes
Community Explorer

Great idea. Thank you for sharing this.