I'm learning JavaScript specifically to be able to extend interactions in Storyline. I want to create a flip-card interaction to reveal more information and I have a concept on Codepen.io using the concept. But now I'm trying to figure out how to apply in an SL slide. It relies on CSS classes and I'm not sure how to add a CSS class in SL.
Sorry, CSS classes aren't going to be much use to you while working within Storyline. Pretty much what you will have access to in Storyline is going to be variables.
You don't really need a special place to store an html page. It is just a file then an .html extension. You can even publish it as part of your storyline project, although would have add it to the .zip file yourself.
If you want to practice working with HTML and CSS, all that you must have, is a pure text editor (Notepad works) and a browser. There are a lot of really good HTML editors on the internet that make it a lot easier as well.
So are you saying that I would use a Web Object and use the local URL for the .html file locally for testing? Then how would I connect to the correct path after it's dropped into the .zip file?
When you use "Insert --> Webojbects" in SL, the HTML page using created locally will store in WebOjbects folder in "Story_content" folder upon publishing to Web or LMS. So you don't have to worry about the path. You can deliver or transfer the zip file as it is without worrying about the HTML page inside.
This way, you don't have to use a separate server to store HTML pages created locally.
But then, here is the fun part that they don't tell you.
If you create the web page as they've described in a folder of its own, you have created a basic web site.
In this following image, you can see where I've created a folder called Web_Object for my test web object. Of course you can call it anything that you want.
Inside of that folder I have a file called index.html, and an image. I'm including it for you, so feel free to check it out. For convenience, I placed this file right next to my project file, but it can be anywhere on your system.
Now that you have your web object, in Storyline select insert Web Object. Click the folder icon to the right of the Address line, and select the folder where you have your Web Object.
When you publish your project, Storyline will make a copy of the file inside of its own folder structure, and save the web object as an internal part of the project. It is good to know where this is in the published folder, because sometimes storyline will miss some of the extra files that you may need. So if you open your published files, and drill into the directories to C:\StorylineProjectName\story_content\WebObjects\SomeStrangeFileName\index.html you will see your web object files. I've found that if my Web Objects don't play correct, I can just drag a copy of everything in my source web object folder into this folder.
Then run the storyline starting file like normal. For mine I run story.html, and you can see your web object on a storyline slide in all of its wonderful glory.
I'm including both test storyline file, my published file and the web object for you to examen for yourself.
Thanks so much Sanduni and Dave! Really appreciate the extra details and test files. Up till now I had only used web objects to link to html pages on a server.
I didn't include in CSS in my sample files, but now that you see how you can add web objects to your project, you can add CSS to your web object, and style your pages to your heart's content.
16 Replies
Hi Kris,
Sorry, CSS classes aren't going to be much use to you while working within Storyline. Pretty much what you will have access to in Storyline is going to be variables.
As an alternative, you can create this in pure HTML page, and add the page as a WebOject to SL slide.
Great idea Sanduni. :-) I didn't think of that.
Thanks Dave and Sanduni for the input. We don't really have a place to store separate HTML pages. I need to create a solution in Storyline directly.
Hi Kris,
You don't really need a special place to store an html page. It is just a file then an .html extension. You can even publish it as part of your storyline project, although would have add it to the .zip file yourself.
If you want to practice working with HTML and CSS, all that you must have, is a pure text editor (Notepad works) and a browser. There are a lot of really good HTML editors on the internet that make it a lot easier as well.
Dave
HI Dave,
So are you saying that I would use a Web Object and use the local URL for the .html file locally for testing? Then how would I connect to the correct path after it's dropped into the .zip file?
Hi Kris,
When you use "Insert --> Webojbects" in SL, the HTML page using created locally will store in WebOjbects folder in "Story_content" folder upon publishing to Web or LMS. So you don't have to worry about the path. You can deliver or transfer the zip file as it is without worrying about the HTML page inside.
This way, you don't have to use a separate server to store HTML pages created locally.
Hi Kris,
Yes, you can.
A web object is really just a simple web page, and you can internalize it into your project.
Here is some really good information about how to use web objects.
But then, here is the fun part that they don't tell you.
If you create the web page as they've described in a folder of its own, you have created a basic web site.
In this following image, you can see where I've created a folder called Web_Object for my test web object. Of course you can call it anything that you want.
Inside of that folder I have a file called index.html, and an image. I'm including it for you, so feel free to check it out. For convenience, I placed this file right next to my project file, but it can be anywhere on your system.
Now that you have your web object, in Storyline select insert Web Object. Click the folder icon to the right of the Address line, and select the folder where you have your Web Object.
When you publish your project, Storyline will make a copy of the file inside of its own folder structure, and save the web object as an internal part of the project. It is good to know where this is in the published folder, because sometimes storyline will miss some of the extra files that you may need. So if you open your published files, and drill into the directories to C:\StorylineProjectName\story_content\WebObjects\SomeStrangeFileName\index.html you will see your web object files. I've found that if my Web Objects don't play correct, I can just drag a copy of everything in my source web object folder into this folder.
Then run the storyline starting file like normal. For mine I run story.html, and you can see your web object on a storyline slide in all of its wonderful glory.
I'm including both test storyline file, my published file and the web object for you to examen for yourself.
Best regards,
Dave
This post was removed by the author
Thanks so much Sanduni and Dave! Really appreciate the extra details and test files. Up till now I had only used web objects to link to html pages on a server.
Hi Kris,
You are welcome. I hope that these helped.
I didn't include in CSS in my sample files, but now that you see how you can add web objects to your project, you can add CSS to your web object, and style your pages to your heart's content.
No worries, Kris. Glad to help you.
I see that Dave has done a detailed explanation and provided some sample files for you to explore more. Thanks Dave.
Is this somewhat what you want/need ?
https://360.articulate.com/review/content/1deb2191-b0e0-4f5a-8efc-4566ab5a6b62/review
My solution uses images for the flipcards like in Rise, and does need GSAP. With Dave's solution you only need CSS as in your Codepen...
Nice solution, Math.
Hi Math,
Yes! I'm not familiar with GSAP and I haven't used Rise yet. I'll research a bit further for that.
Thanks! :-)
YES! - https://community.articulate.com/discussions/building-better-courses/flashcard-animation-in-storyline
ALison