Embedding a SmartBuilder lesson in Articulate

For general questions about Content Authoring

Moderator: Nav

Embedding a SmartBuilder lesson in Articulate

Postby Leif » Fri Dec 17, 2010 5:58 pm

With SmartBuilder’s 3.12 release, there are two features that have enabled Articulate users to leverage SmartBuilder in a major way.
  • First off, it is now possible to share content you’ve built in SmartBuilder with others on the web without having to download it. You can now serve that content directly from SmartBuilder.
  • Secondly, SmartBuilder’s trial has changed from a time-limited trial to a functionality limited trial. While you will be limited from downloading a SCORM package, you will be able to take full advantage of the authoring capabilities without cost and without expiration.
Combining these two features means that you can embed your custom, highly-interactive exercises in your Articulate presentations without cost and without expiration!


This video is hosted on YouTube. If your organization blocks YouTube, please let us know and we can make the video available through other means.

This rest of this forum post will review the steps outlined in the video above - how to use a shared lesson’s embed code to embed a SmartBuilder lesson within an Articulate presentation.

    SHARING YOUR LESSON IN SMARTBUILDER
  1. With your lesson open on the Authoring Stage, open the Edit menu’s > Page Size window. Change your lesson to ‘Scale proportionally’.
  2. Publish your lesson.
  3. From your Home Window’s Published Lessons node, select the lesson and click the ‘Share’ button.
  4. Click the button to ‘Generate Web Code’.

    Now you’ll have the share code needed to complete this task. However, we’re going to leave that for now and come back to it. Using Articulate’s ‘Insert Web Object’ option, we could just point to the generated URL. However, that would include some windowing elements around the SB lesson that we don’t want. Instead, we’re going to create an html document in which to use the generated embed code.

    CREATING THE HTML EMBED DOCUMENT
  5. Open up a notepad document or an html editor.
  6. Insert the following html code:
    Code: Select all
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    <!--
    body,html {
        margin:0px;
        padding:0px;
        height:100%;
    }
    -->
    </style>

    </head>

    <body>
    <!-- EMBED CODE REPLACECS THIS COMMENT LINE -->
    </body>
    </html>

  7. Now go back to the SmartBuilder share window and select in the ‘Embed code’ field. This will automatically select all the text in the field. Copy that text.
  8. Paste your embed code into the html document to replace that comment line. It should now look like this:
    Code: Select all
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    <!--
    body,html {
        margin:0px;
        padding:0px;
        height:100%;
    }
    -->
    </style>

    </head>

    <body>
    <object width="800" height="600"><param name="movie" value="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/tsunamiplayer.swf"></param><param name="base" value="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/tsunamiplayer.swf" base="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="600"></embed></object>
    </body>
    </html>

  9. Now, to properly enable scaling, we need to change the width and height properties each to be “100%”. (Ie. width=”800” becomes width=”100%” and height=”600” becomes “100%”.) Note that you will need to make a total of four changes as there are two width and two height properties respectively. Your code should now look like this:
    Code: Select all
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    <!--
    body,html {
        margin:0px;
        padding:0px;
        height:100%;
    }
    -->
    </style>

    </head>

    <body>
    <object width="100%" height="100%"><param name="movie" value="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/tsunamiplayer.swf"></param><param name="base" value="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/tsunamiplayer.swf" base="http://www.suddenlysmart.com/smartbuilder-2/e-learning-software-tools/Share+test/loz0000hw000000000001u/" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%"></embed></object>
    </body>
    </html>


    SAVING YOUR HTML DOCUMENT
  10. Before you save your document, create a folder in which you’ll save the html doc. For instance, create a folder named “SB_embed”.
  11. Now save your document in that folder and name it index.html. (If you’re using an html editor program, you’ll just need to name it index and the .html attachment will automatically be appended. If you’re using a notepad type application, save it as index.html and set the ‘Save As Type’ option to ‘all’.)

    SELECTING THE HTML DOCUMENT
  12. In PowerPoint, create a blank slide.
  13. use Articulate’s ‘Insert Web Object’ option.
  14. Click the folder next to the URL field.
  15. Navigate to and select the folder containing your index.html file.

Voila! Publish (or preview) your Articulate presentation, and you now have an embedded SmartBuilder file. The best part is that once you’ve done this, you can make updates to your SmartBuilder lesson without having to update the Articulate presentation.
Leif
 
Posts: 113
Joined: Fri Mar 30, 2007 2:56 pm

Re: Embedding a SmartBuilder lesson in Articulate

Postby lindseybrockish » Thu May 05, 2011 10:53 am

At my company, we are new to SmartBuilder. We've created a couple of interactions we'd like to use in an articulate presentation (e-lesson). However, after following the instructions in this post, we are having problems with the interaction loading consistently.

When we publish the presentation (with SmartBuilder web object embedded) to the articulate server, the SB interaction will load quickly and run appropriately 9 of 10 times; though 1 of 10 times it takes about 30 seconds to load.

When we publish the presentation to the web, the SB interaction will load and run 0 of 10 times. Of course, we need to be able to preview the presentation by publishing to the web numerous times before launch. We're updated flash on our machines as a troubleshooting step, with no improved results.

Any help is appreciated!
Lindsey
lindseybrockish
 
Posts: 1
Joined: Tue Apr 26, 2011 4:47 pm

Re: Embedding a SmartBuilder lesson in Articulate

Postby Nav » Thu May 05, 2011 11:27 am

Hi Lindsey,
Please contact us at support at suddenlysmart.com. We'd be happy to do a gotomeeting and assess the problem.

- Nav
Nav
 
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm


Return to General

Who is online

Users browsing this forum: No registered users and 1 guest

cron
Not able to open ./cache/data_global.php