Flash, XSLT, and show-hide controls

A recent project I worked on involved creating a flash-based display of related information with a more usable interface. Previously the content was displayed in tables with javascript and css divs. There are both advantages and disadvantages to using the javascript method. Advances with ajax and css have greatly improved functionality since the time of the initial implementation of using showhides to present the learning content. When presented with the request, I came up with the following sketch in my instructional design idea book.

As I've previously blogged about re-usability, the first step I took was consideration of how this display object could created for that purpose. I settled on a pretty simple XML structure. This structure is not at all content dependent.

 Foo for you
 foo.jpg
 all you wanted to know about foo

One of disadvantages of displaying content in flash is how to allow users to print that information. The javascript/css showhide didn't have this limitation because a simple function could reveal all the CSS divs when printed. In order to overcome this limitation I turned to Extensible Stylesheet Language Transformations (XSLT) since my content was already written in XML. I know I could have approach this problem on the server side, but this client will be switching application servers and it didn't make sense.

XSLT is an XML-based language used for the transformation of XML documents into other XML or "human-readable" documents (more info at wikipedia entry). XSL files are included at the top of an XML file and allow all newer browsers to render the XML in HTML/XHTML format. All major browsers support XSLT, see list here. Knowledge of XPath is required to traverse the XML structure and output the content desired.

Useful tutorials

• w3 school tutorial on XSLT
• w3 school tutorial on XPath

Since I already load the XML into the flash project at runtime, I had the path to the XML file available to place on a button on the flash stage.

 public function initApp():void
 {

 var thisXML:String = Application.application.parameters.thisXML;

  var loader:URLLoader = new URLLoader(new URLRequest(thisXML));
  loader.addEventListener(Event.COMPLETE, loadNewXML);

 }

 public function loadNewXML(event:Event):void
        {
     
         loadedXML = new XML(event.target.data);
      
        }

In this post I am not going to go into details about the actual actionscript code which generates this swf and instead focus on the XSL commands used to generate the HTML appear content from the button. You can see an example of the project below. To quickly replace the actual content used in this project, I grabbed some state flag images off google and text descriptions from wikipedia..

The actual XSL file is relatively simple and easy to read. I'm basically looping thru the XML nodes with an xsl:for-each select="data/node" tag. Then within the for-each block, I output the title, the image, and text associated with that node. For the text based output I used the xsl:value-of tag. For the image, I used the xsl:variable tag so I could embedded the variable within an img src tag.

N.B. the html and body tag had to be removed to post on blogger. Also the node "title" had to be renamed nodeTitle.

Samples XSLT of States


    
    
      

    
       

     
       
    
    

    

    

In conclusion

So XSLT was extremely useful to generate a printable/human readable rendering of the XML that was used in the flash generated display object. The SWF is re-usable and only needs a different XML file to be used on another web page with different content.

Building Engagement with Re-Usability

In a recent project I had the opportunity to convert a learning activity developed in 2001 to be re-usabile and in Flash. The original learning activity used a image map and javascript popups to present information. The learner was presented a literal map from Winnie the Pooh and had to find 9 places to click. The activity was completely custom and thus not reusable. The presentation was very much HTML 1.0.

The process of converting the activity to Flash could have involved simply using an actionscript library which would have read the HTML image map coordinates. Instead I designed with usability in mind and developed an XML data file with the content from the previous activity and some additional nodes of information to reference from actionscript. The programming was created so that the same project could be re-used with a different XML file loaded at runtime. A common technique in the projects I make is to specify an XML file to be loaded at runtime. The URL for the XML file is specified on the page in which the SWF is called instead of in the actual flash file.

 public function initApp():void
 {

 var thisXML:String = Application.application.parameters.thisXML;

  var loader:URLLoader = new URLLoader(new URLRequest(thisXML));
  loader.addEventListener(Event.COMPLETE, loadNewXML);

 }

 public function loadNewXML(event:Event):void
        {
     
         loadedXML = new XML(event.target.data);
      
        }

The first step in this project involved our graphic artist updating the map image to remove the iconography that users previously clicked on. The resulting image created the background for the interaction. While in this case the background was the same as the previous activity, it could have been any background image. In creating the Flash project, I set it up to dynamically place a background image specified in the XML file.

