Task 9: Using an image instead of a button

1.

First, we need to get the image we're going to use instead of the button. You can find a good one here:

http://web.uvic.ca/hcmc/clipart/school/correct/correct-vt.gif

Save the image to the folder on your hard drive where you are creating exercises.

2.

Now open the jcloze6.ht_ file from your custom source folder in your text editor. Find this section, which is the check button below the exercise:

<button id="CheckButton2" class="FuncButton"
onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)"
onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)"
onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)"
onclick="CheckAnswers()"> [strCheckCaption] </button>

3.

Now add an explanatory comment, and also comment out the existing button, by putting <!-- before it and --> after it. You should see something like this:

<!-- MDH_Custom: Commented out the existing button to use an image instead.-->
<!-- <button id="CheckButton2" class="FuncButton"
onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)"
onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)"
onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)"
onclick="CheckAnswers()"> [strCheckCaption] </button>-->

4.

Now we're going to insert the image itself. Add this code below the old button:

<img src="correct-vt.gif"
alt="[strCheckCaption]"
title="Check your answer"
onclick="CheckAnswers()"
style="cursor: pointer;" />

5.

Now add a comment below, to show where your modifications end:

<!-- MDH_Custom: End of modification to Check button.-->

6.

Now save your changes, and make a little JCloze exercise to test your code. It would be a good idea to uncheck the "Include 'Hint' button" checkbox in the configuration screen, so that you don't have an ordinary HotPot Hint button right next to your new image. Here's an example.