Tools - Interactive Gapfill Exercise Code Generator

For teacher bloggers etc

This has now been superseded by Version 2 which has been well tried and tested and I recommend you use it rather than this one.

With this generator you can make interactive gapfill exercises for your blog or web page. If you want to make an exercise without the interactivity, you can use just the HTML (without the buttons) and the CSS. You could also use this for generating worksheets, but you'd be better going to my Multi-function gapfill generator

1. Use the program to automatically generate a gapfill exercise
2. The program will also generate the HTML and Javascript code you need for this particular exercise and it's answers
3. Copy the rest of the Javascript and CSS code into your blog post or web page

Note - I've made some important changes to the instructions since this was first published.

Important warning - this code is offered 'as is'. I've tested it and it seems to be fine, but you use it at your own risk and I can't take any responsibility for anything that might go wrong.

Feedback - If you have any problems, please let me know in the comments below. If you've already published, let me know the web address of the page, and I'll see if I can diagnose the problem. In fact if you publish successfully, it would still be nice to have a link.

Strong recommendation - I strongly recommend you try this out on a text editor (EG Wordpad - see 'How do I make a web page version' below) before putting it on your blog. I do everything in a text editor first and try it out on my browser before publishing.

A. First create the exercise

You can choose yourself which words to gap, or for an instant exercise, you can use the automatic gap maker. This makes random gaps or takes away selected groups of words, for example: articles.

How to use - where you see ? mouse over for more details.

Probably the best way to see how it works is to play around with the examples and all the options for a few minutes.

Some general comments

There are really three types of exercise:

1. lists of questions with one gap per question
2. lists of questions with more than one gap per question
3. texts with more than one gap per paragraph

The main things to consider here are numbering and the tick facility. Do you want paragraphs numbered, both questions and gaps numbered etc - play around with the numbering to see what works best.

If you to use the tick facility, for single gap questions the best position is line-end, and for multiple gaps or texts, 'After gap' or 'None'. Again try generating an exercise, press 'Show', then 'Check' and see what works best.

1. Enter the title and instructions (optional): ?

2. Enter a list of questions or a text ? or: Load example Q list - raw Q list - gapped Text -raw Text - gapped Q list + EG

3. Give the exercise an Ex Num: ?

4. Make the gaps, manually ?
or automatically Show details

1. To make gaps manually, surround the words to be gapped with square brackets
- bla bla bla [gapword] bla bla bla. You can do this more quickly by copying and pasting your text into my Quick Gapmaker program

2. To make gaps automatically - Enter a text and then you have a choice:

2a. Make random gaps - Select: Qty ? Min Length ? and

2b. Use the preselector - Enter any words you would like gapped, separated by a comma (no space) into the box below. Or use the selector to automatically enter sets: articles. prepositions etc, to be gapped. Then click on 'Go'

Pre-select articles articles + some prepositions

Click here to restore the original text

5. Add required treatment to gapwords or text (optional) Show details

You can treat the missing words so they they appear differently in the exercise, but still show correctly in the answers.

Gap word treatment
Show base word	[have been walking\walk] only shows 'walk'
Show part of answer 1	[chair>s] will only show 'chair'
Show part of answer 2	[how to <get] will only show 'get'
Show part of answer 3	[have been <walk>ing] will only show 'walk'
Show more than the first letter	[st_ring] will show st...........
Text treatment
To make something Bold	Surround it with these opening and closing tags<b>word</b>
To make something Italic	Surround it with these opening and closing tags<i>word</i>
To Underline something	Surround it with these opening and closing tags<u>word</u>

6. Adding an example at the beginning (optional) Show details

You can start with an example by beginning the first line EG as in this . This really only works on lists of questions

7. Fine tuning (optional) - reset to

Title: Position Centred Left

Numbering: Questions (Paras) Gaps Both Neither ?

Clickable: ? Tick: None Line end After gap Show details

Clickable

When 'Clickable' is checked, the 'Click and Drop' function operates - students click on a word in the top box, and then click on the appropriate gap.

Tick

This selexts whether to show a tick or cross after each answer when the check button is pressed. Choose 'Line-end' for lists of questions with one gap per question, and 'After gap' for texts or where there is more than one gap per question. Or you can choose 'None'.

Word box: Middots ? Repeats Avoid Number Show all ? Lower case ?

Select: Gap width ? Line height ? font Arial Verdana Times Georgia Comic sans Trebuchet Lucida C Tahoma Courier ?

