The Latest

A Medical Demo and a bit of Coding, too!

Reading Time: 3 minutes

This one was an ordeal! But only because I’m super new at JavaScript and JQuery.  Read on.

This weekend, I spent some time (a lot of time) developing my entry for Elearning Heroes Challenge #69: Medical Template Challenge. As I continue to challenge myself to always have a project, and to develop fuller portfolio pieces, I’ve been pressed for time but I really wanted to do this challenge because I think that David has an excellent point in that one’s portfolio should include targeted demos to appeal to potential customers. This was a really good one

Time in development: About 6 hours

Time searching for a way to autoscroll the page: About 7 hours. More on that below.

Inspiration

In retrospect, what I developed isn’t quite as medical as it could be… There aren’t any direct images of organs, etc. [that’s a potential update for me] but I was thinking about sports-related training and client-facing training when I stumbled on the CDC Head’s Up series. I was intrigued particularly by the coach training and used that as the basis for my demo.

The CDC training already has a really awesome graphic design. They also make good use of video to show some coaches in action doing the right thing and expressing the appropriate concern for young players that experience bumps and jolts to the head.

CDC Heads Up: Concussion in Youth Sports

But I thought, this could stand to be a little more interactive. Articulate Supastar Linda Lorenzetti had already demoed a great short comic-book style entry inspired by a Cathy Moore article. The demo reminded my of the Broken Co-Worker course (I’m sure you’ve seen that stellar piece before) and I decided to blend all of these together into my demo.

Development

Prototyping went fairly quickly. I had a specific idea and I prototyped on paper before beginning. Probably the most difficult bit was finding the images. I wanted some specific poses to build the drama and I wanted to use free resources. But that proved impossible. So, I settled and went to Shutterstock. From there I cobbled together a few different images.

My paper prototype. It’s so ugly.

I love the comic-book theme. There’s something so familiar and nostalgic about it. Furthermore, the frame layout is great for creating suspense and drama. So, once I got the images, I used an Ozono Studio Cartoonize photoshop action that I downloaded for free from Creative Market (now $4) to stylize them.

JavaScript

I’m already fairly savvy in HTML and CSS but one of my daily goals this year is to really delve into JavaScript and front-end development. So, I’m still learning. At that’s why this bit was so difficult. But perseverance paid off!

My task for myself was to emulate the way Broken Co-Worker used the buttons on the panels to autoscroll down the page. I agree with that development team’s reasoning that, in this case of an interactive comic book (as opposed to say, reading manga or comics online), it was better to have the page scroll and not have to make the user scroll down with the mouse. I examined their interaction closely and found that they had integrated a JQuery plugin from Ariel Flesler called ScrollTo. As with all other scripts, these can be linked to in the head section of your story file. I copied the Broken Co-worker method of renaming the ScrollTo file to scroll.js. I also hosted jQuery myself. However, probably the best thing to do for both of these is to put in the CDN link so that the scripts remail up-to-date.

If you’re a n00b like me, note that the order is important. Jquery must come first. Then, the ScrollTo script. These links, along with the JavaScript files have to be pasted into the publish folder after every publish.

Adding scripts in story.html

Pre-publishing, I had the buttons that went down or to the next page execute some jQuery from ScrollTo so that they moved the browser window.

Execute Javascript trigger on button

The code has three parts:

  • top:'150px' tells the browser how far to go down. Calculate from the height of the first panel (or a little less, which is what I did).
  • left:'0px' tells the browser how far left to go. I didn’t use this because I didn’t need the window to go sideways.
  • 500 is the speed at which the animation will happen.

The jQuery code

Demo

And that’s it. Check the demo below!

Sports Concussion Demo

Click to view the Demo

7 Comments

  1. Amanda Allen
    February 10, 2015 - Reply

    Thanks for sharing your process Kristin. Now achieving this look doesn’t seem impossible for a n00b like me! 🙂

    • K. Anthony
      February 10, 2015

      Thanks, Amanda! Glad I could help.

  2. Nancy W
    February 12, 2015 - Reply

    Hi Amanda. This is great stuff. Just a couple of questions (for now anyway). I’m not hosting JQuery so I guess I need to embed the CDN link in my page. Does the link go in the body of the story.html page? I’m getting an error so must not have the syntax correct.

    My other question has to do with the Storyline player properties – Do you lock the browser to optimal settings?

    • K. Anthony
      February 12, 2015

      Howdy Nancy, It’s Kristin. I just learned this so I’m so glad you asked! The CDN script link should optimally go just before the close body tag in your output
      To your other question, I didn’t change the Storyline default settings, except to get rid of the chrome. So I believe the answer is no.

      Hope that helps!

    • Nancy W
      February 12, 2015

      Kristin, sorry I called you Amanda – I’m a bit over worked at the moment. Moving the CDN link to just before the body end tag eliminates the errors I was getting, but I still can’t get the scroll action to work. I checked the published output and everything is as it should be and I believe the order and syntax of the javascript trigger is correct. Is there anything else you can think of off-hand that I might be missing?

    • K. Anthony
      February 12, 2015

      I’m being a silly head. First, move the Jquery and scrollTo script links to the head on top of the user.js file. Because of the way Storyline structures itself, that’s where they need to be. So jQuery, then scrollTo, then user.js, etc. That’s probably where the problem is. Also check that you are using the jQuery 1.11.2 version. That may be another issue.
      Another way to test whether or not JavaScript is executing at all is to put in an alert on the first Execute JavaScript trigger. This would look like:
      alert("JavaScript Works!");
      Republish and test.

  3. July 3, 2015 - Reply

    Great work, Kristin! And good job with JavaScript and JQuery.

    For testing, (in Chrome at least), I always have the Developer Window open (Ctr+Shift+I) in Windows. This shows you if any of the JS files are not loaded properly. If there’s any error, you need to fix that before you can attack the content. And the reason why the order is important because the ScrollTo (and many other plugins) is an extension of JQuery, so it’s kind of building on it.

Drop a comment

Your email address will not be published. Required fields are marked *