Virtual Pet: An Exercise in XML and XSLT



VIRTUAL PET: AN EXERCISE IN XML & XSLT

Jeanine Meyer

Mathematics/Computer Science & New Media

Purchase College/State University of New York

Purchase, New York, 10577

914-251-6679

jeanine.meyer@purchase.edu

ABSTRACT

EXtensible Markup Language (XML) and eXtensible Stylesheet Language: Transformations (XSLT) are tools for creating and maintaining content-rich applications, such as Web documents. A virtual pet is a computer representation of a [simple] model of pet behavior incorporating mechanisms for owner actions. Starting with a HTML/JavaScript virtual dog script, the author describes the use of eXtended Markup Language (XML) and eXtended Stylesheet Language: Transformations (XSLT) to produce a generalized system for producing simulations. The project has been used in a course on creating user interfaces.

BACKGROUND

A virtual pet is a computer representation of a [simple] model of pet behavior incorporating mechanisms for owner actions. One example would be a virtual dog that can be fed or petted. If the virtual dog is fed too little or too much, it dies. When the virtual dog is petted, the dog may wag its tail, but it may, instead, show its teeth in a snarl. This behavior appears unpredictable since it is based on a calculation using a pseudo-random function with input the length of time since the last feeding.

Such applications are amusing to students and also serve more profound roles in teaching. Experienced practitioners can learn from simple examples how tools work and can synthesize an assortment of features to build complex applications. Students generally cannot do so. The ability to put different features together may be the defining trait of an expert.

At Purchase College/State University of New York, we decided to offer a course called Creating User Interfaces. This course focuses on analysis of usability and functionality and also critical technologies for a variety of media, including the Web (XML, XSLT), wireless phones (WML, WMLS) and directed speech recognition (VoiceXML). It is taken by mathematics/computer science majors, New Media majors and Continuing Education students. EXtended Markup Language (XML) is emerging as a significant technology for its role in Web applications, as the basis for connecting different applications and as the basis for other languages, including eXtended Stylesheet Language: Transformations (XSLT), Wireless Markup Language (WML), and VoiceXML. XSLT is used to specify how an XML document is to be transformed into something else, typically, HyperText Markup Language. The XML and XSLT combination supports a structured, robust approach to formatting documents.

Examples of XML and XSLT typically show contact lists, soccer scores and, in an attempt to reach the youth market, CD catalogs. The underlying content is routine and the resulting displays, though varied, are not especially compelling. That is, the non-expert may fail to appreciate the power of the technology. It was the author's experience that students had trouble with XML because examples seemed too obvious and troubles with XSLT because the pattern-matching approach to transformation was different from ordinary programming. The virtual pet example demonstrates that XML content can be multifaceted, even including code fragments. Moreover, this example, and others like it, affords students opportunities to integrate graphics and story telling into their projects. Simulations, along with games, have the distinct feature that students run their programs more than once, a necessary attribute of real-world testing.

A basic virtual dog application, coded directly in HTML and JavaScript, is used in our course entitled Creating Web Documents. This is a required course for New Media majors and a popular elective for others. The generalized virtual pet application is one of several examples (following the standard examples showing contact list and soccer scores) to demonstrate the power of XML and XSLT in a course entitled Creating User Interfaces.

VIRTUAL DOG IN HTML AND JAVASCRIPT

The original virtual dog was implemented using HTML and JavaScript. The initial screen shows that the dog is in the normal state, as indicated by the graphic and the label. A textbox shows the dog's weight. The next screen shot shows an underfed dog.

[pic] [pic]

If the situation continues with no feeding of the dog, the dog dies.

Just as it is possible to starve the virtual pet, it is also possible to overfeed the pet. Overfeeding also can lead to the death of the virtual pet

[pic] [pic]

The action of petting the dog can lead to a happy dog wagging its tail or a dog that snarls. The tail wagging dog is implemented using an animated gif file.

The original implementation of the virtual dog was done by 'straight' hand coding of HTML and JavaScript. The HTML consists of a single, named image tag, a element with 2 input tags (used to display the status and the weight), and 4 hyperlinks using JavaScript calls for the 4 actions.

JavaScript has functions that establish timed events and the associated event handling. The call

tid = setInterval("change()", 1000);

establishes that every 1000 milliseconds a call is to be made to the function change(). The variable tid is set to a number that identifies this particular timed event. A call to

window.clearInterval(tid);

turns off the timed event pointed to by the variable tid. The change() function examines the weight of the dog, held in a variable and contains a nested if statement to determine what image file is to be placed in the image tag. Note that the model is similar to but not, strictly speaking, a finite state machine because of the presence of the weight variable as well as the calculation of time done to produce time since last feeding.

The actions designated by the 4 labels are implemented using HTML tags. For example, the Pet Dog action is implemented using

Pet dog

where petdog() designates a function. This function performs a calculation using the Math.random() method of JavaScript. Depending on the results, the wag.gif or the mean.gif is placed in the image tag.

|function petdog() { |function header |

|var e; |variable to hold elapsed time |

|var p; |variable to hold limit |

|var r; |variable to hold random value |

|e = seconds_elapsed(); |set time elapsed since feeding |

|p = 1-(e/20); |calculate limit |

|if (pweight

thin

fatdog.gif

Dog is fat.

120>weight

normal

weight>150

fatdead

fatdeaddog.gif

Dog is dead.

thindog.gif

Dog is thin.

weight>80

normal

60>weight

thindead

thindeaddog.gif

Dog is dead.

wag.gif

Dog is wagging its tail.

(wagtime++)>5

normal

mean.gif

Dog is angry.

(wagtime++)>5

normal

feeddog

weight=weight+10;elapsed=0;

petdog

wagtime=0; prewagcurrent=curstate;

if (Math.random()>Math.min(elapsed/interval,19)/20)

{curstate="wagging";}

else {curstate="mean";}

elapsed=elapsed+interval;

weight=weight-1;

Note that there is some slight of hand here: the artful use of the greater than sign (>) rather than the less than sign ( ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download