Interactive Learning Blog

New Blog Web Address

2009-11-18T16:18:00.000-08:00

This blog has moved to interactivelearning.mattstoner.net

Flash, XSLT, and show-hide controls

2009-07-08T18:51:00.000-07:00

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

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.

Links week of July 5th

2009-07-05T08:27:00.000-07:00

Here are some links that caught my attention in the last week.

E-Learning

Web Dev/Design

My tool box

2009-07-02T20:57:00.000-07:00

Computer failures are never fun and mine today brought to mind how much I am thankful for certain applications and cloud computing. So I thought I would share what's in my tool box.

Productivity

This program helps you organize and share your notes. The genius of the application is that it works on the web, macs, pcs, and mobile devices. You can store text, PDFs, snapshots, etc. I've used it in meetings to bring my notes on the agenda as well as snapping a picture of the whiteboard at the end of the discussion. I used to carry spiral notebooks for different projects I was working on, but now with evernote I can make a specific notebook for a project and the notes are always available to me. I still have a sketch book for instructional design ideas, but I either scan my drawings or snap a photo with the iphone. Another amazing feature of evernote is that it can do character recognition on photos/images. My handwriting isn't the best and it has done a great job recognizing words. The Evernote Web Clipper also is handy to store information for later review from webpages. Learn more at www.evernote.com

I've used quite a few personal information managers over the last 20 years. Until I started using gCal all my data was stored locally. I remember getting my first 3Com PDA in 1996 (that would rather become Palm) and being able to sync. But it was still far from ideal and if you were away from the computer and your PDA, you were out of luck. With google supporting CalDav, I can sync my calendars between multiple computers and add events from the web, my iphone or iCal. When I'm on the go, if something gets added to a calendar (say at work), it will get pushed to my iphone. It's like Microsoft Exchange for the little guy. www.google.com/calendar/

I've been a pro user for Remember the Milk (RTM) for nearly a year. While google has come out with its Tasks, I don't intend to switch anytime soon. RTM is a really powerful todo manager. You can manage multiple lists, share lists with contacts, receive text message reminders, and more. RTM has a really great iphone application and now with the recent upgrade push notifications. Third-party developers have created a bunch of add-ons to RTM to make viewing and adding todos very easy (link). I use the QuickSilver plugin to add todos without even having to go to the RTM website. I also really like the being able to forward emails I receive to RTM and even assign the task to a specific list and given due date. www. rememberthemilk.com

Utilities

Carbon Copy Cloner: This MacOS program makes a bootable backup of my hard drive. I do use Apple Time Machine as well, but the redundancy gives me piece of mind. Both are backed up to an external Drobo drive, that currently is 2 gigs. The Drobo is RAID-like so there is redundancy there as well.

TextWrangler: I used BBEdit for many years and TextWrangler is everything I need in a text editor. It is great for coding and cleaning up text files. It is always on the top of my list to install on a new computer.

Growl: Growl is a notification manager for Mac. Several of the applications I use have Growl notifications support. Growl pops up alert messages when I get a new email, iTunes starts playing a new track, a download is completed, etc. It's very handy. www. growl.info

Development

Navicat MySQL: MySQL is my primary database of choice for projects and Navicat offers a nice GUI to view/edit tables. The PC version has more options than the Mac, but it is a very strong database development tool. navicat.com

All my coding projects are backed up to a subversion server. In the past, I've also used hosts such as spring loops and assembla. If you are developing any type of elearning, you really should be incorporating version control into your development process. I have slide deck from a talk I gave on the topic available here

Flex Builder built on Eclipse: While I could have installed the flex plug-in into standard Eclipse, I instead modified my Flex Builder with several plugins/frameworks. My installation includes plug-ins for:

Subversion
Cold Fusion
XML development
Myln/Trac

Adobe CS4: I recently updated from the dark ages (ie before Adobe called their web/image programs CS 1,2,3). I used dreamweaver primarily, but I'm in code view most of the time. When I have a need for graphics I will use Fireworks and after eons of not having photoshop I'm starting to use it again. CS4 has subversion built right into it, which is quite convenient adobe.com.

Audacity: This is a great tool for editing and recording audio. It's open source/free. I've used it primarily when creating podcasts and it works great. download link.

Cyberduck: This is mac file transfer client that supports multiple protocols. I use SFTP quite a bit and its bookmarking feature makes it so easy to get where I need to go. download link.

