Task 7: Hiding and showing the gapfill word list in JCloze

1.

First, open the hp6.cs_ file from your custom source folder in your text editor. Find this section:

.ClozeWordList{
  text-align: center;
  font-weight: bold;
}


Modify it like this:

.ClozeWordList{
  text-align: center;
  font-weight: bold;
/*MDH_Custom: added the next line to hide the word list initially.*/
  display: none;
}


2.

Find the Hot Potatoes source folder, and copy the jcloze6.ht_ file into your custom source folder. Open this file in your text editor.

3.

Find this block of code:

<div id="WordsDiv" class="StdDiv">
<span id="WordList" class="ClozeWordList">[strWordList]</span>
</div>


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.