{"id":2495,"date":"2021-11-01T09:05:00","date_gmt":"2021-11-01T16:05:00","guid":{"rendered":"https:\/\/edtechuvic.ca\/edci337\/?p=2495"},"modified":"2021-11-01T00:52:12","modified_gmt":"2021-11-01T07:52:12","slug":"lab-9-twine-and-h5p","status":"publish","type":"post","link":"https:\/\/edtechuvic.ca\/edci337\/2021\/11\/01\/lab-9-twine-and-h5p\/","title":{"rendered":"Lab #9: Twine and H5P"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Learning objectives:<\/h2>\n\n\n\n<p>By the end of this lab, you will be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Draft the content for a \u201cchoose your own adventure\u201d story<\/li><li>Create a \u201cchoose your own adventure\u201d story using Twine<\/li><li>List various options for interactive activities that can be created using H5P<\/li><li>Edit a video using H5P to add interactive components<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>This lab comes in three different parts. In the first, you\u2019ll have the chance to participate in a game-based learning experience, as you learn about how misinformation is spread. In part two, you\u2019ll be introduced to Twine to create your own branched scenario. Finally, you\u2019ll use H5P to add interactive components to a pre-existing video.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Let\u2019s play a game<\/h2>\n\n\n\n<p>In this week\u2019s lesson, we learned all about game-based learning. Now, let\u2019s explore an example!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-1024x459.png\" alt=\"\" class=\"wp-image-2497\" width=\"676\" height=\"302\" srcset=\"https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-1024x459.png 1024w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-300x134.png 300w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-768x344.png 768w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-1536x688.png 1536w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-600x269.png 600w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture-945x423.png 945w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/Capture.png 1826w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><figcaption>Screenshot of the Bad News game<\/figcaption><\/figure><\/div>\n\n\n\n<p><strong><a href=\"https:\/\/www.getbadnews.com\/\">Bad News<\/a> <\/strong>is a fun media literacy multimedia game, and a great example of game-based learning. As the player (aka the learner), you are trying to get as many social media followers as possible by spreading fake news. Along the way, you\u2019re given a number of decisions to make, and need to try to make the decision that will best spread misinformation and gain you the most followers. You get immediate feedback on your choices, and you also earn badges throughout the game.<\/p>\n\n\n\n<p>As you play the game, think about the difference in experience a learner has playing the game vs. a more traditional teacher-led media literacy lesson. Feel free to talk about those differences in your blog post this week, if you\u2019d like!<\/p>\n\n\n\n<p>After you finish playing the Bad News game, take note of your high score and share it with the class via MatterMost. Who do you think will be the best at spreading fake news and gaining followers?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.getbadnews.com\/\"><strong>Play Bad News<\/strong><\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Interactive storytelling with Twine<\/h2>\n\n\n\n<p>Twine is a free-to-use, open-source tools that allows us to create interactive and non-linear (aka branching) stories, which are sometimes referred to as \u201cchoose your own adventure stories.\u201d In this activity, you\u2019ll learn how to do the following with Twine:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li>Create stories with branching passages based on the reader\u2019s input<\/li><li>Embed photos and videos in your stories<\/li><li>Randomly branch to one of a pool of pre-selected passages<\/li><\/ol>\n\n\n\n<p>To start with, please watch the following video introduction to Twine, so you can get a sense of what you can do with Twine!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Interactive Storytelling - Intro to Twine\" width=\"676\" height=\"380\" src=\"https:\/\/www.youtube.com\/embed\/ZnARX2ToqYc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Before you start creating your own Twine story, explore this interesting, but short, choose your own adventure story about <a href=\"https:\/\/emilymccue.ca\/immigration\/\">Chinese immigration to Canada<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/emilymccue.ca\/immigration\/\"><strong>Explore the <em>Chinese immigration to Canada<\/em> story<\/strong><\/a><\/li><\/ul>\n\n\n\n<p>Now that you\u2019ve seen a Twine story in action, it\u2019s time to make your own! To start, you\u2019ll need to create your own story (about any topic you\u2019d like!) with no less than 8 passages (or pages). Draft this in a Word processor before continuing with the activity. To create your story, come up with a topic, and then come up with a basic storyline, and a variety of different ways the story could go (your branches). Don\u2019t forget everything we learned about storytelling in an earlier lesson!<\/p>\n\n\n\n<p>Once you have your story ready to go, you can access the Digital Scholarship Commons\u2019 <em>Interactive, Nonlinear Stories With Twine<\/em> activity, and beginning creating your interactive story. Please make sure that you follow the directions carefully; using Twine requires some very basic HTML coding. While the activity walks you through exactly what you need to input, any deviations or errors may mean your activity won\u2019t work properly!<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.google.com\/document\/d\/1PZyMH_VJLubJDbIs1652rFrhKCgP7PnOq9WHwZsVoYc\/edit\"><strong>Complete the activity: <em>Interactive, Nonlinear Stories with Twine<\/em><\/strong><\/a><\/li><\/ul>\n\n\n\n<p>As always, share your story with us in your weekly blog post! If you have trouble uploading your story, let me know and I can try to help you out!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating interactive video with H5P<\/h2>\n\n\n\n<p>H5P allows you to create, share and reuse interactive HTML5 content using just your browser and a website with an H5P plugin (which your opened.ca websites have!). H5P content is responsive and mobile friendly, and is a free and open technology.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p-1024x396.png\" alt=\"\" class=\"wp-image-2498\" width=\"613\" height=\"236\" srcset=\"https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p-1024x396.png 1024w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p-300x116.png 300w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p-768x297.png 768w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p-600x232.png 600w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p-945x366.png 945w, https:\/\/edtechuvic.ca\/edci337\/wp-content\/uploads\/sites\/11\/2021\/11\/h5p.png 1359w\" sizes=\"auto, (max-width: 613px) 100vw, 613px\" \/><figcaption>Screenshot from the H5P.org website<\/figcaption><\/figure><\/div>\n\n\n\n<p>It\u2019s possible to create a wide variety of content types using H5P, and the options are always growing. You can create interactive videos (which we\u2019ll do in the activity below), presentations with interactive slides, branching scenarios, accordions, crosswords, drag and drop, fill in the blanks, hotspots, flashcards, image sequencing, memory games, personality quizzes, timelines, true\/false questions, and so much more.<\/p>\n\n\n\n<p>Take a few minutes to <a href=\"https:\/\/h5p.org\/content-types-and-applications\">browse the content list on the H5P website<\/a>, and explore what they have to offer. Clicking on any of the content types will open a page with a description and a sample activity.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/h5p.org\/content-types-and-applications\"><strong>Browse the content list on the H5P website<\/strong><\/a><\/li><\/ul>\n\n\n\n<p>Since we\u2019ve been slowly adding to our screencast over the past few labs, we\u2019ll explore using H5P to create interactive videos in this week\u2019s lab. H5P can help transform a video from a passive learning activity to an engaging interactive experience by allowing instructors to embed multiple choice questions and other interactive content in videos. This can help keep learners engaged, and is a great way to help learners self-assess as they move through the content.<\/p>\n\n\n\n<p>As you use H5P to design multimedia learning objects, don\u2019t forget about the principles of multimedia learning!<\/p>\n\n\n\n<p>If you haven\u2019t already, take a few minutes to read through the page on H5P.org about interactive videos. This page will describe what is possible, and will also provide you with an example (if you\u2019ve ever wanted to learn how to make a smoothie, this is your chance!).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/h5p.org\/interactive-video\"><strong>Read about the H5P interactive video<\/strong><\/a><\/li><\/ul>\n\n\n\n<p>Once again, we\u2019re going to be relying on instructions from the Digital Scholarship Commons to guide you through how to create an interactive video. While you are welcome to use whatever video you\u2019d like for this activity, I would encourage you to consider using the video you\u2019ve been building over the last few weeks.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.google.com\/document\/d\/1biiWa75yHTCyVgaqW0vHf0N35Pyq39jS0PNIrqH9VpA\/edit\"><strong>Create an interactive video using H5P<\/strong><\/a><\/li><\/ul>\n\n\n\n<p>Once you\u2019ve created your interactive video, share it with us in your blog post!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learning objectives: By the end of this lab, you will be able to: Draft the content for a \u201cchoose your own adventure\u201d story Create a \u201cchoose your own adventure\u201d story using Twine List various options for interactive activities that can&#8230; <a class=\"more-link\" href=\"https:\/\/edtechuvic.ca\/edci337\/2021\/11\/01\/lab-9-twine-and-h5p\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":34,"featured_media":2499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[20],"tags":[],"class_list":["post-2495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nicole-course-content"],"_links":{"self":[{"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/posts\/2495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/comments?post=2495"}],"version-history":[{"count":2,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/posts\/2495\/revisions"}],"predecessor-version":[{"id":2500,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/posts\/2495\/revisions\/2500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/media\/2499"}],"wp:attachment":[{"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/media?parent=2495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/categories?post=2495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edtechuvic.ca\/edci337\/wp-json\/wp\/v2\/tags?post=2495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}