How to Embed Interactive Fire Sims into e-Learning
[/vc_column_text][vc_column_text]Welcome, I’m Jonathan Kaye from SimsUshare and today’s session is going to be answering the question: I want to embed a simulation into my web page or into my LMS, how can I do it? This is a brand new feature. I’m very excited to bring this to you, and we’re going to show how you can bring an interactive simulation directly into a webpage. I don’t think really it’s been done in any other system.
So what do I mean embed? I mean that you can not only have a running sim where you put it into some, like as a video––these sims will actually retain their interactivity. So you can have, for example, some training content where you’re discussing that training and you have your sim right there that people can play. And I’m going to show you exactly how to put the sim into this LMS. This one is from J&B Learning.
So a few of the examples: why would you want to do this? Let’s say that your department SOP is talking about incident status reports, and so right next to how you want to tell people to do that, you can put some practice or example simulations. Another possible example would be you’re going to have a promotional exam, you want to get some practice simulations for the candidates, so when they come into the actual test, they’re more or less comfortable with the way the technology is going to be presented. You take that out of the picture and hopefully reduce the chances of challenges. Third example, let’s say you’re doing a continuing education module on vent-limited fires and you want to be able to accompany that lesson or those lectures with sims that can be used as demonstrations from your own first due.
So now this new feature in SimsUshare which I say is unique allows you to put the simulation with all its interactivity into a web page, or using let’s say, a content tool like articulate storyline to develop your training. You can also just email the sim as a link. But particularly what we’re really excited about is being able to put it into a learning management system like J&B Learning, like Firerescue1 Academy, Target Solutions, Blackboard––really any system that you can embed HTML content.
So now when I say embed, I want to contrast the idea of embedding a video which is typically what’s done. So a video, you play through each time. You record the video that plays the same from start to finish. If you want to do a walkaround, you have to walk around the whole thing. An interactive sim keeps all the interactivity, meaning the navigation, the timing, the different conditions––everything in there so it can be more engaging and it can have consequences based on the viewers’ decisions.
Another thing about video is it’s generally time-consuming to prepare. I’m going to show you, with the interactive Sims, there’s no prep time. You click a button, you get a link, you’re done. You then have to put that into your LMS or on your webpage. And then with video, again, you have to upload. And with the interactive sims in SimsUshare, there’s no need to upload anything, it’s already in your SimCloud account. So let me show you how you actually go and get your interactive sims to be able to embed.
When you’re in your CTC, you’re going to go to your Simulations tab. And under Managed Simulations you may have noticed if you logged in recently, we reorganized the buttons on the right hand side, and now there’s going to be a button called “Sim Embedding.” So to embed a sim, all you have to do is you click on the sim you want to embed, and then you see there’s a button that will say “Allow Sim Embedding,” and you click on it. And you click on it, now it will show these two boxes––one is Sim URL, that just gives you a link that you can share, or the Embed Code which is the iframe. And you can just copy this over, you see the little icon on the right hand side with little two documents, you click on that and it copies it to your clipboard so you don’t have to scroll and drag and try and do the copy commands.
So, embedding in a web page is basically, let’s say you had a webpage like over here and you wanted to just stick the simulation in here––using whatever tools, and I’m going to show you now how to do this live––you’re going to take that, I’m going to go back here, you’re going to take the embed code, you see how it starts with iframe, and all you have to do is just in your web page, and I know this looks a little technical. If you’re creating webpages, you might already be familiar. You’re going to just drop it right there where you want it in your page, and that’s it. And then you get this little, what we call a poster, and they have to click Start Sim to get it going. So I’ll show you for example in our free simulations here, you’ll see if I go click on let’s say residential Urban Sims #1, you’ll see here these are all embedded that exact way with what we call iframes. So if I now just go click on Start Sim, see it loads, and now you’ve got your simulation here. See I can click on it, I can use all the navigation. If you want to make it larger you can set that up as the width and height or you can actually go here and go full screen right out of the page. So I can have all of the navigation set up, have the person go through here, and then I can even have changing conditions either by time or by keystroke. And you might have other things on your webpage––checklists, you might have questions––everything like that can be surrounding your simulations. So that’s what you saw over here, embedding it directly into a webpage.
Now let’s actually go and see what it would be like to send the simulation as a link. So all you would do for that, and then we’re actually go and see how to put it into an LMS. So to go in as a link, all I have to do is I go into my SimsUshare account, my CTC account, I click on Simulations, and then let’s say I want to embed 1024 Stockton. I click on it, and if I go now here to Sim Embedding, you’ll see there’s a button––Allow Sim Embedding. I click on it, and there now is Sim URL and Embed Code. So if I want to send this as an email to someone I just click on the copy over here, and I can then bring up my email program, and let’s say I just copy, I would paste that into my email. I say “hey, check out the SIM right here,” I’m just going to paste it and place right here into the address bar. When they click on it, it will open up a browser, and you’ll see in a moment. Start Sim, they click on it, and now they’re running the simulation. And you see all the arrows and all the timing and everything is in place. So very easy to be able to share a simulation just as a direct link.
So now let’s take a look, let’s say if you have in an LMS, and thanks to Jones & Bartlett for letting me show it here, if I go, let’s say this is from an upcoming book, I go here and I want to embed it in here, I say okay, let me go back over here, I’m going to go get my embed code because I want to embed it into a page, the iframe there. I clicked on that. Now let me go back to the LMS, I’m going to go and edit the place that I want to put it in, here I’ve got my incident status reports for single-family residences, let’s say this is the training, so now I edit over here, and you’ll see I’ve started this page Incident Status Reports as a test or whatever, and you’ll see I’ve already put in two simulations embedding. And this is the only trick, depending on your LMS you have to figure out––I sort of put a placeholder here “NEXT SIM GOES HERE”–– this is going to be a little bit technical because I’m going to have to look at the code of this and drop the code in. Maybe your LMS has something easier, and I’ll show for example with Target Solutions, making a text box. But once you get the hang of this, it is pretty easy. So what I’m going to do here is I’m going to go, I need to be able to look at this document with just the actual HTML, the web code, and there’s a little box over here that lets me do that. And I go over and I see this is where there’s “NEXT SIM GOES HERE.” That’s where I want it to go. So all I have to do is go and take this, that’s my placeholder, and now I’m going to paste it in place. And there’s my iframe, and it’s all done. So now, in this case here, I can actually go to the bottom and save it and display, and in a moment you’ll see, and there’s a simulation and it’s right there in the web page, it automatically starts.
A couple more things you have to do to just get this, what we call poster image. But that’s basically it. It’s there, it’ll load when your page starts, and you can see you can have all your training information surrounding it, and people can do whatever they want with that. Now the size over here is bigger than that because if we looked at that, when we looked at the size information for the iframe, it’s specified 400 by 300 pixels. So we could change that so these I think are probably 300 by 200. So there’s different settings you can go in there to size it to how you want it to appear on the page.
So that really is it. You just click, get the link, and then based on your learning management system, your web page or whatever, you just put it in place and it should sit there. Now if I in the future decide, let’s say I’m back in the organizer, I’m done editing this and then I say Disallow Sim Embedding, so now it will no longer be readable in that class. So if you wanted to put it back in, wanted to make it allowable again, you’d click on Allow Sim Embedding, and you’d go through the process again of making the URL and the embed code. So there are different codes, and it doesn’t let you update the Sim with the same code. You would have to go in and out. You want to make sure also not to turn off sim embedding if you’re using this simulation in an LMS, you don’t want to accidentally turn off access to it.
So we know also many of our customers use Target Solutions. So this is a description of the process that was given to me by Tim Riley, who is a Senior Client Success Manager. I don’t know which regions he manages, but maybe you know Tim, really good guy. So he’s a Senior Client Success Manager and he says if you don’t or are not already familiar with putting in HTML into your page, please contact your Client Success Manager or, I put in Tim’s information right here and he said he’d be happy to help. So the idea in Target Solutions is going to be to create a custom activity and then in a text box, you’re going to be adding some of the stuff here, this “a href,” you’ll notice here in the middle “https” and all that, that’s going to be your URL. That’s going to be the sim link that you’re going to get from SimsUshare. And then if you just put this into a textbox, you can create multiple text boxes as he said, add any desired reportable components (date, duration, or whatever), and for more sims, just copy and adjust. You can also adjust the title, you see how it says “Residential,” that’s how it will show up in your page. You can change it to whatever you want to be, and you just change the URL and you’re all done. As I said, if you need assistance with Target Solutions and if this looks a little complex, then I would absolutely suggest contacting your Client Success Manager or contact Tim directly.
And we’re also talking to other LMS vendors like Firerescue1 Academy, Blackboard, et cetera, and they’ve been very receptive. They see how important this and they’re more than happy to help you integrate it into your own LMS or into your web page. Just please let us know.
So that was actually not just 15 minutes, it was 13 minutes, but that was close enough. I really appreciate your attention here. I wanted to also let you know this webinar is being recorded so it will appear in our webinar archives over the next day or two. If you have any questions certainly you can ask us now or you can contact me Jonathan Kaye, Steve Ward in the center, or Danielle Spivak. We’re always happy to help you get the most from SimsUshare, especially with such an important feature here. We really think this is going to be groundbreaking, being able to put fully interactive sims into your online e-learning. Thank you very much for your attention. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_btn title=”View all CTC Webinars” color=”success” size=”lg” align=”center” link=”url:https%3A%2F%2Fsimsushare.com%2Fctc-webinars%2F|||”][/vc_column][/vc_row]