Home -> Programming -> Demo Files -> Three Riddles

Three Riddles

Using the planning steps listed above, let's design a simple program to ask and display three riddles and their answers. Following the process above we would come up with the following:
  1. Plan your Project - If you have not read the pages on planning do so now before you continue.
    1. Create the program specification
    2. Output - The program will display, on request, one of three possible riddles and again, on request the corresponding answer. To keep the interface simple we want to display the riddles in the same space and the answers in a different space so we can see both at the same time.
      Input - No information is required, except for the user to indicate which riddle and answer they wish to view. The need a mechanism to select the riddle and then another mechanism to display both riddle and answer.
      Processing - Allow the user to select a riddle, the only visual feedback should be an indication of which riddle has been selected. Display a riddle and display an answer.
    3. Design the interface (the form)
    4. We start by drawing out the design for our form on paper. By drawing it before we create it in the editor, we can figure out what design we prefer and minimize the time spent actually creating the form. After a time you will not need to draw out your forms for simple programs, but professional programmers still spend a lot of time on interface design. A good interface is the hallmarks of a good program.

      Three Riddles Layout

      The program output is to display one of three riddles and its answer. The only input we require is for the user to select which riddle they want to see. Since we can only effectively read one riddle at at time, we only need two Labels for the output: one for the riddle and another for the answer. Next we need a way for the user to choose which riddle they want to see. The controls used to allow a user to make decisions and enter them on a form are RadioButtons and CheckBoxes. The main difference between them is shown in the table above: how many can be selected at one time. For this program we only see one riddle at a time, the radioButton is a perfect choice of control. RadioButtons are always placed inside a GroupBox so we need to use a GroupBox and put three RadioButtons inside it - one for each of the riddles we want to display. Clicking a RadioButton triggers an event which the programmer can use to select a particular riddle. Finally we need two controls to trigger the display of the riddle and the answer. Buttons are ideal for this so we will need two of them: one to trigger the display of the riddle, and another to display the answer. Finally we need one more button to create a way for the program to be terminated. This will be the Exit button. It is usually place on the bottom right of the form. We would draw this out to look something like this:

    5. Determine the initial properties for each control
    6. Now we decide what the properties should be for each control on our form. You must always set the Name property for each control which you will use in your programming. Other controls are set as needed. In this case we need to set the Text property for each of the controls.

      Initial Property Settings
      ControlPropertyValueExplanation
      FormNamefrmThreeRiddlesWhen we need to program this object, we must have a way to give it instructions, so we give it a unique name (also called an Identifier) and use the name or identifier to send instructions to the object.
      TextThree RiddlesThis is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Label 1NamelblRiddleSee explanation under Form Name above
      Textleave blank This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Border3DThere are three options for borders, see the Basic Controls Chart on the Output page for details.
      Label 2NamelblAnswerSee explanation under Form Name above
      Textleave blank This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Border3DThere are three options for borders, see the Basic Controls Chart on the Output page for details.
      Radio Button 1NameradRiddle1See explanation under Form Name above
      TextRiddle 1 This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Radio Button 2NameradRiddle2See explanation under Form Name above
      TextRiddle 2 This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Radio Button 3NameradRiddle3See explanation under Form Name above
      TextRiddle 3 This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Button 1NamebtnRiddleSee explanation under Form Name above
      Textshow Riddle This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Button 2NamebtnAnswerSee explanation under Form Name above
      TextShow Answer This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.
      Button 3NamebtnExitSee explanation under Form Name above
      TextExit This is the text that the user sees. By entering text in this property we can communicate with the user. See Output.

    7. What events do you need to create and what actions should each event take
    8. Events are triggers which activate when the user interacts with the control by clicking on the them. The common controls which create events are Buttons, RadioButtons and CheckBoxes. In this example we have three RadioButtons and 3 Buttons. Each one triggers its corresponding click event. The question we have to answer is: What action do we want each of these events to take?

      The best way to figure this out is to start with the final outcome and work backwards. For the Buttons, this is simple.

      Button Events and Actions
      ButtonAction
      ExitCause the program to end
      Show RiddleCause the riddle to display in the top label
      Show Answer Cause the answer to display in the lower label

      The question is what if anything should the RadioButtons do? As a rule of thumb, do not place an event control on a form unless you are willing to write some code for it. If its purpose is to trigger an event and it never does why put it on the form? Here the most obvious purpose for the RadioButtons is to select which riddle gets displayed. Notice that we already have controls to cause the riddle and answer to display. We will explain exactly how we do this when we come to the coding part of the exercise. The Events and actions for the RadioButtons are as shown below.

      RadioButton Events and Actions
      RadioButtonAction
      Riddle 1Load the first riddle and answer
      Riddle 2Load the second riddle and answer
      Riddle 3Load the third riddle and answer

      At this point we have finished our planning.

  2. Create your Project
    1. Create the Form
    2. Now we need to use the Visual BASIC editor so we can continue to build the Three Riddles program we started previously. Open VB and you should see a display something similar to the view below. If you set up Visual BASIC to display a Star window the center area will be filled with a visual display showing recent projects and so forth. In general those who like toolbars seem to like the star page and those who do not like toolbars do not seem to like the star page. Enable it or not as you prefer.

      VB at Start Up

      To create a form we need to create a new project first. VB is very sensitive about the files and resources in a project. In order to avoid problems you need to strictly follow these rules for creating projects.

      1. Make sure there are no open projects in the current window. If there is an open project, close it. VB Is very good about saving your work, it will prompt you to save if necessary. (You can have more than 1 project open at a time but each must be in its own window so that VB does not get confused and cross link the files!)
      2. Select New Project form the File menu. This opens a dialog box (shown below) which displays the new project options. Make sure the Windows Application template is selected. (We will discuss the other templates later.)
      3. Name the project. You may only use letters and numbers - no punctuation or special characters! (Windows Application is never a good name for a program file!)
      4. Never rename the files inside the project folder! The project folder is the outermost folder. It initially has the same name that you gave the project in step three above.
      5. Never move any files inside the project folder. (You can copy the project folder. You can zip the project folder and all its contents will be recreated in their proper places when the zip file is unzipped. When needed you can add files to the project folder. We will discuss this later.)

      Create a new project now and name it Three Riddles

      Naming the Project

      This will create a new project and result in a display that should appear as shown below. If the project form is not on the screen, then go to the top right panel named Solution Explorer and double-click Form1.vb to cause it to appear. Now using the controls from the left pane (GroupBox is in the Containers division) create the layout we previously planned. Place all the controls as planned in your new form. Once you are finished we are ready to proceed to the next step.

      Project Ready to Go

    3. Set initial Properties
    4. For each control you have created, click once (not a double-click) on the control and then in the bottom-right Properties pane find the Property as we listed it on the Planning page. Enter the data from the planning form into the appropriate property field. At this time we are entering data in the Name and Text properties for each control we created including the form. Remember, the Name property is what we, the programmer use to tell our program to do something to this control; the Text property is what the user sees when they look at that control. You need to enter all property data before you start writing any code.

    5. Code the planned events
    6. We do this one procedure (one event) at a time. The usual pattern is to do the simplest things first. In this case, and almost every other that is to write the code for the Exit button. From the Design View of the project, locate and double-click the Exit button. Doing this does three things:
      • transfers you to the code view of the project,
      • creates the procedure declaration and close for the Exit control and
      • ties the click event of that button to the procedure it just created.

      It will look like this:

      Private Sub btnExit_Click(ByVal e as SystemEvent, ) Handles btnExit.Click

      End Sub

      To program any procedure we type the code between the declaration and the close. For this procedure we need to enter two lines. The first line, entered immediately after the procedure declaration, is a comment (documentation) which states what the procedure does. Just a note about documentation. Many beginning programmers do not understand the crucial documentation plays in maintaining programs. The basic concept is that if someone else has to look at your code to figure out what you did, or if you come back six months later, any comments as to what you were doing in a particular place is very helpful in understanding the code.

      The second line is the code which causes this to happen. To end a program we type the statement: Me.Close so the finished procedure looks like this:

      Private Sub btnExit_Click(ByVal e as SystemEvent, ) Handles btnExit.Click
           'Terminates the program
           Me.Close
      End Sub

      Next we need to program our radioButtons and buttons. We planned to use the radioButtons to load the selected riddle and to use the buttons to display the loaded riddle. At the time we glossed over where the riddle was loaded to and where it was displayed from. No we have to get into those details. This is what processing is all about. In principle the idea is simple. We need a temporary place to put a riddle when a radioButton is clicked. We refer to this temporary place by the name of storage. This is exactly what RAM was created to do - serve as temporary storage while we are manipulation our data. Then When the click the Show Riddle button we can grab the contents of from that place and put it into the Text property of a label so the user can see it.

      So lets create some temporary storage. WE will need two storage locations one for the riddle and the other for the answer. Two will suffice because we only load one riddle and its answer at a time. A temporary storage locations is called a variable and has some requirements for its use. These are listed on the Processing page. Note, A cardinal rule of using variables is that they must only serve one purpose!

      One of the rules for using variables is that they must be declared. Declaring a variable is how we tell our program to set aside some space for us to use for data storage. The full rules for variable declarations are listed on the Processing Page. To make it simple for this program, we are using (referring to) these variables in more than one procedure, so they must be declared at the top of the form just after the form declaration. So immediately following the line which reads:

      Public Class Form1

      enter the following declarations. Notice we only enter one declaration per line.:

      Private strRiddle as string
      Private strAnswer as string

      Now go back to the design view in the VB editor and double-click the RadioButton named Riddle 1. We will store the first riddle into the variable strRiddle. To do this we use an Assignment statement. It has the form A = B and is read as: assign B into A and not as: A equals B. A represents the place the data is going to, in this case strRiddle. B represents the data which is being sent. So we would write the following code:

      strRiddle = "What did the elephant take with it on vacation?"

      In this case we are entering the riddles right into the program itself. That means we will not be able to change them without coming back into the code and rewriting it. This is a significant limitation on a program, but acceptable for the present. Notice that the riddle is enclosed in double quotes. This is necessary for all language type data. Since the stuff inside the quotes is the actual data, we call it a literal meaning it is literally the actual data. Now lets code for the answer:

      strAnswer = "Its trunk!"

      Add a comment like we did for the Exit procedure and we are finished this procedure. Now repeat this procedure for the other two radioButtons: Riddle 2 and Riddle 3.

      Now we are ready to cause the riddle and answer to appear then the Show Riddle and Show Answer buttons are clicked. Return to VB Studio's Design view and double-click the Show Riddle button. The code here is very simple. We assign the contents of strRiddle to the text property of the designated label. The line of code should look like this:

      lblRiddle.Text = strRiddle

      Do the same thing for the Show Answer button. The line of code for that procedure should look like this:

      lblAnswer.Text = strAnswer

      Make sure you have added a comment for documentation to each procedure and you are finished the Three Riddles program. At this point you need to run the program. If it will not run then you have some errors in your code. You need to run the program and fix the errors until you have found and fixed all the errors. For small programs this is possible, for large programs it is a never ending process.