Multiple Choice 3
 Up
Part 1 of the Multiple Choice project gave you a testing program which you brought to full functionality by adding the code to grade the user's responses. This part shows you how to make the program more powerful and more interesting with added pictures, sounds and even videos.

Before you add pictures to your project you will need to decide whether to use a picturebox control or an image control. In this case I recommend the image control because it has a useful stretch property that you can use to make sure that each picture has dimensions appropriate for your form. If you want to include several pictures for different questions you might be tempted to put each one into a separate image control but if there are more than three of four pictures this becomes cumbersome for there will be too many image controls on your form. A better approach would be to place the desired picture files into the same folder as your project and then use only one image control, with code to set the picture property of the control to point to the right picture file. If you have a picture file called mypic.jpg stored in the same folder as your project and an image control called img1 on your form then you could use the following code to set the picture property of the image control:

	Set img1.Picture = LoadPicture(App.Path & "\mypic.jpg")

On your form, make space for the image control by making the textbox smaller, then add the image control as shown, making sure that both the width and height of the control are equal to 3000 twips for we will use this value in our code. Change the name of the image control to img1 and leave the stretch property set to false for the time being.

We will use an array to contain the names of the various picture files. Create the array by adding this line at the top of the code window:

Dim picname()

This array can't be used yet for its size has not been set. Set the size of the array by adding this line to the Form_Load procedure, just after the existing Redim line:

Redim picname(numq)

Let's replace the VB question bank with some questions about Hollywood. Notice that most questions have a picture file associated with them, but one does not.

Private Sub FillArrays()
question(1) = "Who is this actor?"
ans(1, 1) = "John Malcovich"
ans(1, 2) = "George Cluney"
ans(1, 3) = "Van Damme"
ans(1, 4) = "Richard Burton"
correct(1) = 3
picname(1) = "actor.jpg"

question(2) = "Who is this actress?"
ans(2, 1) = "Nicole Kidman"
ans(2, 2) = "Catherine Deneuve"
ans(2, 3) = "Rachel Welch"
ans(2, 4) = "Uma Thurman"
correct(2) = 2
picname(2) = "actress.gif"

question(3) = """Fox Mulder"" is a character in..."
ans(3, 1) = "Big Brother"
ans(3, 2) = "American Beauty"
ans(3, 3) = "The X Files"
ans(3, 4) = "Friends"
correct(3) = 3

question(4) = "What movie is this image taken from?"
ans(4, 1) = "Atlantis"
ans(4, 2) = "Titanic"
ans(4, 3) = "The Poseidon Adventure"
ans(4, 4) = "Pearl Harbor"
correct(4) = 4
picname(4) = "harbor.jpg"
End Sub

Notice how 'double double quotes' are used in question 3 to make double quotes appear in the question. You cannot use 'single double' quotes inside a text string, for VB will interpret them as the end of the string.

Now right-click each of these pictures and save them to the same folder that contains your multiple choice project. Don't change the name of each file.

At last we are ready to add the code to show the pictures when the corresponding questions are displayed. Add this code just before the End Sub of the SetQuestion procedure.

If picname(qno) = Empty Then
    img1.Visible = False
Else
    img1.Picture = LoadPicture(App.Path & "\" & picname(qno))
    img1.Visible = True
End If

This is easy to understand - if no picname has been set for a certain question then the image control is made invisible otherwise the correct picture is loaded into the control and then made visible. When you run the program, the pictures should appear at the right times but they are much too big. Turn on the stretch property of the image control and try again. That's much better now but, since each picture is resized to 3000 twips x 3000 twips, some of the pictures look distorted. Solution: replace the above code with

If picname(qno) = Empty Then
    img1.Visible = False
Else
    img1.Stretch = False
    img1.Picture = LoadPicture(App.Path & "\" & picname(qno))
    aspect = img1.Height / img1.Width
    img1.Stretch = True
    If aspect > 1 Then
        img1.Height = 3000
        img1.Width = 3000 / aspect
    Else
        img1.Height = 3000 * aspect
        img1.Width = 3000
    End If
img1.Visible = True
End If

The stretch property is turned off momentarily so that the picture is loaded full-size, with an undistorted shape. Then the 'aspect ratio' (height/width) is recorded. Then the stretch property is turned on, changing the image control's dimensions to 3000 x 3000. Then the image is resized so that the picture appears with the correct shape, with its largest dimension set at 3000 twips.

Try adding some sounds to certain questions in the same way that we have added pictures. Sound files can be downloaded form the Internet - WAV format sounds are a good choice. Store the names of the sound files in an array (you could call the array 'sound' for example). Add a 'Play Sound' command button to the form, and make the command button appear only for those questions that need it. You can get the code for the command button and the necessary function declaration from the project called Sound.

You can even add video to certain questions. The video files (you can download some from the Internet) should be in the AVI, MPEG or MOV format and should be saved into the same folder as your project. The process of showing videos is similar to that for pictures except that a Windows Media Player control is used in place of the image box. (After some experimentation, I find the Media Player to be easier to use than the OLE control). The Media Player tool is not a standard part of the toolbox but can be added by choosing Project>Components, selecting Windows Media Player and then clicking OK. Once you've added a Media Player control to your form you should rename it mpl1, then you can add code to set the filename property of the control like this:

mpl1.filename = app.path & "\myvideo.mov"

The media player control has a built-in play button so you don't have to write any special code to play the movie.

If you store the names of the video files in an array as we did for the pictures files, then the above line would become (assuming the array is called video)

mpl1.filename = app.path & "\" & video(qno)

Previous Up