So what is in your toolbox? Leave a comment and share.

Developing Interactive Case Studies, Part 1

2009-07-01T03:18:00.000-07:00

Advancing acquisition and demonstration of medicine competencies

This post is the first in a series on interactive case learning. I will review the rationale for development; my experiences with developing the model into reality; working with faculty/SME to develop cases; and lessons learned. My posts will be in the context of medical training, but the knowledge translates to other subject areas.

Dilemma : How do you educate med students and MDs about core competencies in medicine at a distance and then assess them without clinical practicum?

Thesis : These posts will demonstrate that it is indeed possible to educate adult learners in the acquisitions of new knowledge, skills and competencies similar to in-person training but with an online curriculum. The ICS model is argued to be a vehicle for additional acquisition and synthesis new knowledge and skills, as well as an analytically tool for measuring core competencies.

Definitions:

Interactive Case Studies (ICS)

ICS are iterative, dynamic clinical cases built on the principles of problem-based learning (PBL).

Core Competencies

Being able to access high-quality, high-value information
Being able to think critically
Being able to advise patients intelligently
Being able to communicate effectively with patients and peers
Being able to listen, understand, guide, and comfort patients
Being able to facilitate change, when needed
Being respectful to humans' needs and experiences

Learning Object

A structured, standalone resource that encapsulates high quality information in a manner that facilitates learning and pedagogy.

Rationale

The ICS Model was developed specifically to (1) meet a need for a more interactive and engaging learning object, and (2) aid in the presentation of the curriculum.

ICS are iterative, dynamic clinical cases built on the principles of problem-based learning (PBL). The design of the ICS is adapted from a design established in the field of organizational management (Moberg & Caldwell, 1989). PBL facilitates not only the acquisition of new knowledge and skills through active engagement of the learner, but also provides for evaluation of the demonstration of knowledge, skills, and competencies through real-world interactive situations. ICS’s present video-snippets of typical physician-patient interactions and allow the learner to practice and demonstrate clinical counseling skills and integrate knowledge from the full curriculum. The ICS model is not solely a model of multiple choice testing, though multiple choice options are a primary mechanism for navigation in the decision tree. Instead, the learner is prompted at various points for qualitative responses and encouraged to reflect on their clinical reasoning which has lead them to a particular point in the case.

In a case, the learner is presented with multiple options of course of action in communicating with the patient. The cases can be produced with specific learning/assessment goals (e.g. patient centered communication, advising on referral, intake, etc). Through the programming, assessment feedback is provided to the learner. Some particular cases can be presented solely for the purpose of synthesis and practice of clinical knowledge and skills, while others can be presented in terms of evaluation.

The initial presentation

I first presented this learning model in 2002, although it was not developed for some time due to resources and other issues. Below is my slide deck from that initial presentation.

Next Post: My next post will focus on taking this initial instructional design and getting buy-in to develop the model.

Links week of June 28

2009-06-28T20:29:00.000-07:00

Just some links that caught my attention this week.

General Web Design

ELearning

Building a flash video player

2009-06-27T19:43:00.000-07:00

Before I get into the technical details, I wanted to present some reasons why you may want to make your own customized/skinned flash video player instead of using YouTube, iTunes podcast or some other tool. In no particular order, you may need to build a custom player, if

custom branding of the user interface
protecting video content from unauthorized distribution and copying
copyright issues
customization with other flash feature in a project

The flash videoPlayer class is not without its quirks, especially in Flex3/Actionscript 3. There are some changes in the beta for Flex 4 (now renamed Flash Builder) to make creating a custom video player easier. I'm going to go over creating a single and multi-clip video player in actionscript using three different ways to get the data to the video player.

Method 1:

With the static method you embedded the video clip/s in the player and compile the project into a SWF to be placed on your website. This protects the video files from being accessible to others, but the downside is you must compile a new SWF every time you want to display video on your website.

Method 2:

With this dynamic method, the video player is passed some information on which clips to display and then queries a database to get information on the track/s titles, duration, and file path. This method requires a web service to be executed on a local or remote server which will return the query. Depending on your web environment, this option may not be available to you.

Method 3:

With this dynamic method, the video player is passed a file path to an XML file with information on the track/s title, duration, and file path. This information could be formatted in the exact same manner as a query would be returned by the web service. In fact, most web services return data in the XML format. Since the XML document is authored and dynamically acquired by the video player, you can reuse the video player by just pointing it to load a different XML file at run time.

