Due: Wednesday, May 25, 2011
References for this assignment:
- Start with pics.html, save it as H7jones_v1.html, where for jones you put your last name.
- Instructions:
Modify pics.html to solve the exercise. Make sure you store your images in your images folder in your students account. You should have at least five images (get some faces from the internet). Works best if you make all images the same size. Save this Question Face to use on the opening display. Source of images in your coding must use relative addressing.
Create a Web page named H7jones_v1.html that is similar to pics.html, but contains only one button controlling the image. When the user clicks this button, a function (with no inputs) should be called to randomly select from amoung several images.
For example, the following JavaScript statement, when executed, would randomly choose from amoung four image file names (happy.gif, sad.gif, scared.gif, and bored.gif) and assign the chosen file name to the SRC attribute of an image named face:
document.images.face.src = RandomOneOf(["happy.gif", "sad.gif", "scared.gif", "bored.gif"]);
- Save the file random.js. You'll need it because that's where the
function RandomOneOf is written (other functions are there too).
To use functions in random.js you will need to include:
within the<script type="text/javascript" src="random.js"></script><head>(before the script that contains the ChangeImage function) of your H7jones_v1.html file. - For your H7jones_v1.html file, here's a screen shot of what's initially presented to the user. Then when the user clicks on the "I feel" button, the display might look like this, Some Emotion Face.
- When done, upload your H7jones_v1.html file to your HCI201 folder in your students account.
- Version v2. For an extra 15pts put a text box
next to the "I feel" button. In the text box print one word describing the emotion of the face
pictured. For example, here's what's first displayed in this extended version:
screen shot. And now when the user hits the "I feel" button,
various different emotions could be displayed. Here's one
example. Your program should be able to display at
least 5 different emotions.
If you do this version, then name your file H7jones_v2.html and upload it to your HCI201 folder in your students account. If you submit this version (v2), then do not submit version v1.
Keep your old assignments page as is. Edit it to work on the "Assignments-7.html" file as follows:
- Add a link to the file you produced in Part 1 of this assignment as sub-item under Homework 7. This should be either, H7jones_v1.html or H7jones_v2.html, but not both. Again, please use relative referencing for full credit!
- Upload "Assignments-7.html" into the HCI201 folder in your students account.
- Use COLweb
to submit the URL to your Assignment list page. It should look something like this:
→ http://students.depaul.edu/~yourlogin/HCI201/Assignments-7.html.
Make sure you can view it on the browser by typing in the URL you will be submitting, and click on all the links on it to verify that they lead to the appropriate files! Since this is just one line, please submit it in the comment box provided by the COLweb submission system.