COMPUTER PROGRAMMING FOR KIDS

STEP 7: CRUNCHING NUMBERS AND GUESSING AGES

We will now calculate the final “score” (our guess of the user’s age range) and add some visual indication to the user to display their final “score” to them.

Each time the user makes a selection and then clicks the “Next” button to move on to the next question, their points for the just-answered question (the value of the underlying Tag property of that selection) are added to their total.

To recap: For each option most likely to be chosen by a young person, they get 1 point; for each option most likely to be selected by an older person, they get 3 points; the “in-between” choices are given 2 points.

To do this, add the following code to the Button click event (new cold bolded):

private void button1_Click(object sender, EventArgs e)

{

    if (radioButton1.Checked)

    {

      ageScore = ageScore + Int32.Parse(radioButton1.Tag.ToString());

    }

    else if (radioButton2.Checked)

    {

      ageScore = ageScore + Int32.Parse(radioButton2.Tag.ToString());

    }

    else if (radioButton3.Checked)

    {

      ageScore = ageScore + Int32.Parse(radioButton3.Tag.ToString());

    }

    LoadNextBatch();

}

Note: You might be a little confused by the code above, as it shows the Tag value being converted to a String (via “ToString()”), and then that value being converted “back” into an integer (via “Int32.Parse()”). You might wonder: Since we are storing an int value in the Tag property, why can’t we just add the ageScore variable and the Tag value together without jumping through these hoops? The answer is that the Tag property is not of the int data type. You can store an int in it (as we are indeed doing), but it is actually a generic data type, specifically an object – which can be anything! All you really need to know for now is that we do have to “jump through these hoops” to access the Tag property’s value as an int.

In the code above, the value of the clicked RadioButton’s Tag property is added to the current value of the ageScore variable (which keeps incrementing, at least by 1, each time a selection is made and the user moves on by clicking the “Next” button). In other words, if the user chooses radiobutton1, the value of radiobutton1’s Tag property is added to the ageScore variable. Each radiobutton could have a Tag value of either 1, 2, or 3. If they just happen to be the same value as the number that is part of the radiobutton’s name (meaning, if the Tag value of radiobutton1 is 1), it is just a coincidence. Based on the law of averages, and logic, it will happen about one time out of three.

For example, if the user selects “Federer” in response to “Select a ROGER” the value of the Tag property that we will add to the running total for the user’s score will be 1 (because that is someone young people may be familiar with). If the user selects “Ebert,” on the other hand, the value of the Tag property will be 2, because he is somebody that people who are neither especially old or especially young are probably familiar with. Finally, if somebody selects “Maris,” the Tag property would have a value of 3, as the older generation would be the ones most likely to remember the 1960s New York Yankee slugger Roger Maris.

Photo of Roger Federer (left) by Tatiana from Moscow, Russia / CC BY-SA (https://creativecommons.org/licenses/by-sa/2.0)
Photo of Roger Ebert (middle) by Sound Opinions / CC BY-SA (https://creativecommons.org/licenses/by-sa/2.0)
Photo of Roger Maris (right) in the public domain; in 1961, he broke Babe Ruth’s previous record by hitting 61 homeruns

After the last choice is made, the code will detect that the end has been reached, and show the user’s total points (or “score”), and then visually indicate which age-range the user (at least apparently) falls in.

First, though, we have to add something to the form so that we have a place to display that information. Follow these steps:

1) Drag a ProgressBar control (highlighted below) from the Toolbox to the bottom of the form and drop it there, below the GroupBox, on the other side of the form opposite the “Next” button.

2) Enlarge the height of the form by clicking and pulling down on it’s “resizing thingy” (circled below)

Alternatively, you could change the Height value of the form in Visual Studio’s Properties pane, but it’s usually easier and quicker to just manually resize it.

3) Move the “Next” button up a little. Move the ProgressBar down to the bottom of the form, and then resize it (length-wise, or horizontally) by dragging it out to the right so that its far/right edge aligns with the right edge of the bottom (more or less, anyway, it doesn’t have to be that precise).

4) Now drag three Labels from the Toolbox to the form, and place them above the Progress Bar (but below the GroupBox with its RadioButtons).