8. Select gap word option Show details Show words No show Anagrams In line and

Use the selector below to select what to do with the gap words:

Show words	Shows the missing words in a box at the top
No show	Doesn't show the words at all - suitable for listenings etc
Anagrams	Shows an anagram after the gap
In line	Shows only the base word (see below)

Your exercise will appear here

B. Now we'll look at the code

This is in four parts

1. The HTML code - consisting of:
   • Optional title
   • Top word box, if wanted
   • The main exercise
   • The code for the buttons
2. The Javascript program code
3. The Javascript answer code
4. The CSS Code

Main principles

1. Ex Num - You can put as many exercises as you like on a page, but each must have a unique exercise number. You enter this in the Ex Num box (default - 1)
2. Gaps - each gap has a unique ID number which includes the Ex Num. This is generated by the program and is the basis of how the whole thing works
3. Variables and Arrays - if using the clickable version you need to declare a universal variable
   clickedWord=""
   the Javascript is built mainly on arrays. The most important to know concerns the answers. There is an overall array which must be declared before the answers
   ansA=[]
   and then on a new line each set of answers consists of a subarray of ansA
   ansA[1]=["Tom","Dick","Harry"] etc

Important! - The overall arrays ansA=[ ] and and clickedWord must be declared once only.

This means that you should not have the exercises showing in your main list of posts. You need to use the 'insert jump break' function so that readers have to open up the post page to do the exercise. Otherwise the buttons will work in the individual post page, but not in the list of posts.

If you really want to have exercises showing on the post lists, then declare the overall array ansA=[ ] in a Javascript section in your template, and not in the posts.

How do I make a web page version? - Show instructions

If you've got an HTML editor or have made a web page before

I imagine you already know pretty much what to do

If this is your first time

You need to use a text editor of some sort. I use the free HTML-Kit 292, but you can use Wordpad.

Open a new document in Wordpad or a similar text editor. Now paste this code into your empty document, having changed 'Untitled' to a meaningful title.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Untitled</title>

  </head>
  <body>
 
 </body>
</html>

Now copy the exercise code and paste it into your document between the body tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Untitled</title>


  </head>
  <body>
 Your exercise goes here
  </body>
</html>

Save the document making sure you change the '.txt' file extension to '.htm'. Save it to somewhere you'll find it easily. For example you could create a new folder 'My HTML' in 'My Documents'.

Go into your browser and open a new tab. Go to the File menu, and click on Open File. Go to your folder and as long as you gave your file the .htm extension, it should be there, ready and waiting. Open the file and Hey Presto! It won't look very pretty, and it won't do anything yet, but the HTML basis is there.

Now it's time to add the style CSS. Add it with its style tags just below the title:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Untitled</title>
    Your syle CSS goes here

  </head>
  <body>
 Your exercise goes here
  </body>
</html>

Save again, remembering to make sure it still has an .htm file extension. Go back to the browser and refresh the page, and it should look much nicer, although it still won't actually do anything.

The final stage is to add the Javscript. Copy and paste it all, inside its script tags,just below the CSS code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Untitled</title>
    Your syle CSS goes here
    Your JS script goes here
  </head>
  <body>
 Your exercise goes here
  </body>
</html>

Your page should now look something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title<
<style type="text/css">

.instrC{
color:gray;
font-weight:bold;
}
  and all the rest of your style code

</style>

<script type="text/javascript">
  All your JS script
</script>
    
</head>
<body>

<div>
  Your exercise code
</div>

</body>
</html>

Save again, refresh the page again, and this is where the fun starts.

As far as blogs are concerned, I only know the procedure with Blogger. Sorry! But I imagine it's pretty similar on other blogging platforms.

Where do I put the code in Blogger?

If you're not familiar with using code, it would be worth looking at the instructions for a web page above before reading this.

Important! - Please click on this link and read these instructions carefully before putting anything into Blogger - Show instructions for Blogger

Important! - First of all, when entering this code into your post you'll need to use the HTML editor ('Edit HTML') rather than the WYSIWYG editor ('Compose')

Don't put any the code into the template!

Apart from the technical difficulties, this means that I can change things occasionally, but as you are reloading the code each time, everything should work properly. So if you have put any of this code into the template section, please remove it.

On the blog post page you need to do things in a certain order:

.

