HOW TO CREATE AN HTML5 JEOPARDY- STYLE GAME IN CAPTIVATE This document describes the steps required to create an HTML5 Jeopardy- style game using an Adobe Captivate 7 template. The document is split into five sections: 1. Open the template and add the interaction 2. Configure the interaction 3. Enter questions and answers 4. Test the interaction 5. Publish the project 1. OPEN THE TEMPLATE AND ADD THE INTERACTION 1. Open Adobe Captivate and click File > Open. Browse to the file emate- captivate- template.cptl. 2. Click File > Save As to save the template as a Captivate (CPTX) file. You may need to manually enter the CPTX extension in the Save As dialog. To ensure web capability later, use lower case, no spaces, and no special characters in the file name. Example: my- new- project.cptx. Save As dialog 3. You now have a blank project with one slide as seen in the Filmstrip panel. 1
Default slide 4. In the menu, select Insert > Interaction. 2
Insert > Interaction 5. In the Select Interaction dialog, select Jeopardy. Then, click Insert to add it to the slide. Select Interaction dialog 2. CONFIGURE THE INTERACTION You can configure several options in the game, including name, number of columns and rows, and currency. Note: When adding text information to this interaction, do not use special characters such as the ampersand, as this seems to prevent the interaction from displaying in HTML5. 1. In the Name field, enter the game name. In this example, The Answer Is.. is the game title. Note: There is a 15 character limit in the game name. 3
2. Enter any custom instructions in the Instructions field. 3. Enter the number of columns for the game in the Topic counter, and the number of rows in the Question counter. In this example, we will have five columns and rows. 4. Click the Create Grid button to set up the table. Create Grid 5. The grid is now set up with the appropriate number of columns and rows. By default, each column header is labeled Topic1 through Topic5. Double- click on the names to enter custom labels. Note: There is an eight- character limit in the column header. Topic titles 3. ENTER QUESTIONS AND ANSWERS 1. Click on the first topic to begin adding questions and answers. 2. Enter the first question, its answer choices, and feedback to be displayed to the user upon submission. 3. Click the radio button adjacent to the correct answer. 4. If necessary, change the time allowed (in seconds) and value (in points) in the Time and Score fields. 5. If you wish to have more than two answer choices, click the Add Answer button. Likewise, click the Delete Answer button to remove an answer choice. Note: You must have at least two answer choices. 4
Completed question 6. Click the radio button next to the correct answer. 7. Click the next Question=> bar to configure the next question. Question=> button 8. Repeat steps two through five to populate this question. 9. Continue with this process until all questions in all topics have content. 10. When complete, click OK. This completed interaction is placed on the slide. Note: Some hint buttons may appear to you, but they will be hidden from the user. 5
Interaction on slide 4. PREVIEW PROJECT Once your interaction is set up, preview the project to ensure that all elements function as expected. 1. In the toolbar at the top of the screen, click the Preview button. Select HTML5 Output in Web Browser. 6
Preview > Select HTML5 Output in Web Browser 2. Captivate generates a preview of your project using your default browser. Test all elements thoroughly. If revisions are needed, preview and test again. 7
Browser preview 5. PUBLISH THE PROJECT Once you are satisfied with your previews, you are ready to publish your Captivate project. 1. Click File > Publish. The Publish dialog appears. 2. Enter your project title in the Project Title field. 3. Under Folder, browse to the destination folder on your hard drive where you want to save the completed files. 4. Under Output Format Options, uncheck SWF and check HTML5 if necessary. 5. Under Output Options, uncheck Zip Files if necessary. Publish dialog 6. Click Publish. 7. Locate the published files in your computer s file manager. 8. Double- click the index.html file to test the project again. 8
Published files on computer Note: If you move the project to a new location on your computer, be sure to move all of the files and associated folders, not just the index.html. 9