HyperStudio Project

HyperStudio Authoring

by Peter Desberg

Objectives:

Create a new HyperStudio stack.
Link buttons.
Set field and button properties.

Step 1 - Create a new HyperStudio Stack. When you open HyperStudio by double clicking on it, you open up the Home Stack. Click once on the New Stack button. You will be asked if you really want to start a new stack, it would be a good idea for you to agree.

Step 2 - Selecting Stack Background. When you create a HyperStudio stack, you may design cards that have elements in common. These occur on the background level. A background may share a common color.

Click on Erase Background... from the Edit menu.
Select the third color (light gray) in the first column.

Step 3 - Create border. To create the border you will select the line width, color and painting tool.

Double click on the Line tool to access the Line Width Selection dialog box.

Figure1. Line Width Selection Dialog Box.

Select the second line from the right, and click on OK.
Select the Gray Brick pattern from the Color menu.

Figure 2. Color Menu.

Select the Rectangle tool from the Tool menu.

Figure3. Tool Menu.

Step 4 - Adding Clip Art to the first card

Select Add Clip Art... from the File menu.
Select Disk File from the File menu and click on OK.
Select Computer 1, and use the Selection Rectangle to select the boy in front of the computer.

Figure 4. Card 1.

Step 5 - Creating the First Field. You can custom design a field to contain any font in any size and style you select. You will now design your title screen.

Click on the Objects menu, and select Add a Text Object...
Size the field by grabbing one of the corners and dragging it to your specification.
Click anywhere outside the text field to indicate that you have selected the location you want. This will bring up a dialog box to configure the appearance of your text (see Figure 5).
Deselect the four check boxes because you do not want to have any borders around your text.
Select the darkest green color for your text, and the same shade of gray for the background of your field.
Click on the Style button and customize the text and size to taste (I used Geneva as my font with bold, italic and shadow as the styles).

Figure 5. Text Appearance Dialog Box.

Repeat these steps for the second and third fields.

Step 6 - Creating a button.

Click on the Objects Menu, and select Add a button...

Figure 6. Button Appearance Dialog Box.

This will bring up a dialog box to configure the appearance of your button (see Figure 6).

Select the third button on the right (it is a rectangle made of a dotted line). This form of button will be invisible. Click OK.
Size the button by grabbing one of the corners and dragging it to your specification (around the computer in the graphic).
Click anywhere outside the button to indicate that you have selected the location you want. This brings up the Actions Dialog Box shown in Figure 7.

Figure 7. Actions Dialog Box.

Select a transition from the list presented. You may preview each one.
Click on Play a Sound, and select Click from the choices presented.

Step 7 - Create a New Card. You will place the basic mathematical rule that you are teaching on this card. By selecting a different style field for the rule and the text, you will differentiate them in terms of their importance.

Select New Card from the Edit menu.
Create a new field and type in the following:
Although reading goes from left-to-right...all mathematical operators are not evaluated from left-to-right. There are rules for the precedence of operators.
Create another new field on this card and click on Draw Frame.
Type in the following:
RULE 1: Multiplication is evaluated before addition.

Figure 8. Card 2.

Step 8 - Create two cards for feedback.

Select New Card from the Edit menu twice to create the two cards you will need to give correct and incorrect feedback.
Return to Card 2 by holding down the Command Key and pressing the Less Than (<) key on the keyboard.

Step 9 - Create Response Buttons. Now that you have stated the rule, you will test to see that students understand the rule by asking them to solve a problem that is an application of the rule.

Select Add a Button... from the Objects menu.
Click on the round rectangle button in the upper left corner.
Enter the number 19. This will represent the correct response.
Select the third row of the fifth column to choose the shade of light green for the text color.
Select the bottom row of the seventh column to choose the shade of dark violet for the background color for this button.
Click OK to indicate your selection.
The button will appear on the screen. Size it and move it to the location you want.
Click anywhere outside the button to bring up the Button Actions Dialog Box.
Select Next Card to indicate that the button should take the learner to the next card.
Select the visual effect of your choice.
Select Play a Sound, and choose Click.
Create an identical button and name it 27. This will represent the condition where the student adds first, and then multiplies.
Repeat the previous steps, but instead of clicking Next Card, select Another Card.
Click on the right arrow to take you to the last card and click on OK.
Select the transition you want and the Click sound.

Step 10 - Create the third field to present the problem and instructions.

Click on the Objects menu, and select Add a Text Object...
Size the field by grabbing one of the corners and dragging it to your specification.
Click anywhere outside the text field to indicate that you have selected the location you want. This will bring up a dialog box to configure the appearance of your text.
Deselect the four check boxes because you do not want to have any borders around your text.
Select the darkest violet color for your text, and the same shade of gray for the background of your field.
Click on the Style button and customize the text and size to taste (I used Geneva as my font at size 14.). Enter the following:
Click on a button below for an answer to this question:

4 + 5 * 3 = ?

Step 11 - Designing Feedback: Part 1 - The Correct Response (See Figure 9). Here you merely have to tell the user that their response was correct. We have suggested that you use the opportunity to review what they did correctly. From here you would go on with the lesson.

Create a new field by selecting Add a Text Object... from the Objects menu.
Enter Good...you multiplied before you added.

Figure 9. Card 3.

Step 12 - Creating a button. Follow the instructions for step 9, and add an icon.

Click on the Icons... button, and select the icon pictured above.
Select Home Stack as the action.

Step 13 - Designing Feedback 2: Incorrect Response. To get to this screen, the user would have had to get the problem wrong, violating the basic principle. You will use HyperStudio's linking power to take them back to the prior information screen so that they may review the material.

Click on the Edit Menu, and select New Card.
Create a new field on it, and type in the following:

Sorry...you added first, then multiplied. Click on the button below to see the rule and try the problem again.

Step 14 - Setting up the Response: Part 2 - Linking the Incorrect Button.

Click on the Tools menu and select the Button tool.
Double click on the button that has 27 on it.
Click on the Actions button and select Another Card.
Click on the right arrow to take you to the incorrect feedback screen, and click on the OK button.

Step 15 - Simple Remedial Looping. In HyperStudio, you can link any two cards together. Here you will link the incorrect feedback with the card carrying the original information. This will serve the user as a review.

Go to the incorrect feedback card.
Click on the Objects menu, and select Add a Button... and create the button show in Figure 10.
Type LET'S REVIEW
Link it back to Card 3 by selecting Another Card... in the Actions Dialog Box.

Figure 10. Card 4.

Faculty Using TwT | TwT Home Page