Description
Objectives:
• To practice writing HTML and JavaScript functions
• To use some of the events supported by the Document Object Model
• Become familiar with client-side validation and feedback techniques
Requirements:
1. The entire application must be written in one HTML page using only JavaScript and HTML.
2. Call this web page a01.html
3. Do not use a any external CSS styling. This assignment is not about creating and using CSS. But if you
do want to experiment with styles, define the style in the element or use in-line styles
4. When the page initially loads, the application should prompt the user for their name.
5. After the name is entered (cannot be blank), the application will prompt the user (by name) to enter
the maximum guess number
a. The application will only allow the user to enter a number and will ensure the value greater
than 1.
6. Your Hi-Lo application must create a random integer between 1 and the maximum guess number
7. The following must be components of the main runtime User Interface:
a. A prompt and textbox to allow the user to enter a new guess at the random number
b. A button to submit the guess
c. A message that informs the user about their allowable guessing range
• For example, let’s say the user enters 10 as their maximum number – your initial
message would read “Your allowable guessing range is any value between 1 and 10.”
• If the random number you chose was 7 and the user guesses 5, then after submitting
their guess the message would change to “Your allowable guessing range is any value
between 6 and 10”
d. If the user happens to enter a number outside of the allowable range – your logic can ignore
that value and simply restate your allowable guessing range message
• For example, let’s say the allowable guessing range is between 6 and 10 and the user
enters the value 44 or -10 … since they are number values, it’s allowed – simply restate
the last allowable guessing range message
e. During the game, if the user enters anything but a number, I expect your Hi-Lo game to remind
the user that they need to enter a number – so display some kind of error message to that
effect as well as the allowable guessing range message
(by 11:00pm in eConestoga drop-box)
f. When the user’s guess is correct, change the background colour of the page and show a
message on the screen saying “You Win!! You guessed the number!!”
• At this point, show a “Play Again” button and reset your page to do it again
• Only this time you don’t need to prompt the user for their name – but you should
prompt them for a new maximum number.
8. Make sure that all data entered is validated for proper data type and in some cases proper data
ranges/values
a. Remember that the objective of the code is to create a workable Hi-Lo game
b. Also remember that giving the user timely feedback is a mandated usability factor
Hand in:
1. The final HTML page
2. Make sure you comment appropriately (HTML header comment, JavaScript function comment blocks
as well as inline comments)
3. Make sure that your Hi-Lo application runs properly and consistently within the Internet Explorer and
Chrome browsers
4. When submitting your HTML to the drop-box, please ZIP it up first
