Pima Tech Guides

H5P: Creating Interactive Content Using ChatGPT

Updated on

Workflows are not supported in your browser.
Please use a recent version of Chrome, Edge, Firefox or Safari to display this page.

About

H5P allows users to create interactive content using HTML for simple learning integrations into platforms such as D2L. ChatGPT is an open source AI that helps create responses according to the user's input. With ChatGPT, H5P can now filter through mundane tasks and augment idea creation with little effort.

Note: ChatGPT isn't a replacement for human intelligence. It is a tool to enhance teaching by giving the repetitive tasks to the AI for enhanced focus on critical thinking. Don't share sensitive information with ChatGPT and always double-check the results since ChatGPT can make mistakes.

ChatGPT to create interactive content options:

Prerequisites: 

Access to ChatGPT, available at ChatGPT
An H5P account at pima.h5p.com

Image of the H5P dashboard. On the top left, Add Content is highlighted in red with an arrow indicating to select it.
Image of the H5P Content Types displayed. Under Multiple Choice on the middle of the screen, “Single Choice Set” is navigated to. On the right of the Single Choice Set, “Details” is highlighted in red with an arrow indicating to select it.
Image of the H5P Single Choice Set information page. On the bottom right, Use is highlighted in red with an arrow indicating to select it.
Image of the H5P Single Choice Set “Create new content” page. Located in the “list of questions” section, on the upper right “Textual” is highlighted in red with an arrow indicating to select it.
Image of the ChatGPT page. On the top left, a new tab “ChatGPT” is highlighted in red with an arrow indicating that ChatGPT is opened.

Take this prompt below and paste it into ChatGPT. The bolded words can be altered for your preference:

"Create a multiple choice quiz about Neuroscience. Create 4 questions with 4 alternatives for each question. Output the questions with the question on the first line, the correct alternative on the next line and distractors on the following lines. Separate each question with an empty line. Do not add any labels, formatting or numbering. Do not assign letters to the alternatives. Follow the described format precisely as I will be pasting the output into another tool that expects this format. Output the answer as preformatted code."

Image of the ChatGPT page. The copied text is pasted in ChatGPT. On the bottom right the “upper send arrow” icon is highlighted in red indicating to select for a generated response.

Note: The layout is different depending on ChatGPT's understanding of the input. It won't be entirely accurate which will require some editting in H5P.

Image of the ChatGPT page. “ChatGPT” icon on the top left is highlighted in red with an arrow indicating that the response has been generated. Copy the text response.
Image of the H5P Single Choice Set Page. On the mid left, “List of questions” is highlighted in red labeled 1 with an arrow indicating that the ChatGPT text is pasted in this section. On the top right “Save” is labeled 2 and is highlighted in red with an arrow indicating to select it when all editing is finished.
Image of a completed H5P Single Choice Set example. One question and 4 potential answers. The correct answer is highlighted green after selecting it.

Congratulations! You have successfully completed a H5P Single Choice Set using ChatGPT.

Image of the H5P dashboard. On the top left, Add Content is highlighted in red with an arrow indicating to select it.
Image of the H5P Content Types displayed. Under Single Choice Set on the middle of the screen, “Summary” is navigated to. On the right of the Summary, “Details” is highlighted in red with an arrow indicating to select it.
Image of the H5P Summary information page. On the bottom right, Use is highlighted in red with an arrow indicating to select it.
Image of the H5P Summary “Create new content” page. Located in the “Summary” section, on the upper right “Textual” is highlighted in red with an arrow indicating to select it.
Image of the ChatGPT page. On the top left, a new tab “ChatGPT” is highlighted in red with an arrow indicating that ChatGPT is opened.

Take this prompt below and paste it into ChatGPT. The bolded words can be altered for your preference:

