Dear diary,
I was just minding my own business, creating awesome appz with the latest hipsterific tech stack. Then this assignment fell down on my lap. It was creating this thing with Articulate Storyline 2
https://www.articulate.com/products/storyline-why.php. Cool, it's being used by Microsoft and Google and Cocacola and so on so it must be good.
What's Storyline 2?
Wow well that is pretty impressing mr. Articulate. So I install the trial of an 300 Mb suite and first impressions are... all thing considering kinda positive, as it's
exactly like Powerpoint: every single thing in the ribbons and menus are exactly where they were on Powerpoint etc. etc. The end product is this exported thing that mostly runs on Flash (yeah baby) but it also exports an "HTML5" version. Okay then, let's start making some interactive e-leeeernings.
So I start soft-"coding" stuff and it's exactly like I predicted to be: "simple", but not robust. Everything takes 10 times the time it would have taken to create in HTML+CSS, but if you know Powerpoint, you can manage this. The real meat to this interactivity is this Trigger system, which is something like you do in Flash. You click an object, attach a "trigger" which is pretty much a conditional event listener and wow, there's your awesome interactive e-learning. Okay then, now I am at the point where I have created something after I have only thought about hitting my face in the desk like 5 or 6 times (due to things like non existent SVG support and ridiculously bad "timeline", where scrobbling the timeline doesn't actually animate the elements").
I have this "form" (which is two text fields, the program has "text field" and number field with controls built in) which I want to validate. Like I said, the event system is (optionally) conditional, so I create a click handler trigger that launches some JavaScript code (oooh yeeah, the thing is expandable with JS!) to validate the field and then animates some thing... except, wait... where's the reference.
Oh right, there it is, let me quote the JavaScript API for you.
Code:
player.SetVar(variablename, value) string, string|boolean|number
Set a value for a global variable
player.GetVar(variablename) string
Get a global variable
And that's the full extend of the JavaScript API. There are some other methods and values that are public, but mostly those are things that you never have to or want to touch.
The thing I forgot to mention is that
- Every "object" is a standalone state machine
- and then there's tons of global variables
That's the full extend of the manual control you have over the elements, together with the worst timeline in the history. So let's put that information to use.
1. We have a "Submit"-button.
2. We set a "trigger" for the "submit"-button to "execute JavaScript"
3. We create a global variable (inside the program) for "success".
4. We have a "Success message"-object
5. We set a "trigger" for the "Success message" to "change state" to "Visible" when "variable changes" if variable "success" is set to "true"
6. We set the submit buttons execute JavaScript button to
- GetVar from text fields 1 and 2
- SetVar success if those match whatever we like to validate.
Oh my god it's the most monsterous MVC system ever invented. So, let's preview how this works.
Press preview, the program loads for 15 seconds and my awesome interaction appears.
I fill in the fields and press submit and
JavaScript is not available in preview
Goddammit. I guess I publish it then. So I go and publish it which takes 30 seconds more and now I have this 4 megabyte system running on Flash and on top of HTML I guess. And it works. Sort of. Oh well, I guess I couldn't have expected more from a program that is fr...
costs 1800 dollars?!? I think I died and I am in web developer hell
.