The next step was to get the iconography overlayed onto the background like the original activity. The previous javascript popups already had the icon images that appeared on the map. Thus, I was able to use them to dynamically place them on the map in Flash. The XML was formed to include x,y coordinates for placement and a path to the image file. A sample node:

 
480,60
 http://localhost/scribble.png

You may be afraid to ask questions because you know enough to realize that you can't "Do something" about the 
patient's problems.  The only person expecting you to have an answer for everything is you.  You can always refer the
patient to a competent mental health professional  if you need to, but you may also be surprised at how powerful
your listening.]]> 

After the actionscript code loaded the XML the following two functions were executed to create a button that combined the icon and text title for each node and placed it as the specified coordinates.

 public function setupStage(mapXML:XML):void{

 // loop thru XML and call function to add objects to stage
      for each (var node in mapXML..node)
  {

   var image = node.logo.toString();
   var imageLabel = node.@id.toString();
   var theseCoords =  node.coordinates;
   var title = node.title;
   var popupStyle = node.type;
   var coords = theseCoords.split(/,/);
 
   var x = coords[0];
   var y =  coords[1];

   // call function to create clickable object
      
   var thisFixture = setupFixture(image,imageLabel,x,y,title,popupStyle);
 
   // event listsener to call popup func
   thisFixture.addEventListener(MouseEvent.CLICK, viewItem);
 
   // add object to stage
   main_area.addChild(thisFixture);
   }

 }


 public function setupFixture(icon:String, label:String, x:int, y:int, title:String,popupStyle:String):HBox
 {

  //create Hbox to hold icon images and title of object
  var thisDodad:HBox = new HBox();
       thisDodad.x = x;
    thisDodad.y = y;
    thisDodad.data = label;
    thisDodad.buttonMode = true;
    thisDodad.useHandCursor = true;
    thisDodad.horizontalScrollPolicy = "off";
    thisDodad.verticalScrollPolicy = "off";
  
  var thisTitle:Text = new Text;
   thisTitle.text = title;
   thisTitle.data = label;
 
   thisTitle.buttonMode = true;
   thisTitle.useHandCursor = true;
   thisTitle.mouseChildren = false;
   thisTitle.selectable = false;
   thisTitle.setStyle("leading", "-3");
   thisTitle.styleName = popupStyle;

   //dimming text evaluation

   for each (var item:String in selectedArray) {

    if(item == thisTitle.data) {
     thisTitle.styleName = popupStyle + "Selected";
    }
  
   }

  var thisIcon:Image = new Image();
  thisIcon.source = icon;
  thisIcon.data = label;
  thisIcon.width = 25;
  thisIcon.height = 25;


  thisDodad.addChild(thisIcon);

  thisDodad.addChild(thisTitle);

  return(thisDodad);
 }

In the previous HTML 1.0 design for this activity a learner had to remember what items they had clicked on. There was no visual feedback to indicate their progression thru exploring the map. I created an array in which I captured each of the nodes a user clicked. Then you will notice on lines 59 I evaluated if the current node was on that list. Thru the use of CSS styles, I changed the color of the text label to be dimmed for those which had been selected.

In the future, this same Flash SWF can be re-used with different visual assets and learning content. The design is very engaging for the user in that they can explore a visual space and receive information in a fun way. While I can't show the actual project here, I will try to make a derivative and post it soon.

Developing a reusable interactive pie chart

Begin with the end in mind

In grad school I had a professor who in talking about research explained: "you can either do the work on the front end with planning or the back-end when you are dealing with #$*($&(*#$". I think the same wisdom holds for instructional design. You can plan for reusability and generalization or try to expand upon an instructional design (feature creep).

A new instructional design project often starts with the idea wouldn't it be cool/nice/useful/ fill in the blank to have a widget that does X. In my job, it is often translating that X into reality but also considering how the project could be a reusable learning object.

The planning process should consider how could this idea be used in other contexts/applications, how does data flow to and from the learning object, and if technology is needed to support it. I always like to start with deciding if technology is really needed to support the learning idea or if non-technical means would yield better outcomes. A hybrid in-class and online approach or in-class only approach might work better than a strictly online approach. Not every learning idea translates well to an online context and in those cases if a classroom experience is possible, the idea would be better delivered in that manner.

