{"id":42,"date":"2024-02-01T11:13:46","date_gmt":"2024-02-01T18:13:46","guid":{"rendered":"https:\/\/blogs.ubc.ca\/h5pflo\/?page_id=42"},"modified":"2024-02-13T14:56:45","modified_gmt":"2024-02-13T21:56:45","slug":"question-set","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/h5pflo\/question-set\/","title":{"rendered":"Question Set"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>This example has been adapted from a&nbsp;<a href=\"https:\/\/h5p.org\/tutorial-question-set\">tutorial on H5P.org<\/a><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this demonstration, we will walk through the creation of a Question Set content type. This is how it will appear:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/pressbooks.bccampus.ca\/17jcheng\/wp-admin\/admin-ajax.php?action=h5p_embed&#038;id=3\" width=\"811\" height=\"674\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Question set\"><\/iframe><script src=\"https:\/\/pressbooks.bccampus.ca\/17jcheng\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Use Cases<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Question sets serve as a valuable tool for structuring a series of related problems for learners to tackle as a cohesive unit, rather than presenting them as separate challenges.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Question sets are particularly useful for evaluating a learner&#8217;s grasp of fundamental concepts within a complex learning module. They are suitable for applications like end-of-chapter assessments or summative course exams. Within Question sets, you can incorporate diverse quiz types, such as Multiple Choice, Fill in the Blanks, and Drag and Drop questions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s important to note that Question sets are designed to be used standalone, offering a focused and comprehensive approach to assessing and reinforcing learning outcomes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Topic<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The topic for this demonstration will be berries and will use various wikis to source our content.  In this demonstration, we will be creating multiple-choice, drag and drop and fill-in-the-blank style questions to build one question set.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Creating a Question Set<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you are using Pressbooks, navigate to the&nbsp;<strong>H5P menu<\/strong>&nbsp;on the left sidebar and click&nbsp;<strong>Add new<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"864\" height=\"602\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1.png\" alt=\"On Pressbooks, navigate to the H5P menu on the left sidebar. Select 'Add new' \" class=\"wp-image-61\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1.png 864w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1-300x209.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1-768x535.png 768w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Search for Question Set and select <strong>Details<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are using H5P.com, you will be prompted to <strong>Create New Content<\/strong>.  Search for Question Set and click <strong>Details<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-29-1024x389.png\" alt=\"Search for Question Set and select Details\" class=\"wp-image-141\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-29-1024x389.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-29-300x114.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-29-768x292.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-29.png 1484w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select <strong>Use<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"785\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-30-1024x785.png\" alt=\"Select Use\" class=\"wp-image-143\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-30-1024x785.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-30-300x230.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-30-768x589.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-30.png 1484w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Title and Quiz Set editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enter a unique <strong>Title<\/strong> for your Question Set. This title will be used to distinguish other H5P Question Sets and content types you create.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, let&#8217;s use the title <strong><em>Berries<\/em><\/strong> <strong><em>&#8211; Quiz Set<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Question set editor appears as this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"825\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-31-825x1024.png\" alt=\"Question set editor\" class=\"wp-image-144\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-31-825x1024.png 825w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-31-242x300.png 242w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-31-768x954.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-31-1237x1536.png 1237w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-31.png 1440w\" sizes=\"auto, (max-width: 825px) 100vw, 825px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The top part of the<strong>&nbsp;Question set&nbsp;<\/strong>editor consists of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>General settings at the top including&nbsp;<strong>Background image<\/strong>,&nbsp;<strong>Progress<\/strong>&nbsp;<strong>indicator,<\/strong>&nbsp;and&nbsp;<strong>Pass<\/strong>&nbsp;<strong>percentage<\/strong><\/li>\n\n\n\n<li>A&nbsp;<strong>Questions<\/strong>&nbsp;sections in the middle, where we add the various quiz tasks<\/li>\n\n\n\n<li>Customizable text fields at the bottom, including&nbsp;<strong>Quiz introduction<\/strong>&nbsp;and&nbsp;<strong>Quiz finished: Your result:<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Background image<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can add a&nbsp;<strong>Background image<\/strong>&nbsp;that is displayed behind the various quiz tasks included in your&nbsp;<strong>Question set<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s use this background image of raspberries found through Wikimedia.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Three_Raspberries.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">raspberries<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you click on the link above, it will open into a new window. Right-click the image and save it onto your computer.  Note the license information and URL for each image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select <strong>+Add <\/strong>and upload the raspberries file from where you saved it on your computer. Add any copyright information to the image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Progress indicator<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose between a textual indicator and dots. We&#8217;ll use&nbsp;<strong>Textual<\/strong>&nbsp;in this tutorial:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/02_12.png\" alt=\"Progress indicator image\" style=\"width:442px;height:auto\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Pass Percentage<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here you define the percentage of points the learner will need to achieve in order to pass the&nbsp;<strong>Question set<\/strong>. More about score points later in this demonstration. We&#8217;ll set this to 80 for now:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/03_8.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"guides-header-8\">Step 7: Questions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here, we&#8217;ll add the actual questions that the Question set consists of. In this demonstration, we&#8217;ll add three quiz questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Multichoice question<\/li>\n\n\n\n<li>A Drag and drop question<\/li>\n\n\n\n<li>A Fill in the blanks<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When the&nbsp;<strong>Question set<\/strong>&nbsp;editor is launched, only one undefined question type is displayed below the&nbsp;<strong>Questions<\/strong>&nbsp;header:<\/p>\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-420\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Step 8: Add Multiple Choice Question<\/h3><div id=\"ac-420\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">In the&nbsp;<strong>Question type<\/strong>&nbsp;dropdown, select a&nbsp;<strong>Multiple Choice question<\/strong>. This will load the&nbsp;<strong>Multiple Choice question<\/strong>&nbsp;editor:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the following text to populate the Multiple choice question editor. This example is sourced from the original <a href=\"https:\/\/h5p.org\/tutorial-multichoice-question\">H5P.org Multichoice Tutorial<\/a>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Title:<\/strong> What color does the blackcurrant berry actually have?<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Question<\/em><\/strong>: <em>What color does the blackcurrant berry actually have?<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Available <strong>Options<\/strong>. Click <strong>Add Option<\/strong> to add more options in the editor:<\/em><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><em>Very dark purple<\/em><\/li>\n\n\n\n<li><em>Dark blue<\/em><\/li>\n\n\n\n<li><em>Black<\/em>&nbsp;<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Mark the check next to the <strong>Correct <\/strong>checkbox for Very dark purple<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the Overall Feedback panel below, use the following criteria:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Score Range: <em>0%-0%<\/em>; Feedback for defined score range: <em>Wrong!<\/em><\/li>\n\n\n\n<li>Score Range: 1?%-99%; Feedback for defined score range: Almost!<\/li>\n\n\n\n<li>Score Range: 100%-100%; Feedback for defined score range: Correct!<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Also, review any of the <strong>Behavioural settings<\/strong> to configure any specific details about how this Multiple Choice question should appear to the user.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should by now have something like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33-498x1024.png\" alt=\"Multiple Choice question editor populated with question and answer options\" class=\"wp-image-148\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33-498x1024.png 498w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33-146x300.png 146w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33-768x1578.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33-747x1536.png 747w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33-997x2048.png 997w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-33.png 1362w\" sizes=\"auto, (max-width: 498px) 100vw, 498px\" \/><\/figure>\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-421\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Step 9: Add Drag and Drop Question<\/h3><div id=\"ac-421\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">Press the&nbsp;<strong>Add question<\/strong>&nbsp;button to add another question to the&nbsp;<strong>Question set<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"151\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-1024x151.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-1024x151.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-300x44.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-768x113.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This time, we&#8217;ll choose&nbsp;<strong>Drag and drop question<\/strong>&nbsp;from the dropdown menu. The&nbsp;<strong>Drag and drop question&nbsp;<\/strong>editor will now appear.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9a: Title and Drag and Drop editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enter a unique <strong>Title<\/strong> for your Drag and Drop. This title will be used to distinguish other H5P Quiz Sets and content types you create.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, let&#8217;s use the title <strong><em>Strawberry<\/em><\/strong> <strong><em>&#8211; Drag and Drop<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Drag and Drop editor appears as this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-34-1024x572.png\" alt=\"Drag and Drop Editor with Settings and Task Tabs\" class=\"wp-image-152\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-34-1024x572.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-34-300x168.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-34-768x429.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-34-1536x858.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-34.png 1580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There are two steps in creating a Drag and drop question:&nbsp;<strong>Settings&nbsp;<\/strong>and&nbsp;<strong>Task<\/strong>. You can press the&nbsp;<strong>Settings<\/strong>&nbsp;and&nbsp;<strong>Task<\/strong>&nbsp;tabs at the top of the editor at any time to navigate between the views.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9b: Drag and Drop Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Settings<\/strong>&nbsp;deals with general settings such as background image and size.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s use this background image of a strawberry found through Wikimedia.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Half_a_strawberry.jpg\">strawberry<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you click on the link above, it will open into a new window. Right-click the image and save it onto your computer.  Note the license information and URL for each image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select <strong>+Add <\/strong>and upload the raspberries file from where you saved it on your computer. Add any copyright information to the image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we&#8217;ve added a background image, I can define the&nbsp;<strong>size<\/strong>&nbsp;of the Drag and drop question. &nbsp;Since the image has a width of 800 px and a height of 532 px, I&#8217;ll use this size for the task.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"195\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-35.png\" alt=\"Task Size is set to 800px x 532px\" class=\"wp-image-155\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-35.png 552w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-35-300x106.png 300w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Since we want learners to be able to try to solve the Drag and drop question multiple times, as opposed to only have one go, we&#8217;ll check the&nbsp;<strong>Enable &#8220;Retry&#8221;<\/strong>&nbsp;option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>Give one point for the whole task<\/strong>&nbsp;option is more relevant when we add Drag and drop question to&nbsp;<a href=\"https:\/\/h5p.org\/question-set\" target=\"_blank\" rel=\"noreferrer noopener\">Question sets<\/a>,&nbsp;<a href=\"https:\/\/h5p.org\/interactive-video\" target=\"_blank\" rel=\"noreferrer noopener\">Interactive Videos<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/h5p.org\/presentation\" target=\"_blank\" rel=\"noreferrer noopener\">Presentations<\/a>. This option controls the score the learner gets for solving the Drag and Drop question when it is placed in a sequence of multiple tasks. Since this is part of a question set, let&#8217;s leave this option as checked.  Leave the remaining options defaulted  to the original settings as below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"698\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-36-698x1024.png\" alt=\"Drag and drop behavioural settings\" class=\"wp-image-157\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-36-698x1024.png 698w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-36-205x300.png 205w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-36-768x1126.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-36-1048x1536.png 1048w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-36.png 1060w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9c: Drag and Drop Task<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Press the&nbsp;<strong>Task<\/strong>&nbsp;tab in the top right half of the editor to start creating the task itself.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll see that the background image is displayed with the size defined in the&nbsp;<strong>Settings<\/strong>&nbsp;tab.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;ll create a Drag and drop question where the user tries to associate the strawberry with its corresponding genus name. According to&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Genus\" target=\"_blank\" rel=\"noreferrer noopener\">Wikipedia<\/a>, a genus is a taxonomic rank used in the biological classification of living and fossil organisms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the example text above, we know that the strawberry belongs to the&nbsp;<em>Fragaria<\/em>&nbsp;genus. Other examples of berry genuses are&nbsp;<em>Rubus<\/em>&nbsp;(e.g. Raspberries) and&nbsp;<em>Vaccinnium<\/em>&nbsp;(e.g. Blueberries). We&#8217;ll use these last two examples as false alternatives.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will see a toolbar above the background image.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/05_3.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The toolbar allows you to insert:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/dnd-dropzone.jpg\" alt=\"\" width=\"68\" height=\"58\"><\/td><td>Dropzones<\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/dnd-text.jpg\" alt=\"\" width=\"68\" height=\"58\"><\/td><td>Texts<\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/dnd-image.jpg\" alt=\"\" width=\"68\" height=\"58\"><\/td><td>and&nbsp;Images<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dropzones<\/strong>&nbsp;are areas on which&nbsp;<strong>Text<\/strong>&nbsp;and&nbsp;<strong>Image<\/strong>&nbsp;draggable elements can be dropped.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"guides-header-8\">Step 9d: Dropzone<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We start off by adding a&nbsp;<strong>Dropzone<\/strong>&nbsp;over the strawberry shown in the background image. Press the&nbsp;<strong>Dropzone<\/strong>&nbsp;button in the toolbar, drag it onto the background image and drop it somewhere above the strawberry.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dropzone options appear when you drop it. We add the&nbsp;<strong>Label<\/strong>&nbsp;<em>Fragaria<\/em>, which is the name of the genus the Strawberry belongs to. Set the opacity to 50 to make it semi-transparent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/06_1.jpg\" alt=\"Dropzone options\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Press&nbsp;<strong>Done<\/strong>. &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will now see a white dropzone placed over the background image. Move and resize the dropzone so that it is placed roughly over the Strawberry in the background image. You move the dropzone by pressing and dragging it to where you want it placed. You resize the dropzone by pressing the lower right corner of the dropzone and dragging up\/down or left\/right to scale the dropzone to the right proportions.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em><strong>Note<\/strong><\/em>: Double-press the dropzone to edit it at any time.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"815\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-37-1024x815.png\" alt=\"Drop Zone example for Strawberry\" class=\"wp-image-159\" style=\"width:528px;height:auto\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-37-1024x815.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-37-300x239.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-37-768x611.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-37.png 1390w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"guides-header-9\">Step 9e: Add Text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In this demonstration, we&#8217;ll add three&nbsp;<strong>Text<\/strong>&nbsp;draggable elements; one correct and two incorrect.&nbsp;<strong>Images<\/strong>&nbsp;can be used as draggable elements in the same way as&nbsp;<strong>Text<\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Press the&nbsp;<strong>Text<\/strong>&nbsp;button in the toolbar and drag it onto the background image. You can place it to the right of the strawberry. Text options appear when you drop it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the&nbsp;<strong>Label<\/strong>&nbsp;field, type in&nbsp;<em>Vaccinium<\/em>. Under&nbsp;<strong>Select drop zones<\/strong>, check the Fragaria checkbox. We know this is an incorrect match, however, we want the learner to be able to drop the&nbsp;<em>Vaccinium<\/em>&nbsp;object on the&nbsp;<em>Fragaria<\/em>&nbsp;dropzone. If this option was unchecked, the learner would not have been allowed to drop the object on the dropzone. This is more relevant in cases where you have more than one dropzone.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Leave the opacity to 100 and press&nbsp;<strong>Done<\/strong>. You will now see the&nbsp;<em>Vaccinium<\/em>&nbsp;draggable object where you placed it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Move and resize the draggable object as you please. You move it around by pressing on it and then drag it to where you want it. You resize by pressing in the lower right corner of the object and then pull in any direction to scale.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add two more&nbsp;<strong>Text<\/strong>&nbsp;draggable elements by following the exact same procedure as above. However, label these elements&nbsp;<em>Fragaria<\/em>&nbsp;and&nbsp;<em>Rubus&nbsp;<\/em>respectively. Place them in a neat alignment to the right of the Strawberry.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hopefully, you will now have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/08_1.jpg\" alt=\"Drag and Drop Task with draggable text elements\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"guides-header-10\">Step 9f: Define the correct match<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In order to define which match between dropzone and draggable elements is correct, you double-press on the dropzone. This will bring up the same dropzone options as in Step 5.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since you have defined an association between the three draggable&nbsp;elements&nbsp;and the&nbsp;<em>Fragaria<\/em>&nbsp;dropzone in the previous step, you will now see a&nbsp;<strong>Select correct elements<\/strong>&nbsp;option. Check the&nbsp;<strong>Text: Fragaria<\/strong>&nbsp;checkbox to define this draggable object as the correct match.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/09_1.jpg\" alt=\"Drop Zone correct elements selected\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, set the opacity to 0 (zero) and press&nbsp;<strong>Done<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><em>Note<\/em><\/strong>:  Multiple correct elements can be placed on a dropzone.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9g: Add Instructional Text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We are now more or less finished. We might want to add an instructional text such as:&nbsp;<em>Which genus does the Strawberry belong to? Drop the correct genus name on the Strawberry.&nbsp;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is done by adding a&nbsp;<strong>Text<\/strong>&nbsp;element and type in our instructions in the&nbsp;<strong>Label<\/strong>&nbsp;field.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">As instructional text should not be a draggable element, we do not select a corresponding dropzone.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Place the instructional text in the top right corner and resize it as you please.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/10_3.jpg\" alt=\"Drag and Drop Task with Instructional Text\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After adding content to the Drag and drop question you should have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38-671x1024.png\" alt=\"Completed Drag and Drop question in the editor\" class=\"wp-image-162\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38-671x1024.png 671w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38-196x300.png 196w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38-768x1173.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38-1006x1536.png 1006w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38-1341x2048.png 1341w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-38.png 1362w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/figure>\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-422\" class=\"c-accordion__title js-accordion-controller\" role=\"button\">Step 10: Add Fill-in-the-blank Question<\/h3><div id=\"ac-422\" class=\"c-accordion__content\">\n<p class=\"wp-block-paragraph\">Press the&nbsp;<strong>Add question<\/strong>&nbsp;button to add another question to the&nbsp;Question set.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"151\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-1024x151.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-1024x151.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-300x44.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32-768x113.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-32.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As our final question for this question set, we&#8217;ll choose the question type&nbsp;<strong>Fill in the blanks<\/strong>&nbsp;from the dropdown menu. The&nbsp;<strong>Fill in the blanks<\/strong>&nbsp;editor will now appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the following text to populate the Multiple choice question editor. This example is sourced from the original <a href=\"https:\/\/h5p.org\/tutorial-fill-in-the-blanks\">H5P.org Fill-in-the-blank Tutorial<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 10a: Title and Fill-in-the-blank editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Title: <\/strong><em>Fill in the missing text about Strawberries<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Task description<\/strong> (in this field we give the learner basic instructions or introduce the problem to be solved): <em>Fill in the missing text about Strawberries<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 10b: Text blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Under&nbsp;<strong>Text blocks,<\/strong>&nbsp;we add our three sentences and define which words are to be removed for the learner to identify.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can add multiple text blocks, and we can remove multiple words in each text block.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, only a single&nbsp;<strong>Text block<\/strong>&nbsp;is displayed when you create a new&nbsp;<strong>Fill in the blanks<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because we have three sentences, we would like to add two more&nbsp;<strong>Text blocks<\/strong>. Press the&nbsp;<strong>Add text block<\/strong>&nbsp;button twice to add two more&nbsp;<strong>Text blocks<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/fitb3.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the top&nbsp;<strong>Text block<\/strong>, we add the following sentence under&nbsp;<strong>Line of text<\/strong>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Insert the correct plural form of the noun strawberry: strawberries<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We insert asterisks before and after the word, we would like to remove, like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Insert the correct plural form of the noun strawberry: *strawberries*<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/fitb4.jpg\" alt=\"Line of text example: Insert the correct plural form of the noun strawberry: *strawberries*\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following text in the second&nbsp;<strong>Text block<\/strong>, under&nbsp;<strong>Line of text<\/strong>:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>The strawberry is a juicy, edible fruit that has a *red* color when it is ripe.<\/em>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the third and bottom&nbsp;<strong>Text block<\/strong>, we add the following text under&nbsp;<strong>Line of text<\/strong>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tom has 2 strawberries. Jill gives him 4 more strawberries. Now, Tom has *6* strawberries.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this last sentence, we want to allow the learner to insert both the number&nbsp;<em>6<\/em>&nbsp;as well as the word&nbsp;<em>six<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can define alternative answers by using a slash to separate the accepted alternative answers inside the asterisks, like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Tom has 2 strawberries. Jill gives him 4 more strawberries. Now, Tom has *6\/six* strawberries.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/fitb6.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After adding content to the Fill in the blanks question type, you should have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39-584x1024.png\" alt=\"Fill-in-the-blank about Strawberries\" class=\"wp-image-201\" style=\"width:649px;height:auto\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39-584x1024.png 584w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39-171x300.png 171w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39-768x1347.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39-876x1536.png 876w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39-1168x2048.png 1168w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-39.png 1362w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">You can add as many&nbsp;<strong>Text blocks<\/strong>&nbsp;as you want. You remove&nbsp;<strong>Text blocks<\/strong>&nbsp;by pressing the&nbsp;<img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/remove.JPG\">&nbsp;button in the top right corner of the&nbsp;<strong>Text block<\/strong>. You change the order of the&nbsp;<strong>Text blocks<\/strong>&nbsp;by pulling the&nbsp;<img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/up%20down.JPG\">&nbsp;button in the top left corner of the&nbsp;<strong>Text block<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">If you need instructions on how to create content you can press the &#8220;Show instructions&#8221; button at any time and the instructions block will open. It looks like so:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"410\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-40.png\" alt=\"Showing instructions on how to create content\" class=\"wp-image-204\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-40.png 773w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-40-300x159.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-40-768x407.png 768w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 10c: Behavioural Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Under the Behavioural Settings box, check the&nbsp;<strong>Enable &#8220;Retry&#8221;<\/strong>&nbsp;checkbox to allow the learner to try to solve the Fill in the blanks multiple times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you include&nbsp;<strong>Fill in the blanks<\/strong>&nbsp;in&nbsp;<a href=\"https:\/\/h5p.org\/question-set\" target=\"_blank\" rel=\"noreferrer noopener\">Question sets<\/a>,&nbsp;<a href=\"https:\/\/h5p.org\/interactive-video\" target=\"_blank\" rel=\"noreferrer noopener\">Interactive videos<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/h5p.org\/presentation\" target=\"_blank\" rel=\"noreferrer noopener\">Presentations<\/a>, you might want to consider whether you want the user to only get one chance to solve the task.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this demonstration, we are not concerned whether the learner uses capital letters or not when inserting the missing text. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We, therefore, uncheck the <strong>Case sensitive<\/strong> checkbox. Example: The learner will get the correct answer when inserting both Strawberries and strawberries in the first sentence<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"912\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-41-1024x912.png\" alt=\"Behavioural Settings for Fill-in-the-blank\" class=\"wp-image-207\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-41-1024x912.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-41-300x267.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-41-768x684.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-41.png 1060w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 11. Quiz Introduction<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the <strong>Quiz Introduction<\/strong> dropdown box and check, <strong>Display introduction<\/strong>. By doing this, the user shown an introduction text and must press a <strong>Start quiz<\/strong> button to start solving the Question set.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check the&nbsp;<strong>Display introduction<\/strong>&nbsp;checkbox. Then, add the following text in the&nbsp;<strong>Title<\/strong>&nbsp;field:&nbsp;<em>Berry quiz<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the&nbsp;<strong>Introduction text<\/strong>&nbsp;insert this text:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Passing this test will certify you as a berry expert.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>You need 80 % correct to pass. Good luck!<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Leave the&nbsp;<strong>Start button text<\/strong>&nbsp;as it is, or change it to your own liking.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have something like this:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/09_4.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 12: Quiz finished: Your Result<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Under the&nbsp;<strong>Quiz finished: Your result:<\/strong>&nbsp;header you have options related to how the quiz results are shown to the learner at the end of the Question set.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will also find several text fields where you can customize or adapt the text being used to your own liking.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure that the&nbsp;<strong>Display results<\/strong>&nbsp;checkbox is checked, as we want the learners to evaluate their own performance:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"999\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-42-1024x999.png\" alt=\"\" class=\"wp-image-212\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-42-1024x999.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-42-300x293.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-42-768x749.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-42-1536x1498.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-42.png 1542w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">At the bottom of this field, you can also choose to&nbsp;<strong>Display video before quiz results<\/strong>. Here you can upload a video clip which is shown to the learner after completing the Question set, but before the results are displayed. You may choose to display one video clip if the learner passes the Question set, and another video clip if the learner fails. However, we&#8217;ll skip adding video feedback in this tutorial, as this is entirely optional.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 13: Wrapping Up<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-cde32994 wp-block-columns-is-layout-flex\" style=\"margin-bottom:0\">\n<div class=\"wp-block-column has-text-color has-background has-link-color wp-elements-f2ea25c467a6dfa52126b10df5e1ef3e is-layout-flow wp-block-column-is-layout-flow\" style=\"color:#000000;background-color:#ffe97d;padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em\">\n<h2 class=\"wp-block-heading\" id=\"single\" style=\"font-size:clamp(24.034px, 1.502rem + ((1vw - 3.2px) * 1.814), 40px);\"><strong>Reminder<\/strong><\/h2>\n\n\n\n<p class=\"has-normal-font-size wp-block-paragraph\" style=\"line-height:1.5\">Add Metadata to your H5P content.  This is key to determining how your H5P creations can be adapted, shared and reused.  Select&nbsp;<strong>Metadata<\/strong>&nbsp;next to the Title of your content and add any relevant information including Title, License, License Version, Source and Author\u2019s name and role.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#000000;color:#000000\"\/>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s add Metadata to this Course Presentation. Select <strong>Metadata<\/strong> next to the Title and add some to your example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-43-1005x1024.png\" alt=\"\" class=\"wp-image-214\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-43-1005x1024.png 1005w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-43-294x300.png 294w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-43-768x783.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-43.png 1358w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This example has been adapted from a&nbsp;tutorial on H5P.org In this demonstration, we will walk through the creation of a Question Set content type. This is how it will appear: Use Cases Question sets serve as a valuable tool for structuring a series of related problems for learners to tackle as a cohesive unit, rather [&hellip;]<\/p>\n","protected":false},"author":12724,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/users\/12724"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":61,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages\/42\/revisions\/236"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}