5) Change the Font Size property value of the Labels to 13 and set their Bold property to True.

6) Change the text values of the Labels so that they are, from left to right, Whippersnapper, NYNO, and Geezer.

Your form should now look something like this:

So at the end, we will set the Value property of the ProgressBar to the number corresponding to the total “points” the user of the app has amassed. The value of the Maximum property of the ProgressBar is already set to 100, which is what we want, and its Minimum to 0, which is also what we want. But wait a minute! How is the math going to work for this? We have to work it out so that, if the user has always selected the “Whippersnapper” answer, the “progress” will be all the way against the left edge (at 0, the Minimum value); and we want it so that if they have always selected the “Geezer” answer, the Value property will be set to 100 (the Maximum value), so that the Progress Bar is colorized all the way over to its right edge. But since we are giving “Whippersnapper” answers 1 point each, that will be a total of 10 points if all the answers correspond to what a young person would presumably select. And since we are giving “Geezer” answers 3 points each, that will be a total of 30 points for a person who answered all questions expected of an old person. But a “pure” Whippersnapper should actually end up with a total score of 0, not 10; and a “solid” Geezer should end up with a total score of 100, so it doesn’t seem like this is going to work. There is nothing we can multiply 30 by to make it come out to an exact 100. Multiplying 30 by 3.33 would come close (99.99), but not quite get there.

What we’re saying is this: For a “pure” Whippersnapper to end up with 0 points, each Whippersnapper point should be 0 instead of 1. So what if we changed the points for each Whippersnapperish answer to 0, changed the points for each NYNO answer to 1, and changed the points for each Geezeresque answer to 2? That would certainly work for Whippersnappers, as 10 * 0 = 0, which is the value that we want in order for the ProgressBar to represent a “pure” Whippersnapper. But what about arriving at 100 for a complete set of “solid” Geezer ansers? Would 2 points for each “Geezer” answer work? Yes – that is, if we multiply the total by 5 (since 20, the new “solid” Geezer score, is 100 when multiplied by 5). And for the “in-between spot” (NYNO), the total score would be 10, and 10 * 5 = 50, which is right in the middle of the scale, right where we want it to be.

Thus, we want to multiply the final “scores” by 5. Will that work? Well, 5 * 0 = 0, representing the “pure” Whippersnapper; Yes in that case. And 5 * 10 = 50, representing the “dyed-in-the-wool” NYNO, so yes in that case, too. Finally, 5 * 20 = 100, which is just what is needed for the perfectly Geezerish person.

Which means, that we have to change our code. We have to, as programmers refer to it, “Refactor” our code.

This is realistic, because you will often find that you need to change something in your code as a result of not thinking everything out thoroughly beforehand. It’s okay. It happens. All the time, in fact, to one degree or another. That’s why there’s a word for it (“Refactoring”). It’s definitely a “thing” that programmers do. Pretty often.

The good new is that we already created constants to represent the values assigned to Whippersnapper, NYNO, and Geezer answers. So instead of changing 30 bits of code (changing all ten 1s to zeroes, all ten 2s to 1s, and all ten 3s to 2s), all we have to do is make three changes, where the constants are declared (“declared” is programmer-speak for “written” or “introduced”).

So we change this:

const int WHIPPERSNAPPER = 1;

const int NYNO = 2;

const int GEEZER = 3;

...to this (the new code is bolded):

const int WHIPPERSNAPPER = 0;

const int NYNO = 1;

const int GEEZER = 2;

...and all the Tag property assignments are updated, in effect, to reflect the new values.

In the next Step in our Journey, we will add the code that causes the ProgressBar to show where on the age continuum (or range) the user of the app is apparently located.

Earth-shakingly Important Note: If you have a basic programming question (suitable to an audience of “Kids”), send it to idiolectable@gmail.com, specifying whether you would like your name and location used if it is printed in a future “Step” of this newsletter. A nickname is acceptable (the first “Letter to the Editor” of mine that was printed appeared in Rolling Stone magazine, back in the early 1970s, and I signed it “Sylvester” for some reason which I no longer remember). Also, it’s always interesting to see where people are from, so please provide your City or Town and the State it’s in, too (or Province, or whatever the region where you live is called).

You can find the audio version of this Step (7) here: