Starter Virtual Pet

Pam Cutter and Kelly Schultz 2003, Nathan Sprague 2009, Alyce Brady 2017, 2021, Kalamazoo College
Based on work done at Drexel University by JL Popyack & Paul Zoski

Introduction

This is the second assignment (of 5) in the Virtual Pet series.

The idea for this project and a simple example were described in the Initial Virtual Pet Design Assignment. Before starting this activity you should have decided on a set of 5 states for your virtual pet (including a starting state) and two characteristics or state indicators (such as colors, sounds, or movements) that change based on the pet's state.

In this assignment you will be incorporating your new knowledge of if-then statements to indicate the current state of a small, simple web-based virtual pet. In a later assignment you will add functionality to feed and care for your pet.

Creating the Basic Page:

Exercise 1:

  1. To start creating the web page for your virtual pet, download the Virtual Pet Starter page and rename the file to a more appropriate filename. View the page in a browser and test what happens when you click on the button, so that you know what you're starting with. The page is divided into two parts, separated by a horizontal line. The section above the horizontal line is similar to the example in the Initial Virtual Pet Design Assignment. The section below the horizontal line is for a set of temporary buttons for this page that will be replaced in a later assignment.

  2. Modify the page to provide your pet's name and display an image representing your pet, instead of the name and image of the sample pet.
  3. Change the existing button to call forceToState with one of your pet's states instead of "State1". Change the button's value attribute (the text on the button) also.
    Note: setting the value of a text field or button is like setting the innerHTML of a paragraph, div, etc.
  4. Add 4 more buttons to force the pet into the other 4 states. (Suggestion: Copy and paste the existing button, then make necessary changes.)
  5. Test all 5 buttons.

Updating State Indicators:

Exercise 2:

  1. Above the horizontal rule, right after the Pet State text field, add 2 more text fields (with labels) to show the two state indicators or behaviors you chose, such as Pet Sound and Pet Movement, or whatever you chose. (Suggestion: this is another good opportunity to copy and paste!) Like the Pet State text field, your two new fields should be readonly. Each text field should have a unique ID, so be sure to modify each id attribute.

    The for attribute in each label should refer to the unique id of the associated text field.

  2. In the <head> section, replace the dummy comment in the updateIndicators function with a series of if / else if statements that will set the values of the indicator text fields based on the current state.

    You can get the state of your pet by looking at the value of the text field. Since JavaScript allows you to use the id attribute of an HTML element as a variable name, you can use petState.value to refer to the value of the field with the id "petState". (If the id is something else, you would use that instead.)
    If you have identified different images for each state, you can set them here also. (If you haven't found images for each state yet, don't go looking for them during class; add the images when you are done with the in-class activity.)

    For example:     (This example assumes that the id attributes for your two indicators are "sound" and "movement"; your actual indicator text fields may have different id attributes.) 

      if ( petState.value == "Happy" )
  {
       // Set indicator values based on this state value.
       sound.value = "Woof...";
       movement.value = "Wag Tail";
       petImage.src = "dog.gif";   // the src attribute refers to the image filename
  }
  else if ( petState.value == "AnotherStateYouDefined" )
  {
       // Set indicator values based on this state value.
  }
  else     // petState.value is final option not mentioned above
  {
       // Set indicator values based on this state value.
  }

    Be sure you set the indicator text fields to appropriate values for all 5 states you have defined, using the id attributes you defined for your text fields.

  3. Test your function for all 5 states.

Initializing Your Pet:

Exercise 3:
  1. In the <head> section, define a new function that will be called when the page loads to initialize your pet's state. Your new function will be similar to the forceToState function, so you could start by copying and pasting that function. Give the new function a name that indicates its purpose (to initialize the pet's state). Although it will be similar, your new function will have some differences from the forceToState function too.
    • Unlike the forceToState function, which sets the pet's state to a state that is passed in as a parameter, your new function should always set the state to the one you identified as your starting state. Use quotation marks around the state name to indicate that it is a string, not a variable name.
    • Since your new function does not use a parameter, you should not receive one. This means you will have empty parentheses after the function name. (Functions always have parentheses after the name, whether they have parameters or not, to differentiate them from variables.)
    • Like the forceToState function, your new function should call the updateIndicators() function to initialize the state indicator text fields to values that correspond to the initial state.
    As you write this new function (and all other new functions), use comments to clarify the purpose and steps in your code, and use white space and indentation to make it easier to read.
  2. Remember that there are two parts to implementing a function. You have defined what your new function should do when called, but it isn't being called yet. To have your page call the initialization function when it is loaded, modify your body tag to look like the following:
        <body onload="functionName()">
    where functionName is the name you gave your initialization function.
  3. Test your new function by previewing your page. Your beginning state should appear in the state field and the state indicator text fields should have values that represent characteristics or behavior associated with that state.

Finishing Up:

Exercise 4: