Studio Session – Getting Started w/ H5P

69 STEPS

1. Navigate to an H5P Authoring Tool (for example, h5p.open.ubc.ca) and type in Search for Content Types
or scroll to find Multiple Choice

2. Click Multiple Choice

3. Optional: Click Tutorial to navigate to a tutorial for this question type on h5p.org. A tutorial link is available for each content type.

4. The h5p.org tutorial will guide you through this content type.

5. Optional: Click Example to see a completed h5p element for this content type on h5p.org.

6. This Multiple Choice page on h5p.org has an example. The question threads at the bottom of this page and the tutorial page often have answers to common questions and issues.

7. Return to h5p.open.ubc.ca and add a Title.
This title will be visible in your h5p library and question metadata. It is not displayed to the user as part of the question.

8. Optional: Click Media if you want to add an image or video at the top of your question.

9. Select Image or Video if desired.

10. Click Add and select the appropriate file.

11. Recommended: Click Metadata.

12. Add a Title for your image.

13. Select a License.
For help choosing a license, see copyright.ubc.ca/creative-commons

14. Click Save metadata.

15. Add Alternative text. A good image description here is important for accessibility.

16. Scroll down and add your Question as you want it to appear to the user.

17. Type in an answer Option as you want it to appear to the user.

18. Check Correct if you want to mark this as a correct answer.

19. Optional: Click Tips and feedback to add tips or feedback for this answer option.

20. Optional: Type Tip text for this answer option. This will add a tip button beside this option. The tip or hint will appear if the user clicks on the tip button.

21. Recommended: Add Feedback that will appear to the user after checking their answers if they select this option.
For tips on how to give good feedback, see the OpenEd Kitchen’s Focus on Formative Feedback.

22. Optional: Add Feedback that will appear to the user after checking their answers if they do not select this option.

23. Scroll down and add another answer Option. Leave “Correct” unchecked if this is not a correct answer. Add tips and/or feedback as above.

24. Scroll down and click Add option to add more answer options as needed.

25. Add text for a third answer Option

26. Check Correct to mark this as a second correct answer. Add tips and/or feedback as above if desired.

27. Optional: Scroll down to Overall Feedback and click Add Range. You can set different overall feedback for each defined score range.

28. Once you have as many score ranges as you desire, click Distribute Evenly if you would like the ranges to be evenly distributed.

29. Add Overall feedback for each defined score range.

30. Recommended: Scroll down and expand Behavioural settings to review and change default behavioural settings.

31. Scroll to Enable “Retry” button.
Keep checked if you want students to be able to try question again until they get it right.
Uncheck if single attempt is important, such as embedding in an interactive video with branching based on answer.

32. Navigate to Enable “Show Solution” button.
Keep checked if you want students to be able to view the solution.
Uncheck to encourage retry or if you do not want to reveal the answer.

33. Navigate to Question Type to select if answer options appear as checkboxes or radio buttons. Recommend to keep selection as Automatic.

34. Navigate to Give one point for the whole task.
Keep unchecked to keep the default where each correct answer option is +1 and each incorrect answer is -1.
Check this box to instead have all or nothing marking using threshold set by pass percentage below

35. Navigate to Randomize answers.
Uncheck this box if you want the answer options to appear in the same order you added them.

36. Navigate to Require answer before the solution can be viewed.
Recommendation: Keep this box checked so that users must attempt an answer before viewing the solution.

37. Navigate to Show confirmation dialog on “Check”.
If you check this box, users will receive a “Are you sure you want to finish?” popup when they submit their answer by clicking “Check”.

38. Navigate to Show confirmation dialog on “Retry”.
If you check this box, users will receive a “Are you sure you want to retry?” popup when they click “Retry”.

39. Navigate to Automatically check answers.
If checked, users would receive correct/incorrect feedback immediately when selecting answers rather than after selecting “Check”.
Recommendation: Keep this box unchecked to maintain accessibility.

40. Navigate to Pass percentage. If you checked the :Give one point for the whole task” box, set the percentage required on the question for the user to receive 1 point (full credit).

41. Navigate to Show score points.
Recommendation: Keep this box checked to help users understand positive scoring for correct answers and negative scoring for incorrect answers.

42. Optional and usually not necessary: Scroll down and click to expand Text overrides and translations.

43. Click to expand Multiple Choice

44. Click to expand Check

45. Change any default text, if desired. For example, you could change Retry button label to Try Again.

46. Optional: If included on your authoring platform, scroll down and edit default Faculty if necessary. This is helpful for organization and admin support.

47. Optional: If included on your authoring platform, scroll down and add a relevant Discipline. This is helpful for organization if you may share your question to a database.

48. Recommended: Scroll up and add tags. Tags will appear in your h5p content library and are useful for organization and searching.

49. Click Metadata

50. Select a License.
For help choosing a license, see copyright.ubc.ca/creative-commons.
Edit other metadata as desired.

51. Click Save metadata

52. Navigate to Display Options. When this box is checked, a small toolbar appears under your content that displays Reuse, Rights of Use, and Embed buttons. Keep check initially to get an embed code. You can uncheck it after embedding, if desired.

53. Navigate to Allow users to download content. When checked, the Reuse button allows users to download an h5p file of your content. This file can be used to upload and/or modify your content elsewhere if you chose a creative commons license.

54. Navigate to Display Embed button. Keep checked initially to obtain an embed code for your content and continually to allow others to share your content elsewhere if you chose a creative commons license.

