Homework 6 - Virtual Pest (part 2)by JLPopyack & Paul ZoskiDue Date: Wednesday, November 20 at Midnight |
|
After completing this assignment, you will have use interface design methods while working on your "virtual pest." You will also have experience building(virtual) logic circuits
This assignment consists of three sections:
Click here to return to top of this page.. |
Module 6, pp. 231 - 232, problems 11, 13, 15
Click here to return to top of this page.
Click here to return to top of this page.
In the previous assignment , you created a design for a "virtual pest". Your design consists of
For this exercise, you are to implement the user interface (often referred to as a front end) and submit a program design for the HTML/JavaScript code necessary to implement your virtual pest. NOTE: You do not need to complete implementation of the pest for this assignment; you need only specify the code that needs to be written, as described below.
You are to create a user interface you described in your previous assignment, as a web page consisting of at least one HTML form with at least two text boxes, two buttons, and some pictures. You must have a different picture to represent each of the different states that your pest can have. You may choose to include other form elements (pop-up menus, radio buttons, etc.) for extra credit.
You need to provide a brief written description on a separate sheet of paper that describes how the interface works. Think of this as a "user manual" for your virtual pest.
You should endeavor to match the original design as closely as possible - if you have decided to change or improve your original design, you need to describe the improvements in your user manual.
Note that you are also to provide a preliminary program design for your virtual pest. The design must be done before you try to write the code. The program design contains the names of all functions you need to provide. It also provides verbal descriptions (not "JavaScript code") for each of the functions - what the function does, what form elements does it change values for and under what conditions?
Your program should contain a "startup" function that is invoked when the page is loaded and which sets the initial state. It should also have a "display" function that changes values of form elements as appropriate according to the state. It should have a function that investigates the current state periodically (cycling by using "setTimeout()" as explained in lecture) and makes state transitions as described in your design. It should also have a function for each button you defined, which investigates the state and makes state transitions as described in your design. Each time the state is changed, your program will call the "display" function to update the form elements as needed. For instance, for the example given with Part I, illustrated through the finite state machine and behavior table shown below, there will be the following functions:
Element |
Type |
Possible values |
Meaning |
Action |
---|---|---|---|---|
PetSound |
text box |
Grrr... |
state=angry |
|
OwnerHand |
button |
|
pat the dog |
changes state to "provoked" if angry, and to "happy" if lonely. |
PetAction |
text box |
Bite |
state=provoked |
|
|
|
|
|
|
Click here to return to top of this page.
Students wishing to earn extra credit can do so by completing as many of
the following additional tasks as desired:
P
|
Q
|
Z
|
1
|
1
|
0
|
1
|
0
|
1
|
0
|
1
|
1
|
0
|
0
|
1
|
P
|
Q
|
R
|
Z
|
1
|
1
|
1
|
1
|
1
|
1
|
0
|
0
|
1
|
0
|
1
|
1
|
1
|
0
|
0
|
0
|
0
|
1
|
1
|
0
|
0
|
1
|
0
|
1
|
0
|
0
|
1
|
0
|
0
|
0
|
0
|
1
|
Click here to return to top of this page.
Click here to return to top of this page. | |
You must compose all written material yourself, including answers to book questions. All material taken from outside sources must be appropriately cited. If you need assistance with this aspect of the assignment, see a consultant during consulting hours.
Click here to return to top of this page. | |