Lab 06 - The Smart Money
Introduction
You’ve been offered a “starter loan” of $20,000. This is a
fantastic opportunity, but what are you going to do with that money? This
week's lab will help you explore three options: bank savings, casino games, and
stocks. We will, of course, be doing this all with JavaScript!
Part of your grade for this lab will depend on how well you make use of JavaScript
functions.
Requirements
You must create a folder on your web drive called
"Lab06" (without the quotes) and store your work in that directory.
This lab does NOT draw on the
previous labs, so there is no need to copy your old web pages into this
directory.
This week you will make a single new
web page, money.html, such that:
- Your page has a prelude
declaring it as an XHTML document, and it roughly follows XHTML
rules. Validation is encouraged but
not required.
(Hint: place HTML comments around your JavaScript, as the book does, so
that the validator won’t complain about your JavaScript).
- Your page is reasonably appealing to look at
(e.g. using styles, colors, etc). Your page should be tasteful and easy to
read. No need to spend a lot of
time on this, just make it reasonable.
- When finished, you will have
a page that looks something like this when it is first loaded:
You do not have to make it look exactly like this (colors etc.) but
the general layout should be similar.
- The page will have a single
button that, when clicked, performs all of the calculations described
below. It is strongly recommended
that you first make the HTML for the left column only, and get the
JavaScript working for just this column (“investing”), then later handle
the “craps” and “stocks” columns. When
complete, here is one sample output after clicking the “Calculate Results”
button:
- You must have separate
functions for the savings, craps, and stocks computations (described
below). You should also define
other functions as appropriate – avoid repeating code where possible!
At least one of your functions must return some value, and at least one
function must have one or more arguments (you will likely have more than
this).
- As always, you must provide comments for your code! Give a brief description of each
function, and (aside from very short functions) the major sections inside
each function.
- The leftmost column shows
what would happen if you put your money in a savings account. The user
will provide the annual interest rate earned on the money (initially
$20,000) in an input field. You will have four additional input fields
below the interest rate which, when the calculate button is hit, will be
populated with the value of your investment after 10, 20, 30, and 40
years, respectively. The formula for computing the value of your
investment over time is:
Value = Principal * e(rate * time
in years)
(Hint: There are some handy functions
in the Math object that will help you – see textbook section 11.3)
Your page should generate an error (popup message) if the
user does not specify valid interest rate: a number greater than zero and less
than or equal to 0.2 (20%). Additionally, your page should not perform any
calculations (e.g., do nothing for the investing, craps, or stocks columns)
until the user enters a legal value. Instead, do nothing and just wait for them
to enter a correct value and click the calculate button again.
You must use a
JavaScript array for this interest calculation (not required for the other
parts). In particular, make an array that stores the amount of money after 1
year, 2 years, 3 years, …, 40 years. Then
copy the 10, 20, 30, and 40 year values to the HTML elements that make them
visible on the screen.
- The middle column represents
what would happen if you played craps with your money. The user will
provide the amount bet on each hand in an input field, and you simulate playing
1,000 games. You will have four additional input fields below the bet
amount which, when the calculate button is hit, will be populated with the
amount of money you have after 10 games, 100 games, 500 games, and at the
end (1,000 games). Label these fields appropriately! If at any time the amount of money
you have becomes zero (or less!), it should remain zero for the rest of
the games (i.e. it's impossible to go into debt).
Do not simulate the whole craps game here (but see the extra
credit). The odds of winning each individual craps game is 49.3%. If the
player wins, their cash increases by the bet amount. If they lose, the bet
amount is subtracted from their cash.
Your page should generate an error if the user does not specify a valid
bet (a number greater than zero and less than or equal to $20,000).
Additionally, your page should not perform any calculations (e.g.,
do nothing for the investing, craps, or stocks columns) until the user
enters a legal bet value.
- The last section represents
what happens if you invested all your money in stocks. The user can choose low or high
risk. For low risk, you normally
earn 7% (simple interest – no need to use the compounding equation above)
on your money each year, though there is a 5% chance that a stock market
crash instead wipes out half of your money. For high risk, you normally earn 10% on
your money, with a 15% chance that a crash instead wipes out half of your
money.
Use radio buttons to select low or high risk. If a particular button has
the ID of “lowrisk” then document.getElementById("lowrisk").checked
returns a value (true or false) indicating checked or not.
The default should be that neither low or high risk is checked in the
form. Display an error message if the user has not picked one when they
hit the calculate button. Again,
your page should not perform any calculations (e.g., do nothing for
the investing, craps, or stocks columns) until the user has made a
selection for this.
HINTS:
1.
You do NOT want to create all of the HTML for
the table, input boxes etc. using JavaScript.
Instead almost all of this will be done with HTML in the <body>
section. Then you will use JavaScript to
interact with the HTML you create.
2.
The example in section 9.6 is very helpful for
understanding a.) how to use JavaScript to read/write the value of an HTML input
box b.) how to use JavaScript to make something happen when you click on a
button. Note though that this example is
simulating individual craps games, which is different from what you are doing.
3.
Using Mozilla Firefox is highly recommended for
testing. However, your final result
should run on Firefox and IE.
4.
You should not use document.writeln()
inside your functions that are called by ‘onclick’. Doing so erases your whole page and starts
over with just the new content that you just output. Instead if you need to output something to
the user (or to debug) either use window.alert() or change the value of some
input box.
5.
Avoid using variables with the same name as the
‘name’ of some element in your form – in some browsers, this can cause
difficult behavior. Also, don’t start an elements name or ID with a number – it
must start with a letter.
6.
Don’t use names that start with a number, like
“10years” – this goes both for regular variable names as well as the “name” and
“id” of your text boxes, which are sometimes treated like variables.
7.
If you want to use an external script file, we
suggest the following syntax (modified from the lecture). Otherwise, the browser may ignore later
<script> tag if you try to include JavaScript inline in your document. Use this:
<script
type = "text/javascript" src="calc.js" >
</script>
Instead of using:
<script
type = "text/javascript" src="calc.js" />
8.
When you use JavaScript to read a value from a
form, the value you get is a “string.”
You may need to convert it to a number before using it.
.
Your web page must be constructed using Notepad or a similar
text-only editor. The use of programs such as Microsoft Word, Microsoft
Frontpage, DreamWeaver, ColdFusion, Mozilla Composer,. etc. will be considered
an honor offense.
Extra Credit
For a nominal amount of extra credit do some/all of the
following:
1.
Make a new table that shows dynamically how your
money changes over time. For instance,
have three boxes showing the amount of money you have under each of three
scenarios and update these periodically (perhaps twice a second) to show how
much money you have left after a certain amount of time. To do this you will have to make some
assumption about how many craps game you do per year.
2.
Write a simulator for some casino game. Not craps, because the book does that, but
perhaps for poker or blackjack. Show the
cards that were played in some appropriate way. Have a button that causes one game
to be played, or else have different buttons that lets the user choose how to
play (e.g., hit or stand? what to bet?
double down?). Update your total money
appropriately when a game/hand is over.
Deliverables
- Your page should contain all
of the elements described in the requirements section above.
- Add a link from your default.htm
page to Lab06/money.html
- All of your files should be
in a folder called "Lab06" (without the quotes) on your web
drive. Your instructor will assume that your web page is viewable at http://www.mXXXXXX.it350.cs.usna.edu/Lab06/money.html
where XXXXXX is your alpha number. You may want to check that this URL is
viewable and that everything works correctly from a computer where
somebody else is logged in. If you've goofed and linked to a file on
your X drive, this will help you catch it!
- Turn in the following
hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet
on top):
- A completed assignment
coversheet. Your comments will help us improve the
course.
- A printout of the source to your
Lab06/money.html file.
- If you use any
external script files, include a printout of those too.
Addenda
None
so far.