"Please create a summary of medieval history. Write it as five statements, but for each of the statements also create three incorrect statements so that the reader is challenged to find the five correct statements. Use this format: Write each statement on a separate line. Use an empty line to separate sets of statements. First statement is always correct followed by the three distractor statements. Do not add any labels, formatting or numbering and no extra empty line below the correct statement. Output the answer as preformatted code."

Image of the ChatGPT page. The copied text is pasted in ChatGPT. On the bottom right the “upper send arrow” icon is highlighted in red indicating to select for a generated response.

Note: The layout is different depending on ChatGPT's understanding of the input. It won't be entirely accurate which will require some editting in H5P.

Image of the ChatGPT page. “ChatGPT” icon on the mid left is highlighted in red with an arrow indicating that the response has been generated. Copy the text response.
Image of the H5P Summary Page. On the mid left, “Summary” is highlighted in red labeled 1 with an arrow indicating that the ChatGPT text is pasted in this section. On the top right “Save” is labeled 2 and is highlighted in red with an arrow indicating to select it when all editing is finished.
Image of a completed H5P Summary example. One question and 4 potential answers. The correct answer is highlighted green after selecting it and moved up to complete the summary list.

Congratulations! You have successfully completed a H5P Summary using ChatGPT.

Image of the H5P dashboard. On the top left, Add Content is highlighted in red with an arrow indicating to select it.
Image of the H5P Content Types displayed. Under Image Choice on the middle of the screen, “Drag the Words” is navigated to. On the right of “Drag the Words”, “Details” is highlighted in red with an arrow indicating to select it.
Image of the H5P Drag the Words information page. On the bottom right, Use is highlighted in red with an arrow indicating to select it.
Image of the H5P Drag the Words “Create new content” page. The “Text” box is highlighted in red in the middle of the image with an arrow indicating that it’s in the proper format to insert text.
Image of the ChatGPT page. On the top left, a new tab “ChatGPT” is highlighted in red with an arrow indicating that ChatGPT is opened.

Take this prompt below and paste it into ChatGPT. The bolded words can be altered for your preference:

"Create an H5P drag the words task about business introduction. Include three paragraphs and 3 - 7 droppables per paragraph. Add explanations. Here is the format you need for follow:

Droppable words are added with an asterisk (*) in front and behind the correct word/phrase.

You may add feedback for each droppable to be displayed when a task is completed. Use '\+' for correct and '\-' for incorrect feedback. Feedback should be enclosed between the two asterisks along with the droppable word itself.

Example:

H5P content is *interactive\+Correct! H5P is all about interactive content.\-Incorrect, H5P is actually all about interactive content.* and can be used to share rich content between websites.

Do not add any labels, formatting or numbering. Output the answer as preformatted code."

Image of the ChatGPT page. The copied text is pasted in ChatGPT. On the bottom right the “upper send arrow” icon is highlighted in red indicating to select for a generated response.

Note: The layout is different depending on ChatGPT's understanding of the input. It won't be entirely accurate which will require some editting in H5P.

Image of the ChatGPT page. “ChatGPT” icon on the top left is highlighted in red with an arrow indicating that the response has been generated. Copy the text response.
Image of the H5P “Drag the Words” Page. On the mid left, “Text” is highlighted in red with an arrow indicating that the ChatGPT text is pasted in this section.
 On the top right “Save” is highlighted in red with an arrow indicating to select it when all editing is finished.

Note: The highlighted portion is the edited text from H5P that make the "Drag the Words" example completed. The portion under wasn't edited to match H5P's context, so it didn't generate the proper response. This is why editting out ChatGPT's imperfections is a must.

Image of a completed H5P “Drag the Words” example. The edited correct portion of the example is highlighted in red on the top with an arrow indicating the finished results. There are 2 examples of words dragged into their respective spot highlighted green.

Congratulations! You have successfully completed an H5P "Drag the Words" using ChatGPT.

Congratulations, you are done!

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Guide H5P Smart Import: Locating Generated Content
Next Guide H5P: Guidelines for Creating Alt Text
Want Help From A Human? → Contact Us