A recent request I had was for an interactive pie chart. The idea was for the user to click on the pie wedges and receive information. The course would be strictly online, so there was no need to consider delivery in other modalities. The next question to consider was how to populate the learning object with data. This easily could have been a custom flash animation. Instead though, I approach it with reusability in mind and created an actionscript project that outputted Flash based on an XML data file.

In designing the XML for the project, I wanted to make sure it could be re-used. Since the design was to show some topics and provided information on each, I named the top level node "topic. For each topic node, I gave it a label, percentage, color and the blurb. See below:

<

Exercise
11
0x6A9DC3
Several large prospective studies have explored the association
between prostate cancer and physical activity, and the results are
surprising, as you will learn in the next step.


Stress
10
0xE36438
Psychological stress has pronounced and well-documented effects
on the immune system through various mechanisms. The suspected (but
debated) hormone sensitivity of prostate cancer might, theoretically,
render it more susceptible to psychological states associated with
aberrant or altered hormonal environments.


Nutrition/Supplements
79
0x89AC62
Much research has focused on the role of nutrition in mitigating
the risk of developing prostate cancer. The role of both total dietary
fat intake as well as specific fats consumed may be critical to the
development of PC.

The role of macro- and micronutrients is
also important. These can be obtained in the form of whole foods in the
diet, or as dietary supplements. Herbs and other nutraceuticals may
impact the development and/or progression of PC. It is important to
examine the evidence behind specific nutritional recommendations, and
tailor them to suit an individual's lifestyle and willingness to make
dietary alterations.

With this XML structure, the learning object could be used again with just a different XML file. In creating the Flash project, I used Flash Vars to pass in a URL to the XML file. As such, the swf file could be loaded without having to be recompiled and just pointed to a different XML. Since I am passing into Flash the size and color for each wedge, a developer has complete flexility in the future to make changes.

Reusability of learning objects

One of the paradox of multimedia and online learning is the lack of reusability.

Incompatible programming languages, lack of universally used standards, and specialized instructional designs have been barriers to reusability in interactive learning. Beyond these causes, often times instructional developers and faculty do not begin the process of brainstorming new projects with reusability in mind.

When approached with a concept idea, one of the first things I consider is whether this is an opportunity to develop a reusable learning object or if it is appropriate to develop a custom solution. Reusability is more than SCORM or choosing a certain software development methodology/language.

In software development, the concept of design patterns refers to common solutions to programming situations. Why reinvent the wheel when the blueprint for a wheel is available. Learning objects are a lot like design patterns and have been used by instructors for centuries. The socratic method is an example of a learning object. In modern times, the socratic method can be facilitated with technology, such as a discussion board, but the design pattern remains the same.

Shinny Disco Ball Syndrome

Some faculty and instructional developers can get enamored by technologies and features available to build into a course or instructional design. Often times the outcome is detrimental to learning, student adoption, and instructor effectiveness.

Instead of focusing on features (the shinny disco ball), good interactive learning should be premised on the learning goal and measurable outcomes. Reusable learning objects are a great starting point when brainstorming a new activity or course. Instead of "we could do this" the conversation could be applying this known and tested learning object to the instructional situation. Developing a new learning objects is always an option and should be informed by the success/failures of previous learning objects developed in-house or by others.

Open Source Learning

The open source movement has radically changed (for the better) software development. An open source approach to online learning development could offer similar benefits and in some ways this is one of the goals of SCORM. While SCORM provides useful standards it does not encourage or facilitate sharing of learning objects, and pedagogy. In our copyright society, the open source movement has yet to really take hold in the online learning community. Beyond copyright, major corporations (book publishers) have financial incentives to restrict such development efforts.

In teaching, the open source sharing of information has existed for a long time. Faculty in-service days, mentorship, and other methods have been used to help new (and old) instructors improve upon their instruction methods. While the technologies and desires exist for the same to occur in higher education and interactive learning, my experience has been a dearth of such exchanges except for those active in academic conferences and publishing. Often times, this is tenure track faculty rather than the instructional designers who play a major role in innovation and development.

Next post will focus on best practices for the design and implementation of reusable learning objects.