Create Interactive Online Learning with H5P

1. Welcome to H5P for eLearning designers: Hello. My name is Chris Richter, and welcome to the introduction to h5p. In this course, I'm going to take you step by step through the core components or the core interactive types that you can use in h5p. I'll take you through step by step how to build each one of them. And in that process as well, I will also show you how to embed the h5p activities inside your learning management system. So this could be something like the Canvas LMS, the Modal LMS, even into a product like Wordpress where you may want to use them as well. So I'll take you through all of those. The examples that we'll be using or that I'll be teaching you are things like the interactive video, course presentation, branching scenario, and then I'll take you through some of the other core ones as well, which could be things like, you know, drag the words, fill in the blanks, Hotspots will be another major part of that. We'll look at flashcards and quite a few of the other, as I said, common interactive types that you would use in Hive P. So, let's get started. 2. Your project for this class: While you were creating your h5p interactive activities, I managed to grab a coffee. But hopefully, you've learned heaps out of this course and you've discovered lots and lots of things you can do with h5p, and also how to embed that into your learning management system or into your courses. So congratulations again. Please, if you do or if you can, send through some links of what you created because I'd love to see them give you some feedback. Try and help you out a bit with improving them if you like, as well. So please feel free to send links through to me, as well, or even h5p. I can lay them up and have a look at them. Again, congratulations, and I'll see you again in the next course. 3. Overview of content types: H5p is made up of all these different interactive content types that you can create. And we're going to go through and have a quick look now at what they actually are so you can see what we're going to build later on in this course. To do this, hp.org is where all of this lives. And inside hivept org, you can see all the examples of all the different types that they have. There are some key ones that we're going to go through in this course. So that we won't cover because once you've done some of the others, you'll be able to work them out really easily, so that will be fine. But these are the key ones we're going to have a go at. I'll demonstrate them here as well. Then when we go into the course and you actually go and have a go at creating each of these HP interactive content types, you'll get to go in and see them piece by in more detail and piece by piece how they're actually structured. So in hive p dot, of the three most popular, I guess, ones are interactive video, course presentation and branching scenarios. Then there is all of these other ones below that that, you know, there's quite a collection of them here you can see. So I'm going to take you through just the first three main ones and a couple of the options in some of the others just so you can get a really good understanding of what they look like. So for interactive video, which is pretty straightforward, it is exactly that. It's an interactive video. And in this example, you can see that we have a video embedded in the content. We have an opening screen that just basically says, you know, click Play. And as they watch through the video, and I'll turn the sound off for you just so you don't get distracted by that, you can see here that just at the top of the screen, as it was playing through, a plus appeared with ingredients list. Now I've just paused the video. You can click on that and it will show you the ingredients of this particular recipe. Can then continue playing through the video. Notice it's still got that up there. Now it's vanished. When it gets to this next dot, it will then show you an option where you can do a quiz. What kind of berry is this? We're going to say it's a strawberry, check, correct, continue, and it continues playing the video. And that disappears. When you wait for the next icon here to appear. In this case, it actually stopped this time, and it says, highlight the ingredients that have been added so far. And I wasn't taking notice of the video. So we're going to say strawberries. We got one out of two because there was something else in there. Now, it says, Watch intro again. So it's jumped back, so you can watch that again to see what ingredients have actually been added in so far. Skip the first question. So so far, we've got strawberries. And what else do we add? Oh, they were gay. Should have guessed, so strawberries and blueberries have been put in. So we got to check, and that's now correct. Now it can continue. So you can see how it had that little bit of workflow where it jumped back again, then we continue, and it goes on. I'll skip forward. We've got to fill in the blanks where it asks you strawberries and what? You put in blueberries and mixed with something and something and it goes on. And that's what an interactive video is. So that's one example we're going to look at building. The next example that we're going to do is course presentation. This one you'll find is used quite a bit, and there's lots of different variations on how you can use course presentation, but it's sort of like a PowerPoint. I guess. And you'll see here it has circle dots on the barrel on the bottom, and there's a couple of ways to navigate through this. But this particular one gives us we can click on the bar down the bottom and it will slide across to the next slide. The circle means it has an interactive component. If it doesn't have a circle like that, it's just content and information. Mind you, it does have a link jumping to the berries, but this does allow you to sort of jump between slides interactively, as well. So that was our first slide. That's our second slide with another interactive activity in there. We can also use the plus here to jump across, and we can also go to full screen with these as well. A particular one has an embedded video inside the content, which is really useful as well. It'd be YouTube embedded video. Oh, yeah, there's YouTube down the bottom, and then you can jump across to the next slide and do the next question right at the end, it then has a summary of all of the activities that you've completed and what your scores were for those activities. So I'll just switch that back. So that one there is the course presentation. The other main one is the branching scenario, which is sort of like a choose your own adventure type thing. So if we start our simulation or all the game activity, it then has a proceed button up the top. Which we can use, and it allows us to sort of jump through a whole interactive process based on the content that you want to provide. So we'll just keep proceeding. It jumps to a video, which is cool, then we can go proceed. Now, when it jumps to this part, this is where you get to decide that sort of, you know, choose your own adventure interactive content where you can say, depending on the answer they give, we will take them to a certain slide. Aye. In that case, Zoom, a community nurse. We've jumped across to another video. If we go back again. Let's sit at the table. You will now go through the video and explain what happens when they click on that bit of content. If we wait, you will then give us another video. So you can see it's jumping through and through and through. Telling us here that wasn't the best response, and we can click Proceed, and we've moved on to another set of questions. So this whole branching scenario branches out into all these different options. You can jump across between branches, too, so that's really useful. So that is the branching scenario. And then the other ones that we're going to look at will be things like the dialogue cards. We'll create a dialogue card. We'll do flash cards. We'll do the image hotspots. It's one that we'll definitely put together for you. Give you a look at that because that's quite useful. Another one up here, the accordion. I'll show you how the accordion works. And what else is there interactive book, which is quite useful as well. The memory game show you how to put that together. It's pretty clever. Then we'll look at multiple choices, quiz question sets, which is a combination of multiple choice, single choice, yes, no, true, false. So this includes quite a few of those in there. So they'll all be combined together for you. So that's basically some of the things that we'll cover. The interactive types we'll cover in the rest of this course. So hopefully that's got you started and started thinking about the interactive types you can use. Let's jump in and have a look at them individually. 4. Creating activities with LUMI: We're going to look at Lumi and Loomi is a product that's especially created for you to develop and create your own h5p objects, which you can then save to your computer. You can then upload them all of this completely free. So that's if you're just using the downloadable Loomi desktop editor. If you're using LoomiCloud, there can be some costs in that, but let's look at the desktop editor. So all we need to do is go to the Loomi website, go to the Loomi desktop Editor and download the version for your computer. You can choose where you download it from as well. Just a note for those on Mac, especially. Check whether your Mac has an internal processor or is an M one or M two, three, Apple Silicon processor because you need a different version, depending on which one it is. So choose the correct one for that and just go and download it. Once you've downloaded it, click on the Install, and it will install. So that's all there is to getting that actually running on your computer. Okay, so we're going to open up Lomi now that we've downloaded Lemi? So we just click on Limi and it automatically uploads to the content type selector, where you can choose the HOP hub, where you can choose the content type that you want. In our cos we just going to jump down to the accordion and create an accordion just as an example of how to create, save, and re upload. Loom you file and remember this is stored locally on your computer. So we can create an accordion. I just called this accordion test. If you haven't created an accordion yet, that's okay. Don't worry too much about what I'm doing here. I'm just creating a single panel. Actually, let's make it a two panel. Accordion because we can do that really, really quickly. In here. Once we've created that, we can go and view it. So this is what our accordion looks like. Nice and simple, nothing much to it. We can then go to file and we can save. We can save this as accordion test. Here we go as a h5p. We can save that, which has now been saved on our computer, and we can close it. And that's what we have to do to create a h5p and save it. We can then go back into Lumi and we can go file open and choose our accordion test, and it will open it up as a new panel. That we can then go in and edit, make our changes, save it again, and keep working on a Hach five P content. So this is basically all Loomi is. It's just like an editor, really simple editor or application to allow you to create your Hive Ps with all of the different activity types now. Not every activity type is actually in here. So just be aware that there may be a couple that you look at and go, I can't find in here. That's because it's not part of Loomi yet. It may still become part of Lumi at some stage. I can't actually tell you what they are because I can't remember just be aware there may not be everything in LMI, but most of them will be in there. And that's all you have to do to download and install Lumi and have Lumi ready to use in your content. Obviously, the next part of it is what we do with our content. Is we can then upload our h5p into another platform, either into hp.com or into Moodle or into, you know, wherever we like. We can grab that saved file, that h5p file. We can upload and put that in our content ready for students to actually use. Obviously, if you need to update it, you can go back into Leumi, make some changes and re uploy that file to your platform. And that's one way of being able to use h5p in your learning management system. 5. How H5P can be created and integrated: We go too far, one of the important things I wanted to do was to take you through the process of what's involved in the HVP ecosystem and how that all sort of works and connects together. And this is the information about how you first of all, create your h5p activities. Then secondly, what you do with them, how you put them into either a mi management system or into WordPress or into some type platform, they've got to deliver the interactive content. Now, there's a few ways to do it, and I'll go through them each individually, but as an overview, the first one is using a product called Lumi. And Lumi is free. You can download Lumi, and it allows you to create your h5p activities locally on your computer. The second one is h5p.com, which is a website where you can create your h5p content on h5p insthp.com and then deliver that into your learning management system from there, and I'll show you the steps in there as well. The other one is to use a plug in that is in your learning management system or your platform that you're using to deliver your content. And then one fourth sort of add on is back to Lumi again, but this one is where you can export a SCOM package and upload that to a SCOM compliant LMS now. That doesn't make sense yet. Hopefully, it will soon. So let's have a quick look at Lumi. So with LMI, you download the Lemi application, put that on your computer, works on Windows and Mac. And from there, you then choose and create your HP activities. You build them there, you save them, and they stay on your local computer ready for you to then put into your learning management system. And the two options out of Leumi is one, import it into your learning management system, S H activity, one at a time, load them up. Or you can from Lumi export as a scorn package and apply that into a scorn compliant LMS, which just means that it is a learning management system that allows scorn packages, which are sharable content of sharable content. Object reference model, thank you, is just a type of format for content to be delivered or education content to be delivered. That has its own navigation, has its own structure and own packaging, and you can use that in some learning management system. So you need to check which learning management system you've got and which format is better to use or that you're going to use. So that's the loomy way of doing things. Let's move on to hp.com. H5p.com, you use the website where you build all of your interactive content, your h5p inside there, you store it in there, it stays on that platform. But you do have two options here. One is you can export the h5p objects or your interactive content out of hp.com and upload them to your learning management system, assuming your learning management system has the capability to upload hp.com into it, so you need to check that. The second one is you can do what's called embedding. And embedding is, if you think of it in sort of the simplest logical way. When you have a YouTube video and you want to put a YouTube video into your learning content or into a website or into anywhere, you can use the embed feature where you grab a little bit of code for the YouTube video, put that into your website or into your learning content, and that video or YouTube video is now embedded as part of the content. You can do exactly the same thing with your h5p activities. You can embed them inside your content in the same way. You grab a little bit of code. And you put that in, but to do that, you need hivep.com to store your h5p activities somewhere on the Internet where it is available to be embedded, just like YouTube is always available to embed the videos to display them. So that's the other way that you can go about using hp.com to add your interactive content. So there is still another way to do it there. So the next way to go about doing this is to use your learning management system, and it depends on your learning management system as to whether you can do this. But many learning management systems like Moodle come with built in h5p interactiviti. So they have modules that exist inside the learning management system, and all you need to do is using your learning management system, build h5p activities inside it, and then embed them in the content using the tools that are part of your platform. So that's a nice and easy way to go about doing that and putting your interactive content in. So check your learning management system or your or your platform that you're using, and if it has built in h5p, then fantastic. You can start using that. I'll make things a little easier than saving files on your computer or using hived.com. Just to finish off, creating your HP activities, we can use Loony to build them. We can use h5p.com to build them, and in some cases, you can use a plugin in your LMS to build the activities. And then to actually embed the activities in your content, you can upload them from Lumi. You can embed from h5p.com. You can also download from hip.com and upload them into some platforms as well. You can use a plugin that is part of the learning management system, or using Lumi, you can export a SCOM package and upload that into a SCOM compliant learning management system. Now, hopefully, that makes sense and has sort of cleared up some of the issues and some of the confusion about how Hive P works with your learning management system. And we're going to move on and actually start creating some h5p directive content. 6. Creating interactive accordions: So what we're going to do is create an accordion, and the accordion will look like this. It will have panels that you can click on, and inside the panel will have content. So in this one, we've got some texts and bullet points, weblink that goes out to a website. Panel two, when you click on it, we'll open up the second panel, which is exactly what we wanted. And then panel three, which will take us to whatever the contents are for panel three. Notice we don't have images inside the panels or videos inside there. So it's more for text based content, but it's great for sort of saving space. It's probably the most important and useful thing, plus structuring content to make it easier for students to understand how things are packaged together. So, we're going to look at how to create this accordion. Let's go. Strict an accordion, we're going to use Lumi for this one, which is start, and we type in here accordion, which is just there. We choose accordion, and we give it a title. Now, the title doesn't actually really matter, other than for searching. So we'll just call this our accordion. Okay. Then we've got panels inside our accordion. And we're going to look at panel number one inside the panel. This is the title that will appear that they actually click on, so make sure you give that a name that makes sense to what you're doing in your content. So panel panel one, inside that we put our text. So just put some text in here. And inside that as well, we can put some bullet points as well. So we've got bullets, bullet, bullet two. We can also put in links. If we've got something like ricksha.com, we can create a link from that by using the Link icon and put in here riqae.com dot actually, we'll make it. Because it's Australian, and it's a HTPS, and with Target, always change out and make it new window. That way they don't get out of the Hive P as in the page doesn't change and completely reload. You want that to go as much as you can, go to a new window so that the students don't lose where they are in the content. So always use new window as blank. And then, of course, we have things like a line, horizontal line. Then we can do some things headings, heading two, three, four. That's up to you what you do with that, as well as font sizes which are in percentages. And font colors and the background color as well to our text. So that's all the different options that you have in here. Notice you can't put images inside a panel. So, we then go down to Add a New panel, and this will be panel two. Again, we can type in some text, some text in here, and then add a third panel for the exercise, panel three, some text in panel three. That's all we need. Now, the last thing is the heading tag. Now, H tags for labels, they don't affect the actual size of the label. So the label will still be the same size, but it's more for screen readers to understand what the order of headings are. So this is just a thing that you can use if you're finding that, you know, for some reason, your content is coming up with an accessibility error, you may need to go in and change the headings to suit the heading order because for accessibility, you must have headings inside each other logically. So if you've got a heading one inside that, the next ones will be heading twos. By heading twos, you'll have heading three, and then go back to heading two. You won't sort of jump across headings. Okay. Now, that's all we need to do once we've done that. We can then go and view our accordion and see what it looks like. So this is our accordion here. Panel one, Panel two, notice that it opens the panels up separately. So one panel at a time, which is great for saving space in your content. So make use of that as much as you need to because it is a really, really useful type of thing to do. If we go back to edit again, down in here, I don't think there was any other settings that we have for panels. No, there isn't, that's it. So that's how you created a panel. 7. Creating multiple choice activities: Going to look at a multiple choice question. And in the example that we're going to look at, and I'll show you how to build this in a moment. You'll see there we've got which of the following animals is native to Australia, and then you need to choose work out which is the correct answer. If I choose one answer and there's only the option to choose one, I'll show you how that works. You can also ask for extra information about each one. We can put sort of tips in there to help students decide what the correct answer is or to give them more information. And then they just need to choose check. And it will then respond with, is this the correct one? Obviously, we got that wrong, so hopefully next time we can get it correct. Then it also gives us some other messages depending on what we selected with extra feedback. Now, all that feedback is optional. If you don't put anything in there, it won't appear. Then we can also do Show solution as well. Please answer before viewing the solution. So if we choose polar bear and then go Show solution, you can see up here on the right, it's just showing us what the solution is the correct answer. Then they can retry and choose you again. You can turn that ability off as well, that function for multiple choice activities. So let's go in and have a look at how we create a multiple choice question like this in HIP. To do that, we're just going to add and look for multiple choice, which will be down here under M multiple choice is actually pretty simple. We just put in here multiple choice title. Then all we need is some multiple choice questions to go in there. Let's put something in like which of the following animals is native to Australia, and we need some options in here. So under each option, we just put in a word or a sentence or a paragraph in there. We can put four of these in, you add a new option when you want to add a new question as well. We'll put kangaroo in there as well, and probably maybe llama. Now, we've got four questions, and there's only one correct answer, and that is kangaroo. For those that no, for each of these available options, we can have a text tip, which I'll show you what that actually means. I'll just put in text tip in here. Then you can also have a message to displayed is selected and I'm going to just put the writing in for each one so you can see what appears in there. And that's for each question. So you can see that you can have a message to spade if the answer is selected and a message to spade if the answer is not selected. And then for the kangaroo one, as well, we'll put the text tip in there. And I won't do that for all of them because you can see some of the differences of the ones that, you know, we didn't use. Down here we have our behavior settings. Now, overall feedback. Sorry, I should do that first because that's in order. Overall feedback is only going to be 0-100%. I put that in there as overall feedback because there's only one answer and get it right or it's wrong, so it's either zero or 100. We don't need any ranges in there. If it was going to be a multiple answer question, then obviously we can have percentages in there as well and set ranges with different feedback, depending on the range they got. In the next one is behavior settings, and this is all pretty standard. Now, you would have seen some of these in some of the other activities as well. So we can turn off the retry button or turn off the show solution. The question type here, because it's a multiple choice, it can be either multiple choices, where there's multiple correct answers, or it can be a single answer radio button where they can only choose one answer. If we leave it on automatic, it bases the choice of what type it is based on whether you choose one correct answer or multiple correct answers. Obviously, if you choose one correct answer, they can only choose one option. If you have multiple correct answers, then they're checkboxes, and they can choose from those. Now you can change it to one point for the whole task rather than one point for each answer. You can also show the confirmation box for each one as well. We won't do that. That just adds extra clicking for the students. And you can automatically check answers, where once the student selects the answer, it automatically checks it and continues on, but that's not good for accessibility. So we'll leave that how it is. And obviously, percentages if your activity stores data in the lean management system, then you can put them in there as well. For most of the h5p activities, there is the option to go in and change some of the text. So if on the screen something doesn't look right or you want to change the wording of it because it's got to be worded differently, you can do that in all the different languages and then go through each one and change it to what wording is preferred by you. This includes the finish text, as well, and retry text. So let's just select Save and have a look and see what this actually looks like. Give you a couple of important things. Which of the following animals is native to Australia? Well, if we choose the polar bear and we choose check, it will tell us that that's incorrect. But it will also show the message display if the answer is not selected, displayed if the answer is selected because that's one we selected. So you can give really useful feedback to the students straightaway about their answers and their selection to try and help them, select the correct one. Then they can use retry. They can choose, in this case, kangaroo, but before I do that, notice we've got some eyes beside here. Is the text tip, and you can have a different text tip for each one that can just give you a little bit or the student a bit extra information about each one of the answers where you may need to explain something further. If you go check, it's correct, and there's our overall feedback text that we had in there as an option. Plus the message if the answer is selected, which is the correct answer in this case, and the responses if the message displayed is not selected. That's basically all there is to this type of question. 8. Creating true/false questions: Look at a true false question. And for this example, I'll show you what it looks like first, and then we'll go in and create the true false question. The question I've put up there is the Great Barrier Reef is located off the coast of Western Australia, and they have two options true and false. If they choose true and check, it obviously tells them that's incorrect because it's not there. So we can select retry and it's now going to be false, which is logical because it can only be one or the other. When they choose check, it says, Great. It is off the northeastern coast near Queensland. And that's a true false question. So let's go in. I'll show you how we went about creating that question. Do? Select ad, and we scroll down to true files question we put in a title for our true files question, which you can just go in there. That's a title that's just for reference. We then put in a question. And the question that I'm going to put forward to you, is the great barrier reef is located off the coast of Western Australia? And is that true or false? Well, we need to choose which is the correct answer. The correct answer is actually false. It is not located off the the coast of Western Australia. It's actually off the coast of the northeast or Queensland, northeastern coast of Australia instead. The answer is false. And then we can go into behavior settings, the behavior settings allow us to enable retry Show solution. Well, we can turn off the Show solution button as well, but we generally leave those both on. Then we can also do a confirmation for these, but generally, I would leave those off, as. Automatically check answer. Not a good idea. It just means if the check student chooses their answer, it'd automatically jump straight through to the next part, instead of saying check answer. For accessibility, it's better to have the buttons there do the interaction. Otherwise, screen readers will get very confused. Now, show feedback on correct answer. This is if the feedback is correct. So that means they chose false, which means it's correct. So just remember it's a Beedbr. If the feedback or wrong answer, we can leave that blank, and then that way, they just go back and try again. It's true files, so it's quite easy. Next, we have the text overrides. This just means you can change text inside the activity. If you don't like the words true and false, you want a yes and no in there instead or something else like that, you can change that in here and you can change that for each language as well if you have multiple languages. You need to change those finish and retry all have options where you can change the text. So let's save and see what this looks like. This is our true files question. Grape Bare is located off the West Coast. Off the coast of Western Australia, if we select true and go check, it will just say, you got 01 points and show that it's wrong. So we chose retry. This time, if we say false because we know that the gray beer reef is not on the western side of Australia, go check, and it will then put in that writing that we had before that shows when you choose this answer and it's correct, it's off the northeastern coast near Queensland. And that's all we need to do for our true false question. 9. Creating quiz question sets: Actually look at a question set activity, and what this looks like is it allows us to have an introduction title and some introduction information to the question set that's optional. You can turn that off. Then we start quiz. And because it's a question set, it allows us to have multiple different question types, and you can see how you can just jump through the different question types here. The ones who are going to build in a moment. So one of them will be the multiple choice question, where you can then choose what the correct answer is. Then they can jump to the next question or they can jump to the questions from here as well. Once they've completed them all, then it will show us with summary of that if we've checked the option to do that. So then we can check each one, go through to the next question, work our way through, and when we're all complete, they'll get their summary. So let's get in and have a look at how we go about creating a question set. Justo content bank, and we scroll down to question set. Those question set. And we'll put in a title here, but you can just be question set for now in our question set. There is a quiz introduction, which we can put in here. And I'll put the writing in introduction title, so you can see where that appears, the introduction text, so you can see that as it appears as well. And then we have a start button. We can also put a background image in there if we like. The option of displaying the introduction is here as well. So if you don't tick that, obviously won't show up, but I'll tick it now so you can have a look and see what it looks like. Progress indicator that goes with that can be text or it can be dots. I'll leave it as dots. And the past percentage, in this case, is 50%. We'll leave it as 50% for now, but we'll explain a bit about that later. The important part is where we go down to actually adding the questions. We have our first question, which is question number one, and then we have all of these question types that we can use. And you can choose which question type makes the most sense to you, but first of all, we'll work our way from the top. Multiple choice is the first question, and I just put in here MC one for the multiple choice question. Then we go in and we put in a multiple choice question. Question could be, is the name of the famous rock formation in Central Australia, and then below that, we put in each of our options. So these are possible options here, and we also have to tick the option that is the correct one, so we'll do that now because it is Elo. And mountains can be another option. So we just go add option, and we put in our next option here and one more option. For each of these options, we can add tips and feedback, which you would have seen that in the multiple choice and true false questions. So that's an option you can put in there, but as long as we've got one selected for multiple choice, then that's all we needed there. Then we go to our next question. So we just go add question and we choose the next question type. So in this one, we're going to choose a true false. We'll leave this just as true, false because it's not a title that we actually need to use for any particular reason. And for our question here, we should actually choose an interesting question. So the question we've got here is koalas bears, is that true or false? And the correct answer to this is actually false. And in our behavior, we can go down here and we can put a response in. So when they do get it correct, we can say Koalas my supels not bears. That's our second question. We can go on to our third question. We just go add. This one on here could be a we drag the words. So drag the words is a fairly easy activity type to create. And all we need to do is drag the words into the correct boxes. And to do this, we have the word one in here, and then we put this beside it. So it's an asterisk beside either side of the answer. Then we do two, and we put a two with the symbols either side of it again, we do the same with three, and we put three there. Oops. It's the right symbol. Three in there. What this will do is allow the student to drag the one, two, or three into the correct place beside either one, two or three. And if you wanted to make it a little bit more sensible, sometimes it's worth putting the drag part at the front only because of the way it does its spacing. So we'll put that in the front there. So that's where that's what's actually going to be dragged now. It doesn't actually go in the description. It goes in the text area just here. So I'll paste that in, and then distractors, if you would like to have, you know, another number in there, you can actually put in, you know, something like four in there as well if you like. Just to make it so that there's an extra what they call the distractor. Then we have our overall feedback, and with this one, you can decide if you want to have a score range for these. They'll get one score or they'll get you know it's a percentage of the total answers there. So it'll be 33%, 33%, 33%, so you can work out your ranges based on it. And then we go down to behavioral settings, which there isn't too many. Some feedback we don't generally use though. But you can try that out if you like. And then we jump to another question. And there's just something I wanted to show you here. Let's say we wanted to add another multiple choice question, but this is going to be multiple choice with multiple answers. We can go to the first one. We can select copy, then go down to the fourth question, select Paste, and it will paste in exactly the same, all the details and all the information into the next question for you. So this is going to be multiple choice number two. That's question four, but it's the second multiple choice. So we could have another question in here. We just replace the question and the answers, which are the following states following our Australian states. We can put those in. And for this one, there's going to be multiple correct answers because these are all states. So we've got one, two, in this case, three, and fourth one and we can have some feedback on this one, as well. So if they do choose this one, display if the answer is selected, we'll just let them know that that's actually incorrect. So there's three correct answers, but we don't need to tell them there's three correct unless we want to. We can just leave that as questions, but let's have a look and see what that actually looks like before we go any further. So it has introduction title Introduction text. So that's optional. Remember, we could turn that off in the settings at the start. We just go start quiz, and it will ask us a question. What is the name? And if we go check, we got that correct, fantastic, then we can go on to the next question with arrow. Trae false question. We can try that that's incorrect, so we'll retry False gives us our answer there with the response as well. Jump to our third one. Now, this is the drag and drop one. Drag the words in the correct boxes. So if we drag our three over to here, our one over to here and our two over here, they could be, full sentences with words in them as well. And then check that will show they're all correct. Jump to our last one, and here we need to just choose all the ones that are states in Australia. If we choose the wrong one here, it will show us that we got one of them wrong. So we need to go back and retry that and get them correct this time. Okay. Now they're all correct. And that's the question set activity. 10. Creating image hotspots: So we're going to create a hotspot. And here's what we're going to create just so you can see what it looks like. It's a guitar, one of my guitars, actually. And on that, we have what are called hotspots. And these hotspots are positions on the screen that students can click to find out more information about that part of the image or just some information that's relevant to that part of an image. It doesn't have to be like this where it's a specific image. It can just be an image with some hotspots that they click on with information on there as well. So for the body, when they click on it, they get to see some information about the body. For the neck, they click on that. Notice this one filled up the whole screen. So there's a setting to do that. We've got some information here, and then we have a separate image below. Then over here, we've got the neck. And in this one when we click on that, it doesn't fill up the whole screen. First of all, it also has a scroll bar, which is added to it. We've got some text, and then we've got an embedded YouTube video. So that's what we're going to have a girl creating. So let's jump in and create a new hotspot. So to do hotspots, it's relatively simple. We're going to use Loomi for this as well. So let's go open up Lumi and search Hotspot or create new HP, then choose Image Hotspot. There's our Image hotspot. And we type in a title for it. Now the title again, can be anything you like. So we'll just call this hotspot example. Which is good. Now, for a hotspot, you need a background image of some sort. So choose a background image, whatever is going to work for you. So I'll just choose Add. I've just chosen an image of a guitar. There's a couple of things I want to do with that first. One of them is to resize and rotate that image. So we're going to edit image, which we can do this inside here as well, which is really quite clever. We can rotate. So we can rotate the image around like that, which is perfect. And I'm just going to trim a bit off the bottom. So to do that, we use the crop crop tool, and we basically just draw the area that we want to cover for our image over the top and then choose how we select tick that locks it in. Now we've got our new image layout, and we choose Save, and there is our image laid out correctly. Now, you should always have an alternate description all the time. Images. So we're just going to put in here electric guitar we'll say it's orange background. There's also copyright options, so you can go in and put in who the copyright holder is for this. And in my case, I can put myself in there because this is one of mine, and it's from this year, that's one of my guitars. And the license you can put down for that, obviously you can choose what the copyright licensing is, I'll call it copyright without a licensed version because we don't have that stored in there. And then we can close now we move down a little bit further. And here we can choose what the icons are that we're going to actually allow people to click on. We'll make this a question mark. You can actually have your own icons. So you can choose here, upload image, and you can choose an icon that is your icon that you use for all of the hotspots. And the icon is the area that they actually physically click onto. Okay? So you can choose that if you like, or you can go the predefined icon. Like I'm going to use here, there's a few to choose from. And then we have the background color of that, as well. So I'm going to change that to light gray. Sorry, this is the color of the hotspot. That it sits on. I'll choose that as a light gray. Now, next we go down to our actual hotspots. This is where we create the individual hotspots. To do this, it's easier to click on this plus, which increases the size of the image that we're using, and then we can click on the area that we want to actually explain. So in this case, we might do maybe over here, the body of the guitar and we'll do a description about the body. So cover background image means when they click on the hotspot, the content that appears covers the whole image. Or you can leave it blank and not cover the whole image. I'll show you both variations. We'll go without covering it first, and you'll see how that works as we go through. So this is the body of the guitar. So we just call that the body. Then we can decide what content actually goes inside the panel that opens up when they click on it. In this case, we'll have some text. So in the text area, we can put some information in here. About the body of the guitar. I just put in here the location, the large part at the bottom of the guitar, what its purpose is, and the key parts. The content in this case isn't important as much as the process we're going through to do this. That's one. You can then add another item below that or inside that panel as well. At this stage, we're just going to do one panel only. We'll jump to the next hotspot, and then the next one we'll put a couple more in. We click Add Hotspot, and again, we can zoom in to choose where this is, and we're going to go with the tuning pegs over here. TNNG we'll call them tuning pegs. It's part of the headstock. So we're just going to grab some text content first. So put the text content in that explains what tuning pegs are, and that's just a little link to go to some information. I'll take that one out for the moment. Then we're going to add in a video as well. So we go add item, and we choose video. And in this case, the video will be called how to tuna guitar. So I'll call that Ha china guitar. And then we're just going to add a video source by clicking in here and adding the link to the YouTube video. You can upload videos, but again, it's best not to upload videos because it makes the whole file absolutely massive for the h5p, whereas linking to the content or embedding the content saves your holler space, time and effort as well. Plus, you can go in and update that to a new video if you need to easily without having to download and upload and all that's of thing. So in visuals, you can add an image in front of that or you can just use the default image. That's fine. Playback is to autoplay the video. We won't do that. We won't loot the video either, but you can. And last of all, for accessibility, you can also add a web VTT track, which is sort of like a timed or subtitles, where it is a timed track of text that puts the subtitles into the right locations in the right order. At specific times or intervals in the content. So if you have anything to do with web VTT, you can create those as well, dynamically. But this is where you can put those if you need to. YouTube does actually create its own subtitles, as well, so you can use those instead if it's YouTube video. So that's the last part of that. Then we're going to add one more hotspot, just so we can try one other thing that we need to do. And the last hotspot that we'll create is the neck here. And with this one, we're going to say cover entire background image. And we're going to call this the neck slash frets. And inside that we'll put a little bit of text in there. Just like that. The next item that we'll add to this as well, we go Ad item and go down to image. Then we can add our own image in, so I'll just use AD going to add a cord chart, and we'll put this example cords. Sorry, not a cord chart, but just the cords to show you how cords are positioned on the neck. And we'll put that in over the Hova text, as well. Say alternative text will be for the browser. Hova text will be I'll show you how that works will be for exactly that. When the mouse hovers over the image, it will show you that name as well. Okay. Now, further down, we have our last part, which is the overrides and translations. Now, I should have already been through that with you, but if we miss that, I'll give you a really quick rundown. Basically, you can change any of the text that appears inside the h5p. So where it says hotspot and then has a number, you can change the word hotspot to some other term that you like. Instead of close, you can have end or finish or something else put in there. So you can go through and change all of the related text that is available. Four, in this case, it's for the English language. Obviously, you can choose another language and change the text for those as well, and all of that gets stored. All of those changes get stored inside the age five B as well with the different language files. So there's all the overrides that you can use. Based on the image, so you can change that instead of image. You could say, it's called picture instead, expand picture, minimize picture, or whatever term you prefer to use. So that's what this little section of text overrides and translations are all about. Okay, we've done all of that. Let's go back to the top, and we're going to view this and see what it looks. So you can see, first of all, that I made that background color a bit too light for the button. So we need to fix that so you can see the question marks properly. But if we click on body, you can see it pops open with the information about the body. Then for the tuning pegs over here, if we click on this one, there we go. That's opened up, and it's got some information. Notice that it didn't shift to like there's no the spacing isn't really good there. This does happen in h5p. I'll show you briefly how to fix that as well. And then we've got our video that we can watch below that. So just remind me to go back and fix that. And then for the neck, we click on that, and you can see we've got the neck, frets, location, and the key parts. And there's our image sitting in there. It's a little blurry, though, so we might need to fix that quality up. But if you hold the mouse over, you can see it says example Cords, which was that mouseover thing. Okay, so two things to fix. One is the question mark color, and the other one is when we were tuning over here, I believe it is, yes, the spacing in these paragraphs. So let's go do that. So if we go back to go down here to our color, and we just need to make this a darker color. So I'll just make that a dark gray. We'll choose that. And then the one we had the problem with was the paragraphs here. So if we go down here and we just press Shift Enter and Shift Enter. So hold shift and press the Enter key to drop those down. Just makes an extra line or extra space between the lines so that the formatting looks a little bit better. We jump back to the top again, go to view. You can see the question marks now stand out quite a lot better, and we go to the one that was the problem, which was this one over here. You can see now we've got some extra spacing below there and between that paragraph, which is exactly what we wanted. And that's how we create ourselves hotspot. 11. Creating find the hotspot activities: We're going to create a find the hotspot, and to do that, we're going to use this image of a kit from a photographer. All the students need to do is to go along and click on different things to try and work out if they can find or where the camera battery is. So if they think that's the camera battery, it just comes up with, sorry, this is a mobile phone. So they have to retry. Down here, this is a drawing pad, they click on this object here, we don't know what that is. So we just went Sorry, try again. They click anywhere that isn't an object we've assigned. They just get Sorry try again, or they get told what it is, and it's still not correct. When they do get the right answer, either one of these batteries here, this is a camera battery. They get a pass and they're done. They've found it. They've completed the activity. So this is what the activity looks like, let's go step through and I'll show you how we actually go and make it. So find the hotspot. Here we go. Search that. We're doing this in Loni. We're going to add a background image to this. So we choose Add. Choose our background image, which is just a collection of items that you would find in a photographer's Camera bag? We then choose hotspots. In the description. All they need to do is find because they can only find one item. It's all they're allowed to do find the hot spot because it is just one hot spot. We're just going to say find the camera battery. Okay, so we're going to do the correct one first. So to do that, we just go correct. We go This is a camera battery. And we're going to put that over the camera battery, which is just there. Now, there is two of them here. So we do need to make sure that we cover both, and we can do that in one go or we can do it as two separate things. This is a camera battery. So if there's more than two places that have the correct answer, you can do them as two separate things. Either one is correct. Then we choose other things like this is an SD card. We could put that there. We didn't tick correct on that notice. When I went to Edit, we didn't tick that. It's only for the ones that are actually correct. Then we could put in. This is a GoPro. Probably shouldn't be capital G, shouldn't the Pcapal as well? Probably. Again, I didn't tick that one. This is a mobile phone, just for those that get confused with them. We can put that one up here. And I'm not sure what this object is over here. You have to ask a videographer exactly what that is. I'm not gonna put anything on it because I'm not sure what it is. And another one could be, and we can we could make this. This is a camera camera lens. Well, we can put that across both if they click either one. It's quite okay. And probably this is a drawing pad. So we're sort of caring. Most of the objects on the Patriot don't have to do all of them. We can leave some empty, as well. We can do a circular one, as well. This is a microphone done. We can put that around the microphone there, tack that right up to the toyota bit, if you like. That's it. And once we've done that, we can choose Save. Now, save that one, and let's have a look at what it actually looks like. So, find the camera battery. So if I select something like this, as a typo there, we can fix that. This is a GP and it's wrong. So we close that. So we thought this was it. We can click on it, and it just says that is wrong. Doesn't give us any information about it, says it's wrong because I don't actually know what it actually is. Up here as well, this is wrong. Any of the areas where we put something, it can tell us what it is, but the rest is basically wrong. So once we go to the actual correct answer over here, this is a camera battery is correct. I don't know why I put typos in there. I can double click. This is a camera battery. Let's just put the S back in. This is a camera battery. So I do the same here that's a lens. The correct. Cooper. That's the other one. And that's all there is to creating a hotspot or fun hotspot image. We can give information like a feedback that happens every time, which can just be something like sorry, try again. And then there's retrying close as well as an option. Then we have the text overrides for fine hotspot. So any text that you want to change, you can change that in here for any of the languages as well. Just to view that again, if we get the incorrect. This is a GP. If we choose that one says this is a drawing pad, which is not correct. Oh, sorry, try again. I put it on the wrong thing, didn't it? That's supposed to be the drawing pad. Just the. Lucky we checked. And we got a view again. Now it just comes out with sorry, try again when you get it wrong. And obviously, once you get it correct, you've got to correct and it can be either of those that you choose when you go to choose a battery. So correct either one is basal and that's what we created. That's how we create a find the hot 12. Creating dialog cards: So we're going to look at dialogue cards, and this is what the dialogue cards look like. It's just a card that, in this case, we've got four cards that you are allowed to flip over. And this one here has German language or part of the German language, Afterson which free turnover means goodbye. So we can start to learn what the different words are. This one here, God and tag, which means good day. Turn the card over. Good day. If we go to the next one, God and Morgan, if you're not sure what that means, turn the card over. It's good morning. You can flip the card back again to recheck what it says. So this is the type of flip cards that are upsy used in learning language in learning many other things. And our last one here, Guten Abend, which means good evening and that's one way of viewing it. I'm just going to show you the other option as well. So you can see that before we actually go in, there's two ways of viewing dialogue cards. This one here allows you to look at the word Good and bond and say, that means good evening, so you turn the card over. You got it correct, you can say, I got that right. Gooden Morgan. Good morning. Got that one right, as well. Abeisen which means goodbye. Turn that out. It does mean goodbye. Got that one right? Good and tag, which means good day, but imagine we got that wrong, and we can go, Oh got that wrong. When we go next on the last card because we've finished our cards now. We go next, it then gives us a summary of what we got right and what we got wrong, and you can use this to help improve your progress with using the cards. To create a dialogue card. We're going to Lumi, and we just put in dialog and choose dialogue cards. Dialog cards are quite simple. As you've already seen, we're going to put in a title for the dialogue card. It's just example. Again, this part is just about metadata. It's not about the actual name. I've put in heading here, but I might just change that to dialog card heading, so you can see where that sits. Now, mode is an interesting option. It's actually quite clever. Normal mode is just where you have dialogue cards that you just flip and you move to the next one and you flip and you move to the next one and flip. That's it. But if you have repetition, what it does is it lets you flip the card and then decide whether you were correct in working out what it was or not, and you can start to score your progress to see how well you go. It's quite clever. So in the description, we're just going to put in here German language because we're just going to learn a little bit of a language, use the dialogue cards to help with language learning. And that's quite a common thing to do. So we're going to add a dialogue Our first one we're going to put in here is Guten Morgan. And for that, we're just going to put in the English translation of that as well into our dialogue card. We can add an image, and we can have t text for the image, and we can also have a tip that gives you suggestions as well. I won't put the tips in because that can be something you can have a little play with, but let's just get a dialogue card created first so you can try out. So that was our first one. And next one will be Guten tag. We'll put that in Guten tag is good day, and our last one good enband and goodbnd means good evening. And the last one, just to have one extra one, Abitison means Abison is good pie. Okay, there our dialogue cards. There's behavior settings that belong to those. Obviously, there's a retry button, disable backwards navigation, so you can't jump back through them. You have to work your way through the cards in order. Scale the text to fit inside the card is actually quite useful. If you do have a lot of texts in there, you may need to do that to squish the text down a bit and randomize cards, which is what we'll choose, allows you to randomize the cards that we've seen. And the last part is the text overrides, which you should have seen that in most of the other activities now, you can replace all of the terminology. In here for each language. So that's the English language. Obviously, choose your language. So you need to change the terminology in. Okay, let's see what this look looks like. Let's see what this looked like. Let's see what this looks like by choosing view, and you can see we have our dicen, which if you remember that means goodbye, which would that correct. Jump to our next card. Good and bn. Click on Turn and it says, Good evening. So I can start to learn what each one of the is good and tag, which is good day. Good and Morgan, which is good morning. And then we can retry and it runs back through the cards again. But if we go back to Edit and we change this mode from normal to repetition, let's go to view. This time we have our Vdson, which we then have to go, What did that mean? Did that mean hello? Did that mean goodbye? We're going to say goodbye. And I got that right. Good in tag. Good day. Well done, got that right. Good in bn. Good. Evening. Good evening. Got that one right as well. And Gooden Morgan is really easy. Means good morning, let's imagine we got that one wrong. I got that wrong. We go next, and it now tells us how many we got correct and how many incorrect in a summary with an overall score, which is quite useful for helping you start to gauge how well you're learning the terminology or how well you're using the cards. So that's all there is to using these cards. 13. Creating interactive videos: So we're going to have a look at interactive video, and just an example of what we're going to end up with at the end is a YouTube video embedded in the page that pauses at certain locations and allows students to do certain things or show certain things on the video interactively. So the first one that stops at is about 1 minute 27. I'll just turn the audio off. And you can see here that as they got to that point, some web links have appeared automatically, and the video just keeps playing over that. But if we go to the next one, you can see the little points here. These are where interactions happen. If we just let that play through to that point where it's going to stop, you'll see when it stops, it then displays the interaction that we've created or that we're going to create in a moment. If you have look at, so the interaction here is just a true false question. They can choose true or false, check the answer, and retry. And there's all the settings to explain that I'll show you how to do all of this and then check. Continue. When you continue, the video keeps playing and working its way through. So jump through to the next one. And the next interaction type example that we've got here is another multiple choice question. This one has extra information and hints and things in there that you can use as well. Instead of a true false multiple choice, and you can use check as well to check your answers and see how you went. If you do know the correct answer, there we go. And the last part is a summary quiz. So at the end of all of this, there is the option for a summary quiz, and we just open up the summary dialogue, and it's asking, choose the correct statement based on the whole video. Now this is optional, you don't have to use it, but I'll show you how you can add that. If not, you don't need to use it. I've just shown here which one is correct, so you can choose correct and test it in the process. But let's go through and I'll show you how I created all of that. Let's go and add an interactive video, we use add Scroll down to interactive video. For an interactive video, we just need a title, and we just call this interactive video for now. Then we have to add a video. And to do that, it's just a case of embedding a video in the content. So we go to YouTube and we find ourselves a video that we like. In this case, I've just got this one here. It's just a video that talks about adding interactivity to an online learning platform. We grab the URL from the top. We then go into our page, and we choose, we paste it into the YouTube link. Now, you can upload a video file as well and use a video this way, but definitely advise against that for any web delivered content, mainly because it's going to slow down your learning management system. It takes up a lot of storage space, and really it's more practical. In the long run for everyone with mobile devices with different device types and sizes and different network bandwidths that may need to change or stream the video at different rates. You really want to make that as seamless as you can for students. So definitely use the YouTube or video sourcing. So you can use Vmeo as well and some other formats. But we just past the URL in and we select insert. Yeah, there's a few options here for this video, and this is the actual title of the video, which we can show or hide on the video screen as well. We can also have a short description and not just type in short description text in here so you can see where that sits. You can also replace the image for the video that launches the video, but this doesn't work on YouTube videos. So just make note of that. So we don't need that seeing. Then we can also have text track. And this is basically subtitles that follow along with. Yeah, YouTube generally has subtitles anyway, so you can often just leave it as those subtitles rather than try and put the in yourself. So I would leave that at the moment. From here, we just need to add the interactions. Now, this is where things get a little bit interesting because there are so many interactions you can add. The way to do this is quite simple. All we need to do is drag the timeline along to where we would like the interaction to happen. In this case, we could move it to 1 minute and 18. That's the video playing at the moment. Then we're going to pause it here because it's just finished talking about the different interaction types, and then you can add in some interactivity that you'd like to put in for this video at this location in time. Here's some of our options. We've got a label, we've got text, we've got a table. Link, an image, a statement, single choice set. So that's like multiple choice, but with only one answer, multiple choice with multiple answers. Tu files question, filling the blanks dragon drop. You can put dragon drop inside here as part of an activity type as well. There's a mark the words, drag the words crossroads where you can make a decision to move somewhere else, and a navigation hotspot as well, which we'll have a look at, and one more on the edge end which is an image choice. So we're going to look at a couple of the major ones or common ones that people use. One of them could be to link out to another website. So we're going to go ink here, and it's going to show this at that time frame. So 126.516 until 136. We have the option of pausing the video if you like. And here we can just say view a website. So it could go to the Rickshaw website. And you can just put that in there. Any other visuals like the background color that you want to choose or chatter box, whatever you need to put in there, you can add that. If we just give this little go, we just choose done. You can see it's appeared here with a view cochet now, it's probably a little bit light there, so we can once we find that object, we can click on it. Obviously, moving it around is fine. Can do that just by dragging it. But if we want to go back in and edit, we just click the object that we'd like to change. Edit, and we could go here and change the background color to darker color. Choose done. That way it stands out a little bit more. There is the option to copy, so if you need to make multiple ones of these, so you might have a few links on there just in that section. You can do that. There's bring to front, center back, and obviously remove as well. But how does this look when we actually demonstrate this to students? Well, we can actually just test it in here. I just hit Play, you'll see. There's a little dot just there. That shows us there's something happening on the timeline. Make your content, your education content. If I let that play through, I'll just turn the sound off. If we let that play through, you'll see it'll get to this point here. And that's when that writing appears, and then perfectly, it pauses there and waits for the student to either click on that link or to click Play to continue. At the. If we jump forward a little bit further, which we can do, and we'll pause the video here. Now we can go through and choose a different type of interactive or interaction for students. And the next one we're going to choose is the true or false. For this, it opens up and says, Do you want a button for them to click or a poster click. Now, if you choose a button, it is just a button. You don't have to do anything else. If you choose Poster, is an expanded indirection display directly on top of the video. So do you want them to have to click on something and then it opens up or you just want the question or the quiz to open up in front of them? Have a look at both of those. So you can see what the difference is so button first. And we'll just call this a label. So you can see what goes in there. And then we have the true false question, title for true false Question. And then for the question, we just have any type of question that you'd like to have. It doesn't really matter what the question is for the example of this, an example question could be, is Australia's both a country and a continent. And the question is true or false? And the answer there is actually true. So we'll leave that as true. Obviously, if the answer to the question was supposed to be false, we'd set it as false. We then get the option for students to use a retry button or a show solution button. So you can just let them keep retrying, and they don't actually get to see the solution until they get it right. Now with the tree files, it's going to be pretty easy for them to see that. We can also then give them some feedback. So we're just putting here feedback on correct so you can see what appears in there and feedback on wrong answer. Put that in. So let's take a look and see what that actually produced by choosing done. And here and I'm just going to save it so you can see it in proper action and see what it actually does for us. So here we go. Here's our video, and you can see there's these two points along the way. We're just going to move it up closer and turn the sound off, so we don't have to listen to that. And you can see it playing through. And as it gets to this first point, it will just pause. We just stop and show the link to the video ricochet. So that's fine. Then we can just hit Play and keep going with the video. We jump forward to the next location. We're going to get there, it will now pop up with a label, and the student has to actually click on that label to show the question on there. Now, remember there was two options there that we could have. We can actually get it to just show the quiz question straightaway without having an extra button for them to click, which is probably more practical. Now, let's try this out if we choose the wrong answer, which is false, and we say check. Then it shows some feedback about that. Feedback on wrong answer is what appearing there. Then they get the option to retry. Can choose true, go check, and it'll show, it's correct, and I'll also get the feedback on correct, which is that other little box that we typed in. But let's go and change that setting. So we're just going to go back in and edit. And we're going to change the setting on that interaction. So we choose interactions tab on our video. We move the timeline up to here so we can see the label. There it is. Now we choose Edit, hold the mouse over the label, choose Edit, and this time we'll choose poster. Leave everything else the same. And we'll just save that I should get done and save. Move it up to here where it plays through. And as it hits this point, it now pops up with a window. Now, notice the position of the window and the size of the window. Probably not appropriate. We do need to fix that up so that it sits better on the screen. So let's just go back to Edit, go to add interactions, scroll up to this interaction. And here it is here. Now you can see that it's actually positioned for us. We can then make that bigger. And position it where we'd like it to be on the screen. Remembering, too, that when they do check answer, it is going to move down a bit further and have some other information in there. So we do need to make sure that's big enough for them to be able to actually show the activity and the answers in there as well. If we just save that, we'll have a quick look at that change that we did, you can see how that fits in, then I'll show you a couple of other activity types that go into interactive video that you may want to use. Just jump forward. To here, turn the sound off again. And you can see now it's popped up in the right area. It's in the middle. We can go check and everything's fitting into the area. So always double check this. And obviously, check again, done, then continue. And when you hit Continue, it just goes on with continuing playing the video. Let's go in and add a couple of other little parts to this or a couple of other interactions so you can see a few more of them and what they do. So we back into edit. We add interactions, and in here, we've got a multiple choice. Just really quite simple. And a single choice. I'll go with multiple choice. We haven't looked at single and multiple choice activities yet, I don't think. But we'll put this in. So here we go. Our title would just be multiple ChoiceQuestion. And then we need to put a question in there. So our simple multiple choice question could be, what is the capital city of Australia? And then we put in the different options. We just put Sidney in there. We'll put Alban in there as well. And we can add another option, and another option could be camera. And we do need a fourth do we just looks better. And we'll put Principon in. Now, the correct answer is actually camera, so we put that in as correct. Now with multiple choice questions, you can have tips. Sort of a hint type thing. This appears before a user checks their answer. So we'll put in the tip text. I would call it a hint. In there. Text if selected, so you can see how that works. This is the best way to go through and do all this, so you can try it out and see what actually happens. Message, if not selected. Put in here, answer is not selected. So that's the Sidney one. Then we can go through and do that for all of them. So, you know, you can put in text if it's you know, for this one here, and then a message display selected all of those, you can just fill all of those in. Now, just a couple of behavior settings. Again, we get the retry button. We get the show solution button, which is in there. We then also get select the look and behavior of the question. Now, because you can have multiple choice or you can have single choice. We'll leave it on automatic. What automatic does is if there were two correct answers and we chose those two, it would automatically make the question type into a multiple choice with multiple answers as in with checkboxes for them to tick. If we change this to single choice radio buttons, that means they can only choose one answer, and there is only one correct answer, so we have to make sure we've only selected one option. So it is easier just to leave it on automatic and let it, work it out itself based on whether you chose one answer as correct or multiple answers as correct. You know, there's a few other options here as well. You can give one point for the whole task. And that way, you know, it's sort of single answer mode, if there's multiple answers, but you still want it to be one point for the whole task, then you choose that so that it just gives one answer. You can randomize the answers as well. That way it reorders what the answers are in so that if they go back and do the thing twice, it could be in a different order. Then require an answer before the solution could be viewed is exactly that. They can't do anything. They can't know, try and check the answer or, you know, show the correct answer back here where we've got a show solution. They can't do that until they had a gut the question. Then we've got the confirmation boxes for these two, which normally you don't need to use that. And to automatically check answers, this will make accessibil suffer and make sure you know what you're doing. Okay. So if they put the correct answer in, it automatically goes straight to the next part to say, that's been answered correctly, and you don't need to go through the extra buttons of, you know, check answer type. It could be useful but probably best to avoid. And then we have a pass percentage, which you can set that if you are going to store this in grades, which can happen on some learning management systems as well, then you need to set that and show score points if there's multiple questions, multiple answers. In there. Okay, what we probably need to do is have a quick look at what this looks like. So we'll just go done, and again, we need to move this out so that it's more visible. Now, you will notice that I put this right at the very beginning. I didn't actually move the timeline across to where we wanted that to go. So if we did need to change that, we can click on or we can look at the timeline, and so we wanted that at about 5 minutes. Instead, we can go back to there. We can edit, click on the object, edit, and then change the timeline of where it actually starts. So we go 5-5. Ten, and we'll have it stop as well. So we can choose done with that interaction. And if we scroll across near, we can see now at at 5 minutes. That's actually come up with that question. All right, a little bit more space here just in case we need it. There's our icon showing the extra information, but let's go and view this one as well and see what this interaction looks like. Jump up to just before 5 minutes, turn the sound off. You can see it's popped up with what is the capital city of Australia. Notice the order Bridgeman Sidney Cambra Melvin. If I choose the I, it'll give me some extra information that might be useful or helpful to the student when they're answering the question. If I choose Sidney as the correct answer and go check, I will show me that it's not Sydney, but it will also pop in the extra text in there to say, Look, you got it wrong. Try something else. So we've got our retry button which we can use. If we now choose camera and select check, it will show that is correct, but it will also show us the Sidney message if answer is not selected. Remember, we put those messages in if it's not selected. That way you can give information about other answers, and you don't have to use these. I won't show it if there's no text in there. But you can give other bit extra information, which can be really useful. Just remember that the more you have those, the bigger you're going to have to make this panel to make sure that everything fits in on the screen. So always test that. And then we can just go continue, and it will continue on. Et it again and add interactions. And probably the only other one that we will have a look at. And here is the navigation hotspot. Here, you can tell it where you want to go as in a time code. If we put this at 1 minute and 1 minute ten, so we want to go to your time code, and we want to jump to 5 minutes. And then we just have, you know, alternate say skip this section. Skip this section. Skip this section. There would go to the rectangular shape, we're just going to choose done. We're going to move that forward to B 1 minute B things Now, what this is is this is actually a button, and I've put the writing in there so that you can see what it does and how it works. But it's just a hover area. So it's not the actual button itself, and you can't you can make it into it you can. You can make a rounded rectangle. Let's skip this section. So we'll make it pause as well. This is as if you have a part of the video where you don't need to watch this, you can get them to skip it and go on to another part of it because sometimes you might have a great video, but there's a bit of it you don't really need them to. To do so you can just skip this section and move on to another section. If we just save that, this is jumping from 1 minute to straight to 5 minutes is what we're looking at. If we go to our There we go. There's our 1 minute. You can see it's come up with skip this section. If they click on that, you will jump straight to 5 minutes where we've got our next quiz question. It's just a really useful way of navigating around, making it easier to jump around a video and skip things, which I think is pretty important can be, especially if it's a really long video, where you want them to sort of look at certain parts of the video. Not all of it. In fact, you can have you could have this as a navigation over on the left that, you know, has Section one, Section two, Section three, and leave it visible for a lot longer than, you know, 1 minute. You can have it, you know, visible 0-0 to 1 minute, sort of like a navigation on the left that they can use to click through, and it will just keep showing that. And you can say skip to this section, skip to this section, and skip to this section. Really useful way of doing that now one of the other interaction types that you may be interested in using. And you can try them all out because they're all really interesting and definitely worth having. I just want to show you how you can add and remove objects as well because we haven't done the removal part of it, but let's say you go to put an image in and you add image, and this is just how you would add an image anyway with a button where it opens up the image or as a poster where the image sits on the screen, which you can do, and that could be quite useful. If we just select done, you can position this image somewhere on the screen, and it could be some information that you want to have just displayed there. Plaining some extra information about what's happening in the video. So, that can be really useful, and you can resize this, stretch it out, all that type of thing, depending on what you need. But if you want to delete that image because you decide on, you don't that, don't need it, then you just click back on the object or go to the timeline first where that sits. Then click on the object and then click Remove, and it will say, A, you sure, and you go confirm, and that's now disappeared. And that's a really easy way to remove. Couple of other little things that I'll show you while we're in here as well. If you want to add more of these, there is a copy button, so we might have wanted to add a couple of different links to a few different things at that time in the movie. We can choose that choose copy, and then over this side, you'll see that's changed blue, paste. So you can just click Paste, and then you can put in the extra links. And it will be a carbon copy of what you put in before. So if you do need to change it to a different link, then you would click on it, go to Edit, and put in a new weblink in there. That's all the main parts. The last thing we'll look at is the summary task, and this is optional. But if you click on the summary task tab, you can actually put in sort of a summary quiz, they class it as. And all you need to do is put in a question or some type of question about the whole video where you'd like them to choose which one is correct. In here, we've got statement Now, remember that the first one is the one that is correct. It will re order automatically for students, but just we'll put in correct, so you know, this is the correct one. And then we can have a second statement and a third statement like that. And that's really all we have to do other than choose where that appears, or, you know, it appears 3 seconds or 10 seconds before the end of the video, we save this, I'll show you what it actually looks. Here we go. We go right to the end. We just about the end of the summary here, and it says, open dialog full on your useful. I'll just get that audio out the way. Is there a dialogue when we click on it? It says, choose the correct statement, and we can choose, which one's correct or not. That was wrong. So we choose that one that says it's correct, and then we can continue. And it just tells you there that you've answered, you know, one correct question correctly. You can't have more than one question in there, obviously, as well. I should have shown you. If we go back to our summary task down here, you can add another statement, the first one being correct and give them choices that they can use for that. Now, when you do fill this statement part in, there is also this overall feedback. So you can decide if you want to give feedback based on a certain range. So this is sort of a custom feedback based on what score they got. So you obviously assume that everything is if it's one question, they get that correct, it's 100% or zero. So you can put in some feedback that appears for them just to show them or give them some sort of response back after they've completed the activity. Now, you can obviously add range and change that to 50%, 51%, and give different feedback, depending on how well they answer the questions. Obviously, if you've only got one statement in there that they're answering for, then it's not really going to be very helpful dividing that up. But if there is multiple statements, then you can divide that up into different ranges and give different feedback for them. So have a play around with that because it's really interesting and definitely worth looking at. And I think we looked at, we haven't looked at the behavior yet. We can do some settings for the whole video as well, and this means you can start it from a certain point. In the video, instead. That way, if it is a long video and, you know, there's some stuff happening at the start of it that's really irrelevant, you can just get it to start from where you want it to go from. There's the option to autoplay and also loop the video. You probably don't want to use loop video, but you can. This gives you an override for the show solution button. So you can disable that for everything rather than doing that one at a time. And there's an override for the retry button as well, which you can disable for all activities interactions inside this interactive video. It's the bookmarks menu as well, which you can use, but it's not available on iPad, so we won't worry about showing you that at the moment and show button for re winding 10 seconds. Sometimes that's really useful to have if you miss Debo, you just want to go back and check, what did they say just there? There is an optional button that you can show on videos to do that. And this disables the video navigation. So you can turn off the video navigation that's part of the YouTube video navigation because you don't want that displayed. Actually want the normal navigation shown or the navigation that shows all the interactions in there and deactivating sound will deactivate the video sound and prevent it from being switched on. So if you just want to show a video with no audio over that and just ask questions about it or use it for some type of interactivity, I've never actually used it, but it is there as an option as well. And text overrides. So you can go in to all these and you can change the names of all the components inside there. So the play title, the pause button title, the title for the word interaction. Lets you change all of these different things. So if there's some wording in there that you see and go, Oh, that doesn't make sense, can I change that to something else? The options probably are in here and you can scroll through it. It's pretty big. So true false questions also have that option, the summary does as well, and multiple choice in there. As you add the other ones to it, the other interactions, they will appear in here as well, so you can go in and modify the text overrides for any of these now. It's also multilanguage, so if you are doing multiple languages, you can go through and edit each one of those as well. We'll just click Save. And this is our interactive video. 14. Creating an image slider: We're going to look next at an image slider. And as an example, here is the image slider that we're going to create. It has three images and allows you to switch through each one using the arrows on the right and the left or using these buttons down the bottom. By the way, so I'll show you how that's put together. Let's get started into writing an image slider. We'll go to add, and we'll go and find Image slider. And with an image slider, obviously, you can type in the title for it, and then we have a title that actually goes with the image itself. This one is the title for searching. This is a title in relation to the image. So we'll just call this image slide. We'll give it a number one so you can see where that sits. Now, if we choose Add, choose our first image just there, we do need to have an alternate text for our image. You should always have that for accessibility and for text to speech readers, as well. So this would be car driving car driving along a road, we can say A car. It's better English. And we can make this Hova text, as well, if we like. Then we just choose at item again for the next one, and this will be the next image slide. We'll call that number two. We'll go and grab a second image, and this one is just a robot. On Mars, we'll say that we can add a third image, as well. So this will be our image slide number three. And for this one, we've just got people dancing. People dancing, and the aspect ratio will leave that as automatic. If you choose custom, you can actually choose an aspect ratio, which just means it resizes the layout to what you want, and I will show you what that looks like in a moment. But let's look at it just on automatic to start with. We have our normal text overrides where you can rename all of the controls and buttons and everything that goes with this. But we'll leave that how it is and just save and have a look to see what it actually looks like. Here's our slider. It has the arrows on the right, and it just slides across. So there's our three images. Which is great. And you can also click on down the bottom here to view those as well and slide them across. So that's all there is to creating an image slider, but let's go back to edit because you may want to change the aspect ratio down here, and I should have just shown you one other things, shouldn't before I do that? Let's just save. If you help the mouse over the images, it also shows you the text for this one, a car driving along a road, and this one here, robot on mass. Now, back to our bit. Back to our ratio right down the bottom. We can change that to custom and aspect ratio width. So 43 is the default layout of that one. 169 is your standard video layout ratio. So if we save that one, you can see there is changed the ratio of the viewer, not of the image, but just the viewer so that it sits in that size, which does look a little better. It doesn't take up as much room on the screen as well. And if I just edit again, the only other option I was going to show you is you can choose decorative. And if you choose that, it doesn't give you the option to put the alternate text in. That just means that the screenwriters won't be able to read what that is actually about. And the further option that's going to show you as well, is that you can edit the image, and the edit image options allow you to rotate the image and crop the image as well. And then once you've done, hit save, and it will update and put that image in for you. And that's all there is to an image slider. 15. Creating drag and drop images: The activity we're going to do is a drag and drop activity, and as an example, this is what we're going to end up with. We've got an image with over on the right hand sides and drop areas, and over on the left, we have some objects that you can drag and drop. And you can see when you click and start dragging, it shows you where you can drop the images. So if we drop them in some of them in the correct places, notice if you try and drop that on top, it doesn't let you can only drop it into a drop area once there's nothing in there. You can take that out and put it back in again if you like, as well. So if we do say ones like this and we'll get a few of these wrong and a few of them correct. Once we've put all of them in place, we then go check, and it will tell us which ones we got right and which ones were wrong. Obviously, if we go in and get them all correct, if we happen to know what the correct answers are to all of these, I know this is a simple example, but you can do this with any of the objects that you like. You can create your own. And then we go check, and you can see that they are now we correct, and we've got five out of five. So that's the dragon drop activity that we're going to create. So let's go in and have a go at how to do this. Next one we're going to do is dragon drop, which is something that you can use, but some people will advise you not to use it because for accessibility reasons, it may or may not actually fit the criteria as an accessible type of activity. So it is up to you, dough and actually up to your team that puts your content in or decides what content is suitable for your onlint. So, we're still going to have a garret though. So it's drag and drop, and the reason it doesn't quite work as well is because it's drag and drop with images. Is this one here. So, there is a drag and drop words, which is a bit different. But dragon drop with images or any dragon drop actually is difficult because it's hard to control the drag and the dropping with the keyboard as opposed to having a mouse. So it does make it very inaccessible. So but let's give it a go. Drag and Drop. Example, Example one, we'll go take our background image and select Add and choose our background image, which is the one that doesn't have any icons on it on the right. And you'll see that this is our image here. So that's all it looks like. Then we go into our tasks, and we need to start creating areas for us to drop the images in and then the images themselves and then match them all up. So festival, we create drop zones. So I'm going to call this drop zone one, which we might might actually name each of them something that makes more sense to us. So we'll call this one L, but we won't show the label. You can only contain one line and we'll enable auto align. So that's done. So we've got one object up here, so we're going to put this one just right up the then it's 440 by 42, so just remember that we're going to use that later. Then we're going to copy and paste in each new one below here. Yeah, just copy and paste them all in first, then we'll go back and fix them all up. Because we need a new one for each of these and paste. There we go. And we've done the first one. So we're going to click on the second one and edit. And so we've got L is our first one. Our second one is Listen. So we put Listen in there, leave all the same settings because that's why we created the settings like that. Then we go into our third one. So we've got look, listen, smell. Then we've got taste. I think is next. And the last one is going to be touch. Done. Now, just fix this one up because I think I did it in case I did. This is just for my reference that it's all sensitive, so it just feels better, but it doesn't have to be changed at all. So these are our drop areas where information is going to be dropped. Now we've got to create our images that get dropped to each of these. So do that, we go in and choose our first image. Our first image will be look, so we choose look and we can put in there this can be lowercase because it's an alternate text. We can make it decorative only if we want so that they don't know what that is. We've got the word look on it anyway, so it really doesn't matter. Now, the drop zones are all of them, meaning anyone can drop any of these into any location. Doesn't mean they're right, but they can drop any into any location. We don't want infinite numbers. We just want it so that only one image can be dropped in on Ep, so we go done. Here's our look. There now we have to decide where this is going to sit because it's got to appear somewhere. Jump back to this one first. 440 by 40 is our sizing. So over here, we need our size. Sorry, that wasn't our size. That was our position. Our size is 100 by 50. So over here, we're just going to make this so that it matches our sizes 100 by 50. So it will warp it quite a bit to do that. If we wanted to, we can probably Can we bring these in much at all? No, not really. Uh, maybe because the sizing doesn't fit. So, that's okay. We're gonna live with it like that at the moment. I'm going to put this one probably down the bottom here because it doesn't matter which position it sits in as long as it's not lined up with the one on the right. Now, we can go and duplicate this if we like to save on the settings, so we can go copy, paste, put this one in, edit, and we're going to update the image. Oops. We're going to replace the image, so we remove the first one and go add. Lo listen. So this one will be listen, and it can land on any of them. Can be dropped onto any and notice it's actually dropped the size of it down to try and scale it to the right height, matching width wise, which I think is a better option. So this just 44 by 50. 44 by 50. That does look better. So it will still sit inside when we drop it in, but it just gives us, it looks a little bit tidier. Sha had to change something in that later as well. Let's just copy and paste the next one in. Look, listen, go to edit, remove that one. Add a next one, smell. So I've got smell we've got touches next, isn't it? So get rid of that. Putting in touch. There's touch in there as well. Put that up here. We can't move down a bit. Smell and we've just got one more to go in there. Put that in the gap there. Smooth that down a bit space bit nicer. The last one was that. Which one was it? Listen, listen, listen, maybe that one, was it? Oh, we're just going to edit. Confirm, add and taste. It's the last one. So at the moment, we've got them all in. They're all in a different order, but they do need to be dropped over on the right, somehow somewhere by the students. A little bit more space there, feel a little bit nicer, doesn't it? We can do them numerically as well remember. You can choose here and do the actual positions if you want to space them out nice and even. Okay, what we haven't done is work out how they are dropped. So we go back over to the right, and the first one is C, so we double click on that. And now, these are P. So we're looking for look and we just tick that to show that look is the correct element for that one. Double click this one, and the correct element is Listen. I did actually move that up a little bit dinner. There we go. Look, listen, smell. Here we've got taste, and this one is going to be touch. Done. So now we've put in the drop locations. We've put in the objects are going to be dragged and dropped, and then we matched up the dragon drops with these. Now all of these can be dropped onto any of those, but only once, and they'll center line when they're dropped on that. Let's save that. Thought we got a copy of it. Now let's choose view. So this is our activity, and the idea is we drag over the images we want to put in there. So we've got these so far. If we go check, we can see we've got them all wrong. So let's try again and maybe put a few of them in the right places. So smell, taste. I'll put Let's touch in the right spot. Listen in the wrong one, just so we get a few each way. There we go. So we've got smell is correct, taste and touch is correct, but the other two are wrong. Obviously, if we retry again, do them correctly this time, we've got look, smell, taste. Touch. Let's go again, taste down there, smell there and listen up here, and we go check, and they're now all correct and we've passed. And that's what we need to do to create a dragon drop where we use images for drag and dropping. One last thing to fix up, if you want to, you can actually change this so that it is the same size as the image on the left. So you can check what that image size is. In this case, sorry, we'll just go back. You can check what the image size is by here, so it's 41 by 50, and we can make these 41 by 50, as well. So just change that to 41. Make this 141. It does take a little bit of running around to get these correct. So that's 41 or that the background is not going to match up anymore. So one thing we can do is we can go back and recreate that background. If I just save this, recreate the background without that shape on the outside of it and leave these as the shapes so they drop onto. So let me do that for you and then we'll load that up. We'll just go back to our settings. We're going to remove that background image, confirm, grab our replacement image that doesn't have those panels on the right. Here we go. Jump back to our task, and you can see now we just got the lines without those blue panels on the background or behind it. Just move that one down a little. That one up a little bit, we've got a bit more space now to do that. We're not worried about lining up with those panels. You can even move that one further down. That one further down. I'm just using the rakes to do those movements, too, by the way. Okay. And we'll save that. Get a view. Now you can see we just have the shapes that fit just those objects themselves, which looks a lot better. Fits in so much now. One other thing I should mention, you can't drop another image on top. If you try to. It says, Nope, and it takes it back again. So it doesn't let you do that. And obviously, if you get them wrong, it will show you that they are wrong, and retry takes them back. So that's how you create a drag and drop activity. 16. Creating drag and drop words: To look at drag the words using h5p, and the example we'll use is a sentence here. You can see I've created this already for you to show you what's come look like. When we finish up. It's a sentence about music, which is music is a language made up of different types of different types of notes? Or is it different types of rhythm? Uh, whole quarter half or eighth will go in there and 16th that each carry their own rhythm and shape the way a melody moves. So you can see you can drag all those over. Not great for accessibility because dragging and dropping things with a keyboard is really difficult, but that's what this activity does, so you can then go and check, and it will show you the results. Now I've also got another example is this one here where we look at CPR and the way you can order. Or select an order by using numbers and drag the numbers into the right spot to show the order that CPR should be done in. So if we're looking at this example here, check the scene and the person would obviously be first, so that's up the top. The second thing that we would do is we would call for help once we know that everything's safe. The third thing we would do is check open the airways. Then the fourth thing is check for breathing. So make sure they're not checking first, then the check that they are actually breathing. Then five, we would give 30 compressions, six. That's if you're trained, six and seven. And then we can check, and that shows us we got pances or correct. So that's the second example I'm going to show you. So let's jump in and look at how we go about creating these. So what we need to do is go look for drag the word, which is just there. Something to remember with drag the words is that when you use drag the words, you don't. There may be an accessibility issue with it, so drag and dropping anything can be an accessible problem purely because controlling things drag and drop with a keyboard can be difficult. So drag the words is simple. We're just going to use this as drag the words example. You can put in some task description telling them what to do, so you can change that yourself to whatever you want it to be. All we need to do is put in a sentence or sentences or some text that we then put an asterisk, so that's a little star there around the words that we want to have as dragable words. So, for example, let's say we put in this sentence here. Music is a language made up of different types of notes. So we can say different types of notes could be there. So we just put the stars either side of it, and that is a word that they'll need to drag and drop in. Then we've got whole half quarter, and we could put one around eighth notes that carry their own we'll put in rhythm and shape and shape the way a melody moves and feels. So that's pretty much it. So if we just go to view, you can see now that we have these options of what to drag. So music is a language made up of different types of notes. Notice these have re ordered themselves into a random order as well. Whole half, quarter and eighth makes sense to us, doesn't it? Each carry their own. Now, this could be rhythm. And shape the way a melody feels, which looks like that's logical. So D you to drop it onto the shape, and it will rearrange itself so you can go check, and we got the more correct, which is perfect now. That's one. I'm going to create another one as well. So we're just going to create a second one here. Drag the words because I want to show you something else. Trade the words example two. One other thing that you can do is you can do a sort of, you know, not put them in order but work out the order of things by structuring where the text actually lands. So, for example, we could use CPR as an example. So for the steps in CPR, we could put that in. Now, what the idea is to see if they can number each of the steps in CPR in the order that they would be. So I'm going to start with putting in asterisk one and then check the scene and the person. So I'm going to put them in order first, and then we're going to change the order that they're in. So the first thing is to do that. The second one is to call for help. The third thing to do, and there's two reasons why I want to show you this. One is one that you can do this type of activity. So call for help. Then open airways. So it's three. Number four, is check for breathing. Number five is 30 compressions and number six, two breaths, and this is if trained as well. So, you know, we're assuming that you are actually trained in doing this, and then step seven, we continue CPR. So the seven steps you would go through. So we're just going to reorder those in a different order. So that they don't match. And I'll leave the first one where it is. That's okay. So we've got one, seven, four, five, three, two, six is the order that they're in. Now, when we preview this, I'll just quickly save it later as well. Let's drag the words too. So when we view this one, you can see now that everything matches and it's lined up nicely evenly, which is just a visually and nicer way of showing things, so it says drag the words into the correct steps, but we don't want to actually drag the words. We want to drag the numbers to show the correct order. Four, show the correct order for the steps in CPR. So we got a view now. Now we can drag the numbers into what we think are the correct numbers or the correct order. So we've got one. So one check scene, two, call for help. Three is obviously not checked for CPR, but it is open the way. Four is checked for breathing. Five is We'll give the init compressions, then six. Breathe seven, check and we've got them all numbered correctly. So I just want to show you that is a different way of using a drag the numbers or drag the words in a way that you can say, you know, sort of like put these in order. We could have reversed that and put the numbers down the side and put the words here, but that means there's a lot of text over here to drag. Sometimes it's easier to have the smaller one, which is the numbers rather than the full sentences. If you were going to reverse that, for example, we could put all of this back in order. One, two, three, four, five, six, seven. Sorry, I took seven out of there, didn't I? So seven is continuousepia, in there, so we could put all of them in order there and just take all of these asterisks out. And this would reverse what the activity looks like and put this writing in now. I will show you this because there is a good reason why this doesn't always work as nicely as you want. And it's really just because of the way h5p does its spacing or how much space it leaves for dragon drop words or characters, number of characters it gives you. So I just put the last one in and you can have a look at it, as well. There we go. And if we just go view, you'll see it's reversed them. And this looks like, you know, it might just fit. So first of all, we check the scene on the person. Now you'll notice when we do that, it's taken out the writing because it's tried to fit it in to that area and you can't change that easily in HIP doesn't make you do that. You'll see you can lose a lot of information out of there, whereas putting the numbers in and putting them in order will, you know, make that work a lot better. So you could go through and obviously put all of those in, you know, that would give you the easy way or the answer to how to drop those in. That's how we create. I drag the words using HP. 17. Creating an interactive book: Going to look at creating an interactive book interactive book that we'll create looks like this. Just as an image with an introduction page, a title for the book, and you can put in a more detailed description of the book. When you're ready to select read, you can choose Read. Inside the interactive book, we have multiple pages, which you can jump from page to page. Inside there, we can have text, which you can choose whatever you like in there, put your own content in. You can embed videos. You can also, as we've got in page two, have any type of interactive content based on the other interactive content that h5p creates. And then finally, we have a summary, and the summary for a book gives you all this information here about the progress, what you've completed, what your results were for each of the interactions inside the book as well. Then you can also hide the left hand menu as well. When you're having a look at the book, finally, you can zoom out to full screen. If you'd like to have a look at that as a full screen page as well. And that's the interactive book. So we're going to go through and Itally how to go about creating an interactive book just like that. Let's go add and find Interactive book in the list, and we'll give you the title. It's called the Interactive Book for now. Interactive book is really just that. It is a book where create a collection of pages as though you are presenting a book, inside the book, you can add all different types of content. So we're going to call this, you know, page one, just to keep the logic of what we're doing really simple. And inside each book, you can add any of these types of components here, which are basically all the other components or nearly all the other components that you would have in normal content. So this can become quite large in fact. So let's go and put in some example text in here. Into our book. And then we can say how we're going to divide up the bits of content. So we've got some text in there. We can go add content, and we can add in a interactive video, could go in next. And the interactive video is based on all of the information that you would put into an interactive video like you have previously when you've created interactive videos. As an example, we can add an interactive video in here. This is one of a song that my daughter and I wrote. Recording session, and then we can go in and add interactions that go with that and store those interactions in here just in exactly the same way as we create them when we're creating an interactive video. We can also have a title for the interactive video as well. So we'll leave that there. I'll just pause that. Let's add another page just so you can see how the pages work. So inside page two, we can then add some more content. We've got some more text again. We can add in again, anything out of this list that we'd like. There could be a modictoe question. Could go in here. So we can just a the question in there, and then we can answer one, answer two. Answer three. I just put in there, which is correct so that we remember when we're testing it and put in correct. And then we have the choice of our base color, which is the color that goes around the outside of the image, so we could choose. Let's go with this purple. Go choose. Then we can display the contents. We can display progress indicators, enable automatic progress. You, you can use that to say click to done or the page is automatically assumed as done when you view the page, and then you can display summary. But let's have a look and see what that looks like. Would you save you can see now here is our book, interactive book. If we go to page one, you can see we've got our example text at the top and the embedded video, and then obviously, you can have more information below that. Then you can go to page two. Page two, in this case, just has a multiple choice question, which we can just do that as an activity. You can navigate through your pages up the top as well. Like that. And then it gives you a summary of the pages to show, if there was an interaction, whether you completed that, what score you got for that interaction for each page and the total and your book progress, you can also use full screen on this. So it has a full screen option. Which is pretty clever. And that's what an interactive book looks like. There is so much you can do with an interactive book, and it can take you a lot of time to create them. As we looked in the behavioral settings, those settings there, but we do have the text overrides like we do in all the other components as well. So you can put multiple choice interactive videos. These are the components that I've put in there so far. If you add your own components, then the interactive or the text overrides will appear in there as well. And that's all there is to creating a book. There is an option of a book cover, and if you go to the book cover, you can then give it a cover description. For the cover, you can then choose if you want an image or a video as for the cover. Obviously, if you choose Ad, you can add an image. And some alternate text, which we need to have here as well, and some Hova text, if you want that over the top. And then if you have another look now that we've added that cover page, there is a cover page for our book, and then we can choose read and work our way through the book as we normally do, including the summary at the end. So you can just keep putting in all your interactive content and your pages and basically create a whole book or interactive book. You can save that and then import that into your platform or into different learning management systems as an interactive book. 18. Creating a course presentation: Going to add an interactive presentation, and I'm going to be a look at what that actually looks like and what it does first and then we'll go in and create the whole interactive presentation. So first of all, it is a it's basically sort of like PowerPoint. It's a PowerPoint presentation. In this case, we've got three slides. One, two, and three. And in those slides, I've added in a video. It's not interactive video, but you can add interactive videos as well. This one's just a video. So this is an instrumental track I wrote for Freddia checking out on YouTube, if you like. We also have a button that takes us to another slide, so that takes us to slide two. I'll show you how to do that. Or you can navigate to the slides along the bottom. Whenever there is a circle in this panel down the bottom, that's showing you that there's some interactive content. In this case, we have an interactive quiz has two questions in it. So, the question is written up in here, and then we have an answer. That's the correct one. It automatically checks for you. Then lets you proceed on to the next question. So for question two, if they answer it correct, it does that and then takes them to the results to show them what they did. We've got an instructions panel with a background around that. I'll show you how to create that or show you how to add this text then our last slide, I'll show you how to add a background, how to add this content back at the top, like we do with the other ones. There is a lot of other interactions you can add. I just want to keep it really simple to start with. All of the interaction types in there are interaction types, you will learn in other videos anyway. So, it's quite okay. Once you've learned all the other ones as well, you can start combining them into an interactive presentation. Then the final panel just shows you the results of any interactions that happened during this presentation. Obviously, there's show solutions as well, which will go back and show you the correct answers for each of these if you're not sure what the correct answers are. And that's our presentation. So let's get started, and I'll show you how to create exactly what that is there as an interactive presentation that you can then go and add all your other interactive content to later. But let's get started. This is basically creating your own custom sort of like PowerPoint slides type thing, but with lots of interactivity or options for interactivity inside that. So to do that, we're going to use Lumi for it. So jump into Lumi. We look down through our different content types, and you can either type it in or you can just look through the list by boom for course presentation, which is that one. We open up a course presentation. Now we just call this presentation one. Yeah, course presentation is quite simple. It's based on slides. So you can see here there are 1 million options for what you can do with a course presentation, but I'll try and cover the basics of the most common things that you would use that you would do and use it for. The first one is, how do we create new slides? So we have a slide here and we can put content inside it. To crediting slide, we just add new slide. This allows us to then navigate between our two slides. Now, to see what that actually looks like, let's grab some text so we click on text and I just put in some text here. That's all we need to do with adding our text within use done. You can do your formatting. You know, all this sort of stuff in here. But we're just going to choose done, and you can see now that our text has appeared here. I'm going to move that right across the whole slide and put it at the top. In fact, I might just bring it in just a fraction just so it looks a little bit neater. And download bit as well, a bit of spacing above and below. It looks better. So some text, this could be cooled if you double click on it. Slide one. So text might be easier. Here we go. If we do lift that, we can resize the panel around it without disrupting the content, but we always have to leave a little bit of space in case the content becomes bigger or grows or font size is increased or anything like that. So that's slide one. If we then click on slide two, you can see slide two is different. You can see a slide across. So slide two, we could add some text, call this slide two content, and we can put our rule in there as well, and say done. Move this up to here. While we're in the process of doing this, we'll show you a couple of cool little things you can do. One of them is we can go back to slide number one. Click on Slide one and click on this transform button, and it says the position is 1010, and the size 900 by 70. So just remember 1010. Jump to our other slide, click on here, click on the little movement icon. It's got 1020. We can actually change that to 1010, and that positions exactly the same place as it was for the other one. I think it was 970. So that's just a way of being able to position things between slides. So you can see we've got two slides there now. Slide one, slide two. We can clone a slide. So you click Clone, and now we have a third slide, which has the same content as the slide that we cloned. We can double click, change that to slide number three, and use done. It's all looking good so far. We've got slide one, slide two, and slide three. We can then choose the background for our slide. And the options are background for the template, so we can change the color of all the slides in Mongo with a background image or with a background color. So we're going to choose a nice let's go nice light blue. There we go. Just make it just a shade of blue, just for something a little different. Or if you like the blue, we can go with a shade of gray. That's okay. That's for all the slides. So all the slides will have that background color. Or we can go back in and make this particular slide a different color. So for some reason, we may want this one to be a dark slide. Make it black for some reason with if we go into our writing here, you can highlight our writing and change the text to white, which is a bit annoying because you can't see it on here, so it's not really practical, but when you jump back here, you can see the difference now between the slides. Now, we won't actually keep that third slide like that, so we can go to delete slide, which is over here, but before I do, delete it, we can also move our slide to the left. So now go slide one, slide three, and slide two. Jump back to that slide. We can delete that slide. It says, Are you sure? Yes, we do, so we're now back to just our two slides. So that's the basics of how the slides work. Now I do want to show you one other thing to do as well that you may find useful, and that is we can cred any slide has the same background color, so that's okay. Jump back to our first slide. Click on here and choose Copy. And that's just to copy this content. When we go back over here to our third slide, we go to paste, and it will pasted in the same content in the same position as well. Can then rename that by double clicking and name it slide three. So that's the very basics of how this works, if you want to view it. This is what it looks like viewed, slide one, slide two, slide three, and we've got our arrows down the bottom as well. So that's the way we can navigate through these slides. Now, at the moment, we haven't really added any interactivity. So let's jump in and do that. So on slide one, we're going to. These are all the interactive or the content options and interactivity options. So we can add things like links to websites, which you can do that. That's easy images. She had to add an image. Let's go and do that. So we go to image within Choose ad. Just came to grab one of my covers for a song that I recorded. I've got quite a few there, if you want to check it out. Go look at chris rich.com. Dot U. Or just look up Christopher Richter on any of the streaming platforms, and you'll find a hip music day or Empire between, as well. We can make this just decorative, so we don't need to worry about alternate text, or you can put alternate text in there for a screen reader. So I'll just change that. This is actually an album cover. Let's just say persons standing at airport in an airport lounge. And that's what we needed to do to actually put the image in so it can just say it done. We can then resize that image and place it where we would like the image to go. So you might want the image over this side. If, you can go back into edit if there's any other settings that you want to change, but there isn't really many other settings there to change. Then we can put some more text in beside that. Or we can embed a video, we can add all sorts of things. So let's say, for example, video we can go to Video, and the track that I've got is on YouTube and it's called Sleepless Dreams. So if I just go to we just jump over to my YouTube channel, and we go and find in our videos one called there's a track here somewhere called Sleepless Dreams. There it is. Super streams there. So we can go and grab that YouTube link at the top. Jump back to Loomi, click on Add Video Source and embed it here. Remember, don't upload your videos. Always embed. It's much more practical and useful. We do have a of settings here that we can use, so you can add your own image as the starting image for it. For the video. You can also autoplay the video. You can loot the video. We won't do that with either one. Then we can add a video track. And if you select Add Track, it actually shows you some information here, which is a web VTT file, which is basically like a caption thing. The video I've added is just an instrumental bit of music, so. It's just for an example of what you can add in there. But that's what you could do if you wanted to. I'll just remove that day. So that's an option, and you can have some comments in here if you want comments. So we can choose done, and you can see now that our video sits nicely in here. We can resize the video. I will sit to scale as well, and I might just resize that, I mean, it probably don't need to have both of those images on there, but I do want to show you how to put an image in, how to put a video in. So that's slide number one. Jump out to slide number two, where we want to create some more interactive stuff as well. Now, I should have explained. Sorry. The video, if you go into the video, it's just a normal video. Okay? It's just embedding a video for someone to watch. It's not an interactive video in this case. If we jump down here, you can see in this drop down menu, there is actually the option to add an interactive video, which lets them interact in the same way as if you're creating just an interactive video in normal content. And there is so many options here as to what you can add inside that content as well. Now, I should mention this is a little side note here. We're going to jump down to just to explain it, then we'll come back. If you go down to Textoides, you can see it now has textoides for the cross presentation where you can reword any of the information that goes in. Now, scrolling right down because that's huge. Because we've added an image, we also have the overrides for image, and because we added a video, we also have the overrides for the video player as well. So you can choose what the text overrides are. So you can replace the text basically. If any of them are worded incorrectly, we'd like them worded differently, and you can do that in all the different languages that are available as well. So that's what the text overrides do. Okay, slide number two, we're going to add some interactivity this time. So we're going to go across to a single choice set and add a single choice set. And I'll leave that as single choice set as the title just for your reference. Now, this is where basically, it's a single question. So if you have a question you want to ask and have students do that, you know, you may have provide some content first, they go to the next slide and you go to ask them a question about something. So we can put in here question. That will be what your question is, and then answer. Can I have answer one Answer two. Now notice that the first answer that you put in is the correct one. You don't have to tick anything here. You just make sure that answer number one is the correct one. So I'm just going to write the word correct here so we know that we remember that. Normally, obviously, you wouldn't do that. That is the correct one for that question. Then we have a second question and you can keep adding questions, so it does give you multiple questions, more than one. So it is a question set. Sorry, not a single question. So this could be question two. Question two, answer number one, which, again, is the correct answer. Well, change this to an answer so you don't have to worry about the numbers being matched. You'll see what changes then. And another answer, which is incorrect. I'm only creating the words correct and incorrect in through reference, not that you do that when you actually create this. Okay. And other than that, it has an order continue, which we leave. We can leave all of these other settings. So you can have sound effects as a retry button. Show solution button, you continue those off and you have a pass mark of 100%. So once they pass everything, they get 100%. But let's look at this, check what this looks like. So we can resize this, and it's important that you do resize it because the questions may be bigger or take up more space than is needed. You can even resize that down to here. Go to text and add instructions here if you want to add instructions to explain information and put that over on the right hand side. That's quite okay to do that, as well, or it's quite useful to do that. For those that want to make that even more interesting or, you know, break it up a bit, you can add shapes in behind things. So, for example, here, we've got a shape. We're just going to make this white because I think we've got a black background. If we just create a white rectangle. Put that over here on the right hand side. We'll move that over and say, This is where the instructions might sit. Then we have bring to front and center back. So we're going to sin at the back. And these are instructions that can sit inside this white panel. So we may have, obviously, you know, more of a big collection of instructions. We can go view now. Here's our first one. Notice the circle here. That means there is some interactive content in the page, the jump across, and they can now have a guard answering these questions. And that's the auto answer where they click on it and it automatically does it, you can turn that off, and then they have to click on check answer each time. So this incorrect one. Notice it swapped orders there, so then they can choose that one, and you will get them the mark. So that's the automated way of doing it. If we go back to edit, go into our question. Scroll down here. We can turn off Auto Continue, which enables the retro button. We say done, and we go back to view. We can now jump to slide two. And when we choose correct, it will then cut with a button that then shows you to move on rather than automatically moving on, is that correct? And then they across. So, now we're going to move on to editing the next slide. I'll show you another thing you can do with it. I'll just choose Dh we don't need that. Jump on to slide number three. In here, we have multiple choice question sets, dragon drop, sunry, all these other types of things, types of interactions that are on there, multimedia choice, all that sort of things. But what I want to show you is how you can redirect or move things around. So you may have on slide number one over here, and I'll just to show you how to delete first so we can hit remove. And okay, and that will delete that component. We've deleted the picture. What we can do is use Got slide. So go to slide allows us to jump to a certain slide. Quiz, which is slide two. So I'm just putting that in as a reference so we know what it is, but normally you would write that in, of course. And then we choose done. So this button here or this area, if somebody clicks on that, that will take them there to view their NAF, choose View. You'll see here that there's nothing there except there is that section now click on that. It jumps to slide number two, which is cool. It's a way of jumping around and making it more interactive. What we can then do is put in here, go to quiz, as just some text. And this text can then sit inside this button. So this is a way of navigating around our course presentation or creating some type of navigation to jump between slides. Obviously, you can do all sorts of things with this, but it's just the simple way of creating that. Now, let's preview that and see what it does. So if we go preview, we've now got Gator quiz. I need to actually make that transparency, how that's made that selectible, which means that if I move the mouse out to the edge, it gets the button, but if I go in here, it doesn't. So what we need to do is go back to our text here. What we need to do is move that writing underneath. So all we do is go sent to back view again, and now the selection area is above the text. If we want to make that look like a button, we can add a shape like this. We can give it a fill color of, you know, just make it a darker gray or something, change the border width to five. The radius 25, it's like done. We end up with this button shape here. Obviously, that border width is way too big. Sorry we're going to fix that up. The border width should be just one. I was thinking that was the border radius, and we can ascend to back, as well. So now when we go to view, it looks like a button. I can actually click on that, and that will take us to the second one. Jump back. We can obviously make that go to slide number three or slide number four, or whatever you like. That's just one important thing I'm going to show you about navigating between slides. Other than that, you can just go in and add all of these other interactive bits of content to pages. Probably the last thing I was going to show you is how to add a background image. So if we go to a slide, we can go to slide background, and we can change this to this slide, we can choose image background and we can choose Add for an image. We can then choose an image. I like that. And now that image will be the background for that slide because we can't read that writing up there, what I'd suggest you do is add a shape. And I'll just say done to start with, and we'll put that shape up the top. Just sit over here. We'll send you back. I'll also go in and edit. And one thing we can do with our fill color is we can actually change the opacity, as well, opacity. So it looks a bit like that. And if that's too much or not enough, we can just go back and change that setting to whatever number you like. Yeah. That's okay. Could be a little bit whiter than that, couldn't it go halfway again. Cheese and done. There we go. So that's just a way of being able to add that and obviously, like I said, add any of these bits of interactive content to that. So once you're completed, you then just go file and save. S that in our Lumi folder, and this will be our presentation one. Our example one, save that so we can keep that for later on in case we need to make any changes, and also to upload that to our different platforms. So, it could be uploading it to modal.com or uploading it to whatever platform, you want that to belong to. And that's all there is to creating a basic presentation. So we're going to view our course presentation now. So we choose View, and click Across and click across to the last one. You can see that's all the different things we added a little bit of interactive content there. Obviously, there's so much other interactive content you can do, but that is our interactive present. 19. Creating branching scenarios: We're back again with our next HOP interactive content. Now, this one is probably the most complex or most complicated to be able to create. And this is called a branching scenario. Now, a branching scenario needs a lot more preparation upfront to start with. You need to work out what the scenario is and how the branching works. So to do that, I've got an example here of answering the phone at work. So let's have a look. You're working at your desk. When the phone rings, it could be a client supplier or internal staff member. How you answer the phone makes a big impression. What will you do? And this is where the branching actually starts. So you can see here, we've got node one. The phone is ringing, how do you respond? Then we need to have options from those options, some of them are correct, some of them are incorrect in this case. In other cases, it could be just branching that goes off to another branch over here and another branch that then has a whole different story. So it's sort of like a choose your own adventure type. So what we need to do is work at how we make all of this work inside Hage five P. To do that, let's go over to Lm and go into branching scenario. Let's create our branching scenario. Now, when we create branching scenarios, there are two parts to this. There is obviously the questions and the responses and the progress of how the branching works. But there is also a start and end screen as well. So to do the start and end screen of a branching scenario, we go into settings first. And you can see here it says start and end screen. So in the start screen, we're just going to put in here answering the phone at work. And a description with what that's all about. Then in the end screen, we can do the same sort of thing, go right down the bottom to the end, which would just say success and put in the writing about the success or how they successfully completed this task. So now we can go back to the edit icon in the top left. From there, we can start creating our scenario. Okay. Here we go. Node one is our first part. Now, this is a branching question. To create our branches here or to create anything inside the scenario or branching scenario activity, we drag and drop the objects on the left. So here we've got a branching question. We drag that and we drop it onto the plus, and that creates a new branching node for us. So I'm just going to copy in the node name at the top here. This is just preference more than anything. The text is what the student actually reads or the question. So we put the question in there, and then we have our alternatives, which are the three branches they can choose from. So we're just going to put in each of those as well as text. So there's our first branch, our second branch. And then we can add an alternative because we need a third, and we'll grab our third branch as well. We'll put the third branch in, and we just choose done. So there's our three branches. Now, we'll just say, I got it. Now, for each of these branches, there is a response or some feedback that happens. To put that feedback in, the easiest way is to just grab the text and drop that on the response that you want first. Now, if you're not sure which responses, which hold the mouse over and it will say, let it ring and hope somebody else answers it. And feedback made for this is missed cool, so there'll be this information here. So let's grab that text, drop it on the first one. In the text response, we just put that in there. We can put a name for that node as well if you like, up here. Feedback node. What happens after this is the important thing. Now, because it is a feedback node missed call retrying, what we want them to do is go back to this question after they've got this message, we want them to go back to node one. So we go into advanced branching options down here and we say jump to another branch, and then in here, we choose the branch we want to go to which is the phone is ringing at your desk. What do you do? So that's all we want that one to do. And we just say, Done. We grab text again and we drop it on the next one this time. And the second one was again, poor answer retry. So that's this one here. So we put Poor answer retry and the same thing again, we go into branching and we choose jump to a branch, and the branch is the node one, the phone is ringing at your desk. What do you do? So that's taking them back again so you can see here, you can actually drag this around, by the way, once it starts to get bigger. But when they choose the first one, a one, it then jumps back to the phone is ringing, and this one jumps back to here. The next one though, jumps straight to like they've answered answer promptly within three rings, it jumps straight to node two. So that means we grab another branching question and we drop that branching question underneath answer three. Hopefully, that made complete sense to you. So this is how we really start all the branching. We'll put this writing in here, the node two up here just for reference. And the answers or the responses they give now are these shorter ones here. Yeah. Hello. And good morning. That's three alternatives. We've got those three in. We just say done. You can see now how the branching is starting to work. If they choose the third option, it then gives them three more questions, and then we respond to those in the same way. So this response here is used for two of those answers. So we can just grab that and drop it on here. Put the response in. And in this case, we want to go back to node two, so we jump to another branch, and we're going back to you pick up the fan headier at the cooler. It's a branch in question. We chose done, and we've got that one there. We can also go copy because this is going to be the same thing. And this is for the first and second response. And we can grab our paste and drop our paste on here, and that's going to give us the same settings as what we had before. We just need to update where it jumps to. And it's jumping back to what greeting you pick up the phone, how do you greet the caller? This is why we have to have all this written down first. So you can see we've got those three And then the last one jump straight to node three. Over here, so we need to do a new wrenching question. Now, in this case, they've all been the last question in the row. So that won't happen all the time, but it does for this example. Then we put the text in for the question and we put in our three alternatives. So we're nearly there. This scenario isn't too much longer. And add an alternative. Here we go. And we're done. So there's our next scenario. Now notice this time the feedback where they have to retry is the same thing again. It's been used twice, and it's on numbers one and three. So we grab our text. We put that on the first one, paste that in, jump to another branch again. And this time the branch we're going back to the caller is explaining the issue, how do you respond. How do you respond? There we go. Done. Again, we can select this little cog copy and drag our paste over now this time, though. I won't do that yet. Because we need to move that over. This time we're putting it on A three. And weigh A three because A three is the other polis poor listening retry. So we jump to another branch, and again, we're going back to this branch up here, which is the CR is explaining their issue. C is explaining the issue. There we go. Done. And our branching question for node four goes on a two just here. So let's grab our branching question, drop that in the middle. This is node four. So let's grab node four and put that in. Paste all of these in as well. Take the extra line. We've got three options. Again, hang up abruptly, say bye and hang up. Is this one, and summarize politely. There we go. We can now get our three options, and from those three options, we've got two that are incorrect, which use the first two, and the last one is a success. So let's go put the first two in. There it is. You can put these in if you like. It's up to you. The branching again, jump to another branch, and the branch we're going back to is you've gathered all the information, which are right down the bottom. Select done. We're just going to copy that one again. Need to move this up a bit so I can see the copy. There's the copy button, and we're putting this on the paste on the second one. And again, jumping to another branch. You should be getting used to this by now. We're jumping back to you've gathered all the information. Done. Okay. Then we have our final node, which is our end success node just here, that's our last one. So what do we do with that? We're just going to go into our quiz back into our branching questions here and go to Ed open up this one here. And then we've got advanced branching options. Because they've done everything correctly, we go to custom scenario, like that. And we don't need to put any feedback on the screen or anything. We can just go done. And what they will do is when they choose that bass selection, that will go off to the end final screen that we had before. Okay, let's go and check and see if all of this works. So preview we'll jump back to the top. You can see here we've got answering the phone at work. We've got our question in there, which is that question text is there. That's perfect. We you start the course. And we start off with the very first question. The phone is ringing at your desk. What do you do? So if we choose let it ring and hope someone else answers it, it comes up with the call hangs after after six rings, your manager reminds you that answering calls is important for customer service, so you click Proceed. If we get it correct and we answer promptly within three rings with a professional greeting, it jumps straight to the next question. You pick up the phone, how do you greet the caller? If you say, it says, Well, not a good idea. So we proceed. If we get it correct and use a company name, our name and ask how to help, it'll jump straight to the next question. So we're now already down to node number three. The correct one for node number three is listen actively, take notes and clarify points. We're just going to proceed with that because we know what's correct. The last one made four, you've gathered the information, how do you end the call the correct way to end the call is the last one. We click on that. It says success excellent. The caller feels reassured and we're complete. Now, you may need to do a few things with that. Do you want to change, you may want to change the icon at the end, the icon at the start. You may also need to add more branching that goes into different areas, so make sure you do that. But that's the introduction to how you can use branching scenarios or how you can create a branching scenario. But most importantly, make sure you have this information already created so you understand how you're going to branch all of these questions and what the correct and incorrect answers are and responses and feedback need to be very, very important. One final thing you may want to look at as well, you may want to rename this to scenario instead of restart course. You might want that to say scenario. So if we go back in here, back into edit. Here we go back to edit. You can see down here on the left hand side, we have translations. And in the translations for English or whatever language you're seeing it up for, you can change start the course to start scenario and restart the scenario. If you're doing it as a scenario, and you'd rather have that instead of course, just to correct or make the language make more sense to students. Once you've done that, your branching scenario is ready to use. 20. Creating crosswords: So what we're going to do is look at how to create a crossword using h5p, and the crossword we're going to create is based on guitar parts, just to make it nice and simple. Now, the way I put this together was by using hatch PT and asking it to create a list of questions related to the parts of a guitar and give me the answers and the questions, and then I put those into the crossword. So I'll show you how to create all this, but the way it works is quite simple. It takes all the terms and the words, creates a crossword for us. It also has this extra part here where we have a word that they need to work out what the letters are in the end that will produce the word guitar. So in this case, to to pluck strings would be a pick, so they would type in pick, and it's now found the letter I, and the I goes in there. We use check to check that it is correct, and then we can use retry to go back and retry. Now, one of the settings I put on there was to make sure that it always keeps the answers you put in rather than resetting them, which you can do students would hate that. And then the final thing is obviously show solution where you can go through and look at the whole solution for all of it, which gives us all of the words. You can turn off this show solution as well, so they don't see that. They have to work it out to get to the end result. But it just fills in all the words for you. Nice and simple. So that's the crossword that we're going to create. So let's jump in and get started using Lumi on creating a crossword interactive content type. To do that, we're just get into Loony, and we type in Crossword to select their content type. And this will be a crossword example I can put in a description here if we want to explain what this is all about. Then all we need to do is put in our clues and our words to start with. So to do that, I'm going to do this one actually about guitar parts because it relates to crit content before. So the top part where the tuners are attached is called the head, and then we'll work our way through all these questions. So for example, tool to pluck strings will be a pick, and I'll put all of these in for you, and then we'll move on to the next part just to save you waiting for me to put all these in. There we go. I've added them all for you now. Just as an example, anchor strings on guitar body is the bridge. Adjust string tension is tuna. So these are all the different words that we've used now. You can't have an overall solution word that have to pick out afterwards, but I'll leave that till after we've tried this first so you can see what the first stage is that we create. Now, if you're wondering where I got all this from, hat GBT, just type in, you know, prompt as simple as a crossword puzzle on this topic with this many questions, and it will give you a big list of them for you. Obviously, you can just make them up yourself as well, based on the topic that you are providing for students. Okay. Down here, we have a few options. Overall feedback, which is a normal thing for this type of quiz. Obviously, all you need to do is equally divide all of the words up the number of answers to work out what the percentage is for each one, and then you can set a range if you need a range for pass, when they pass or when they don't pass if you're having that sort of thing to sort of give them results. As an example here, it says, zero to 20%, bad score, average, great or you know, not yet competent, competent, whatever works for the way you teach. Now you can add a background image. You can change the grid, sell colors, the clue ID color, all of those colors. But let's see what it looks like first before we go any further, except for the number of words to be shown. So you can create a randomized batch of the words in the pool rather than all of the words. We just leave it empty. That'll give all the words. You can score words. Otherwise, correct characters will be counted instead. So this is a word score rather than a character score, which you can do. Turn that off, you get character score. Also apply penalties if they get them wrong and have the retry show solution. Keep correct answers on retry. I'd like to do that because it makes it a bit more sensible for students rather than having to re enter everything again when they retry. Okay. And then our text overrides are the novel text overrides, which allows you to set all of the the words and the terms for the crossword and for the crossword grid. And this can be done in all the different languages that are available as well. So that's all that is. So let's before we do that, I'm just going to save it. That's Crossword example one. So I've got a copy of that. Now let's choose view. This is what it's done. So it's put in here across and down, and it's numbered them all for us as well, and we need to come up with what the answers are. So all they need to do is go over here and type in their answer. Number one, anchor the strings on the body. Knowing what that is, we can just type that in as bridge and it puts the word in for us and everything crosses over, so that's pretty cool. Markings on the fretboard, where we know they're called inlays. Sorry, IN LAYS inlays fits. Then we can do some that are across now as well. So it's showing you the across letters that we've already found. It doesn't assume that they're right, though. It just puts them in based on what the students choose as they put the words in. It's very very clever way of putting all this together. And allowing them to Aflac, as well. I'm just going to go check now to check our answers, and we've got those two correct, and it's showing us all the missing ones. So I can choose retry. And I did tell it to keep the words in there rather than have me retype them, which is exactly what we want to do because that will frustrate the students, I would image. So if we go with something like the top part where the tuners are attached to, we can type in staying with the first letter. Head, which matches the D as well, so that's good. And three across now that we've actually got some letters to help us out, which is vibrating wires that make sounds or make sound. And we're just going to assume STR NGS strings. And again, we can check. But what if we go down to four down and raise piece on bridge supporting strings? Let's just type in some letters here. And go check, and this is what it does with our check. So we'll go through and show you which letters are incorrect and which ones are correct. So we've got one letter correct there. So we just need to retry and now left the correct letter in, which is really useful as well. Even though we didn't know why we got that right, I say, now we can just go in and put the correct one in, and we can check that as well. And that's correct. So we've got five out of ten so far. One, two, three, four, five. That's pretty clever. Now, the last thing was was to decide if there is some sort of word that we can use that they have to find in the end out of all of this. Let's just check whether if we just go show solution, can we get the word guitar out of one of those GU, I T, we should have an A, A, and we should have an someway, which we do. So we can go back and back inside edit, we can now go down here and do an overall solution, and we can type in the word guitar as our overall solution. We can then go view, and this time, it's surrounded the areas where the overall solution is, and they have to try and then work out number wise, what that overall solution is. So you can see there they've got guitar. Worked out. So if we go back here and just for number two, we type. Fret, you can see the solution letter drop in here. So once they get all of those, they then obviously get the completed crossword, and they pass the whole crossword. That's how we create crossword. 21. Creating an image sequence: Going to create a drag the images, which are sort of ordering images and putting them in order. To do this example, we're going to look at how to make French press coffee. And to do that, you can see it's randomly put everything in for us. So this is the activity we're going to create. We then need to reorder everything by dragging and dropping so we can drag and drop each of these into the right order that we think it should be. So in our case, we know that Anjou is definitely the last one. We know that we need to put the coffee in first. Very likely we need water second. Then it's as do we stir? Do we press? Do we wait? What is the order for all of those? And I can't remember, so we're just going to leave it like that and go check. And you can see we got two of them out of order, so we can resume. So those over like that and check again, and we've got everything in the correct order. We've got six out of six. I showed us the time we spent and the number of moves it took to do that. So let's go in and how about creating this activity. So to create our image sequencing activity. We just type in image sequencing, choose image sequencing, and we're putting in a title for image sequencing. The drag to arrange the image in the correct sequence. So what we're going to learn to do or the sequence we're going to create is how to make French press coffee. So drag the arrangement in the image in the correct sequence to create or to make French press coffee folding capitals, of course. Okay. Then we have an alternate description that's used for screen readers to be able to help impaired, so we need to have that in there. We can leave that description. It just explains what keys they need to use to make all of this work. So it is accessible. It does work, which is really good to be able to have this as an option and of an activity type that still works accessible with reordering. It's really clever. Okay. So we then go in and add our first image. Go into our first image and choose our first image, which is this one just here. Now, we need a description to go with that. That way, if someone doesn't recognize the image, it gives them an idea if they can't read the writing on the image. So for this one, we just to put in each of the steps. Uh, coffee, two teaspoons. Then we go down to you can put in an audio file as well, but we won't do that with this one. We go to our next image. So this would be image two. We chose our next image. And for this one, we'll put in the description, which is 95. Let's see, fill, add our third image in here, and this one is just stir at our fourth image. Just here. And for this one, we need to put in weight. 4 minutes. Next image with this one, and this is where we press and our last image for this sequence, put that in, which just says, Enjoy, which will make it a little bit easier. Now there's a few settings we can choose for this. We can add a show solution at the end, which you might find useful. You don't have to do that. We can add a retro button and add a button for resuming from the current state. So if they go out and come back in again, they can resume. Okay. We're now going to go to view to have a look at the activity, see what we created. A view, and you can see it's put all the pictures in with the writing underneath each one, which is really useful. So we're going to put them in order, and we can do that by just dragging and dropping the order. Now I do know that the very first one is to put in the coffee. So that was nice and easy, followed by the water. We know that the last one is enjoy. And it just depends on where press goes. Do we stir first or do we press first? No, I'm pretty sure that it is stir. Then wait, then press. Okay, so if we go check, you can see we got it all completely correct, which is fantastic now. If we just go back and view again, and this time, we make our first move, and I'll just point out a couple of little bits here. We just move that over. You can see that it shows the total number of moves and it shows the time spent as well. So it slowly ticks over to show you how long it's taking you to do that. So you can do this multiple times and see if you can improve how quickly you work it out and how many moves you complete that in as well. So we can move the enjoy over. If we now go check, it will show us where our incorrect ones are. We can resume and go back and complete it correctly or we can show solution. Which will put it all in the correct order. Then we have to obviously retry and that preorders everything randomly. That's our reordering images activity. 22. Creating a memory game: So we're going to create a memory game, and this is what the memory game looks like. I've created a set of images that are like celestial bodies, so they include planets and a few other things as well. So let's have a look at what we've got there. And remember, this is a matching game, so we need to know what planet that is. So if you have a really good memory about what that sort of planet looks like, let's see, it's not Earth, is it? Nope. It could be Saturn, but it's not, is it? You know that? No. It's probably Venus. Yes, it is. Now notice down the bottom, it started the timer, and it's also told us how many cards we've turned over. So comet, I haven't seen a comet yet. We have seen the sun, though. So there's the sun and the sun, yes, we found those. We've got the Earth was Earth up here? Somebody, it was. Over here, we've got that was comet, wasn't it? Let's try this one. Look, there's comet. So there's a comet there and there. Uh, Was that Satan? Yes, it was good. And our galaxy and our galaxy. Cool. That's our memory game activity. So we're going to jump across and have a look at how we go about actually making that activity, assuming you've already got those images, and you've saved them all as, you know, square images as well. So that's important thing to do first before you start creating these. Let's go. We're going to use Lumi again for this. We're just going to search memory game, choose memory game, and this is memory game. Example, let's type that correctly. Okay, we need to put in some images into our cards for this memory game. We're not going to worry about any audio for this, but you can add audio as well. So there's an audio track for each one. But you've seen how the memory game works. So let's go and start adding our images in for each of the cards. So the cards have a card and a matching card that go with them. Let's add them in. Right now we're going to add our images. So we're adding our first card or card number one, the first image, and then the matching image that goes with that. Our first image is image number one. And our matching image is Image one with a B on the end. That's just how I save the images. Okay, we add another card, and we add, we go for number two, and TB, go to add again, and we're looking for number three and three B. There we go. Card four, Bar four, and card four B. So you don't need to pre create all of these images. Then we've got five and five B. Best to make them all exactly the same size. Six, And that should be six B, but it's 16, but it is six B. There we go. So we've saved all of those. Now we've got our behavioral settings, our position, the cards in the square. We can also choose the number of cards we use, so we don't have to use every card. We can say limit it to a certain amount rather than use all 12 that we've got here. Well, six cards times two because there's two different cards turn it. And then we have the look and feel. So this is the theme, and we can also add a back to the card. I won't do that now, but you can add an image as the back of the card if you want to create your own. Then we have our text overrides, which obviously you should be used to that now. All the different activity types, you can change that for each language. There's your language list up here. And these are all the overrides that you can use if you need to change any text. Now we're going to view it and see what the game actually looks like now that we've added all of the images. Notice I haven't put the alternate text in yet. I mean, you can go back and do that. That's quite okay. It does need to be in there for text readers for text to speech. So you do need to put something in there into it all of those lt texts. You can do an optional description as well. I'll pop up once the two matching cards are found. You can put something in there if you like. Alright, we've got a view, and it tells us our time spent and the cards turned. Once we click the first one, it will then start. So if we choose that one, we're looking for sun here, and that is Earth Sun and Earth. Alright, we've got Venus, nope, Earth and Earth. So we've got those too. Well done. Satin Was that Satan? No, that was Venus. Comet. That was a comet over there. We've got that. That's good. Uh, galaxy. I don't know where the galaxy was. Sun was up here. You Saturn, I think, was down the bottom. Galaxy, did that say Galaxy there? No, that's in Venus. That's Venus. And that one is the galaxy. We. We made it 42 seconds. Much harder if you put all the planets on there instead, and they've got to tell the difference between the planets. So that's how we create our memory game. We can obviously reset and start the memory game, and everything will be in a different place the next time. 23. Creating a sort the paragraphs activity: As sort the paragraph activity. And to do that, we're going to learn how to make an apparel spritz, which is fairly simple. And here we have a list of everything you'll notice. All of the steps that we have to do out of border. We need to put them in order, and we can use these arrows over on the right to switch things around to try and work out what goes where, or we can just drag and drop with a mouse, as well. So I do know that the last thing you do is put on the orange slice. I also know that we start with a wine glass with some ice. Other than that, I'm going to assume we stir it at the end. We probably add in seco first. I'm not sure which one here. But notice we've got extra information here that sort of helps us a bit, so I'm gonna assume that the apparol goes in second. And then the soda water last. Let's go check. Yes. Look at that. We got them all correct. If I had got them wrong, like this, go check. It shows you, you know, which ones are incorrect. Then you can do show solution where reorder everything. Then you can retry and try and put them in order again. So that's the activity we're going to do. Let's jump in and see how we went about making this activity. So the paragraphs is really just again, another reordering type thing. Again, be careful about accessibility. This one here is more accessible than some of the others just because of the way it works with dragging and dropping in an ordering process. But let's have a look, and you'll be really interested to see that we're going to go through the steps on how to make an apparolsprit. So let's go do that. So we're just looking for sort the paragraphs. We're in oomy again, too. Don't forget, and we have a title for this, sort the paragraph progress. So the instructions for this one is quite simple. Put the steps in order for making apparolspritz. If you've been over in Europe, you'll notice there is always a lot of them around. So we're going to put them in the correct order. When you create this, you put them all in the correct order. So first of all, fill the wine glass with ice and basically just run through all of the steps that we do with this. And I'll show you two ways of adding this, as well, or you can sort of make it added value. And your last step in there. I think we've got about six steps, I think, altogether. We'll just make this one italic as well to match the other ones. There we go. So that's what it looks like. We have our feedback as well as normal. We have behavioral settings. So correctly placed paragraph or correct sequence. So this is how you give points for these, as well. So that means you can give points for things being correctly placed as in the in the right order, but you may have marked up one out of order, but put the rest in order. You can still get points for that because they're sequenced in the right order, some of them. So you sort of get put points, or you can have it that's correct correctly placed in the whole order rather than just, you know, some of them are in the correct sequence because you may have nearly everything right, but you've put one out, and instead of getting the whole thing wrong, in your points for at least having some of them in the right place. Apply penalties as well. That's decide where you take points off for being in the wrong position and adding buttons for movement, we'll look at that. You'll get to see that, which is useful for accessibility as well. Then we've got the text overrides, which are just the same as normal. They're all living in here. Let's have a look and see what this actually looks like. We click on View, and you can see here we have stewed gently. First of all, we know this one was first, so we can drag to the top or we can use the arrows to move things around. So we fill our glass with wine and we put in think it's that one next. I know that's next. I know stir gently was last, because that's in the last you know, you stir gently, and then you garnish with orange. But we have put the soda water in, so I'm going to assume it's that. I'm guessing. How do we go? Yes, we did well. So we got six out of six because we got everything in the right order. But other thing I wanted to show you as well when we add it, you might want to go in and do this, which is sort of just like a nice little add on to make it more useful or more friendly, I guess. So I've just added in another bit of text in underneath, and I bed that text, as well. So once we go and put these in, you'll see as we go through. Didn't make that italic, did I? Maybe we can do it that way instead. Just take that italic off. Put this one in and make that bul. That italic. Put each one of these in because it's okay to have extra information in there. Pull up that one, bold. Otaic 'cause this will be really useful for students that are studying like hospitality, where they have to go through and learn how to go about making all of these drinks as part of their course. I think I just put that in the wrong spot, didn't I? Because that's the sparkling water just there, isn't it? Yes, it is. Two parts of appaol should have been so fill a glass with wine. Just go to jump back to the top because I put these out of order. I should actually be that one there. Feel generously there. Now, we're making way more sense, aren't we? We'll put the pseto in there to preserve the bubbles. Always start with that, which is vitally important. Now we've got everything in the right order. You can see that this is going to be quite useful to students because it adds a lot more context to what they're actually doing. They've still got to put them in order, so it's still okay. And last one is to finish this off. Brings back lots of memories, this drink. Of course, there we go. And we'll save that and view. You can now see that it's added in a lot more context, which will make it in part easier for them, but also more useful to them as well while they're going through. Obviously, they'll need to put those in the right order. Again, let's see if we can obviously put the ice in first. Prosecco goes in second, I'm sure. I've never made one of these before, but I probably should. Oh, which went first? Apparel, or the soda water. I think it was that way. And then we go check. No, we got that wrong because you stir gently, then you put the orange slice on afterwards. So if we go show solution, it will just reverse those over for us. So that's sort the paragraph directive activity. Hopefully, that's been really useful, that one. And you can do a lot with this type of activity. It's very, very practical. 24. Creating activities in Wordpress: Next we're going to look at installing h5p on WordPress, which is fairly straightforward. Now, if you do need the instruction step by step, you can go to hivep.org slash Documentation slash Setup slash WordPress. And this will teach you how to install the HIP plugin, especially for your version of WordPress. So instructions very simple. We just go to plugins in WordPress, Add new, search for h5p, and we install this HivePPugin, select Activate. And that's pretty much all we need to do. One of the things with h5p is the content types, and you do need to go through and choose all the content types that you want to use. So I'll show you that process as well in this video. But let's go step by step through. First of all, let's go to WordPress. So I'm just going to one of my Wordpress installations. You have to be an administrator to do this. Simply go to Add Plugin. Search Hive P. And this is the one we're looking for, so we just go install now. Once it's completed the installation, then we'll need to activate that as well. So we choose activate, that's now been installed. And over on the left hand side, we now need to go to the plug in settings. Go to settings over on the left, all the way down to h5p, choose h5p, and you'll see everything is set up with all the settings here, which is absolutely perfect. One of the things we're doing is in the settings, while we're there, go down to content types and select use h5p Hub and we'll save that setting. The reason we want to use the HP hub is because that will make it easier for us to set all of the content types, and these are the activity types that we need to run h5p. So now we can go down to h5p content, select AD NU, so we need to choose AD it will now come up with a list of all of the content types that you have available to you, but you may not have them all installed. So for example, here I've got interactive video, I can see detail, so that means it's installed. Some of them have G written on them, which means you need to actually install that one first before you can use that content type. So an example for us may be down here where we've got branching scenario, we chose G, and then we choose Install. And once it's installed, we can then go back and actually use that content type. And that's really all there is to installing the HIP. The next step is actually embedding that inside your content. A good example for me to use straight off is to give you a look at the image hotspots one. So if you going into Image hotspots and select US, we can type in image hotspot. And I know this is the first time you've probably seen this, so don't panic about it at the moment. I'm just going to add a background image to a hotspot. So you can see there's a background image and there's a hot spot just there. We'll put right in the center of the doughnut. Again, I'll take you through this properly once we go into it, but I just want to give you an example of how this actually works. So we've got all of that in there and we just choose Create. Now that we've created our h5p, and this will be a first HP, really, and you can see the Hive P sitting here. Ready for us to use. Now, to embed that in our content, we just use this short code over here on the right, which is h5p ID equals one. If we just go to a random h5b page, in my case, it's got the DV builder but I'll switch it back to the normal builder and I'll put in the short code, h5p ID equals one. And we'll just preview that so you can see what it looks like. Get saved previewing a new tab. You can see that I had the new hotspot activity, which just lets you click on a hotspot and open up some content. That's all it does. But that's the process of installing and just quickly testing that Hive P is working on your WordPress server. Any questions? Let me know, and I'll certainly give you a hand to sort those out. 25. Creating activities in Moodle LMS: This part of the course is specifically about the Moodle platform. If you have the Moodle LMS, I'm going to show you how to first of all, create h5p inside Moodle, then two different ways that you can embed that h5p content inside Moodle or actually maybe even three different ways that you can embed h5p content in your Moodle platform, depending on how you create it. Oh, you do have to have a bit of understanding of the Moodle platform before you dive into this. So if you don't know anything about Moodle, feel free to watch and, you know, learn a bit about Moodle and the process that it has, but Moodle is a learning management system designed for higher education, I think, mostly, but it is being used across all education across the world. And it is an open source platform, and it is certainly an area that HiveP has jumped into being able to service and be used in really, really well. They've incorporated a lot of it into their core code, which was really clever. So to do this, I've logged into Moodle, and I am a teacher in this particular course, so this course is called example Course. And inside the example course, which is inside every course is a thing called content bank. And you do need to make sure this is enabled by your administrators, but the content bank is part of the platform, and I'm on Moodle four point oh if you're wondering which version of Moodle because Moodle five may be a little bit different. So I go into the content bank. Inside the content bank is where you can create all your h5p content or interactive objects. To do that, very simple. You just choose Add, choose the interactive content that you'd like to add. In my case, we're just going to use, as I do with most an accordion as an example. So we choose accordion. We'll call this one accordion example. We'll just create a panel here and call it panel one with some content, and this is only as an example to show you about using them. So we're not worried a bit too much about the interactive type. So it says panel two and the content that goes with it. So that's all we need to do, and we can't preview it in here, but we can click Save, and that will jump to a preview page as well. So there we go. There's our preview of our accordion, which is just a simple interactive object. Now remember that we're completely inside the Moodle platform. We haven't gone into Lumi. We haven't gone into p.com or anything like that. So we're not paying any extra services to run this. It lives inside the Moodle platform. Okay, let's jump back to our content bank. And you can see in here we have our accordion example. I've got a few of them in there, so I'm looking for the one from today specifically, which is this one here. This third example. To actually make use of this and put it in the content, we need to go back to our course. In our course, we turn editing mode on, which is way up there in the top right. Then we can choose add an activity or resource. Now, there's two ways to do this, which is sort of a little bit interesting. We can go add an activity or resource, and we can choose h5p Nab notes. On here, there's two versions. Yours may or may not have the two versions. One of them is to create interactive content or h5p content inside the mood or platform, but not inside the content bank, and this one is for the content bank. So use the blue one if you're using the new way of doing it. This is the old way they used to do it. I will show you both because your system may have one or the other or both. So we choose hive p.com. In here, and we're just going to put in here accordion example and we'll call it number one. In here, we get to either, and there's two options here as well. We can drag and drop our file from before. So if you remember, we created or we may have got to this yet or not. If you had to look at the Lomi section, we created a h5p object. We can actually grab that and we can drop that onto here from our Lumi file that we created, but we created one inside Moodle, so we can just grab it straight from there, so we can click on that little icon there. So that was this one here. With files, go to Content Bank, choose the example from today. Select this file. And if you like, put in a description here. We want to keep doing tapes today and leave all the other options and just go straight to save and display. And you can see there is our panel sitting inside our content over on the left. It's part of the navigation now as well. So there's our accordion example. If I jump back to the start of the course, you can see now Hive P accordion example is part of the content that students can work through has its own page. Now, the second way of adding this, which is why I said there is quite a few ways to do this, we can add an activity or resource, and in this cage, in this case, we'll make it a page. We'll call this page one. So this is a normal page that we will create with content. So in here, we can put some content here with more information. And obviously, you can put images and everything else in there. But then we can also embed h5p inside the page. So we choose h5p. We go Browse repository. We go to our content bank and choose our according again. Select select file and insert h5p. And you can see now it's inserted here. We can put more content below is fine. Choose save and display and we now have our content inside a page with h5p embedded in line, which is really useful for keeping the context of your h5p in to part of what the page is actually about. So this is a really useful way of being able to do that. That was one way of adding h5p from the content bank. But if you have the other version of interactive content h5p, which is this black icon here, you can add an activity, add interactive content, and it goes straight to the h5p selector here. So we'll choose our accordion. And we have to actually create this accordion here. We'll give it a title. We'll call this accordion example two. Create our two panels. Panel one with some content. Panel two with some content in here. Then we get a saving display. Because what we're going to do is click on Embed and highlight this text in here, which is some code, and we're going to put that inside a page. So I've just copied that. We're going to jump back to our example course, and you'll see here now we have a different version of our accordion. So here we had accordion example one from the content here we have our h5p that is created in the other way of creating h5p components. Again, may or may not be on your version, so it's just a different way of doing it. What we can do is we can embed this inside our page as well. So we can leave it where it is. Students can use that as h5p activity, and that's quite okay, just like they did for the content bank version. But if we create another page. So at page two, we can go down here and we click on our down arrow or if you don't have to, it's just there actually. We can go into our code, and we can put that code inside the page. So we could have in here some content, and I'm just going to put the code in here for some more content. So if you understand HTML, this will make sense to you. I just turn the code back off, but I pasted in that bit of code into there. We then choose Save and display this page, you can now see we have our content above and below. We also have our panel inside there. Notice there's some extra buttons were using embeds in here. What we can do is jump back to our Cordon example two, which is just here. We can go into our settings for it, and down the bottom, we can say here display the action bar and frame. We can get rid of all this information here. We just click Save and display again. That's just to save what we put there. Notice that menu along the bottom is now missing. It's gone. If we go back to our page two and refresh, we've now removed that embed content option. So that's no longer there, which is great because it looks much cleaner for the students. The students don't have to worry about seeing that. Now, your question might be now, if we look at our course, you can see that we have according to example two and page two, and both of them will have the same thing in them. So what we can do is go over here. We can select hide which hides it from the student, but at the same time, it will still allow it to appear as embedded content upear inside a page. That's just how it works. So we can go over to our switch role and view as a student. You can see that the activity has now disappeared. I was no longer there. We can then choose page two, and the panel is still inside there. So that's the second way of being able to embed your content. FOP content in there. Now, the third way to do it. I'm just going to switch back to a normal role. So the third way to do it is we can turn editing back on Go to add an activity or resource, go down to Interactive h5p here, or here, either one. And I'll probably show you in this one because this is probably what you're use normally anyway. We're going to look at accordion example three. And in this one, we're going to go over to our Lumi file that we created earlier if you have completed that part of the module. We had to go at creating a Lumi file and storing that. We're going to grab that and drop that in. So it's just a h5p file. Don't worry about changing anything else. Just do save on display. And you can see now that our Lumi file that we created on our local computer is now inside according example three. So we've now uploaded that file into this course using Hive P, but we did that from our Lumi version of that file. Okay, so that's now living in here. Now notice a couple of things about that. One important thing is if we go to the content bank, remember we called this our according example three, if we go into our content bank, we don't have that actually in our content bank, so it's not stored there it's stored inside the course, not the content bank. If we want to put it in the content bank and then put it into our page, content bank can be used across all courses, so that makes it much more practical. What we can do is we can upload here, grab our loomi file that we had before and save there it is there. Let's go exit. And you can see now we have our Accordion test HIP in here. We need to rename that, but that's our accordion example number three, basically, sitting inside the content library. So if we jump back to our course, over here, we can then go and add that exact same activity from the content library instead of uploading it straight into the course only. So it just depends whether you want to use the content library where you can make updates and changes and they fix up globally or whether you want to use it just in an individual course. Again, it can depend on the access that you have. So if we went in to add a h5p activity, just here, we can then choose from our content bank and g find our accordion test that came from our LomiFle. And that's the other way of embedding that into our page. So you can see there's quite a lot to what can be done with h5p inside Moodle. But hopefully, that's given you a really good coverage now. If you're not sure there's other bits you want to explain, let me know, and I can certainly help out with those as well. But that's a really sort of in depth runover of h5p, the different ways it works inside Moodle, and here you can install it, get it running, and create h5p for your content. 26. Creating activities in the Canvas LMS: Going to look at how to add h5p to the Canvas LMS. So if you're not sure what the Canvas LMS is, it's learning management system encoded by instructor. And it does actually have a free teacher access where you can go in and have a play and try things out. So please jump in if you haven't had a look at Canvas and try it out. It's a very clever platform. Lots of really good stuff in there, and quite a few cool things that make it easier to manage students, manage courses, manage content. But let's jump in and have a look at how we add h5p into the Canvas LMS. Do that, we generally add h5p inside a page, inside page content. And the only real easy way to do it in Canvas is really to embed HiveP from hp.com. So that's probably the only downside, when I haven't said that, there is a plug in or an integration that can happen between Canvas that you would have to add on if you have your own Canvas server that allows you to then embed hip.com content in there as well, but you do need hp.com. So if you are a large organization using Canvas, then hip.com is going to be the most sensible and easiest way to do it anyway. So how do we do this? I've created an example page in this course in Canvas. If we jump into the example page, currently, it's empty. There's nothing in there, so we can just go into Edit. Which is simple. It's just an empty page. We can put, you know, some content in there of text HTML, whatever it is you like, images, or that type of thing. But what we want to do is add our Hive P in here. So to do that, we jump over to our hp.com website. Now we have an accordion test in here that just looks like this. It's just the panels one and two that we created for our testing before. So that's all easy. We then go across here to publish. And in publish, we need to make it public, and we need to grab the embed code. So we grab our embed code from here, which is, again, all nice and simple. We choose update because that makes this one public. Now, you can see the icon actually change here to show you that it is public. Jump back to our course, and we need to go into our HTML, which is down at this little icon down the bottom right. And where it says Hive P, where we type that in, we're just going to paste in the HTML for this. Jump back to our content, and you can see here it is displayed. In here with our h5p. So you can have a look at that and even interact with it, which is actually quite clever that you can do that in the editor. When we finish with that, we just select Save. And you can see there it is embedded in the page with the content. You can see here have the HP icon here, the mcfused icon. We can send a question to the author, then the reuse button as well, which allows them to download and copy content. Now, you don't really want that there for students. So jump back to the accordion, select Edit, and write down the bottom. In the display options, we have the tool bar below content. You can turn any of these off individually, or you can just turn all of them off. Select save where we go back to our content and refresh. You'll see that bottom bar has now disappeared, which is much cleaner. And obviously, if the students don't need that information, then you don't need to put it in there for them. That's all there is involved in putting HP content inside the Canvas LMS. Quite simple. Just going to hf p.com where you're storing all of your HIPs and you can embed the content there, and it's simple and nice and easy and really is in a managed long term as well. 27. Congratulations: While you were creating your h5p interactive activities, I managed to grab a coffee. But hopefully, you've learned heaps out of this course and you've discovered lots and lots of things you can do with h5p, and also how to embed that into your learning management system or into your courses. So congratulations again. Please, if you do or if you can, send through some links of what you created because I'd love to see them give you some feedback. Try and help you out a bit with improving them if you like, as well. So please feel free to send links through to me, as well, or even h5p. I can lay them up and have a look at them. Again, congratulations, and I'll see you again in the next course.