I've used both method 2 and 3 for projects. If you catalog and store meta-data about your video assets in a database and have a web application server (Cold Fusion, PHP, etc), I think its the best option. If you do not, I would recommend method 3 and statically writing an XML file. I strongly discourage method 1.

Building the code

I build my projects in Flex Builder 3 and depending on the task choose to use either Actionscript 3 or MXML or a combination of both. In this section, I will discuss implementing both method 2 and 3. In each case, the first step is the same. Upon the application being created is for a function to be executed to load the dynamic data. In my projects I call this function with the CreationComplete attribute on the <mx:Application tag> and for consistency sake, I normally call this function initApp.

Example for method 3 (dynamic XML)

 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 implementation, the XML file is passed to the Flash SWF by FlashVars. For more information on using Flash Vars, read this adobe technical note.

Example for method 2 (Media Database)

In MXML, you can setup the web service with the RemoteObject tag by defining the which web service to call and functions to handle the result and fault event. Then in my InitApp function, I actually make the call to execute the Remote Object.



public function initApp():void
 {

        //list of video clip IDs passed into the SWF via Flash Vars on the html code block to load the SWF
  theseClip = Application.application.parameters.videoIDs;
   
       //executes the web service
 getClip.VideoClip(theseClip);
      
        }

In this implementation, the videoIDs are the IDs from the media database and they are passed to the Flash SWF by FlashVars. Depending on your database schema, you can return whatever columns you want, but at a minimum you would want track title, duration, and file path. For both method 2 and 3, I have formed the XML the same way.




 
  
   Clinical Pearl: Screening for Prostate Cancer
   http://localhost/Screening_Randy.m4v
   2:47
  
          
   < clip_title >Clinical Pearl: Screening for Breast Cancer
   http://localhost/Screening_Victoria.m4v
   3:25

Instead of creating a multi clip and single clip video player, I let the programming determine how many clips exist in the XML.

 private function processClips():void {
 
       thisResult= getClip.VideoClip.lastResult;
    
 if(thisResult.length > 1) {
   multiClip();
 } else {
     
  singleClip();
 }
  
    
}

Depending on how many clips are return, I resize the canvas and display the clip selector panel if there is more than one clip. Below are examples of each view and then I will explain the code.

Multi-Clip View

Single-Clip View

Rendering the Video Clip component

The processClips function execute either the singleClip or multiClip function depending on the number of clips contained in the XML. In the case of the single Clip function, it changes the visibility on the clipSelectionPanel and instantiates a custom video component. The same custom component is rendered with the multiclip view, but changes depending on what is selected in the clipSelectionPanel.


 private function singleClip ():void {
   
    //hides the clipSelectorPanel
    clipSelectorPanel.visible = false;

    file_path = thisResult[0].file_path.toString();
    
    //removes placeholder image that displays before video is loaded
    vidScreen.removeAllChildren();
       
       //custom component
        var thisVid:customVideoComponent = new customVideoComponent;
            thisVid.data =   file_path;
         vidScreen.addChild(thisVid); 

 }

 private function multiClip ():void {
  clipSelectorPanel.visible = true;
      
               //expands the canvas size variables
  canvas_width = 535;
  canvas_height = 400;
 }

In the case of a single clip, the function immediately loads the video and auto-plays the clip. For the multi-clip display, the clipSelectionPanel has a click handler. The clipSelection panel is an MXML list control with a custom itemRender.

When a user clicks on any item in the list, the following function is executed:


   private function clickHandler():void {
        
       // stops any video if it is currently playing
       this.thisVid.stop();
      
       //clears any video player on the canvas and/or the placeholder graphic
       vidScreen.removeAllChildren();

    //file path of the selected clip
       var thisvidFile:String =  videoSelector.selectedItem.file_path.toString();

    //custom video component     
          var thisVid:customVideoComponent = new customVideoComponent;
        thisVid.data =   thisvidFile;
        vidScreen.addChild(thisVid); 

       }

In the code for the customVideoComponent I have an important event listener for when it is removed from the stage. This is because of a particular issue I discovered with the videoPlayer class when you remove them from the stage:

while the video display disappears, the audio will continue to play
if a clip is not fully downloaded it will continue to download even if the user is viewing another clip

