Tech Team Twitter Feed

Friday, September 27, 2013

My Book Review of "Learning Articulate Storyline"

Learning Articulate StorylineLearning Articulate Storyline by Stephanie Harnett
My rating: 4 of 5 stars

Don’t think that just because you’ve been in an industry for 15 years or so and pride yourself on learning new tools all the time that you can’t learn something new! I’ve programmed and taught people how to use Storyline, and yet this book taught me things I had not yet found or had the opportunity to experience yet. Ms. Harnett does a great job in presenting information that individuals at any skill level can follow and learn from. The structure of presenting and explaining information and having “Follow along” exercises reinforces the content presented. The Appendix section covers a lot of more advanced features and handy guidelines to follow which makes for a handy reference tool. I would have appreciated a greater attention to advanced JavaScript techniques that can be used in conjunction with Storyline variables. So what are some of the cool things that you can learn from this book? How about typing in “=lorem()” into a text placeholder in order to have lorem ipsum text entered. Cool! Did you know that when you edit a character, you are only editing that specific instance of the character? I didn’t realize that. Speaking of characters, I learned about adding objects such as buttons, audio and video to the various “states” of those characters. I was always under this impression a “state” was simply a difference of the character not adding additional objects to the character. Cool! I’m purchasing this book for my team members – you should do the same.

View all my reviews

"Learning Articulate Storyline" is published by Packt Pub.  The link to this book on the publisher's website is http://www.packtpub.com/learning-articulate-storyline/book.  I downloaded the book for reading on my iPad. I used iBooks which was a great way to read and interact with the software on my laptop.  I was able to take notes, highlight sections, bookmark multiple pages for further review and leave my laptop screen free to work with Articulate Storyline.

Thursday, September 19, 2013

Creating a Branching Question - Adaptive Type Using Raptivity

This blog on Raptivity's blog site discusses using Raptivity for Adaptive Knowledge Check questions.  There is an example included.

Wednesday, September 18, 2013

Friday, September 6, 2013

MP3 Audio on IE8 Workaround

Anyone adding audio on earlier versions of Microsoft Internet Explorer, such as IE8, you doubtlessly aware of some of the pit-falls with placing/embedding MP3 audio on an HTML page, running on IE8. Sure, you can embed the MP3 file easily enough; but to play it, users will need to 1) have a 'helper' plug-in already installed (such as Quicktime Player or other); or 2) download such a helper plug-in.

It works, but let's be honest: it's not the prettiest (or most efficient) way of allowing your audience to play the media file associated with your page.

On the other hand, if we were able to code this page using HTML5's <audio> tag, everything would go swimmingly. Alas, as you know, we are not able to use HTML5 coding in IE8.

So what next? Certainly, there are also code libraries one can 'Google' that promise to 'shoehorn' MP3 audio and a player within the confines of IE8's digital limbo. As always, some initial learning (of the new code) and testing (the new code on your target platform) will be needed with using one of the remedies. Aside from these, let's look at a solution possibly closer to 'home' for us developers.

This particular solution utilizes built-in tools inside Dreamweaver, so you will need to have access to that software and be familiar with how to use (in general), to make this fix work. I don't suggest Dreamweaver is the penultimate way to code, but it works well and just happens to be the coding IDE I used for a particular project that needed such audio interactivity...without the overhead of an additional plug-in (well, sorta...more on that in a moment).

Additionally, access to media converter is needed for this fix. Yes, we are going to change the MP3 filetype to something else.

"But, isn't that cheating?", you may ask. Yes...yes, it is. However, the important part is that visitors to our webpage be able to play the audio seamlessly with our 'fixes' working invisibly in the background. Like magic.

