{"id":365,"date":"2022-02-16T18:32:36","date_gmt":"2022-02-17T01:32:36","guid":{"rendered":"https:\/\/blogs.ubc.ca\/h5psymposium\/?page_id=365"},"modified":"2022-02-21T23:15:13","modified_gmt":"2022-02-22T06:15:13","slug":"studio-session-getting-started-w-h5p","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/","title":{"rendered":"Studio Session \u2013 Getting Started w\/ H5P"},"content":{"rendered":"\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vQD7QXz7mydsyqO-AZ4fFQf6e1FUY1mUsrBZg89B7ACdxDguafsI651xdiMKZ2tZaBEoHmEdvhlNTyt\/embed?start=false&amp;loop=false&amp;delayms=3000\" frameborder=\"0\" width=\"960\" height=\"569\" allowfullscreen=\"true\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h2 id=\"at-3650\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Accessing H5P<\/h2><div id=\"ac-3650\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\"><strong>UBC Open H5P Hub<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/h5p.open.ubc.ca\">https:\/\/h5p.open.ubc.ca<\/a><br><\/p>\n <iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1912870\/UBC-H5P-Hub---Login?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; border-bottom: 1px solid #ccc;\" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>H5P.COM<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/h5p.com\">https:\/\/h5p.com<\/a><br><\/p>\n<iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1913469\/H5P-com---How-to-set-up-your-account-and-login?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; border-bottom: 1px solid #ccc;\" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h2 id=\"at-3651\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Multiple Choice Style Questions<\/h2><div id=\"ac-3651\" class=\"c-accordion__content\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison-1024x417.png\" alt=\"\" class=\"wp-image-385\" srcset=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison-1024x417.png 1024w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison-300x122.png 300w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison-768x313.png 768w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison-1536x626.png 1536w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison-620x253.png 620w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Multiple-choice-style-comparison.png 1956w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-multiple-choice-style-questions\/\" data-type=\"URL\" data-id=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-multiple-choice-style-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Examples of multiple choice style questions<\/a><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-3652\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Resources: Multiple Choice<\/em><\/h3><div id=\"ac-3652\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">We will work together to recreate the question below:<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/h5p.open.ubc.ca\/wp-admin\/admin-ajax.php?action=h5p_embed&amp;id=150\" width=\"958\" height=\"311\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Multiple Choice Example - H5P Symposium\"><\/iframe><script src=\"https:\/\/h5p.open.ubc.ca\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Image<\/strong><\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-d7b36207-7064-45d1-b72b-40189e7a2fb2\" href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-1.png\">MCQ_image<\/a><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-1.png\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-d7b36207-7064-45d1-b72b-40189e7a2fb2\">Download<\/a><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-1024x453.png\" alt=\"\" class=\"wp-image-429\" srcset=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-1024x453.png 1024w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-300x133.png 300w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-768x340.png 768w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample-620x274.png 620w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/MCQ-sample.png 1411w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><br><em>Alternative text: <\/em>Green circle surrounding coding symbol; Red no symbol over dollar sign; WordPress logo; Open Source logo<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Question:<\/strong> Which of the following statements is \/ are&nbsp;<strong>TRUE&nbsp;<\/strong>of H5P?&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 1 (correct):<\/strong> H5P is open-source.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tip: <\/em>Open-source means that you are free to copy, study, and change the code to suit your needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected:<\/em> H5P is open-source which means that you are free to copy, study, and change the code to suit your needs.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 2 (correct): <\/strong>H5P is free.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected: <\/em>Yes! If you are able to host it on a server, H5P is completely free.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 3 (incorrect): <\/strong>H5P only works on WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected: <\/em>H5P works across a variety of platforms including WordPress, Canvas, Moodle, Drupal, Brightspace and Blackboard<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 4 (incorrect): <\/strong>H5P requires you to know how to code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected: <\/em>H5P stands for HTML 5 Package. Although H5P is based in HTML 5, you do not need to know how to code in order to make use of H5P.&nbsp;<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-3653\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Resources: Question Set<\/em><\/h3><div id=\"ac-3653\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">We will work together to recreate the question below<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/h5p.open.ubc.ca\/wp-admin\/admin-ajax.php?action=h5p_embed&amp;id=151\" width=\"958\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Question Set Example - H5P Symposium\"><\/iframe><script src=\"https:\/\/h5p.open.ubc.ca\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Question 1:<\/strong> How many H5P content types are there?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 1 (incorrect): <\/strong>15<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tip: <\/em>All content types are listed at h5p.org<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected:<\/em> There are more than 15 content types. Try again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 2 (incorrect): <\/strong>32<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected: <\/em>There are more than 32 content types. Try again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 3 (correct): <\/strong>49 <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Feedback if selected: <\/em>Yes! Currently there are 49 content types but more are added frequently.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-3654\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Review<\/em><\/h3><div id=\"ac-3654\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">How to create Multiple Choice elements (guided walkthrough)<\/p>\n\n\n\n<div style=\"max-width: 100%; width: 800px; margin: 0 auto;\"> <div style=\"display: none;\"> <p style=\"display: none; text-align: center; margin-top: 10px;\"> <i style=\"font-style: italic; font-weight: bold; color: #CCCCCC; font-size: 18px;\">69 STEPS<\/i> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 1. Navigate to an <b style=\"font-weight:normal;color:#FF00D6\">H5P Authoring Tool<\/b> (for example, <a target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/h5p.open.ubc.ca\/\">h5p.open.ubc.ca<\/a>) and type in <b style=\"font-weight:normal;color:#FF00D6\">Search for Content Types<br><\/b>or scroll to find <b style=\"font-weight:normal;color:#FF00D6\">Multiple Choice<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=1&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 1 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 2. Click <b style=\"font-weight:normal;color:#FF00D6\">Multiple Choice<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=2&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 2 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 3. Optional: Click <b style=\"font-weight:normal;color:#FF00D6\">Tutorial <\/b>to navigate to a tutorial for this question type on h5p.org. A tutorial link is available for each content type. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=3&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 3 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 4. The <b style=\"font-weight:normal;color:#FF00D6\">h5p.org tutorial<\/b> will guide you through this content type. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=4&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 4 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 5. Optional: Click <b style=\"font-weight:normal;color:#FF00D6\">Example <\/b>to see a completed h5p element for this content type on h5p.org. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=5&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 5 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 6. This <b style=\"font-weight:normal;color:#FF00D6\">Multiple Choice <\/b>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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=6&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 6 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 7. Return to <b style=\"font-weight:normal;color:#FF00D6\">h5p.open.ubc.ca<\/b> and add a <b style=\"font-weight:normal;color:#FF00D6\">Title<\/b>. <br>This title will be visible in your h5p library and question metadata. It is not displayed to the user as part of the question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=7&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 7 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 8. Optional: Click <b style=\"font-weight:normal;color:#FF00D6\">Media <\/b>if you want to add an image or video at the top of your question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=8&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 8 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 9. Select <b style=\"font-weight:normal;color:#FF00D6\">Image <\/b>or <b style=\"font-weight:normal;color:#FF00D6\">Video <\/b>if desired. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=9&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 9 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 10. Click <b style=\"font-weight:normal;color:#FF00D6\">Add <\/b>and select the appropriate file. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=10&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 10 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 11. Recommended: Click <b style=\"font-weight:normal;color:#FF00D6\">Metadata.<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=11&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 11 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 12. Add a <b style=\"font-weight:normal;color:#FF00D6\">Title <\/b>for your image. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=12&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 12 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 13. Select a <b style=\"font-weight:normal;color:#FF00D6\">License<\/b>.<br>For help choosing a license, see <a href=\"https:\/\/copyright.ubc.ca\/creative-commons\/\">copyright.ubc.ca\/creative-commons<\/a> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=13&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 13 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 14. Click <b style=\"font-weight:normal;color:#FF00D6\">Save metadata.<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=14&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 14 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 15. Add <b style=\"font-weight:normal;color:#FF00D6\">Alternative text<\/b>. A good image description here is important for accessibility. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=15&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 15 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 16. Scroll down and add your <b style=\"font-weight:normal;color:#FF00D6\">Question <\/b>as you want it to appear to the user. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=16&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 16 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 17. Type in an answer <b style=\"font-weight:normal;color:#FF00D6\">Option <\/b>as you want it to appear to the user. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=17&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 17 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 18. Check <b style=\"font-weight:normal;color:#FF00D6\">Correct <\/b>if you want to mark this as a correct answer. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=18&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 18 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 19. Optional: Click <b style=\"font-weight:normal;color:#FF00D6\">Tips and feedback <\/b>to add tips or feedback for this answer option. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=19&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 19 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 20. Optional: Type <b style=\"font-weight:normal;color:#FF00D6\">Tip text <\/b>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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=20&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 20 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 21. Recommended: Add <b style=\"font-weight:normal;color:#FF00D6\">Feedback <\/b>that will appear to the user after checking their answers if they select this option.<br>For tips on how to give good feedback, see the OpenEd Kitchen&#8217;s <a href=\"https:\/\/kitchen.opened.ca\/2020\/07\/06\/focus-on-formative-feedback\/\">Focus on Formative Feedback<\/a>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=21&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 21 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 22. Optional: Add <b style=\"font-weight:normal;color:#FF00D6\">Feedback <\/b>that will appear to the user after checking their answers if they do not select this option. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=22&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 22 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 23. Scroll down and add another answer <b style=\"font-weight:normal;color:#FF00D6\">Option<\/b>. Leave &#8220;Correct&#8221; unchecked if this is not a correct answer. Add tips and\/or feedback as above. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=23&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 23 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 24. Scroll down and click <b style=\"font-weight:normal;color:#FF00D6\">Add option <\/b>to add more answer options as needed. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=24&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 24 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 25. Add text for a third answer <b style=\"font-weight:normal;color:#FF00D6\">Option<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=25&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 25 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 26. Check <b style=\"font-weight:normal;color:#FF00D6\">Correct <\/b>to mark this as a second correct answer. Add tips and\/or feedback as above if desired. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=26&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 26 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 27. Optional: Scroll down to <b style=\"font-weight:normal;color:#FF00D6\">Overall Feedback <\/b>and click <b style=\"font-weight:normal;color:#FF00D6\">Add Range<\/b>. You can set different overall feedback for each defined score range. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=27&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 27 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 28. Once you have as many score ranges as you desire, click <b style=\"font-weight:normal;color:#FF00D6\">Distribute Evenly <\/b>if you would like the ranges to be evenly distributed. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=28&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 28 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 29. Add <b style=\"font-weight:normal;color:#FF00D6\">Overall feedback <\/b>for each defined score range. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=29&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 29 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 30. Recommended: Scroll down and expand <b style=\"font-weight:normal;color:#FF00D6\">Behavioural settings <\/b>to review and change default behavioural settings. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=30&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 30 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 31. Scroll to <b style=\"font-weight:normal;color:#FF00D6\">Enable &#8220;Retry&#8221; button<\/b>. <br>Keep checked if you want students to be able to try question again until they get it right.<br>Uncheck if single attempt is important, such as embedding in an interactive video with branching based on answer. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=31&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 31 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 32. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Enable &#8220;Show Solution&#8221; button<\/b>.<br>Keep checked if you want students to be able to view the solution.<br>Uncheck to encourage retry or if you do not want to reveal the answer. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=32&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 32 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 33. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Question Type <\/b>to select if answer options appear as checkboxes or radio buttons. Recommend to keep selection as <b style=\"font-weight:normal;color:#FF00D6\">Automatic<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=33&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 33 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 34. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Give one point for the whole task<\/b>.<br>Keep unchecked to keep the default where each correct answer option is +1 and each incorrect answer is -1.<br>Check this box to instead have all or nothing marking using threshold set by pass percentage below <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=34&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 34 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 35. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Randomize answers<\/b>.<br>Uncheck this box if you want the answer options to appear in the same order you added them. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=35&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 35 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 36. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Require answer before the solution can be viewed<\/b>.<br>Recommendation: Keep this box checked so that users must attempt an answer before viewing the solution. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=36&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 36 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 37. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Show confirmation dialog on &#8220;Check&#8221;<\/b>.<br>If you check this box, users will receive a &#8220;Are you sure you want to finish?&#8221; popup when they submit their answer by clicking &#8220;Check&#8221;. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=37&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 37 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 38. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Show confirmation dialog on &#8220;Retry&#8221;<\/b>.<br>If you check this box, users will receive a &#8220;Are you sure you want to retry?&#8221; popup when they click &#8220;Retry&#8221;. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=38&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 38 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 39. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Automatically check answers<\/b>.<br>If checked, users would receive correct\/incorrect feedback immediately when selecting answers rather than after selecting &#8220;Check&#8221;.<br>Recommendation: Keep this box unchecked to maintain accessibility. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=39&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 39 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 40. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Pass percentage<\/b>. If you checked the :Give one point for the whole task&#8221; box, set the percentage required on the question for the user to receive 1 point (full credit). <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=40&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 40 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 41. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Show score points<\/b>.<br>Recommendation: Keep this box checked to help users understand positive scoring for correct answers and negative scoring for incorrect answers. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=41&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 41 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 42. Optional and usually not necessary: Scroll down and click to expand <b style=\"font-weight:normal;color:#FF00D6\">Text overrides and translations<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=42&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 42 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 43. Click to expand <b style=\"font-weight:normal;color:#FF00D6\">Multiple Choice<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=43&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 43 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 44. Click to expand <b style=\"font-weight:normal;color:#FF00D6\">Check<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=44&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 44 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 45. Change any default text, if desired. For example, you could change <b style=\"font-weight:normal;color:#FF00D6\">Retry button label <\/b>to Try Again. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=45&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 45 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 46. Optional: If included on your authoring platform, scroll down and edit default <b style=\"font-weight:normal;color:#FF00D6\">Faculty <\/b>if necessary. This is helpful for organization and admin support. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=46&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 46 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 47. Optional: If included on your authoring platform, scroll down and add a relevant <b style=\"font-weight:normal;color:#FF00D6\">Discipline<\/b>. This is helpful for organization if you may share your question to a database. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=47&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 47 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 48. Recommended: Scroll up and add <b style=\"font-weight:normal;color:#FF00D6\">tags<\/b>. Tags will appear in your h5p content library and are useful for organization and searching. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=48&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 48 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 49. Click <b style=\"font-weight:normal;color:#FF00D6\">Metadata<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=49&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 49 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 50. Select a <b style=\"font-weight:normal;color:#FF00D6\">License<\/b>.<br>For help choosing a license, see <a target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/copyright.ubc.ca\/creative-commons\/\">copyright.ubc.ca\/creative-commons<\/a>.<br>Edit other metadata as desired. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=50&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 50 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 51. Click <b style=\"font-weight:normal;color:#FF00D6\">Save metadata<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=51&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 51 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 52. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Display Options<\/b>. 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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=52&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 52 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 53. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Allow users to download content<\/b>. 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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=53&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 53 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 54. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Display Embed button<\/b>. 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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=54&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 54 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 55. Navigate to <b style=\"font-weight:normal;color:#FF00D6\">Display Copyright button<\/b>. Keep checked to allow users to view the metadata such as title, author, and license details for your content. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=55&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 55 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 56. Click <b style=\"font-weight:normal;color:#FF00D6\">Create<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=56&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 56 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 57. Try <b style=\"font-weight:normal;color:#FF00D6\">question <\/b>to confirm that everything works as expected. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=57&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 57 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 58. If you need to make any changes, click <b style=\"font-weight:normal;color:#FF00D6\">Edit<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=58&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 58 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 59. Make any desired changes then click <b style=\"font-weight:normal;color:#FF00D6\">Update<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=59&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 59 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 60. Click <b style=\"font-weight:normal;color:#FF00D6\">Embed<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=60&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 60 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 61. Copy <b style=\"font-weight:normal;color:#FF00D6\">Embed code<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=61&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 61 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 62. Embed your content wherever you would like it to appear.<br><br>Example 1 (Canvas Insert): Click <b style=\"font-weight:normal;color:#FF00D6\">Edit<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=62&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 62 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 63. Scroll down and click <b style=\"font-weight:normal;color:#FF00D6\">Insert<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=63&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 63 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 64. Click <b style=\"font-weight:normal;color:#FF00D6\">Embed<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=64&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 64 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 65. Paste your embed code and click <b style=\"font-weight:normal;color:#FF00D6\">Submit<\/b>. Your question will be embedded on your Canvas page. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=65&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 65 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 66. Example 2 (html): <b style=\"font-weight:normal;color:#FF00D6\">Switch to the html editor<\/b>, for example in Canvas or WordPress. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=66&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 66 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 67. Find the location where you want your h5p content to appear and paste the iframe <b style=\"font-weight:normal;color:#FF00D6\">Embed code<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=67&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 67 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 68. Scroll down and click <b style=\"font-weight:normal;color:#FF00D6\">Save<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=68&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 68 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 69. That&#8217;s it &#8211; you&#8217;re done! <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1914568&amp;step_number=69&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 69 image\"> <\/p> <\/div> <\/div> <h3 style=\"display: none; font-size: 18px; margin-top: 89px; margin-bottom: 15px;\"> Here&#8217;s an interactive tutorial <\/h3> <i style=\"display: none; font-size: 15px; margin-top: 0; margin-bottom: 43px;\">** Best experienced in Full Screen (click the icon in the top right corner before you begin) **<\/i> <p style=\"display: none;\"> <a href=\"https:\/\/www.iorad.com\/player\/1914568\/Multiple-Choice-H5P-Guide---Detailed\">https:\/\/www.iorad.com\/player\/1914568\/Multiple-Choice-H5P-Guide&#8212;Detailed<\/a> <\/p> <p style=\"border: 0; min-width: 100%; margin-bottom: 0; height: 501px;\"> <iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1914568\/Multiple-Choice-H5P-Guide---Detailed?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; \" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe> <\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">How to create Question Set (Quiz) elements (guided walkthrough)<\/p>\n\n\n\n<div style=\"max-width: 100%; width: 800px; margin: 0 auto;\"> <div style=\"display: none;\"> <p style=\"display: none; text-align: center; margin-top: 10px;\"> <i style=\"font-style: italic; font-weight: bold; color: #CCCCCC; font-size: 18px;\">34 STEPS<\/i> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 1. Navigate to the <b style=\"font-weight:normal;color:#FF00D6\">H5P Hub<\/b> on your preferred H5P Authoring tool and click <b style=\"font-weight:normal;color:#FF00D6\">Quiz (Question Set)<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=1&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 1 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 2. Add a <b style=\"font-weight:normal;color:#FF00D6\">Title <\/b>(not displayed as part of the question) <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=2&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 2 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 3. Optional: Click <b style=\"font-weight:normal;color:#FF00D6\">Quiz introduction <\/b>to add an introduction. Skip ahead if you do not want an introductory slide skip forward to step 7. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=3&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 3 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 4. Click <b style=\"font-weight:normal;color:#FF00D6\">Display introduction <\/b>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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=4&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 4 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 5. Add a <b style=\"font-weight:normal;color:#FF00D6\">Title <\/b>to be displayed on the introductory slide <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=5&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 5 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 6. Add <b style=\"font-weight:normal;color:#FF00D6\">Introduction text <\/b>to be displayed on the introductory slide. Scroll down and add an introductory image if desired. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=6&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 6 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 7. Add a <b style=\"font-weight:normal;color:#FF00D6\">background image<\/b> if desired. We will not add an image here. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=7&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 7 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 8. Choose whether you want question <b style=\"font-weight:normal;color:#FF00D6\">Progress<\/b> to be shown as <b style=\"font-weight:normal;color:#FF00D6\">Dots <\/b>or <b style=\"font-weight:normal;color:#FF00D6\">Text<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=8&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 8 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 9. Change <b style=\"font-weight:normal;color:#FF00D6\">Pass percentage <\/b>if desired <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=9&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 9 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 10. Select <b style=\"font-weight:normal;color:#FF00D6\">Question type<\/b> for the first question. Here we will start with <b style=\"font-weight:normal;color:#FF00D6\">Multiple Choice<\/b>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=10&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 10 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 11. Create a multiple choice question as normal, or Click <b style=\"font-weight:normal;color:#FF00D6\">Textual <\/b>to access the rapid text authoring tool. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=11&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 11 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 12. Type <b style=\"font-weight:normal;color:#FF00D6\">Questions and answers<\/b> following the format<br>Question<br>*Correct:tip:feedback if selected:feedback if not selected<br>Incorrect 1<br>Incorrect 2 <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=12&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 12 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 13. Click <b style=\"font-weight:normal;color:#FF00D6\">Default <\/b>to return to standard question authoring tool <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=13&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 13 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 14. The text-authored question has been inserted. Click <b style=\"font-weight:normal;color:#FF00D6\">Add Question <\/b>to add the next question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=14&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 14 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 15. Click <b style=\"font-weight:normal;color:#FF00D6\">dropdown <\/b>menu to select <b style=\"font-weight:normal;color:#FF00D6\">question type<\/b> for next question. Instead of authoring the next question here we will demonstrate how to copy-paste a previously authored question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=15&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 15 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 16. Navigate to the question you want to copy (for example, Click <b style=\"font-weight:normal;color:#FF00D6\">My H5P Content <\/b>and open the question you want to copy). <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=16&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 16 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 17. Click <b style=\"font-weight:normal;color:#FF00D6\">Copy<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=17&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 17 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 18. Return to <b style=\"font-weight:normal;color:#FF00D6\">Quiz (Question Set)<\/b> and click <b style=\"font-weight:normal;color:#FF00D6\">Paste <\/b>at the top of the Question 2 tab. Your question will be copied. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=18&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 18 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 19. Optional: Scroll down and check <b style=\"font-weight:normal;color:#FF00D6\">Disable backwards navigation <\/b>if you only want users to be able to progress forward through questions. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=19&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 19 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 20. Click <b style=\"font-weight:normal;color:#FF00D6\">Randomize questions <\/b>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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=20&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 20 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 21. If you want a subset of the full number of questions available to be displayed, enter the <b style=\"font-weight:normal;color:#FF00D6\">Number of questions to be shown <\/b>here <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=21&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 21 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 22. Scroll down and click <b style=\"font-weight:normal;color:#FF00D6\">Finished<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=22&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 22 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 23. Change any <b style=\"font-weight:normal;color:#FF00D6\">default settings<\/b> if desired <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=23&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 23 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 24. Scroll down and click <b style=\"font-weight:normal;color:#FF00D6\">Add file <\/b>under <b style=\"font-weight:normal;color:#FF00D6\">Passed video<\/b> and\/or <b style=\"font-weight:normal;color:#FF00D6\">Fail video<\/b> if you want users to view a video after the quiz based on their results. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=24&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 24 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 25. Optional: Select <b style=\"font-weight:normal;color:#FF00D6\">Discipline <\/b>if desired <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=25&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 25 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 26. Scroll up and add <b style=\"font-weight:normal;color:#FF00D6\">tags <\/b>for organization <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=26&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 26 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 27. Click <b style=\"font-weight:normal;color:#FF00D6\">Metadata<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=27&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 27 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 28. Click the dropdown menu under <b style=\"font-weight:normal;color:#FF00D6\">License<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=28&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 28 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 29. Select <b style=\"font-weight:normal;color:#FF00D6\">Preferred License<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=29&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 29 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 30. Click <b style=\"font-weight:normal;color:#FF00D6\">Save metadata<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=30&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 30 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 31. Click <b style=\"font-weight:normal;color:#FF00D6\">Create<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=31&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 31 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 32. If all functions as desired, click <b style=\"font-weight:normal;color:#FF00D6\">Embed<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=32&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 32 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 33. Copy the <b style=\"font-weight:normal;color:#FF00D6\">embed code<\/b> and paste it in an html editor where you want the content to display. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=33&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 33 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 34. That&#8217;s it. You&#8217;re done. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1920007&amp;step_number=34&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 34 image\"> <\/p> <\/div> <\/div> <h3 style=\"display: none; font-size: 18px; margin-top: 89px; margin-bottom: 15px;\"> Here&#8217;s an interactive tutorial <\/h3> <i style=\"display: none; font-size: 15px; margin-top: 0; margin-bottom: 43px;\">** Best experienced in Full Screen (click the icon in the top right corner before you begin) **<\/i> <p style=\"display: none;\"> <a href=\"https:\/\/www.iorad.com\/player\/1920007\/H5P---Quiz--Question-Set--Guide\">https:\/\/www.iorad.com\/player\/1920007\/H5P&#8212;Quiz&#8211;Question-Set&#8211;Guide<\/a> <\/p> <p style=\"border: 0; min-width: 100%; margin-bottom: 0; height: 501px;\"> <iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1920007\/H5P---Quiz--Question-Set--Guide?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; \" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe> <\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h2 id=\"at-3655\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Short Answer Style Questions<\/h2><div id=\"ac-3655\" class=\"c-accordion__content\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"414\" src=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison-1024x414.png\" alt=\"\" class=\"wp-image-386\" srcset=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison-1024x414.png 1024w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison-300x121.png 300w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison-768x311.png 768w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison-1536x622.png 1536w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison-620x251.png 620w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Short-answer-style-comparison.png 1853w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-short-answer-style-questions\/\" data-type=\"URL\" data-id=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-short-answer-style-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Examples of short answer style questions<\/a><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-3656\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Resources: Fill in the Blank<\/em><\/h3><div id=\"ac-3656\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">We will work together to recreate the question below<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/h5p.open.ubc.ca\/wp-admin\/admin-ajax.php?action=h5p_embed&amp;id=154\" width=\"958\" height=\"174\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Fill in the blank example - h5p symposium\"><\/iframe><script src=\"https:\/\/h5p.open.ubc.ca\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Question:<\/strong> Note-taking is beneficial because it has benefits for both __________ and __________ information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Blank 1: <\/strong>encoding<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tip: <\/em>What is the first step in getting information into your mind?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Blank 2: <\/strong>storing<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tip:<\/em> What is the process of keeping information in memory?<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-3657\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Review<\/em><\/h3><div id=\"ac-3657\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">How to create Fill in the Blank elements (guided walkthrough)<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1914219\/Fill-in-the-Blanks-H5P-Guide?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; border-bottom: 1px solid #ccc;\" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h2 id=\"at-3658\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Hotspot Style Content and Questions<\/h2><div id=\"ac-3658\" class=\"c-accordion__content\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"398\" src=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions-1024x398.png\" alt=\"\" class=\"wp-image-387\" srcset=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions-1024x398.png 1024w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions-300x117.png 300w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions-768x298.png 768w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions-1536x597.png 1536w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions-620x241.png 620w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/Hotspot-style-content-and-questions.png 1820w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-hotspot-style-content-and-questions\/\" data-type=\"URL\" data-id=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-hotspot-style-content-and-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Examples of hotspot style content and questions<\/a><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-3659\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Resources: Find the Hotspot<\/em><\/h3><div id=\"ac-3659\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">We will work together to recreate the question below<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/h5p.open.ubc.ca\/wp-admin\/admin-ajax.php?action=h5p_embed&amp;id=156\" width=\"958\" height=\"877\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Image Hotspot Demonstration 2\"><\/iframe><script src=\"https:\/\/h5p.open.ubc.ca\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Question<\/strong>: Click on the button that allows you to set legal restrictions on who may use your H5P element and how they may use it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Image:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-d47c2936-28bf-4f85-99ff-0bd990ac4ab9\" href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/background-image-hotspot.png\">Background image<\/a><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/background-image-hotspot.png\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-d47c2936-28bf-4f85-99ff-0bd990ac4ab9\">Download<\/a><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Feedback<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Over &#8220;Metadata&#8221; (correct): <\/em>Correct. The metadata is where you set the license for your H5P content. For some of the more common license types and what they entail, see https:\/\/creativecommons.org\/licenses\/<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Over &#8220;Allow users to download the content&#8221; (incorrect):<\/em> This option allow people to download your H5P element and import it into their instance of H5P. The type of license that you set will have important implications for downloading your work. Where might you set the type of license you want to use?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Over &#8220;Display embed button&#8221; (incorrect): <\/em>The embed code allows people to copy and place your H5P element in their website \/ LMS. How \/ when you can do this is contingent on the license that you choose. Where might you choose which license you want for your H5P element?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Over &#8220;Display Copyright button&#8221; (incorrect): <\/em>Clicking on this option will display what type of license you have set for your H5P element. It is not where you choose the license type. Try again!<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-36510\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Review<\/em><\/h3><div id=\"ac-36510\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">How to create Find the Hotspot elements (guided walkthrough)<\/p>\n\n\n\n<div style=\"max-width: 100%; width: 800px; margin: 0 auto;\"> <div style=\"display: none;\"> <p style=\"display: none; text-align: center; margin-top: 10px;\"> <i style=\"font-style: italic; font-weight: bold; color: #CCCCCC; font-size: 18px;\">35 STEPS<\/i> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 1. Select <b style=\"font-weight:normal;color:#FF00D6\">Find the Hotspot <\/b>(scroll or use Search for Content Types if it is not at the top) <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=1&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 1 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 2. Add a <b style=\"font-weight:normal;color:#FF00D6\">Title<\/b> (for metadata and organization; not displayed as part of the question) <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=2&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 2 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 3. Click <b style=\"font-weight:normal;color:#FF00D6\">Add <\/b>to add the background image that your hotspots will be located on <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=3&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 3 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 4. Click <b style=\"font-weight:normal;color:#FF00D6\">Edit copyright<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=4&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 4 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 5. Add a <b style=\"font-weight:normal;color:#FF00D6\">Title <\/b>for your image. This title is used for licensing and is not displayed as part of question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=5&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 5 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 6. Add an <b style=\"font-weight:normal;color:#FF00D6\">Author <\/b>for your image. This author is used for licensing and is not displayed as part of question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=6&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 6 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 7. Scroll down and select your preferred <b style=\"font-weight:normal;color:#FF00D6\">License<\/b>. For help choosing a license, see <a href=\"https:\/\/copyright.ubc.ca\/creative-commons\/\">UBC Creative Commons<\/a>. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=7&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 7 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 8. Click <b style=\"font-weight:normal;color:#FF00D6\">close<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=8&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 8 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 9. Click <b style=\"font-weight:normal;color:#FF00D6\">Hotspots<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=9&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 9 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 10. Add a <b style=\"font-weight:normal;color:#FF00D6\">Task description <\/b>to provide instructions to the user. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=10&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 10 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 11. Scroll down and click your preferred shape to <b style=\"font-weight:normal;color:#FF00D6\">Create a hotspot<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=11&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 11 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 12. Check <b style=\"font-weight:normal;color:#FF00D6\">Correct <\/b>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 <a href=\"https:\/\/h5p.org\/find-multiple-hotspots\">Find Multiple Hotspots<\/a> for additional functionality. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=12&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 12 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 13. Add <b style=\"font-weight:normal;color:#FF00D6\">Feedback <\/b>that will appear to the user if this hotspot is selected. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=13&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 13 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 14. Click <b style=\"font-weight:normal;color:#FF00D6\">Done<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=14&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 14 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 15. With your mouse, click and drag the new <b style=\"font-weight:normal;color:#FF00D6\">hotspot<\/b>, then drop it on the <b style=\"font-weight:normal;color:#FF00D6\">desired location<\/b> (white rectangle) <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=15&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 15 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 15b. Drop <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=15b&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 15b image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 16. With your mouse, click and drag <b style=\"font-weight:normal;color:#FF00D6\">bottom corner<\/b> to resize, then <b style=\"font-weight:normal;color:#FF00D6\">drop <\/b>when it is the desired size (covering full white rectangle) <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=16&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 16 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 16b. Drop <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=16b&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 16b image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 17. Click to create another <b style=\"font-weight:normal;color:#FF00D6\">Hotspot<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=17&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 17 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 18. Leave correct unchecked to mark this as an incorrect hotspot. Type <b style=\"font-weight:normal;color:#FF00D6\">Feedback <\/b>that will appear to the user if this hotspot is selected. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=18&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 18 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 19. Click <b style=\"font-weight:normal;color:#FF00D6\">Done<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=19&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 19 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 20. With your mouse, click and drag new <b style=\"font-weight:normal;color:#FF00D6\">hotspot<\/b>, then drop it on <b style=\"font-weight:normal;color:#FF00D6\">desired location<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=20&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 20 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 20b. Drop <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=20b&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 20b image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 21. With your mouse, click and drag <b style=\"font-weight:normal;color:#FF00D6\">bottom corner<\/b> then <b style=\"font-weight:normal;color:#FF00D6\">drop<\/b> to resize. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=21&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 21 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 21b. Drop <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=21b&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 21b image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 22. Scroll down and type the <b style=\"font-weight:normal;color:#FF00D6\">Feedback <\/b>that you want the user to see if they select part of the image without any assigned hotspots. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=22&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 22 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 23. Scroll down and uncheck <b style=\"font-weight:normal;color:#FF00D6\">Show feedback as popup <\/b>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. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=23&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 23 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 24. Optional: Scroll down and select appropriate <b style=\"font-weight:normal;color:#FF00D6\">Discipline<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=24&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 24 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 25. Optional: Scroll up and add <b style=\"font-weight:normal;color:#FF00D6\">tags<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=25&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 25 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 26. Click <b style=\"font-weight:normal;color:#FF00D6\">Metadata<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=26&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 26 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 27. Select preferred <b style=\"font-weight:normal;color:#FF00D6\">License<\/b>. See <a href=\"https:\/\/copyright.ubc.ca\/creative-commons\/\">UBC Creative Commons<\/a> for help selecting a license. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=27&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 27 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 28. Click <b style=\"font-weight:normal;color:#FF00D6\">Save metadata<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=28&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 28 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 29. Click <b style=\"font-weight:normal;color:#FF00D6\">Create<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=29&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 29 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 30. Click <b style=\"font-weight:normal;color:#FF00D6\">highlight <\/b>to test functionality of incorrect hotspot <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=30&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 30 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 31. Click <b style=\"font-weight:normal;color:#FF00D6\">Retry<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=31&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 31 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 32. Click <b style=\"font-weight:normal;color:#FF00D6\">highlight <\/b>to test functionality of correct hotspot <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=32&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 32 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 33. Click <b style=\"font-weight:normal;color:#FF00D6\">Close<\/b> <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=33&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 33 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 34. If all works as expected, click <b style=\"font-weight:normal;color:#FF00D6\">Embed<\/b>. If you need to make changes, click <b style=\"font-weight:normal;color:#FF00D6\">Edit <\/b>at the top to update your question. <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=34&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 34 image\"> <\/p> <p style=\"font-size: 15px; line-height: 136%; margin-top: 59px; margin-bottom: 51px;\"> 35. Copy the <b style=\"font-weight:normal;color:#FF00D6\">Embed code <\/b>and paste it wherever you want it to appear. Click close.<br><br>That&#8217;s it &#8211; you&#8217;re done! <\/p> <p style=\"text-align: center;\"> <img decoding=\"async\" src=\"https:\/\/www.iorad.com\/api\/tutorial\/stepScreenshot?tutorial_id=1917904&amp;step_number=35&amp;width=800&amp;height=600&amp;mobile_width=450&amp;mobile_height=400&amp;apply_resize=true&amp;min_zoom=0.5\" style=\"max-width: 100%;max-height: 100%;border: none;\" alt=\"Step 35 image\"> <\/p> <\/div> <\/div> <h3 style=\"display: none; font-size: 18px; margin-top: 89px; margin-bottom: 15px;\"> Here&#8217;s an interactive tutorial <\/h3> <i style=\"display: none; font-size: 15px; margin-top: 0; margin-bottom: 43px;\">** Best experienced in Full Screen (click the icon in the top right corner before you begin) **<\/i> <p style=\"display: none;\"> <a href=\"https:\/\/www.iorad.com\/player\/1917904\/H5P---Find-the-Hotspot-Guide\">https:\/\/www.iorad.com\/player\/1917904\/H5P&#8212;Find-the-Hotspot-Guide<\/a> <\/p> <p style=\"border: 0; min-width: 100%; margin-bottom: 0; height: 501px;\"> <iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1917904\/H5P---Find-the-Hotspot-Guide?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; \" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe> <\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h2 id=\"at-36511\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Card Style Questions<\/h2><div id=\"ac-36511\" class=\"c-accordion__content\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"244\" src=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2-1024x244.png\" alt=\"\" class=\"wp-image-484\" srcset=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2-1024x244.png 1024w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2-300x72.png 300w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2-768x183.png 768w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2-1536x366.png 1536w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2-620x148.png 620w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/card-style-comparison-2.png 1833w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-card-style-questions\/\" data-type=\"URL\" data-id=\"https:\/\/blogs.ubc.ca\/h5psymposium\/resources\/studio-session-getting-started-w-h5p\/examples-of-card-style-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Examples of card style questions<\/a><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-36512\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Resources<\/em><\/h3><div id=\"ac-36512\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">We will work together to recreate the flashcard set below<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/h5p.open.ubc.ca\/wp-admin\/admin-ajax.php?action=h5p_embed&amp;id=146\" width=\"1918\" height=\"854\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Flash Cards Demonstration\"><\/iframe><script src=\"https:\/\/h5p.open.ubc.ca\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Flashcard 1:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Image:<\/em><\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-0170419f-3699-4518-901b-fa1a59f07e84\" href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/download.jpeg\">flashcard_image<\/a><a href=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2022\/02\/download.jpeg\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-0170419f-3699-4518-901b-fa1a59f07e84\">Download<\/a><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Metadata: ds_30, soft-4875297_1920, https:\/\/pixabay.com\/photos\/soft-toy-blank-childhood-toys-4875297\/ <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Question: <\/em>Recalling information from memory is known as _____________________ practice.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Answer: <\/em>retrieval<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Flashcard 2:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Question: <\/em>What is the most popular study technique used by students?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Answer: <\/em>rereading<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-pb-accordion-item c-accordion__item js-accordion-item no-js\" data-initially-open=\"false\" data-click-to-close=\"true\" data-auto-close=\"true\" data-scroll=\"false\" data-scroll-offset=\"0\"><h3 id=\"at-36513\" class=\"c-accordion__title js-accordion-controller\" role=\"button\"><em>Review<\/em><\/h3><div id=\"ac-36513\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">How to create Flashcard elements (guided walkthrough)<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.iorad.com\/player\/1919894\/H5P---Flashcard-guide?src=iframe&amp;oembed=1\" width=\"100%\" height=\"500px\" style=\"width: 100%; height: 500px; border-bottom: 1px solid #ccc;\" referrerpolicy=\"strict-origin-when-cross-origin\" frameborder=\"0\" webkitallowfullscreen=\"webkitallowfullscreen\" mozallowfullscreen=\"mozallowfullscreen\" allowfullscreen=\"allowfullscreen\" allow=\"camera; microphone\"><\/iframe>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2538,"featured_media":0,"parent":186,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"template-full-width.php","meta":{"footnotes":""},"class_list":["post-365","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/users\/2538"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":27,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/365\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/365\/revisions\/496"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/186"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/media?parent=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}