To remedy this issue, I created the videoInterupt function.

  private function vidInterupt(event:Event):void{
   
   
    if(event.currentTarget.thisVideoDisplay.state != "disconnected") {
     event.currentTarget.thisVideoDisplay.stop();
    }
   
    if(event.currentTarget.thisVideoDisplay.state != "disconnected") {
     event.currentTarget.thisVideoDisplay.close();
    }

         SoundMixer.stopAll();
    

   }

UI Considerations

From the sample images above you'll notice that the video player displays a default image until a clip is selected/loaded rather than leave a void for the video display on the canvas. The image also serves to direct users to use the clip selection panel to choose a clip in the multi-clip state. The video controls are also displayed in the image but are dimmed out.

In actionscript/mxml there is a lot of flexibility in designing the user interface. Originally I used MXML buttons for the play/pause/stop functions, but later switched to the graphical icons you see in the sample images. The interface also has a load controller display, which is especially useful for users who may have a slow connection to know the video is loading. Most video players I see on the net follow youTube like conventions for the UI. Below is the code for the custom video component.





 
    import mx.events.FlexEvent;
    import flash.media.Video;
    import flash.media.SoundMixer;
    import flash.events.ProgressEvent;
    import mx.events.VideoEvent;
    import mx.controls.Image;
   
   [Bindable]
   public var thisVid:String;
   
      
   private function initVideo():void{
    
    //get source from event target
    
    thisVid = this.data.toString();
    
    thisVideoDisplay.addEventListener(Event.REMOVED_FROM_STAGE,vidInterupt);
     
    
   } 
   
   private function vidInterupt(event:Event):void {
    
                       if(event.currentTarget.thisVideoDisplay.state != "disconnected") {
                       event.currentTarget.thisVideoDisplay.stop();
                       }
   
                      if(event.currentTarget.thisVideoDisplay.state != "disconnected") {
                       event.currentTarget.thisVideoDisplay.close();
                      }

                      SoundMixer.stopAll();
    
   }
   
 
   private function showInfo(event:VideoEvent):void {
   trace('stateChange: ' + event.state + ' ' + event); var foo:Timer = new Timer(2000, 100); foo.addEventListener(TimerEvent.TIMER, timerComplete); foo.start(); 
   trace('Clip: ' +  thisVideoDisplay); } 
 
   private function timerComplete(event:TimerEvent):void {
   trace('timerComplete: ' + thisVideoDisplay.state + ' ' + event); } 
   
   private function Vidplay(event:MouseEvent):void{

        
      thisVideoDisplay.play();
       }
       
      private function Vidpause(event:MouseEvent):void{
        
      thisVideoDisplay.pause();
       }
       
      private function Vidstop(event:MouseEvent):void{
        
        
      thisVideoDisplay.stop();
       }
       
   private function formatPositionToolTip(value:int):String{
  
    
    var result:String = (value % 60).toString();
          if (result.length == 1){
              result = Math.floor(value / 60).toString() + ":0" + result;
          } else {
              result = Math.floor(value / 60).toString() + ":" + result;
          }
          return result;
   }

In conclusion

In this tutorial, I have reviewed why you would create a custom video player in actionscript/mxml and how you would do it. I hope you found it useful and benefit from what I've learned when using the videoPlayer class. Let me know if you have any questions or have a suggestion for different approaches.

Technorati Profile

Notes on leadership

2009-06-27T11:02:00.001-07:00

The following presentation, Introduction to Leadership, is a lecture I give in my course on Business Communication. The slides are not in a style and format I prefer. In non-classroom settings, I try to follow the wisdom from Presentation Zen blogger/author Garr Reynolds. In recognizing my audience (undergrads) desire to copy down bullet points, I've formatted the slides in the manner they are used to receiving.

Click to see flash version of presentation (please note it may take a minute to load) or download a PDF

Some books on leadership

Digital Copyright: Revisited

2009-06-22T18:16:00.001-07:00

Just over 12 years ago, I wrote a paper Digital Horizons of the Copyright Frontier: Copyright and the Internet. A lot has changed since then to say the least. There has been plenty of new case law, that I'm not going to review. Yet the paper still though gives a good review of where copyright law developed and the challenges ahead. Since I wrote the paper, it is interesting to see the rise of open source movement/creative commons and social networking.

Open source movement/creative commons

