Step 1: Create a Project and Add Labels to Your Form

The first step in creating a math quiz is to create the project and add labels to your form.

To create a project and add labels to your form

1. On the File menu, click New Project.

2. If you’re not using Visual Studio Express, you need to select a language first. From the Installed Templates list, select either C# or Visual Basic.

3. Click the Windows Forms Application icon, and then type Math Quiz as the name.

4. Set the form properties:

   1. Change the form's Text property to Math Quiz.

   2. Change the size to 500 pixels wide by 400 tall by using the Size property or dragging until you see the correct size in the lower-left corner of the integrated development environment (IDE).

   3. To prevent users from changing the form's size, change the FormBorderStyle property to Fixed3D and set the MaximizeBox property to False.

5. Drag a Label control from the Toolbox, and then set its properties:

   1. Change the (Name) property to timeLabel. This label appears as a box in the upper-right corner of your form that shows the number of seconds counting down for the quiz.

   2. Change the AutoSize property to False so you can size the box yourself.

   3. Change the BorderStyle property to FixedSingle to draw a line around the box.

   4. Set the Size property to 200, 30.

   5. Drag the label to the upper-right corner of the form until the blue spacer lines appear.

   6. Clear the Text property by clicking Text in the Properties window and pressing the BACKSPACE key.

   7. Change the font size to 15.75. Click the plus sign next to the Font property in the Properties window, which displays several properties including Size, as shown in the following picture.

      Properties window showing font size

      

6. Next, drag another Label control from the Toolbox, and then set its properties:

   1. Change the font size to 15.75.

   2. Set the Text property to Time Left.

   3. Drag it to line up just to the left of the timeLabel label.

7. Now, add the controls for the addition problem. Drag a Label control from the Toolbox, and then set its properties:

   1. Set the Text property to ? (question mark).

   2. Set the AutoSize property to False.

   3. Set the Size property to 60, 50.

   4. Change the font size to 18.

   5. Change the TextAlign property to MiddleCenter.

   6. Change the Location property to 75, 75 to position it on the form.

   7. Change the (Name) property to plusLeftLabel.

8. Select the plusLeftLabel label and copy it. (Press Ctrl+C or from the Edit menu, select Copy.) Then, do the following:

   1. Paste it three times. (Press Ctrl+V or from the Edit menu, select Paste.)

   2. Arrange the three new labels so that the boxes are in a row to the right of the plusLeftLabel label, using the spacer lines to space them out and line them up.

   3. Change the second label's Text property to + (plus sign).

   4. Change the third label's (Name) property to plusRightLabel.

   5. Change the fourth label's Text property to = (equal sign).

9. Drag a NumericUpDown control from the Toolbox, and then do the following:

   1. Change the font size to 18, and then make it narrower so that the width is 100.

   2. Drag it until it lines up with the Label controls for the addition problem.

   3. Change the (Name) property to sum. (You learn more about the NumericUpDown control later.) The quiz now has a first row, as shown in the following picture.

      First row of math quiz

      

10. Select all five controls in your addition problem (the four Label controls and the NumericUpDown control) and copy them. Then, do the following:

    1. Paste the controls, which should add five new controls to your form.

    2. The controls should still be selected, so you can click one control and drag the controls into place so they're lined up underneath the addition controls. Use the spacer lines to give enough distance between the two rows.

    3. Change the second label's Text property to – (minus sign).

    4. Name the first question mark label minusLeftLabel.

    5. Name the second question mark label minusRightLabel.

    6. Name the NumericUpDown control difference.

11. Paste the five controls two more times, and then do the following:

    1. For the third row, name the first label timesLeftLabel, change the second label's Text property to × (multiplication sign), name the third label timesRightLabel, and name the NumericUpDown control product.

    2. For the fourth row, name the first label dividedLeftLabel, change the second label's Text property to ÷ (division sign), name the third label dividedRightLabel, and name the NumericUpDown control quotient.

    Note

    You can copy the multiplication sign × and the division sign ÷ from this tutorial and paste them into the IDE.

12. One more control is needed on your form: a button to start the quiz. Drag a Button control from the Toolbox, and then set its properties:

    1. Set the (Name) property to startButton.

    2. Set the Text property to Start the quiz.

    3. Set the font size to 14.

    4. Set the AutoSize property to True, which causes the button to automatically resize to fit the text.

    5. Drag the button to the bottom of the form, and move it so that it's centered.

13. Finally, click the startButton control, and then do the following:

    1. Set the TabIndex property to 1.

    2. Click the NumericUpDown sum control.

    3. Set the TabIndex property to 2.

    4. Set the other NumericUpDown controls: Set the difference control's TabIndex property to 3, the product control's TabIndex property to 4, and the quotient control's TabIndex property to 5. Now your form should look like the following picture.

       Initial math quiz form

       

    Note

    The purpose of the TabIndex property is to set the order of the controls when the user presses the TAB key. Open any dialog box (for example, from the File menu, select Open) and press the TAB key a few times. Watch how your cursor moves from control to control each time you press the TAB key. When that form was originally designed, a programmer decided the order.

14. To see how the TabIndex property works, save and run your program, and then press the TAB key a few times.

To continue or review

• To go to the next tutorial step, see Step 2: Create a Random Addition Problem.

• To return to the overview topic, see Tutorial 3: Create a Math Quiz.