Programming Project 2:
Virtual Pet Enhancements

You may work individually or in groups of 2 people to finish this project. Your programming project should be your group's effort and not the effort of other persons. If you have questions or need assistance with your program, the instructor and the TAs are very willing to help and are available during their office hours and through the Collaboration Center.

Check out the page on programming tips to help you. Also, look at the page on PP 2 grading criteria (and Lab 3 grading criteria) to see the breakdown of the points given for this project.

When you complete your project, create a link to it from your course web page, and copy it to the web server. Make sure that the project works correctly after you have published it.

Recommendation: Upload your modified page at the end of each step or clean breaking point, as a backup.

Polish Existing Work

Good programs include good indentation, good variable names, and comments that help the author (or someone else) understand who developed the program and what is going on. (See the grading criteria to see how comments and program style are evaluated.)

• Make sure you have comments at the top of your file giving your name, the names of anyone who has assisted you, and a short description of the project.
• Every function should have a comment describing the purpose of that function, and what parameters it expects (if any). Add comments inside the functions wherever the code might be difficult to follow. Continue to do this as you complete the programming project.
• Clean up your indentation and fix any obscure variable names.
• Keep these guidelines in mind as you continue to work on your project.

Virtual Pet Simulation Enhancements

For this project you will be changing the picture of the pet depending on its state. You will also add some communication to the owner and visually enhance the page.

1. Find a picture (or create one) that represents your pet in each of its states. You will need to document on your page where each picture came from so make sure that you are using these pictures legally. The picture should come from a web site that states that the pictures are free for non-commercial use. The image search services for both Yahoo and Google have options for filtering images based on copyright under their "Advanced Search" options. You will be penalized if you incorrectly use any pictures.
2. To change the picture that is shown of the pet, the first change in your web page is to add an id to the img tag that displays your pet. Then you will need to change the display function to add the following command inside each if action either before or after changing the value of the text field.
   
   document.getElementById('petpic').src = "newpic.gif";
   where petpic is the id of your img tag and newpic.gif is the name of the picture file. Each state must have a different picture so make sure that each state is identified in this function.
3. Add another button in an appropriate place on the form to allow the owner to pause and resume the virtual pet. The text on the button should initially say "Pause". When clicked, it should call a function that toggles back and forth between paused and unpaused (or active). (You could call it togglePause(), for example.)
   • You will need a global boolean (true or false) variable that keeps track of whether the pet is currently paused. It should initially be set to false.
   • Implementing the togglePause function:
     • If the button is clicked when the simulation is not already paused, then the value of the variable should be changed to true and the text on the button should be changed to "Resume". If the button is clicked while the pet is paused, then the variable should be changed to false and the text on the button should be changed back to "Pause".
     • You will also need to disable each of your buttons to prevent users from interacting with your pet when the pet is paused, and then turn them back on when your pet resumes. Buttons have a disabled property that can be set to true or false, as in

           myBtn.disabled = true or myBtn.disabled = false

       where myBtn is the id of a button.
   • You will also have to add a check inside your "execute every second" function so that the code in the function is only executed if the pet is not paused.

4. Once the virtual pet simulation is functioning properly, hide the state and counter text fields by changing their visibility style attribute to "false". (You can do this in a <style> section in the <head> or in a style="..." attribute in the field tags.) Invisible fields still take up space on the page, so you may want to move these fields to make it less obvious that they are there when invisible.

   Add a button so that the user can choose to make those two fields visible. If you want, you can make this button toggle back and forth between showing and hiding the state and counter, similar to the Pause button.

5. Add graphics, labels, and/or text to the page to improve the user interface. Add text to describe what to do and align the page and buttons in an easy-to-read format.

Finishing Up:

• Make sure that you have updated the "Author:" and "With assistance from:" comments at the top of your source file.
• Double-check that you have included all other appropriate comments
  • at the top of the file,
  • before every function, and
  • inside functions where there are code blocks that could use explanation.
  Make sure that you have used clear variable and function names, and that your indentation helps to clarify your program's logic.
• Upload your modified page(s) to the web server.
• Recopy your state diagram so that it matches your current virtual pet simulation. Turn the state diagram in to Kit.