We’re going to introduce the Button Object in QTI2 using a simple project that will let a child click on a number and then have the corresponding number of graphics appear accompanied by a voice file saying the name of the number.

Additional examples of the Button Object can be seen in "Samuel's Journey" and in the "Play the Piano" projects (specific to QTI2 but would also work in eZediaMX)  available at this site.



The Button Object has some unique powers that can trigger a single event, or multiple events at the same time.  In this practice exercise, we’re going to have the Button Object trigger two events at the same time.

You’ll begin by choosing a color for the frame, then creating the text objects, followed by the graphics that will appear when the number is clicked, and then you will make the Button Objects and link the elements together. If you don’t know (or remember) how to create the audio files, refer to the instructions for that exercise to get them ready.

A complete walk-through of the project is available as a movie. It is about a 1.8 MB download. If you're on dial-up, I'd suggest you download the movie to your computer and then watch it.

You'll need RealPlayer. See how to get it at this link.

Let’s begin . . . .

1. Open QTI2. Make sure you have a blank document frame open in front of you. If not, click on File > New > Document.

2. Open the Attributes Panel.

3. Click on the Frame tab. Click on the color box for the Frame. Change the color by choosing a different one from the Color dialog box. Click OK.

4. Click on the Text Object (looks like the letter “A”).

5. Type the following:
    Click on the number to see the shapes.

6. Click, hold, and drag across the text to select it. Click on Format, Font, and choose a larger, legible font - Arial, Times Roman, Comic Sans, etc. - and about a 24 point size. The color should contrast well with your frame color that you chose. Stretch out the edges of the text box you’ve created to accommodate the larger print. Position it in the upper, left-hand corner of the frame as you saw in the model.

7. Create another text object. Type in the numeral “1.” Select the text and then go to Format, Font, and choose a font like you did in Step 6. Make the font much larger - about a 65. That number doesn’t appear on the list. You can just type it in at the top.

8. Shrink the text box to fit the number.

9. Duplicate the text box (hold down the CTRL key and touch the letter “D”). Make a text box for 2 and 3.

10. Convert all 3 text boxes with numbers to graphics by selecting them (clicking on them so that little handles appear around them) and then going to Objects > Convert to Picture.

11. Position the objects so they are lined up on the frame at the same height. You might want to click on View > Grid > Show Grid Settings. Create a grid the size you like and then line things up.

12. Click on the Shape Object. For the sake of efficiency, create a standard shape - rectangle, square, circle, etc. Create the object. Change the fill and line colors, as well as the line thickness by clicking in the color boxes and sliding the line thickness gauge in the Attributes Panel. Convert the object to a graphic (see Step 10).

13. Duplicate the object (see Step 9) 5 times.

14. Position the shapes in individual columns under the numbers. Use the grid to line things up or Objects > Align Selection.

15. Click on the Button Object.

16. Move the Button Object over the number 1. Stretch it out to cover the number. With the Button Object selected, look at the Attributes Panel. Type the word “Show” for the title of the object. UNCHECK visible.

17. Duplicate the Button Object and put one over each of the other two numbers.

18. Click on the Link Object. Create a link FROM the Button Object TO the shape. Do that for each number and their corresponding shapes.
    Hint: Once you click on the Link Object, you can just hit the Space Bar to activate it again immediately.

19. Save your project. Make sure you know which folder it is going into in My Documents.

20. Click on File, Export as Interactive Movie.

21. Again - make sure you know where you are saving this exported file.

22. If the file doesn’t come up in the browser right away, click on Start > My Documents and browse to where you have your folder. Click on the HTML file that goes with your movie and check out how well it is working. Do the shapes show up when you click on the numbers?

23. If there are any problems, you can correct them in your project working file. Close your browser.

24. Return to QTI. It should still be open. Look at your taskbar at the bottom of your screen to find it.

Adding the Audio Files
25. Now that you are back in QTI and your project is in front of you, we are going to add the audio files. You will have already created 3 short audio clips where you have said the numbers. To add them to the project, click on the Movie icon. (We use that for vr’s, movie clips, audio files, animated gifs, etc.) Browse to where your first clip is located. Click on it. Click Open.

26. Click on the Link Object in the tool bar and draw a link from the Button Object to the audio clip. When the project is exported, the student clicks on the number, the shape appears and they also hear the audio clip.

27. Bring in the clips for each and connect them to the Button Objects.

28. Save your file.

29. Click on File, Export as Interactive Movie.

30. Browse to your folder and click on the HTML file to launch the movie. Check out your connections.


The completed QTI2 project working file is available as a zipped file through this link.