Office hacks: drag-and-drop word spelling courseware production

If you want to test the mastery of a word through a drag-and-drop word spelling game, that is to say, you first mess up all the letters of a word, and then drag the letters to the corresponding box by mouse, if each letter is correctly dragged and dropped into place and can spell out the corresponding word, then you score, otherwise you don’t score, such a lesson is not easy to create in Powerpoint. In fact, such a game is easier to implement in Articulate Storyline 3 without Powerpoint. Let’s walk through the process of creating it (Figure 1).


1. Design Interface

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 size of the slide in the pop-up window according to your needs. Switch to the “Insert” tab, click “Picture → Picture from File” to insert the illustration you need; click “Shape → Rectangle” to draw a square, right-click it, select “Edit Text”, and then click “Edit Text”. Select “Edit Text”, enter a letter that makes up the word, set its style and text color, size, etc.; according to the number of letters that make up the word, copy and paste the corresponding number of squares, and change the text of the corresponding letters, disrupt the order of these squares, the top alignment. Then use “Shape→Rectangle” to draw the corresponding number of squares, fill color is none, arrange them together, the top alignment, these squares are used to store the dragged-in squares with letters. Thus, the interface is designed (Figure 2).


2. Changing the Timeline

When an element is inserted in a slide, the corresponding element name and its content will be displayed on the timeline. In order to distinguish them, you can change their names by double-clicking on the corresponding timeline of the element, such as the rectangle where the letter “a” is located, you can change its name to “a”, the rectangle where the letter “g ” in the rectangle, you can change its name to “g”, and so on. And the name of the square with letters used to store dragged in from left to right in the order of the correct spelling of the word named, such as orange, English for orange, then the name of the filled square in time in the figure in order to “answer o”, “answer r”, “answer a”. “answer a” …… and so on (Figure 3).


3. Set the interaction effect

Switch to the “Insert” tab, click “Convert free-form questions”, and select “Drag and drop questions” in the pop-up window (Figure 4).


After confirming, select “Form View” in the “Issue” window on the right; in the “Drag Items and Place Targets” window, select the rectangle to be dragged (marked with a letter) at the “Drag Items”; select the rectangle it needs to be placed at the “Place Targets” (Figure 5).


Switch to the “Issue Tools → Design” tab, click “Drag Options”, in the pop-up window “Drag Item Options”, check “Return item to the starting point”, select “Any placement target”; in the “Placement Target Options”, check “Align placed items to the placement target”, select “Center Align”, and check “Only one item per placement target”; in the “Number of attempts”, select “No limit” (Figure 6).


Switch to Slide View, and on the right side of the Slide Layers, right-click on the Error layer and select Delete; select the Correct “layer, click the “Insert” tab, and insert the picture you need to display when the answer is correct, as needed. Of course, if the answer is wrong and you need to retry, you can select the “Retry” layer and insert the desired image in it. Thus, a drag-and-drop word spelling slide is created (Figure 7).


If you want to insert a new answer slide, you need to switch to the “Start” tab, click “New Slide→Free Form Questions”, select “Drag and Drop Questions” in the pop-up window, and then click “Insert Slide”. Click “Insert Slide”, a blank slide will be inserted (Figure 8). Other operations are similar to the above.


Tip: If you want to make each slide more beautiful, you can also insert some decorative pictures, etc., or use the “Animation” tab to add animation effects for the elements in the slide when they appear.

4. Publish your work

Click the “Player” button, in the pop-up window of the function tab, 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 finally publish it.

Leave a Comment