Office hacks: not programming to create interactive fill-in-the-blank courseware

When creating test courseware, the most used slides are multiple-choice slides. This type of slide requires not only the ability to complete the selection or input of items, but also the ability to automatically determine one or more results of the answer after the answer is submitted (Figure 1). In fact, it is possible to create an interactive fill-in-the-blank slide without resorting to any lengthy code. Just make full use of the input-based variables in the Articulate Storyline 3 software.

1824A-JHST-1

1. Interface Design

Open Articulate Storyline 3 and create a new project. In the Story View state, double-click “Untitled Slide” to enter the editing window. Right-click on the blank space, select “Set Background Format”, and set the desired background in the pop-up window; switch to the “Design” tab, click “Article Size”, and set the slide size in the pop-up window. Set the size of the slide in the pop-up window as needed. Switch to the “Insert” tab, click “Picture → Picture from File” to insert the required illustration, and then use shapes, text boxes, etc. to insert decorative elements and necessary text descriptions; next, click “Input → Data Entry → Text Input Word” in turn. Input → Data Entry → Text Input Field”, draw an input box at the right place on the slide, select this input box, set its border, fill color, font and font size, etc. When an element is inserted in the slide, the corresponding element name and content will be displayed on the timeline. In order to distinguish these input text boxes, you can double-click on the corresponding timeline of the elements to change their names, such as the first input text box can be changed to “sz1”, the second input text box will be changed to “sz2”, and so on. and so on. Then insert a button and set its icon and text. In this way, the interface of the interactive fill-in-the-blank slide is designed (Figure 2).

1824A-JHST-2

2. Add an interactive display

On the right side of the “Slide Layer”, click “New Layer”, double-click the name of the new layer, change it to “Correct”, and use the shapes in this layer or In this layer, use shapes or other images, etc., to design the interface that you want to display when you are correct. Create a new layer, change its name to “Error” and design the interface for this layer as well (Figure 3).

1824A-JHST-3

In this interaction, the “correct” answer may be “6 times 3 plus 2”, “3 times 6 plus 2”, or “3 times 4 plus For this reason, it is necessary to consider all possibilities in order not to miss all the correct answers and to make the design perfect. The following is an example of the first two cases of “correct” interactions.

Switch to “Base Layer”, select the “Finish” button, add a new trigger, select “Show Layer” at the pop-up window operation, select “Correct”, select “User Click” at the time, select “Button 1” at the object, click “Show Conditions “, click “+”, select “Variable” in the pop-up window, select “Text input question” at if (i.e. sz1), select the operator “== equal to”, select “value” at the type, enter “6” at the value (this number is the number of each line of the picture), then click “+ “, select “AND” at “and/or” in the pop-up window, select “Variable” at the list, and select “If” at text input question 1″ (i.e. sz2), select “== equal to” at the operator, select “value” at the type, and enter “3” at the value “(i.e. the number of pictures), then click “+”, select “AND” at the pop-up window “and / or”, and select “variable” at the list. “Variable”, select “text input question 2” (that is, sz3), select “== equal to” at the operator, select “value” at the type “, enter “2” at the value (i.e., the number of images that do not meet the line), and then click “+”, select “AND / OR” at the pop-up window “AND”, select “Variable” in the list, select “Text input question 3” (i.e. sz4) if, select “== is equal to”, select “value” at the type, and enter “20” at the value (i.e., the result of the calculation). Thus, the first case about “correct” is expressed.

Next, set the second interaction case of “correct”. Add a new trigger, select “Show Layer” at the pop-up window operation, layer, select “correct”, time, select “user click”, object, select button1″, click “Show conditions”, click “+”, select “Variables” in the pop-up window, and then select “Text input question”. If you choose “text input question” (i.e. sz1), choose “== equal to” at the operator, choose “value” at the type, and enter ” 3″ (this number is the number of each line of the picture), and then click “+”, select “AND” at the pop-up window “AND/OR”, and at the list Select “Variable”, select “Text Input Question 1” (i.e. sz2), select “== equal to” at the operator, select “Value” at the type. value”, enter “6” at the value (i.e. the number of pictures), then click “+”, select “AND/OR” at the pop-up window “AND”, select “Variable” in the list, select “Text input question 2” (i.e. sz3) if, select “== equal to”, select “value” at the type, enter “2” at the value (that is, the number of images that do not meet the line), and then click “+”, in the pop-up window Select “AND” at “AND/or”, select “Variable” at the list, and select “Text input question 3” if “(i.e. sz4), choose “== equal to” at the operator, choose “value” at the type, and enter “20” at the value (i.e. the (the result of the calculation). This completes the expression of the second interaction case. If there are other cases, you can follow them (Figure 4).

1824A-JHST-4

By the same token, the “error” prompt display settings are similar to this. If you add a new trigger, select “Show Layer” at the pop-up window action, select “Error” at the layer, select “User Click” at the time, select “Button 1″ at the object. button 1”, click “Show conditions”, click “+”, select “Variable” in the pop-up window, and then select “Text input question”. Select “text input question 3” (i.e. sz4), select “! = not equal to”, select “value” at the type, and enter “20” at the value. Thus, when the result of the calculation is not equal to “20”, an error message will be displayed. If there are other cases, follow the same procedure (Figure 5).

1824A-JHST-5

3. Publish the work

Click the “Player” button, and in the function tab of the pop-up window, remove all the checkboxes of resources, menus and so on. Finally, click the “Publish” button, select the Web tab in the pop-up window, enter the title, set the publish folder, and publish.

Leave a Comment