HTML for long division applet
During the time since I started this series of posts on a little thing I knocked out one evening to illustrate long division, I’ve probably done a dozen other somewhat interesting pieces of code – I am sad that Java has co-opted the use of the word codelet because it is such a nice term for a bit of programming that is more than a function but not a real application. Anybody has a good word, let me know. While we’re on the subject of words, what exactly is the difference in Dreamweaver between an extension and a widget?
Anyway …. our games include hundreds of bits like this, where if a student misses a problem, he or she gets routed to a page to pick an option to study.
So … here is the rest of the story. Yes, it could have been done more beautifully, and when I go back and revise it, I think I will change the answer button instead of having two buttons to have one that is changed after the first onClick.
The DOCTYPE (html5) and title are pretty obvious.
All of our web pages have a container ID that is set in the style sheet. That makes all of the content fall within a defined window size, regardless of the screen size.
The w class is just so the background is white in the spot where the problem is. The Invisible Developer wanted some type of background and he liked the specky one.
You might wonder why something like w is a class instead of an ID if it is only used once. In fact, I simplified this example for the blog. Actually the w class is in an external style sheet so their could be pages with more than one element using this same style.
As a commenter on an earlier post pointed out (thank you!) it would really be better practice to give these more descriptive names like white_back because in the future I’ll probably be looking at this page and wondering what the hell ‘w’ was supposed to do. Of course, I can look in the style sheet, but it still is better to name things something descriptive.
You can see that the input field for the second digit of the answer is hidden, as is the button for getting another problem.
The forms have an ANSWER button because we found that students in this age group (9- 12 years) often type something by accident or as their first impulse. This forces them to think, at least for a second, whether or not they really meant that and gives them a chance to change their mind. We added this at the request of several teachers after our first year of beta testing.
The table width is set at 40% and since the container width is defined, the table will always be the same size.
The q class (again, should be renamed and shame on me), has a border at the bottom of the cell. That is used to give the top part of the division problem and used again when each digit of the quotient is found and multiplied by the divisor. The product is then put in a cell with a line underneath.
The first input field is where the first digit of the quotient will be entered. Onclick this will be hidden and the correct answer shown in the element yans1. If the student had entered an incorrect answer, they’ll also get a message telling him or her it is an incorrect answer. All of this is handled by the javascript.
For the remaining rows of the table – the left cell is underneath the divisor, so it will remain empty. The right cell will have each step in the division problem entered, as the student enters the first digit and then the second. Again, this is handled by the javascript, all I need to do is make sure the id values for each cell match what is in the script.
Once the problem is finished, the div with the id fin will be shown, as will the button for trying another problem. The student now can select one of three choices:
Get another problem (button3), go back and select another option for studying division, or take a quiz to go back to the game. Five correct answers and he or she can go back to playing Spirit Lake.
<!DOCTYPE html>
<html>
<head>
<title>Practice division</title>
</head>
<body >
<div id=”container”>
<div class=”w”>
<h3>PRACTICE LONG DIVISION</h3>
<p></p>
<h3 id=”hd1″> Enter the FIRST digit in the answer</h3>
<h3 id=”hd2″ class=”hidden”> Enter the SECOND digit in the answer</h3>
<input type=”button” class =”hidden” value=”ANOTHER PROBLEM” size=”5″ name=”button3″ id=”button3″ onclick=”window.location.reload()”>
<p></p>
<p></p>
<form name=”formx” id=”formx” >
<input type=”button” value=”ANSWER” name=”button1″ id=”button1″ size=”5″ onClick=”checkProb(1)”>
<input type=”button” value=”ANSWER” size=”5″ name=”button2″ id=”button2″ class=”hidden” onClick=”checkProb(2)”>
<table width=”40%” border=”0″ cellpadding=”0″ >
<tr>
<td width=”20%” > </td>
<td width=”20%” class=”q” ><input type=”text” name=”ans1″ id=”ans1″ size=”3″><scan id=”yans1″ class=”hidden”></scan>
<input type=”text” name=”ans2″ id=”ans2″ size=”3″ class=”hidden”><scan id=”yans2″ class=”hidden”></scan></td>
</tr>
<tr >
<td ></td>
<td></td>
</tr>
<tr>
<td id=”c” ></td>
<td id= “divide”> </td>
</tr>
<tr>
<td ></td>
<td id= “d”class=”d” > </td>
</tr>
<tr>
<td ></td>
<td id= “e” > </td>
</tr>
<tr>
<td ></td>
<td id= “f” class=”d”> </td>
</tr>
</table>
</form>
<div id=”fin” class=”hidden”>
<p></p>
<a href=”../learndividelong.html”><img src=”../scenephotos/arrowhead_point_left.gif” width=”130″ height=”70″ alt=”back arrow” />
Go back to study more</a>
<img src=”../scenephotos/smalls/handblue.jpg” alt=”blue hand” /> <img src=”../scenephotos/smalls/handyellow.jpg” alt=”yellow hand” />
<a href=”../quizzes/dividelongerquiz.html”>Take a quiz to go back to the game<img src=”../scenephotos/arrowhead_point_right.gif” alt=”next arrow” /></a></div></td>
<p></p>
</div>
</div>
</body>
</html>
