Small Basic: Flower Anatomy Quiz

Flower Anatomy Quiz

In this section, we’ll create an educational game that quizzes the player on the parts of a flower. The Figure below illustrates the application’s user interface. The player will enter the letters to match the labeled parts of the flower and then click the Check button to check the answers. The program compares the user’s answers with the correct ones and provides feedback using the green check mark and the red X icons next to each answer.

https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/33/74/6518.FLowerQuiz.png

Figure: The user interface for the flower quiz

The application uses three arrays. The first one, part, has the names of the nine parts of the flower, which is drawn on the interface, to the right of the edit boxes. The second one, correctAns, contains the letters that correspond to the right answers for the nine parts of the quiz, and the third (named edit) contains the identifiers for the nine edit boxes, where the player will enter his answers.

Initialization

Start by adding the game’s initialization code shown in Listing 1 below.

Listing  1:

 1  ' FlowerAnatomy.sb

 2  ' Implements a Flower Anatomy Quiz

 3

 4  GraphicsWindow.Title     = "Flower Anatomy Quiz"

 5  GraphicsWindow.CanResize = "False"

 6  GraphicsWindow.Width     = 480

 7  GraphicsWindow.Height    = 360

 8

 9  part = "1=Anther;2=Filament;3=Ovary;4=Ovule;5=Petal;6=Recepticle;7=Sepal;8=Stigma;9=Style"

10  correctAns = "1=b;2=g;3=e;4=h;5=a;6=f;7=i;8=c;9=d"

11  path       = Program.Directory

12  bkgndImg   = path + "\Background.png"

13  yesImg     = path + "\Yes.png"

14  noImg      = path + "\No.png"

15

16  CreateGUI()    'create the user interface

17  Controls.ButtonClicked = OnButtonClicked

First, we initialize the GraphicsWindow and set its size to match that of the background image (lines 4-7). Lines 9-10 initialize the part and correctAns arrays using string initializers. We then construct the names of the three images by appending their names to the application’s folder (lines 11-14). After that, we call CreateGUI() to create the application’s user interface (line 16) and register a handler to process the Check button (line 17).

CreateGUI()

Let’s now move to the CreateGUI() subroutine shown in Listing 2.

Listing 2:

 1 Sub CreateGUI

 2  GraphicsWindow.DrawImage(bkgndImg, 0, 0)

 3

 4   For N = 1 To 9

 5     yPos = 20 + (N - 1) * 30

 6     edit[N] = Controls.AddTextBox(370, yPos)

 7    Controls.SetSize(edit[N], 25, 25)

 8    GraphicsWindow.DrawText(400, yPos + 5, part[N])

 9   EndFor

10

11   Controls.AddButton("Check", 370, 300)

12 EndSub

The subroutine starts by drawing the background image (line 2). It then starts a For loop to create the nine edit boxes and draw the names of the nine parts (lines 4-9). In each iteration, we set the vertical position of one edit box (line 5), create it and resize it (lines 6-7), and draw one label from the part array. The vertical position of each label is adjusted a little so that it appears aligned with the center of the edit box to its left. When the loop ends, the code creates the Check button (line 11).

OnButtonClicked()

The last part to add is the ButtonClicked handler shown in Listing 3.

Listing 3:

 1 Sub OnButtonClicked

 2   For N = 1 To 9

 3     yPos = 20 + (N - 1) * 30

 4     ans = Controls.GetTextBoxText(edit[N])

 5     ans = Text.ConvertToLowerCase(ans)

 6     If (ans = correctAns[N]) Then

 7       GraphicsWindow.DrawImage(yesImg, 350, yPos)

 8     Else

 9       GraphicsWindow.DrawImage(noImg, 350, yPos)

10     EndIf

11   EndFor

12 EndSub

This subroutine runs a For loop that reads and checks the nine answers input by the player. In the Nth iteration, we set the vertical position for drawing the yes/no image for the Nth answer (line 3), get the Nth answer by reading edit[N] (line 4), and convert this answer to lowercase letter (line 5) using the Text object. This way, if the player entered A or a, ans will be set to lowercase a and we can compare it directly with its corresponding entry in correctAns. You’ll learn more about the Text object and its methods here.

After reading the Nth answer, the code compares it with correctAns[N]. If the two letters match, then the players answered correctly, and you draw the Yes image to the left of its edit box. If the letters don’t match, we draw the No image.

The game’s complete! Run it to see how it works, and then think of some ways to improve it!

See Also

• Coming soon!