Tutorial on "Create word game"

“Create word game” is a new feature at Learning Chocolate. You just simply prepare your images and vocabularies, and our tool will help you create the sounds and games like the word games in our website.

In this tutorial, you will take about 20 minutes to create a simple word game. The image in Figure 1 will be used for this game. Please right click on it and choose “Save image as” to save the image.

Figure 1

If you have already registered an account, you can log in directly and skip to next section.

If you haven’t registered, click “Register” on front page. A registration form will appear. Fill in your username, email and other optional information, and then click “Create new account”. After a while, you will receive a confirmation email which contains your password. Use your username and this password to login. After login, you will notice that there is a new menu item “Create content” on the menu bar. Select “Create content” -> “Word Game”. Now you come to “Create Word Game” page.

Language

Choose “English” for this tutorial.

Title

Enter “Living Room, tutorial” as the title of this game.

Content

Figure 2

1. Click “+ Image” in Figure 2(1) to add image(s). Select the image downloaded in Figure 1 and click “Open”. When completed, the editor message box will prompt "Upload progress: completed.”

   Note: If you want to upload more than one image, you can press “Ctrl” to select them.

   
   Figure 3

   Click the image to select it. Move the cursor over the image, you will see a cross arrow appear next to the cursor. Press left mouse button and hold on, and then move the image to the center of the yellow background and release button, as in Figure 3.

   Note: After selecting the image, some basic image editing tools are available, such as moving, scaling, rotating, and skewing. To scale the image while maintaining the x-y ratio, press “Shift” and drag the box at the corner of the image.

2. Click “+ Vocabulary”, as in Figure 2(2), to add the first vocabulary. “vocabulary #1” will appear at the upper-left corner, as in Figure 4.

   
   Figure 4

   1. Go to “Spelling” box, as in Figure 4(a). Enter “ceiling” for the first vocabulary.

   2. In Fill-in game, sometimes there may have more than one reasonable answer. Please enter those answers in the box in Figure 4(b). For “ceiling”, there is no alternative answer in fill-in game. We just leave it blank.

   3. Click the “Sound” combo box in Figure 4(c). Select “Generated by machine 1” and click “Generate Now” button. When completed, the editor message box will prompt “Generating sound ……completed.” Then the sound icon’s color will change from gray to black. Click the black sound icon in Figure 5, to check the sound quality. You should hear the pronunciation of “ceiling”.

      
      Figure 5

      Note: For English, you can choose the sound to be generated by machine or to upload your own sound file. For other languages, you can only choose to upload your sound file at this moment.

   4. Click “Spelling, sound icon” combo box, as in Figure 4(d), choose the default option “Left -> Right” for vocabulary “ceiling”.

      Note: There are four options provided, shown in Figure 6. Depends on situation, you can choose the one that you feel the best.

      
      Figure 6

   5. Check “show outline in game mode” checkbox, as in Figure 4(e). You can see gray fill-in box and sound icon shown on each vocabulary, like Figure 9. Click on “Alignment in game mode” combo box and select “Left” for vocabulary “ceiling”. Uncheck “show outline in game mode” checkbox.

      Note: You may keep “show outline in game mode” checkbox checked throughout the editing if those auxiliary outlines do not affect your editing work.

      Understand what is “alignment in game mode”:
      When user plays the game, the vocabulary will be replaced by a box in match-up 2 / fill-in game or a sound icon in match-up 3 game, as in Figure 7. The alignment is to tell the computer how the box and sound icon aligned with the vocabulary in game mode.

      
      Figure 7

      Since the width of vocabulary, fill-in box and sound icon are different, correct alignment should be set to make them shown at appropriate location when user plays the games. Figure 7 shows the outcomes of correct alignment and misalignment. You may check “show outline in game mode” checkbox and try to change the alignment option. You will see the difference.

      You may note that the width of all fill-in boxes are the same so as to avoid the user easily guessing the answers simply by box width hint. Besides, the red cross next to the fill-in box and sound icon is a icon to indicate if the player's answer is correct or not.

   Click on vocabulary “ceiling”, move the cursor over the vocabulary and a cross arrow will appear next to the cursor, as in Figure 8. Press and hold, move the vocabulary to the right position shown in Figure 8, then release.

   
   Figure 8

   Repeat the above steps to add other vocabularies according to the below table and complete it as in Figure 8.

   Spelling	Other fill-in answers	Sound	Spelling, sound icon	Alignment in game mode
   ceiling	[blank]	Generated by machine 1	Left -> Right	Left
   clock	[blank]	Generated by machine 1	Left -> Right	Center
   coffee table	[blank]	Generated by machine 1	Left -> Right	Center
   vase	[blank]	Generated by machine 1	Right -> Left	Right

3. Check “show outline in game mode” checkbox. Click “+ Line” in Figure 2(3). Click a start point near to the gray sound icon of vocabulary "ceiling". Click an end point indicating the ceiling in the image. Repeat this step for other vocabularies as in Figure 9. Upon finished, click “+ Line” again or press [Esc] to exit.

   
   Figure 9

   Understand more about “+ Line” operation:
   Be aware that once click “+ Line” to start, it will continue to add single lines in a way of start->end->start->end->… until you click “+ Line” again or press [Esc] to exit. If you want to edit or delete the line, click “+ Line” to exit first, then select the line to do so.

Appendix

There is no any extra information needed for this game, so just leave it blank.

Figure 10

Category

Select “Home”.

Cover image

Click “Browse” and select the image you downloaded before. Click “Upload”, and the image will be automatically downsized to fit 100 x 80 pixels.

Understand what is Cover image:
Cover image is the thumbnail icon to represent your game on the front page, as in Figure 11.

Figure 11

Status setting

Since this is only your trial game, select “Draft” for this purpose. For your formal game release, please select “Public”.

Preview and Save

Now all steps have been completed. Before saving, let’s have a preview first.

Click “Preview” button. Check the spellings, try the pronunciations and play the games. Especially play match-up 2 and 3 games to see if the fill-in boxes or sound icons are displayed at good locations. If everything goes fine, click “Save” button to save your work.

Congratulations! Now you have finished this tutorial. I hope you enjoy creating your own games!

If you find any bugs or have any suggestion, please feel free to send me an email!

Further Information

There are some useful image websites. You may collect good images for your game.