55. Navigate to Display Copyright button. Keep checked to allow users to view the metadata such as title, author, and license details for your content.

56. Click Create

57. Try question to confirm that everything works as expected.

58. If you need to make any changes, click Edit.

59. Make any desired changes then click Update.

60. Click Embed.

61. Copy Embed code.

62. Embed your content wherever you would like it to appear.

Example 1 (Canvas Insert): Click Edit.

63. Scroll down and click Insert.

64. Click Embed.

65. Paste your embed code and click Submit. Your question will be embedded on your Canvas page.

66. Example 2 (html): Switch to the html editor, for example in Canvas or WordPress.

67. Find the location where you want your h5p content to appear and paste the iframe Embed code.

68. Scroll down and click Save

69. That’s it – you’re done!

34 STEPS

1. Navigate to the H5P Hub on your preferred H5P Authoring tool and click Quiz (Question Set)

2. Add a Title (not displayed as part of the question)

3. Optional: Click Quiz introduction to add an introduction. Skip ahead if you do not want an introductory slide skip forward to step 7.

4. Click Display introduction if you would like to display an introductory slide with text and/or an image before the first question. If you do not include an introduction, the first slide is the first question.

5. Add a Title to be displayed on the introductory slide

6. Add Introduction text to be displayed on the introductory slide. Scroll down and add an introductory image if desired.

7. Add a background image if desired. We will not add an image here.

8. Choose whether you want question Progress to be shown as Dots or Text

9. Change Pass percentage if desired

10. Select Question type for the first question. Here we will start with Multiple Choice.

11. Create a multiple choice question as normal, or Click Textual to access the rapid text authoring tool.

12. Type Questions and answers following the format
Question
*Correct:tip:feedback if selected:feedback if not selected
Incorrect 1
Incorrect 2

13. Click Default to return to standard question authoring tool

14. The text-authored question has been inserted. Click Add Question to add the next question.

15. Click dropdown menu to select question type for next question. Instead of authoring the next question here we will demonstrate how to copy-paste a previously authored question.

16. Navigate to the question you want to copy (for example, Click My H5P Content and open the question you want to copy).

17. Click Copy

18. Return to Quiz (Question Set) and click Paste at the top of the Question 2 tab. Your question will be copied.

19. Optional: Scroll down and check Disable backwards navigation if you only want users to be able to progress forward through questions.

20. Click Randomize questions if you want the questions to appear in a random order. Note: this adds a challenge in that a user may report an issue with the second question, and you might not know which question they saw second.

21. If you want a subset of the full number of questions available to be displayed, enter the Number of questions to be shown here

22. Scroll down and click Finished

23. Change any default settings if desired

24. Scroll down and click Add file under Passed video and/or Fail video if you want users to view a video after the quiz based on their results.

25. Optional: Select Discipline if desired

26. Scroll up and add tags for organization

27. Click Metadata

28. Click the dropdown menu under License

29. Select Preferred License

30. Click Save metadata

31. Click Create

32. If all functions as desired, click Embed

33. Copy the embed code and paste it in an html editor where you want the content to display.

34. That’s it. You’re done.

35 STEPS

1. Select Find the Hotspot (scroll or use Search for Content Types if it is not at the top)

2. Add a Title (for metadata and organization; not displayed as part of the question)

3. Click Add to add the background image that your hotspots will be located on

4. Click Edit copyright

5. Add a Title for your image. This title is used for licensing and is not displayed as part of question.

6. Add an Author for your image. This author is used for licensing and is not displayed as part of question.

7. Scroll down and select your preferred License. For help choosing a license, see UBC Creative Commons.

8. Click close

9. Click Hotspots

10. Add a Task description to provide instructions to the user.

11. Scroll down and click your preferred shape to Create a hotspot

12. Check Correct to mark the current hotspot as correct. Multiple correct hotspots can be assigned, but for this Content Type the question will end as soon as a single correct hotspot is found. Use Find Multiple Hotspots for additional functionality.

13. Add Feedback that will appear to the user if this hotspot is selected.

14. Click Done

15. With your mouse, click and drag the new hotspot, then drop it on the desired location (white rectangle)

15b. Drop

16. With your mouse, click and drag bottom corner to resize, then drop when it is the desired size (covering full white rectangle)

16b. Drop

17. Click to create another Hotspot

18. Leave correct unchecked to mark this as an incorrect hotspot. Type Feedback that will appear to the user if this hotspot is selected.

19. Click Done

20. With your mouse, click and drag new hotspot, then drop it on desired location

20b. Drop

21. With your mouse, click and drag bottom corner then drop to resize.

21b. Drop

22. Scroll down and type the Feedback that you want the user to see if they select part of the image without any assigned hotspots.

23. Scroll down and uncheck Show feedback as popup if you want feedback to appear at the bottom of the image instead of as a popup over the image. We will leave this checked in the tutorial.

24. Optional: Scroll down and select appropriate Discipline

25. Optional: Scroll up and add tags

26. Click Metadata

27. Select preferred License. See UBC Creative Commons for help selecting a license.

28. Click Save metadata

29. Click Create

30. Click highlight to test functionality of incorrect hotspot

31. Click Retry

32. Click highlight to test functionality of correct hotspot

33. Click Close

34. If all works as expected, click Embed. If you need to make changes, click Edit at the top to update your question.

35. Copy the Embed code and paste it wherever you want it to appear. Click close.

That’s it – you’re done!