I think it is fair to say that the internet community came together around the issue of fair use, intellectual sharing, and respecting rights way better (and faster) than Congress. The lobbyist and corporations seek a world of protectionism. While those on the Net have a bit of a different perspective. Code sharing sites and blogs are an excellent representation of that intellectual sharing spirit.

I have been particular struck by Creative Commons. Started about 4 years after my original paper, creative commons seeks a way to let individuals share and reuse content while acknowledging the creation and respecting the license they attach to their creative work. You can see a history of creative commons here. In my conclusion, I pondered what is fair use in a digital era. Creative Commons have answered this question.

Social Networking sites

A relatively newer issue has arisen with the rise of social networking sites and individuals sharing information, links, photos, etc. Who knows your photos on facebook? Does anyone read the fine print when signing up for the latest new site? This question I think the jury is still out on. While all these sites have their terms of use statements, I think the courts will eventually answer this question. Or as in the case with Facebook, user uproar will yield changes in policies.

So what are your thoughts on digital copyright and fair use in the digital era? What are the implications for online learning? Let's discuss.

Effectively Communicating with Visuals Aids

2009-06-21T19:26:00.000-07:00

I'm not Garr Reynolds or Nancy Duarte, but I have been given presentations for a long time and lecturing students on effectively communicating with powerpoint. The following chapter is my thoughts on effectively using not only powerpoint, but visual aids in general. I hope you enjoy and let me know what you think.

Download PDF (1.8 megs)

Data Visualization with Flash

2009-06-21T11:05:00.000-07:00

Spreadsheets and raw data may appeal to accountants, but the typical person is not cognitively tuned to acquire data by such methods. Data visualization and information design are critical to the modern era. Scholars such as Edward Tufte and Stephen Few have wonderful books on the topic.

For a purely demo project, I wanted to help the learners engage with the data. I found a data set of licensure requirements for acupuncture practitioners in the United States. I could have also picked a data set from the new data.gov. I took the table based information and converted it to XML to be read into a flash project.

Rather than display the data as a table, I envisioned a map of the United States like the CNN "magic wall". I knew of the awesome Degrafa library for Actionscript/Flex and on their website they had a demo section with exactly the sort of map I was looking for. Based on their demo source code, I was able to create an interactive map of the data set I found.

Click on the map to see the Flash project in a new window

Book suggestions for the instructional designer

2009-06-21T08:07:00.000-07:00

Here is a list of some books I've been reading and how they are revelant to what I do.

