Forum Discussion
Matching lines in Match quiz in Storyline
Perhaps this is a good start
In the attached project each line has 3 states (to 1, to 2 and to 3) The starting position is stored in a variabel called Start. When the user clicks on one of the targets first the lines connected to that target are hidden and after this the line between start and the target is shown.
I added a simple soldution to check of the student made the correct connections.
I will start a second post with a not working solution and I just want to know what I didn't see. The attached file to this post works and you can preview it on: https://360.articulate.com/review/content/df39a248-f016-4fd8-b9fa-4ad9b8adfe76/review
This is the not working version of the same project. The idea is that I can change the state of an existing line to hidden when one of the other lines get a state that points to the same target as the line already points to.
For example: When line from 1 has the state to 3 and line from 2 or line from 3 got the state to 3, line from 1 must be hidden.
This would be a much better solution because it only needs three triggers instead of the nine I used in the first post.
I wonder what I missed (already used the Rubber duck debuging method, but that didn't help. Perhaps the weekend will...
- Nathan_Hilliard23 days agoCommunity Member
So, were you trying to find a way to load a JS library through a JS trigger inside of SL, instead of hardcoding it into the project files? I wasn't quite sure of your goal.
If so, look at the trigger in the attached file. It loads your viostream library on slide timeline start. The library adds the following functions to the window object (e.g., window.videojs()).
You could add the script to the master slide and set a variable to make sure the trigger runs only once to load it once for your entire project, making it available on any slide.
- SamanthaKerr-8718 days agoCommunity Member
Hello Nathan,
Thanks for responding to me. My preference was to use the usual video embed code (an iframe) but when I scorm and export the project to upload to our SAP based LMS the published output contains a bunch of special characters from the embed code that the LMS can't cope with. I would love to upgrade our LMS, but that is not an option. I did note that our video host provides both iframe codes and references to java script. <script src="//play.viostream.com/embed/nixx79jdue59er"></script>
I tried putting this into the embed code editor, but it does not work either.
So my question was how else can I use that code in the project? I was thinking perhaps I could create a .js video script, add it to the story-content folder and update the story.html file as they suggest in the help documentation.
- Nathan_Hilliard17 days agoCommunity Member
Edit: For any future readers: While this works to load videos via the API from VioStream, my account is only a trial. If you find the video link broken, replace the account and video details with your own VioStream information.
OK, I looked into this further. I don't have an SAP LMS, but see below for two options for embedding your video clips from VioStream. I have attached a sample project with both.
1) JavaScript
To load the stream player and add your video to a slide, use the script below. It finds a rectangle on your slide and inserts the video into it (see the demo and the script comments for details).
//load the Vio player script and set the target container for the video //See also: https://help.viostream.com/media-players/using-the-player-api/ script = document.createElement('script'); //Requires the key from the Remote Path, under the Developer Tools Tab in Settings script.src = "https://play.viostream.com/api/VC-4778032502"; script.onload = function() { console.log("Vio Player is loaded."); //Get the identifying tag for the rectangle in which you want to place the video //Right click Shape on timeline, select Accessibility to set the alternate Text //Assign value to tag variable in SL let tag = GetPlayer().GetVar("tag");//"Rectangle"; //this will hold the video clip let el = document.querySelector("[data-acc-text^='" + tag + "'] div"); el.id = "vioVidContainer"; //allow click through to the player controls el.style.pointerEvents = "auto"; $viostream.embed(GetPlayer().GetVar("vioVideoKey"), el.id); //console.log("el:", el); } //add the script to the DOM document.head.appendChild(script);
2) Web Object
Since you said the regular video embed would not work for you purposes, you can try just using a web object into which you place the following index.html file. It adds the video clip inside the web object. Maybe this will load properly into your LMS.
<html> <head> <title></title> <style> body { margin: 0 0 0 0; overflow:hidden; } </style> </head> <body> <iframe width="100%" height="100%" src="//play.viostream.com/iframe/rqci9msrqcsn9a" referrerpolicy="strict-origin-when-cross-origin" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen="" frameborder="0" style="position:absolute; top:0; left: 0"></iframe> </body> </html>
Note, in both examples you need to update the video key in the links. I set a variable in SL to hold the video key. In the script example, you also need to update your vio account key (see the comments inside the script).