Developing Dynamic Interactive e-learning Using Flash & XML

Transcription

1 103 Developing Dynamic Interactive e-learning Using Flash & XML Eric Orton University of Iowa College of Medicine Produced by

2 Eric Orton My Background Current employment: University of Iowa College of Medicine Interests: Model-centered (problem-based) instruction, simulation, template development Undergraduate degree in K-12 education Master s degree in Instructional Technology from Utah State University Previous employment: training department of aerospace manufacturer and small educational software publisher Page 1

3 My Assumptions About You You are comfortable with Flash movie structure and working in the Flash development interface, including the timeline, panels, layers, levels, symbols, etc. You know HTML You have a working knowledge of ActionScript, including variables, arrays, basic decision structures (conditionals, loops, etc.), and the use of pre-defined objects Agenda Example of Flash and XML: GeriaSims virtual patients Brief tips on project file organization Hands-on learning activity: simple tutorial and quiz template Create XML file Finish ActionScript to load and parse XML, and to use its contents to present instruction Page 2

4 GeriaSims Demonstration What You Saw All virtual patients use a common set of Flash files containing the interface, all instructional features and interactions, etc. All text and media elements provided through XML and external files Question types, inclusion & availability of features, etc. controlled by directions in XML files Page 3

5 Organization of files Flash and HTML files that form core of the template located at the root Shared media files used by the template in a separate folder, perhaps divided into subdirectories (ex. images and audio) Within a lesson folder, separate directories for audio, images, PDF files, video, and XML files Where multiple lessons share the same Flash files, a separate folder for each lesson Game Fish Example Demonstration Page 4

6 Limitations of Example Full of instructional holes There are more elegant, reusable ways to parse XML, but require knowledge of OOP and recursion No error checking Does not accommodate scrolling feedback or tutorial presentations What Has Been Done XML file structure is complete for tutorial part of lesson Lesson interface is complete Code to parse the quiz portion of the XML is complete Code to use and display stored lesson data is complete Page 5

7 What You Must Do Complete the XML for the tutorial part of the Game Fish lesson, filling in the data Set up the structure of the XML and populate the data for the quiz part of the Game Fish lesson Write the ActionScript to load the XML file Write the ActionScript code to parse the XML for the tutorial part of the lesson Structure of XML File Tree structure, with each node (defined by a tag) containing either a text string (value), or 1 or more child nodes (elements) one level deeper in the tree A node can have 0 or more attributes defined in its tag (ex. src and height ) Nodes at the same level in the tree are called siblings Page 6

8 Structure of XML file html head body title meta script table p form tr tr input input input td td td option option Structure of XML file stage history exam person person vitals body question question system system query answer feedback audio notation finding feedback Page 7

9 Hands-On Exercise: Creating XML File Structure of XML file faketag faketagtwo lesson title tutorial quiz screen screen screen question question header body image prompt choice answer feedback Page 8

10 Loading the File Declare built-in ActionScript XML object Use XML.ignoreWhite to allow humanreadable files, or white space between tags will be seen as nodes Use XML.onLoad to specify the function to call when the XML object has finished loading data Use XML.load() to tell the XML object to load itself with the data from a specified file Navigating the File faketag faketagtwo lesson title tutorial quiz I screen screen screen question question J header body image prompt choice K answer feedback M Page 9

11 Navigating the File XML object originally points to the file itself, so this is the original parent To move down a level into the file, use XML.firstChild To move to the next node at the same level of the tree, use XML.nextSibling XML.childNodes is an array of all the child nodes of a particular parent node and can also be used to navigate the tree To get the number of child nodes, use XML.childNodes.length Navigating the File faketag faketagtwo lesson title tutorial quiz I screen screen screen question question J header body image prompt choice K question question M Page 10

12 Navigating the File If an XML tag contains a string we want to store, we must strip off the opening and closing tags before storing the value. We use the built-in String object. XML.attributes is an array of all the attributes of a node. XML.attributes.particularAttributeName holds the value of a particular attribute that can be stored in a variable or array cell. Two-Dimensional Arrays myarray firstindex secondindex Page 11

13 To Learn More Code in the provided example is commented throughout E-Learning Developer s Journal Macromedia Flash and XML: More Than Just Movies by Gregg Wygonik Contact: Eric Orton eric-orton@uiowa.edu Page 12