reptile7's JavaScript blog
Saturday, May 25, 2019
 
Approaching Quizmo
Blog Entry #399

Let's move on now to the next Calculators, Calendars, and Clocks sector item, that being Math Check, which went live in October 1997 and comes to us courtesy of Binoculars V.O.F.

Math Check assembles and presents to the user arithmetic problems having difficulty levels A < B < C and whose integer operands are themselves randomly generated;
per its title, it can check the user's answers to these problems against its own answers
and keep a running tally of correct and wrong user answers.
The /JSBook/mathcheck.html page does not feature a Grab the Script link although the Math Check code can be accessed at the corresponding mathcheck.txt page. The mathcheck.html demo works OK for the most part: its division module is somewhat buggy for a reason we will detail below.

Initial display

Before we do any arithmetic, we initially see on the mathcheck.html page
some metatext

IMPROVE YOUR ARITHMETIC SKILLS
USEFUL FOR THE AGES 3 TO 103
This page is best viewed with Netscape 3.0

<h4><center>IMPROVE YOUR ARITHMETIC SKILLS</center></h4>
<h4><center>USEFUL FOR THE AGES 3 TO 103</center></h4>
<center><h4>This page is best viewed with Netscape 3.0</center></h4>

and an series of push buttons

<center><form name="rekenen">
<input type="button" value="add" onclick="add( );">
<input type="button" value="subtract" onclick="subtract( );">
<input type="button" value="multiply" onclick="multiply( );">
<input type="button" value="divide" onclick="divide( );">

and a
Level A Level B Level C
set of radio buttons

<input type="radio" name="arithmetic">Level A
<input type="radio" name="arithmetic" checked>Level B
<input type="radio" name="arithmetic">Level C

and a push button.

<input type="button" value="Check Score" onclick="check( );">

We should also see a push button to the right of the button but it doesn't show up because of a coding typo.

<inputtype="button" value="Reset Score" onclick="score( );">

HTML notes

• As detailed above, the metatext segments are structurally marked up as <h4> headings. Are those lines headings? They're not headings. Code them as a <br>-newlining <strong>, good enough.

• The authors used four separate <center>s to horizontally center the metatext and the line boxes of the rekenen form (FYI, the h# elements can't validly have block-level children); just one <center> would have sufficed.

<body onload="score( );" bgcolor="#ffffff" text="#000000">
<center> ...metatext + form code... </center>
</body>

Our baseline

A score( ) function sets correct and wrong variables to 0 when the mathcheck.html page has loaded.

function score( ) {
    correct = 0;
    wrong = 0; }

Add it

It's time to get the math checking under way and put our arithmetic skills to the test, yes? We click the button, thereby calling an add( ) function, which will create and display an addition problem having two operands. The add( ) function's first order of business is to set some maxValue upper boundaries for the operands:

function add( ) {
    if (document.rekenen.arithmetic[0].checked) maxValue = 10;
    else {
        if (document.rekenen.arithmetic[1].checked) maxValue = 30;
        else { maxValue = 60; } } ...

For a
Level A
problem, the operands will be less than 10;
for a
Level B
problem, they'll be less than 30;
for a
Level C
problem, they'll be less than 60.
In all three cases, the operand range runs up to but does not reach the maxValue value, per the following code.

The operands themselves are separately generated by external random( ) and ranom( ) functions.

numA = random(maxValue);
numB = ranom(maxValue);

function random(maxValue) {
    day = new Date( );
    hour = day.getHours( );
    min = day.getMinutes( );
    sec = day.getSeconds( );
    mili = day.getTime( );
    return(((hour * 3600) + (min * 60) + (sec) + mili) % maxValue); }

function ranom(maxValue) {
    day = new Date( );
    mil = day.getTime( );
    return((mil) % maxValue); }

Both functions use a new Date( )-data % maxValue division/remainder operation to give a random (pseudorandom?) number in the range 0 to maxValue - 1, inclusive; regarding these operations,
the random( ) dividend is the number of seconds that have elapsed since the beginning of the current day plus the getTime( ) number of milliseconds that have elapsed since 1970-01-01T00:00:00.000Z whereas
the ranom( ) dividend is just the getTime( ) millisecond count.
The % remainders are returned to the add( ) function and respectively assigned to numA and numB variables.
(We previously encountered a var num = new Date( ).getSeconds( ) % 10 creation of random numbers in HTML Goodies' JavaScript Primers #20, which was discussed in Blog Entry #36.)

Back at the add( ) function,
numA and numB are added
and the resulting sum is stored in a numC variable.

numC = numA + numB;

Next, add( ) concatenates numA, +, numB, and  =  and displays the resulting addition problem string on a prompt( ) box; the prompt( )'s default input value is initially set to 0.

Answer = window.prompt(numA + "+" + numB + " = ", 0);

The user does or does not enter a value into the box's input field and then clicks the box's or button; the prompt( ) output is assigned to an Answer variable.

Is the Answer correct? Up pops an if-conditioned confirm( ) box whose message asks
Do you want your browser
 to check the answer you gave to the problem numA + numB?

if (window.confirm("Do you want your browser\n to check the answer you gave to the problem " + numA + " + " + numB))
    ans( );
else { window.alert("Please try again later!"); } } // End of add( ) function

Clicking the box's button displays a Please try again later! alert( ). Clicking the box's button calls an external ans( ) function that compares the Answer and numC values.

function ans( ) {
    if (Answer == numC) {
        correct == correct++;
        window.alert("Congratulations your answer is correct."); }
    else {
        wrong == wrong++;
        window.alert("The answer " + Answer + " that you gave is wrong. The correct answer = " + numC); } }

If Answer and numC are equal, then the correct count is increased by one and the user gets a Congratulations your answer is correct. alert( ); if they're not equal, then the wrong count is increased by one and the user gets a The answer  Answer  that you gave is wrong. The correct answer = numC alert( ).

The correct == correct++; and wrong == wrong++; lines are kind of weird - if I understand the postfix increment operator correctly, they initially compare correct and wrong with themselves (thereby returning true, although nothing is done with those trues) and then increment correct and wrong - clearly, correct++; and wrong++; are all we need here.
We'll get to the rest of the mathcheck.html JavaScript in the following entry.
- posted by A. Peak @ 5:45 PM
Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)