As you all are aware, we launched an HTML5 contest where you can win an iPad by submitting your HTML5 courses that you have created using Adobe Captivate. All you need to do is convert it to HTML5 format using HTML5 converter for Adobe Captivate 5.5. In that context, I thought of creating a sample project to showcase the power of HTML5 converter. I was contemplating on couple of subjects but finally my favorite topic won… Basics of Photography.

Try and Learn is a very popular method of teaching any subject. I thought of making use of that principle to teach the concept of Aperture and Shutter Speed in Digital Photography where-in, learner would choose an Aperture setting for a given focal length and try different shutter speeds for those settings.

Converting the content to HTML5 using HTML5 Converter for Adobe Captivate 5.5 can be really interesting if we consider few thing while creating content.

Do you want to see how the final project look? Visit http://als.adobe.com/phbasics/

Modify the following code in the html file. You need to add the highlighted part in the html file.

<div id=’frameSlider’ class=’slider shadow’ style=’width:460px;box-shadow: 2px 1px 5px #888888;display:none‘></div>

<div id=’progressPercentage’ style=’width: 100px;position:absolute; right: 2px; bottom: 2px;display:none‘ class=’progressPercentageLabel’> 0 of 0 </div>

<div id=’prevButton’ class=’backButton’ onClick=’goToPreviousSlide()’ style=’display:none;’></div>

<div id=’playPauseButton’ class=’playButton’ onClick=’playPause()’ style=’display:none;’></div>

<div id=’nextButton’ class=’nextButton’ onClick=’goToNextSlide()’ style=’display:none;’></div>

Hope you liked the post! Please let me know your thoughts by adding a comment below.