Add a button and a linebreak to the code, like this:
<div id="WordsDiv" class="StdDiv">
<!--MDH_Custom: added a button to show and hide the word list.-->
<button onclick="ShowHideWords()">Show/hide words</button><br />
<span id="WordList" class="ClozeWordList">[strWordList]</span>
</div>
4.
Finally, we need to add the code which hides and shows the wordlist when we click on the button. We can do this at the top of the file, by adding a special JavaScript tag containing the code. Scroll up to the top of the file, and find this:
<script type="text/javascript">
//<![CDATA[
<!--
This is the tag into which JCloze inserts all the JavaScript code. We can add our code immediately after this. First, add your explanatory comment:
//<![CDATA[
<!--
//MDH_Custom: Added a function for showing and hiding the answer list.
5.
Now add this JavaScript function right after your comment:
function ShowHideWords(){
var W = document.getElementById('WordList');
if (W.style.display != 'block'){
W.style.display = 'block';
}
else{
W.style.display = 'none';
}
}
6.
Now make a little JCloze exercise to test your code. Remember to check the option to "Include word list with text" in the configuration screen. Here's an example.