Using Web Objects in E-Learning #220: Challenge | Recap
Storyline’s Web Objects are similar to lightbox slides in that they give course designers a solution for loading on-demand content an...
Published 6 years ago
Version 1.0
Blog Post
We created a web based object similar to one of our previous challenges with interactive tabs in a FAQ page. Allowing user to use web objects in Storyline makes this process so much easier!
Take a look at the demo here - http://demo.fastercourse.com/storyline/FasterCourse_Pick_Your_Movie/story_html5.html
And here you can download the source file and see how to edit the web object - https://fastercourse.com/download/free-storyline-360-template-pick-your-movie/
In this example we used Rubik font that you can get for free here - https://fonts.google.com/specimen/Rubik
Hope you will enjoy it!
Take a look at the demo here - http://demo.fastercourse.com/storyline/FasterCourse_Pick_Your_Movie/story_html5.html
And here you can download the source file and see how to edit the web object - https://fastercourse.com/download/free-storyline-360-template-pick-your-movie/
In this example we used Rubik font that you can get for free here - https://fonts.google.com/specimen/Rubik
Hope you will enjoy it!
- Lovely and seamless as usual. The transitions and scrolling panels just float. Thanks for sharing the source file!
- This looks very nice @Karlis, love the design.
- I like how this panels fold and unfold. Cool example, Karlis. Thanks for sharing source file - I'm just having a look at it.
- Wonderful. I am a huge fan of your design.
- Thank you, so nice to hear. We try our best, this was a fun challenge, as I am sure you will agree!
- Hi Karlis - hoping you can assist on this. I tried editing the index file, but my computer would only let me do it with Libre Office Writer. Then it wouldn't save properly.
Here is what I ended up with:
file:///C:/Users/User/Documents/My%20Articulate%20Projects/Guide%20to%20Sci-Fi%20and%20Fantasy%20Movies%20-%20Storyline%20output/story.html
Do I need an html editor to make this work properly?- Hi Heather! You can use Notepad to edit HTML files, it's enough to edit the texts for this example. Unfortunately, I can't see your example, because it's located on your computer, not on a server. You can try to publish it in Storyline and share the Review link with me, so I can see how does it look like on your end.
Here is the description of how to edit the example -
Inside the downloaded files you will find a folder called 'Web Object'. Inside this folder you will find an index.html file where you can see all the information that is shown on the right panel in the demo. Edit this information and you will see how easily the tabs adapt to it and make space for a larger amount of text or additional images.
Once you put the file on your computer you will have to change the location for the 'Web Object' folder. To do so - click with the right mouse click on the Web object and select Web Object/Edit. There you can select the small folder icon and locate the folder on your computer. Now everything should work perfectly!