1. Use 'Enter HTML' to enter the style section (CSS)
2. Use 'Enter HTML' to enter a Javascript section opening and closing tags.
3. Use 'Enter HTML' to enter the interactive Javascript script inside these tags with the checking functions, optionally the Click and Drop code
4. Use 'Enter HTML' to enter the Javascript answers script
Note - It's best to enter the CSS and Javascript before you put anything else in your post.
5. Use 'Enter HTML' to enter your exercise(s) suitably placed. You can use Compose' in the normal way to enter any other text you might have, and switch to 'Enter HTML' to enter the exercise.

HTML Code, to go in your main post

In each box - Right Click, Select All and Copy

HTML Title code

HTML Wordbox code

HTML Main exercise code

HTML Buttons code

CSS Code

This can go in the Head section in a web page, after 'title'. In Blogger enter it as the first item on the blog page, before the Javascript and HTML code.

Main points, if you want to change the style

If you want to change the CSS, these are the relevant class names:

• The title is .instrC
• The top word box is .wordbox
• The words in the top word box are .optionWord
• The question numbers are .tdNumC
• The gap boxes are .textBoxC
• The buttons are .buttonC

<style type="text/css">
<!-- 

.instrC{
color:gray;
font-weight:bold;
}

.wordbox{
border:solid gray 2px;
margin:10px auto;
padding:3px 5px;
line-height:1.5;
font-weight:bold;
color:gray;
padding:4px 10px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
box-shadow:2px 2px 7px #333;
-moz-box-shadow:2px 2px 7px #333;
-webkit-box-shadow:2px 2px 7px #333;
-o-box-shadow:2px 2px 7px #333;
text-align:center;
}

.optionWord{
color:gray;
font-weight:bold;
}

.optionWord a{
color:gray;
text-decoration:none;
}

.optionWord a:hover{
color:black;
text-decoration:none;
}

.tdNumC{
padding:0 7px 0 0px;
color:gray;
font-weight:bold;
vertical-align:top;
}

.buttonC{
background:gray;
color:white;
padding:2px 3px;
font-weight:bold;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-box-shadow:1px 1px 5px #333;
-webkit-box-shadow:1px 1px 5px #333;
-o-box-shadow:1px 1px 5px #333;
margin:0 2px;
}

.textBoxC{
border:none;
border-bottom:1px dotted gray;
}


 -->
</style>

Javascript answers code

The answers code should go into a Javascript section on the page itself. If using Blogger, the answers code should go in a Javascript section at the top of your post page. First you need to declare the universal variables.

Important! - The overall arrays ansA=[ ] and clickedWord must be declared once only. This means that you should not have the exercises showing in your main list of posts. You need to use the 'insert jump break' function so that readers have to open up the post page to do the exercise. Otherwise the buttons will work in the individual post page, but not in the list of posts.

If you really want to have exercises showing on the post lists, then declare the overall arrays ansA=[ ] and clickedWord in a Javascript section in your template, and not in the posts. But I don't really recommend this.

<script type="text/javascript">
<!--

var clickedWord=""
var ansA=[]

// -->
</script>

Now copy in the answer array for this exercise on a new line after var ansA=[ ]. If you have more than one exercise, keep adding the answer arrays on new lines:

Note - If you see something like ’ or &# followed by any other four figure number and a semicolon in the answers code, for some reason things like asterisks and inverted commas have been converted into base code, although this shouldn't happen. You do not want this in the JS answers, so you'll need to replace these with their original signs - for example ’ is an asterisk.

Javascript program code

Now copy the rest of the Javascript. It can go in the Body section or in the Head section on a web page, or in the 'New Post' page on Blogger.

JS opening and closing tags

If you haven't already got a Javascript section, you'll need these opening and closing tags

<script type="text/javascript">
<!--

//Your Javascript code all goes inside these tags

// -->
</script>

Now copy all the Javascript, including the headers and paste into the Javascript section.

// JS Code for checking the answers

function checkAnsBoxAnswers(exNum){ 
  var ca=0
  for(var c=0;c<ansA[exNum].length;c++){
    var guess=doSpaces(exNum,c)
    var ans=doAnswers(guess,ansA[exNum][c])
    if(ans=="yes"){
      document.getElementById("ex"+exNum+"AnsBox"+c).style.color="green"
      document.getElementById("ex"+exNum+"AnsBox"+c).style.fontWeight="bold"
      ca++
    }
    else{
      document.getElementById("ex"+exNum+"AnsBox"+c).style.color="red" 
    } 
  }
  showScore(exNum,ca) 
}


