{"id":17859,"date":"2022-07-19T01:13:24","date_gmt":"2022-07-19T05:13:24","guid":{"rendered":"https:\/\/pacificopencourses.col.org\/edt4ol\/?page_id=17859"},"modified":"2022-07-19T01:13:24","modified_gmt":"2022-07-19T05:13:24","slug":"embed-h5p-object","status":"publish","type":"page","link":"https:\/\/pacificopencourses.col.org\/edt4ol\/learning-challenges\/authoring-a-learning-sequence\/embed-h5p-object\/","title":{"rendered":"Embed H5P object"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n
\"Old<\/a><\/div>\n


<\/p>\n

Previously in this course, you learned how to author interactive H5P objects<\/a> in your personal blog site and embed them in a blog post. In this section, you will learn how to use wiki markup to embed the H5P objects you authored in your course site<\/b> instead.\n<\/p>\n

\n\t
\n\t\t
\n\t\t\t\"preknowledge\"\n\t\t<\/div>\n\t\t
\n\t\t\t

Four things you will need<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\t<\/p>\n

You will need four pieces of information to embed your H5P object on your WordPress course site:\n<\/p>\n

    \n
  1. The ID number<\/a> of an H5P object you authored previously on your WordPress blog site. It is the number contained within the shortcode used to embed an H5P object on your blog site. The ID number is “1” in the following shortcode example: \"H5P<\/a>\n<\/li>\n
  2. The base url of the WordPress Multisite where your personal blog is hosted. For students taking this course, the base URL is: https:\/\/edt4ol.oerfoundation.org<\/code>\n<\/li>\n
  3. The subsite component of your personal blog site URL on the WordPress Multisite. For students taking this course, the subsite is: username<\/i>-blog<\/code>. (Substitute the username in italics with your WordPress username on the https:\/\/edt4ol.oerfoundation.org website).\n<\/li>\n
  4. The wiki template markup text to embed an H5P object – See below.\n<\/li>\n<\/ol>\n

    \n<\/p>\n

    \n\t\t<\/div>\n\t<\/div>\n<\/div>\n

    \n<\/p>\n

    H5P wiki template markup<\/span><\/h2>\n

    The wiki text below will embed an H5P object which has ‘h5pid” number “1” and which is hosted on the user’s ‘mackiwg-blog’ sub-site of the https:\/\/edt4ol.oerfoundation.org web site.\n<\/p>\n

    {{WEH5P\n|h5pid=1\n|host=https:\/\/edt4ol.oerfoundation.org\n|subsite=mackiwg<\/i>-blog\n|subdir=\n|style=font-weight: bold;\n|height=200px\n|width=100%\n|classes=class1 class2\n|cssid=id1\n}}\n<\/pre>\n
    For security reasons, the template will be displayed in WikiEducator<\/i> as a static text box similar to the image below; you will not see the H5P object itself in the wiki.[1]<\/a><\/sup> However, after publishing a snapshot to the user’s course site, the original H5P object with its interactivity will be rendered on the WordPress site.\n<\/p>\n
    \"H5P-wiki-textbox.png\"<\/a><\/div>\n

    <\/p>\n
    Notes<\/span><\/h4>\n
    For this course, there are only two parameters you will need to change:\n<\/p>\n
      \n
    1.  The h5pid number for the object you authored on your blog site for inclusion on the published course site\n<\/li>\n
    2.  Your personal username for the subsite parameter, for example replacing the following text displayed in italics with your own<\/b> username on the blog site where you authored the original H5P object: mackiwg<\/i>-blog (‘mackiwg’ is the username in this example).\n<\/li>\n<\/ol>\n
      Incorporating an H5P object within a pedagogical template<\/span><\/h2>\n
      It is possible to incorporate your H5P object within a pedagogical template<\/a>. This is useful if you want to provide specific instructions or guidelines for learners relating to your interactive H5P object. You can use the following wiki text:\n<\/p>\n
      {{IDevice\n|theme=line\n|type=Activity\n|title=\n|body=Replace this text with instructions to learners for your H5P object\n{{WEH5P\n|h5pid=\n|host=https:\/\/edt4ol.oerfoundation.org\n|subsite=username<\/i>-blog\n|subdir=\n|style=font-weight: bold;\n|height=200px\n|width=100%\n|classes=class1 class2\n|cssid=id1\n}}\n}}\n<\/pre>\n
      \n\t
      \n\t\t
      \n\t\t\t\"activity\"\n\t\t<\/div>\n\t\t
      \n\t\t\t
      Activity<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t
      \n\t\t
      \n\t\t\t<\/p>\n
      Use wiki markup to embed an H5P interactive object on a published course site on WordPress<\/b>\n<\/p>\n
        \n
      1.  Identify the ID number of your H5P object<\/b>\n