CS 105: Introduction to Comp. Sci.
Kalamazoo College


Pre-Lab Design

originally created by JLPopyack & Paul Zoski at Drexel Univeristy
modified by Kelly Schultz & Pamela Cutter 2003

A popular toy a few years ago was the "Tomigotchi" - an electronic toy that simulated pet behavior (displayed on a screen) and allowed its "owner" to respond to various types of behavior by performing actions (generally "pushing buttons").

You can create your own virtual pet, using HTML and JavaScript. For this part of the assignment, you are to design the pet's attributes and describe its behavior as a finite-state machine, as explained below. You will also provide a written description of the various features of your pet and how the user interacts with it. You do not have to write any JavaScript code for this part of the assignment; that will be required in lab. (In lab, you will create the user interface, which will consist of an HTML FORM with buttons, text boxes, and graphics, and you will implement your virtual pet as a web page using HTML and JavaScript.)


Consider a very simple "virtual dog" that is perpetually in one of four states: happy, angry, provoked, or lonely. A virtual dog that is lonely remains lonely until its owner pats it, which makes it happy. (Here, we say the dog has changed states from lonely to happy.) A virtual dog that is happy remains happy 90% of the time, but may also become angry 10% of the time. (This means that the dog's state is evaluated periodically (say, every 30 seconds) and 10% of the time, the state will be changed. Note that in this case, the dog's state is unaffected by the owner's action, and its mood - i.e., its state - changes randomly.) An angry dog stays angry until the owner pats it, which causes it to become provoked. A provoked dog remains in its provoked state 80% of the time, but may become lonely the other 20% of the time (because nobody goes near it).

The diagram below describes this simple behavior as a finite-state machine. The system (i.e., the dog) in this case has four states, which are signified by the circles labeled with the state's name. The system is always in exactly one of these states. The system may make a transition from one state to another as specified by the lines connecting them. The arrows signify which states are reachable from the current state. For example, there are arrows connecting the happy state to itself or to the angry state, which means a happy dog can either remain happy or become angry. A happy dog cannot directly become lonely, but a lonely dog can become happy.

The virtual pets available commercially generally have very many states and there are many ways in which their owners can interact with them. They also sometimes have terminal states, that is, states from which the pet cannot exit. Typically, the pet is said to have died if this happens.

Part a: You are to design a virtual pet with at least 5 states and at least two owner actions. Your pet should have a name, and each state should have a name also. You are to design a finite-state machine that depicts which states may be reached from other states, and under what conditions, similar to the example above. Your state diagram should indicate the actions that can trigger events (these will correspond with buttons on your form), or the probability that the pet changes state.

Your finite state diagram should have at least one state that the pet can only leave by chance and it should have at least one state that the pet can only leave by using the buttons. The other states can be left by chance, by pressing buttons or by a mixture of chance and buttons. If the state can only be left by chance the probabilities must add up to 100%. If the state can be left by buttons, then you must account for all buttons. Note that the button may just cause the pet to stay in the current state. That is indicated by a loop. The ignore button in the example below just causes the pet to remain in the same state.

Part b: Your virtual pet will eventually take the form of a web page. Interaction will occur through an HTML form. (NOTE: for this exercise, you do not have to create the HTML form. ) Turn in a sketch of your form for this part. You will be required to create the form for your pet in lab. At a minimum, your form will have the elements described below:

For example, a form to accompany the finite-state machine above may look like this:

Tralfaz, the Wonder Dog

Pet Sound:

Pet Action:

Part c: Finally, you need to plan your pet's behavior. That is, how does the pet tell you about its state? (For instance, when it is angry, it may growl. When it is happy, it may wag its tail. You also need to specify how the owner's actions affect its state.) This is a design exercise, not a coding exercise. You should design the behavior before you try to code it. You should use a table similar to the following to describe your pet's behavior:

Object Name


Possible values




text box

Woof woof

state == angry
state == lonely





pat the dog

changes state to "provoked" if angry, and to "happy" if lonely.


text box

Wag Tail

state == provoked
state == happy


IgnorePet button


ignore the dog the state stays the same

You are encouraged to be creative when designing your pet. WARNING: Don't try to describe behavior that is too complicated if you don't think you will be able to accomplish the desired behavior.