function checkAnsBoxInvisibleAnswersScore(exNum){
  var ca=0
  for(var c=0;c<ansA[exNum].length;c++){
    var guess = document.getElementById("ex"+exNum+"AnsBox"+c).value;
    var ans=doAnswers(guess,ansA[exNum][c])
    if(ans=="yes"){
      document.getElementById("ex"+exNum+"TickBox"+c).innerHTML=getInvisibleAnswersSign(1)
      ca++
    }
    else if(guess==""){
      document.getElementById("ex"+exNum+"TickBox"+c).innerHTML=getInvisibleAnswersSign(3)
    }
    else{
      document.getElementById("ex"+exNum+"TickBox"+c).innerHTML=getInvisibleAnswersSign(2)
    }
  }
  showScore(exNum,ca) 
}


function doAnswers(guess,ans){
  if(guess==ans){
    txt="yes"
  }
  else{
    txt="no"
  }
  return txt
}


function getInvisibleAnswersSign(x){
  if(x==1){
    var txt='<span style="color:green;font-weight:bold;">Y</span>'
  }
  else if(x==2){ 
    var txt='<span style="font-size: 100%;color:red;font-weight:bold;">X</span>'
  }
  else if(x==3){ 
    var txt='<span style="font-size: 100%;color:orange;font-weight:bold;">?</span>'
  }
  return txt  
}


function showScore(exNum,ca){
  var qlen=ansA[exNum].length
  var pc=ca/qlen*100
  pc=Math.round(pc)
  var txt="<span class='instrC'>You have scored "+pc+" percent ( "+ca+" / "+qlen+" )</span>"
  document.getElementById("messageArea"+exNum).innerHTML=txt
}


function doSpaces(exNum,qNum){
  var txt=document.getElementById("ex"+exNum+"AnsBox"+qNum).value
  if(txt.charAt(txt.length-1)==" "){
    txt=txt.slice(0,txt.length-1)
    document.getElementById("ex"+exNum+"AnsBox"+qNum).value=txt
  }
  return txt
}

// JS Code for showing the answers

function showAnsBoxAnswers(exNum){
  for(var c=0;c<ansA[exNum].length;c++){
  if(document.getElementById("ex"+exNum+"AnsBox"+c).value==ansA[exNum][c]){
    document.getElementById("ex"+exNum+"AnsBox"+c).style.color="green"
    document.getElementById("ex"+exNum+"AnsBox"+c).style.fontWeight="bold"
  }
  else{
    document.getElementById("ex"+exNum+"AnsBox"+c).value=ansA[exNum][c]
    document.getElementById("ex"+exNum+"AnsBox"+c).style.color="red"
    document.getElementById("ex"+exNum+"AnsBox"+c).style.fontWeight="bold"
    }
  }
}

// JS Code for clearing the answers

function clearAnsBoxAnswers(exNum){
  for(var c=0;c<ansA[exNum].length;c++){
  document.getElementById("ex"+exNum+"AnsBox"+c).value=""
  document.getElementById("ex"+exNum+"AnsBox"+c).style.color="black"
  document.getElementById("ex"+exNum+"AnsBox"+c).style.fontWeight="normal"
  }
  clearMessageArea(exNum)
}


function clearAnsBoxInvisibleAnswers(exNum){
  for(var c=0;c<ansA[exNum].length;c++){
    document.getElementById("ex"+exNum+"AnsBox"+c).value=""
    document.getElementById("ex"+exNum+"AnsBox"+c).style.color="black"
    document.getElementById("ex"+exNum+"AnsBox"+c).style.fontWeight="normal"
    document.getElementById("ex"+exNum+"TickBox"+c).innerHTML=""
  }
  clearMessageArea(exNum)
}

function clearMessageArea(exNum){
  document.getElementById("messageArea"+exNum).innerHTML=""
}

// Optional JS Code for Click and Drop

function makeClickedWord(exNum,x){
  var txt=document.getElementById("ex"+exNum+"Word"+x).innerHTML
  clickedWord=txt
}


function enterClickedWord(exNum,x){
  var txt=clickedWord
  document.getElementById("ex"+exNum+"AnsBox"+x).value=txt
  clickedWord=""
}


function enterClickedWordCap(exNum,x){
  var txt=clickedWord
  var firstLetter=txt.slice(0,1)
  firstLetter=firstLetter.toUpperCase()
  var rest=txt.slice(1,txt.length)
  txt=firstLetter+rest
  document.getElementById("ex"+exNum+"AnsBox"+x).value=txt
  clickedWord=""
}