Except, unlike magic, I will tell you the secrets and inner-workings of my tricks, so that you might benefit from my trial-error-sessions. So, let's get started. :)

  1. Convert MP3 audio to FLV
    Using Adobe Media Encoder (or any similar software), convert the MP3 audio to FLV audio-only files.  Use settings similar to these:
    Click on the image to enlarge
  2. Insert new FLV in Dreamweaver
    Use these setting:
    Click on the image to enlarge
    We want this to 'invisible', so set pixels to '0,0' and select the 'Auto play' checkbox. Why? While, we can either chose to have the media play automatically once the user opens our HTML page, we are going to add Javascript code to allow the user to play our audio on a click event.

    Conversely, instead of creating a clickable object - such as link, button, or other - we could simply use the FLV player controls, provided by Dreamweaver. However, my particular project needed audio to play only on the click of a specific image, not a 'Play' button (as is the case with the FLV player controls.

    Be sure to note which player skin you choose. While the actual player will not matter in this particular workaround (since we are setting the dimensions to zero), you will need to include this SWF file in the upload to wherever your final HTML files are housed or hosted, so that the audio will play.  And speaking of files needed for upload...
  3. Note the additional JavaScript code Dreamweaver creates
    To facilite this new insertion of a FLV/SWF object, Dreamweaver automatically adds a new JS page ('swfobject_modified.js') and inserts a reference link to it, inside your HTML code. While you can experiment and test with whether this new JavaScript code is needed by our new audio (I don't think it is), let's leave it for now, to continue with our (mostly) hands-off approach.
  4. Create a <div> 'container'
    Now, we are going to contain our new FLV player code inside a <div> with a specifi <id> element.  We do so to be able to manipulate this container code - and thereby all the FLV player code inside it - via Javascript function. Give the <id> a name you can easily recall for creation of the JS function in a moment.

    
    <div id="myMP3" style="display:none">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0" height="0" id="FLVPlayer">
    
    

    ... then after new code ...

    
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
    </div>
    
    

    Note that we have given our <div> a specific style attribute, setting display to 'none'. Our next step will illustrate why doing so is important.
  5. Add button or other object to Play Audio
    To clarity, we will use a <button> object, however any clickable item or other HTML object that invoke a JavaScript function can be used.
    You can place the button code anywhere inside the <body> tags, either before or after all of the code, but be sure to place it outside of the <div> we just created.

    
    <button>PLAY</button>
    
    

  6. Create JavaScript function
    Now the secret sauce to our workaround. We will create a simple function to change our <div> display from "none" to "block". While several schools of thought debate where the best place to put JavaScript inside an HTML (...and even many that decry putting any JS within HTML code, maintaining that it must be placed outside the code, in it's own file for maximum efficacy...), we will place our new JS code, at the 'bottom' of the HTML code, just before the last <body> tag.

    
    <script>
    function playMP3(){ 
     document.getElementById("myMP3").style.display = "block"; 
    }
    </script>
    
    


    This enables all of the code inside our custom <div> to not only become visible on the page (*if we could see any of it; remember that we set the dimensions to zero), but it also allows the HTML page to make the code 'active'. Once active, our FLV code plays the audio file, because we set it to 'auto play', in our earlier step.
  7. Invoke JS function
    Using our button, we now fire off the new JavaScript function, allowing our audio to play.

    
    <button onclick="javascript:playMP3();">PLAY</button>
    
    

That's it. Our audio should now play when the user clicks the play button...even in IE8. Sure: this workaround doesn't use the MP3 filetype, but(!) rather we use Dreamweaver's existing FLV player to cheat this shortcoming, and to give IE8 something it knows what to do with: FLV/SWF files.

Of course, another option - and, perhaps one just as quick - would be to create a custom Flash (SWF) interaction, that plays MP3 audio when triggered (i.e., clicked, whatever). Certainly, this is an acceptable pipeline to consider, especially if you have Adobe Flash IDE.

This SWF could also be controlled via HTML/JavaScript (outside of the SWF itself). To do so, one would also need to include ActionScript code within the Flash environment that exposed its Flashvars to JavaScript commands.

However, this is exactly what our Dreamweaver shortcut does: it creates a SWF for us: one that houses our media (the new FLV) and is controlled inside the HTML...only we didn't have to (additionally) open up and code within the Flash IDE. Use the extra time to sit back, relax, and have a tasty bev.

Cheers! :)

Thursday, September 5, 2013

Quickfix & Browser Discussion

In my blog article, "Fun-fun-FUNctions...with IE8", I offer a quick-fix for developers having JavaScript issues when creating content for Windows Internet Explorer 8 browser. While both the example and the workaround code is relative simple, there is a larger discussion at work here: browser compatibility.

Certainly, we developers may have a favorite or preferred browser to develop for, but in the end, our code must be malleable and flexible, able to 'live' inside whatever browser or environment our client(s) require.

Because our Team has many different clients, all with different browser/environment needs, we have become very proficient in the (at-times-not-so-simple) task of just 'making it [the project] work'.

Sometimes the solution is a quick-fix, like the in the article above; sometimes the solution is more involved and may require a complete re-writing of code...or (if we get lucky,) tracking down, learning, and using a new code-set or development tool.

Pay no attention to that
JS code behind the HTML page!
We make the magic happen, across many different platforms and settings. Yet, unlike that famed and faraway 'Wizard', we do not mind showing others what happens 'behind the curtain'.  We like to share and hope to learn from others that share with us, as well.

Feel free to share your tips, tricks, and workarounds with us so that we can all learn from each other...especially as more and more of us begin developing projects across multiple browsers. Tweet us: @mas_edev@eLearnDevGeek@damoEdev, or @gardelearndev.

Cheers!

Wednesday, June 19, 2013

Highlights From mLearnCon 2013

main stage at mLearnCon 2013
Despite being a "first-timer" to the Mobile Learning Conference and Expo (or "mLearnCon"), I thoroughly enjoyed my time.  Now that I have not only successfully attended the conference, but also given two presentations, I believe I qualify as a "seasoned veteran".  Maybe.  :)

So, with that in mind, here are some brief highlights from my interaction at mLearnCon 2013 (in no certain order).

Conference Backchannel
mLearnCon has created a wonderful way to follow the events, information, and thoughts of the presenters, vendors, and general attendees.  Fueled by attendees' Twitter hashtags, the backchannel provides great insight to the constantly-changing technological flavor of the conference.
This is further enhanced by Hashcaster (http://mlearncon.hashcaster.com/), "a real-time Twitter curation platform setup by your mLearnCon organizer to help you find the best content tweeted at mLearnCon and to help you easily identify and connect with top influencers."

mLearnCon2013 presentation #1
Presentation #1
Despite occurring immediately after lunch - making both the speaker and the audience slightly lethargic - my presentation was a success.
Attendees to "B.Y.O.L.: Touch & GO: Quickly Enhancing Lectora for Gesture-based Interaction" were able to get some technical tips on specific projects they had in mind.
Discussion continued even long after the presentation was over (...my apologies to the person presenting directly after me..!), as an attendee and I traded notes on 3D software and how to best implement JavaScript code for gestures in Lectora and other HTML5 projects.

Presentation #2
With a great turnout and good audience participation/interactions, "Nuff Said: Tips and Tricks from Digital Comics to Breathe Life into Your HTML5" went smashingly.
Several Tweets were fired off that focused on various aspects and info nuggets from this  presentation ... and another long discussion after the end made this event a great one to be part of.
Thanks to everyone that came out and contributed to the discussion.  You all rock!

And finally...
artsy...AND mysterious
Hotel paintings that make me think they're really QR codes
I still think it's a code...

Tuesday, April 16, 2013

Articulate Storyline: OK - I'm on the bandwagon too!


Articulate Storyline stormed onto the online learning development scene last summer.  I’m not one to believe based on massive hype on social media surrounding a product rollout.  In fact, I tried real hard to not even want to use it based on my previous experience with Articulate Presenter.  I’m a programmer but have a degree in Secondary Education – mathematics.  I feel there is a definite difference between programming and being an instructional designer.  In my opinion, programs like Articulate and Adobe Presenter are really made for an instructional designer with great PowerPoint skills.

Nonetheless, I purchased several licenses last summer – one for an ISD and one for me.  The ISD never had time to try it out and I only gave it a cursory review.  Because I did not really have a project in mind so my evaluation was less than stellar.  In fact, I didn’t even really do much until the content and requirements for a project screamed Storyline.  I relented programmed the prototype lesson and was ecstatic with the results. Bandwagon, here I come.

I use a variety of tools to program online and mobile learning – Lectora, Rapid Intake, Captivate, SmartBuilder, and Dreamweaver using jQuery mobile. I try to use reusable Flash interactions whenever I can.  I believe in incorporating Unity based games and movies as required by the content.   Avatars are a great way to imbue personalization without getting too personal and the right amount of narration greatly aids the instructional value for individuals.

After creating my lesson, I saw that Storyline is really a great merge of the tools mentioned above.  It allows an ISD to create and yet gives programmers great ability to “pull back the covers” so to speak and enhance or improve the quality of instruction.

The interface is a familiar one to many.  It looks like Presenter and Captivate mixed together.  It add in the triggers and actions you would see in Lectora, and it’s output, while still Presenter-esque, has a SmartBuilder feel to it – clean, brisk and edgy.  There is something for any level of programming experience. 

For those who are not programmers but want to make things happen, triggers offer a fantastic method to create numerous types of interactions. Programmers have also been taken care of.  You can write your own JavaScript and the core JavaScript methods supporting Storyline are available.  You can access those methods using the “Execute JavaScript” triggers. Variable are also accessible using player.SetVar() and player.GetVar().  There is a great article in the support center discussing this. http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg
“That Learning Company” has compiled a nice listing of things you can do with JavaScript. Check it out at:  http://thatelearningcompany.wordpress.com/2012/11/09/usingjavascriptinarticulatestoryline/

I’m not a graphics designer.  I count on others to do that for me.  So having Avatar characters available in the quantity and quality Storyline provides is important to me.  If you are like me, I’m sure you will agree.  Add in the multiple expressions, poses, and direction facing available for each character and you have a winning set of avatars for any interaction – all at no additional charge.  Then Storyline throws in the different states for each character.  Combine the different states with triggers or timeline events and you can make you avatar change expressions or poses.  Once again – all with no programming needed.  Want to crop an avatar character so you only need the shoulder and head – no problem.  This is real power for those who are neither graphically inclined nor able to program Flash for their interactions. 

I said earlier that the content for my project screamed Storyline.  It did – loud enough for me to try it out again.  I will now make Storyline an active part of my programming toolkit. Not that is will be the only tool I use, but it will definitely be a tool that can be used.