Nudge: Improving Decisions About Health, Wealth, and Happiness ~ I really enjoyed this book for its insight on human decision making. While its suggestions about nudges are in other context areas, I think they offer valuable advice for the instructional designer.
Creating Visual Experiences with Flex 3.0 (Developer's Library) ~ If you are new to Flex/Actionscript 3 this is a really good introduction. There are also lots of gems for the experienced programmer/designer.
slide:ology: The Art and Science of Creating Great Presentations ~ Whether you are an instructor/trainer/speaker or an instructional designer, this book has a lot of excellence advice not only for presentations, but general user experience and information design.
Information Dashboard Design: The Effective Visual Communication of Data ~ Stephen Few book is a leading expert on visual communication. This book provides great visual examples to reinforce the concepts he lays out.
Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition ~ The title says it all. Web usability is vital for online course delivery. This book offers helpful reminders about your users and how they approach your interface design and functionality.

Links for week of June 21

2009-06-20T09:03:00.000-07:00

Just some links that caught my attention this week.

General Web Design

Elearning

Adobe

Evaluation & Instructional Design: What comes first

2009-06-20T05:06:00.000-07:00

Reader Question: Do you design the evaluation of a learning module first? Arguments for either approach?

From my perspective, all good instructional design begins with a clear understanding of the learning objectives for the activity. Since the learning objectives are what should drive your evaluation process, good instructional design is inherently tied to evaluation design. Sometimes I think online instructional design is driven by cool features/technology rather than serious attention to learning outcomes and the needs of the learner.

Evaluation is more than did the learners "like" the activity (satisfaction measures). But can you measure that they met some objective criteria for knowledge acquisition and did better than those who didn't do an online module. Did learners actually spend time in the learning module or just give it a cursory viewing?

One of the reasons for using outside evaluators in developing and measuring effectiveness and user satisfaction is the bias those involved in the development of a learning module bring to reviewing the data. It's only human to loathe criticism and revel in compliments. Thus, evaluation should be a collaborative process by those tasked with the design and evaluation of the learning module.

So what are your thoughts? I look forward to your comments.

Flash: Interactive Patient Waiting Room

2009-06-17T18:41:00.000-07:00

A recent project I worked on was to create a patient waiting room for a online medical course. The client wanted to present some patients to the students before they met them in an online course. The request was for something "flashy".

I knew of Doug McCune's coverflow component for Flex and thought this might be an opportunity to meet the client's request and present the patients in an interesting interface. In order to demo the project, I have changed the patient pictures with photos I got off the web (you'll recognize some celebrities) and I have disabled the function to view the patient chart.

Like most of my projects, this project reads in the display data via XML at runtime, so it is completely reusable. This project is not yet finalized so the background and some features may change. But it is a good example of implementing the coverflow carousel component into an elearning project.

Version Control

2009-06-14T19:01:00.001-07:00

This spring I gave a talk to the Tucson Adobe Users Group on Version Control. If you are developing e-learning and not using a form a version control, I highly recommend you check it out. You can listen to the talk at this link.

Links Week of June 14

2009-06-14T10:06:00.000-07:00

Just some links that caught my attention this week.

E-Learning workflow

A great series (and more posts to come) from Sumett Moghe.

Data Visualization

General E-Learning

Click versus Bic #2

2009-06-13T21:00:00.000-07:00

Evaluation is a key component to interactive learning. Do these new strategies and techniques:

work
yield better outcomes than other methods, and
meet the learning objectives for the activity/course?

In other words, is online learning better?

In terms of answering this question, the research methods used could have a dramatic impact on the results. Do survey methods matter? Is there a response bias to answering an online survey in an online course? If a learner is using a learning management system (LMS) do they perceive anonymity? Are there other ways to assess online learning?

In a meta-analysis of response distortion, Richman, Kiesler, Weisband, and Drasgrow (1999) found that using a computer instrument had no consistent effect on distortion and other factors, such as being alone, moderated the relationship. In their concluding remarks, they speculated whether web-based anonymous surveys would effect response distortion. Social response distortion (SDR) is a tendency of inpiduals to answer questions in a more desirable manner than under other conditions, thus inpiduals engage in behaviors to intentionally look better (impression management). Studies of response distortion with computerized versus traditional instruments have reported conflicting findings -- less distortion (Evan & Miller, 1969; Kiesler & Sproull, 1986), more distortion (Lautenschalger & Faherty, 1990), and no differences (Booth-Kewley, Edwards & Rosenfeld, Whitner & Miller, 1995; Pinsoneault). Various claims have been offered for the nonequivalence of results, such as the ability to scan (Lautenshalger & Faherty, 1990), differences in the inputs/outputs of the interface (Moon, 1998), social context cues (Kiesler & Sproull, 1986), reduced feelings of privacy (Whitener & Miller, 1995) and the big brother syndrome (Rosenfeld, Booth-Kewley, Edwards, and Thomas, 1996).

Survey format

Tourangeau and Smith (1996) argued that computerized surveys foster a greater sense of privacy thereby increasing respondents’ willingness to report sensitive information. Wright, Aquilino, and Supple (1998) found respondent characteristics, such as age, sex, and attitudes, also moderated the mode effect along with several significant interaction effects. Wright and colleagues suggested a possible sex difference in responses because of the differences for enthusiasm for computers between males and females for computers. In addition, they suggested other possible moderators such as respondents’ general trust in others, attitudes towards surveys, perceptions of privacy and attitudes of computers for influencing any mode differences in response distortion.

Beyond respondent characteristics, several researchers concluded the survey format (paper or computerized) affects response distortion because of the ability to “scan, preview, review, skip or change items on a test” (Whitener & Klein, 1995, p. 67). Respondents in paper surveys are able to scan and change answers, while this is not always the case with computerized surveys. Computerized surveys can be programmed to force responses before continuing to the next item, show only one item at a time, and to administer different items based on responses.

In addition, web surveys can be formatted to look more similar to paper based surveys with advancements in web technologies. Previous computer based surveys had awkward text-based interfaces, which could be perceived as more an interview format (question, response, question, response) instead of a survey in which the respondent is able to scan, skip or change items. Richman and colleagues argued that “the effect will depend on how the interfaces makes respondents feel; the more a computer instruments resembles a traditional instruments, the more the two instruments should produce similar responses” (p. 756).

So does it matter?

The point of perceived differences in survey methods may be moot. For many online courses, the students are at a distant and an online survey is the only method available to collect feedback. All self report methods involve some bias error. Fortunately survey methods alone are not enough though to answer the questions posed at the start of this post.

Another method to evaluating online courses is web log analysis. Similar to consumer market research, web log analysis can yield crucial information on whether the learners are actually using the activities/course work being implemented. I have long felt the combination of surveys with an analysis of usage patterns is key to evaluating the effectiveness of online learning courses. Metrics of time spent, return visits, time per page, etc can provider instructors and instructional developers a wealth of information on usage patterns. Some might argue too much information. Thus distilling the major trends and key themes is quite important when face with a mountain of data.

References:

Booth-Kewley, S., Edwards, J. E., & Rosenfield, P. (1992). Impression management, social desirability, and computer administration of attitude questionnaires: Does the computer make a difference? Journal of Applied Psychology, 77, 562-566.

Evan, W. M., Miller, J. R. (1969). Differential effects on response bias of computer vs. conventional administration of a social science questionnaire: An exploratory methodological experiment. Behavioral Science, 14, 215-227.

Kiesler, S., & Sproull, L. (1986). Response effects on the electronic survey. Public Opinion Quarterly, 50, 402-413.

Lautenschlager, G. J., & Flaherty, V. L. (1990). Computer administration of questions: More desirable or more social desirability? Journal of Applied Psychology, 75, 310-314.

Moon, Y. (1999). Impression management in computer-based interviews: The effect of input modality, output modality, and distance. Public Opinion Quarterly, 62, 610-622.

Paulhus, D. L. (1991). Measurement and control of response bias. In J. P. Robinson, P. R., Shaver, & L. S. Wrightsman (Eds.), Measures of personality and social psychological attitudes (pp. 17-59). San Diego, CA: Academic Press.

Rosenfield, P., Booth-Kewely, S., & Edwards, J.E. (1993). Computer-administered surveys in organizational settings. American Behavioral Scientist, 36, 485-511.

Rosenfield, P., Booth-Kewely, S., Edwards, J.E., & Thomas, M. (1996). Responses on computer surveys: Impression management, social desirability, and the Big Brother syndrome. Computers in Human Behavior, 12, 263-274.

Tourangeau, R., & Smith, T. (1996). Asking sensitive question: The impact of data collection mode, question format, and question context. Public Opinion Quarterly, 60, 275-304.

Weisband, S., & Kiesler, S. (1996). Self disclosure on computer forms: Meta-analysis and implications, Proceedings of CHI ‘96

Whitener, E. M., & Klein, H. J. (1995). Equivalence of computerized and traditional research methods: The role of scanning, social environment, and social desirability. Computers in Human Behavior, 11, 65-75.

Building Engagement with Re-Usability

2009-06-13T10:39:00.000-07:00

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

2009-06-03T16:34:00.000-07:00

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

2009-06-02T19:01:00.000-07:00

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.

Blog Goals

2009-05-31T15:14:00.000-07:00

I'm going to write and catalog my thoughts on facilitating learning in higher ed thru the use of technology.

I will focus on both technical/programming as well as pedagogy. When relevant I will share source code from projects I'm working on. I primarily use Adobe and Apple products for my projects. Currently, I program in actionscript 3, flex, and cold fusion. I am the first to point out that there is not always a good technological solution for a given situation.

So who am I?

I've been interested in computer technology since I was a kid with an Apple //. My first experience with multimedia was Apple Hypercard followed by Hyperstudio. In high school, I used my first mac to produce a video documentary and went to college wanting to be a communication major. My first year of college the world wide web was in its infancy and I was at point zero in Silicon Valley. Santa Clara U was far ahead other university in terms of the web and I created my first web page in the fall of 1994.

While at SCU, I took courses on technology and society as well as distant learning. I further developed by HTML skills working on some dept websites. In 1998, I continued my studies at the University of Arizona with a focus on communication and technology. I have been instructing college students since 1998 and in each course I have used technology to facilitate learning.

After graduate school, I continued on at the University working in the College of Medicine. For the last 8 years I have been developing continuing medical education courses. In my role as an Associate Specialist for Interactive Learning, I've have been able to combine my interest in online education with a real world laboratory of theory and application. I also teach an evening course in the Communication Department on business communication. It is from these experience that I will write.