Fill in the blank quiz

The QuizY Fill in the blank plugin is a jQuery plugin, which allows the creation of fill in the blank quiz in the browser. It is very simple to use and provides various of settings in order to enhance its usability. A demo is available below:

 

Drag the items to the correct blank spaces
(the correct answers will appear once you drag the last item)


Features

How to use it

This plugin is jQuery based and this means that you need to include the jQuery library along with the jQuery UI (for the drag&drop functionality).
  1. Get the latest QuizY fill in the blank plugin from github and put the javascript and the css files into the appropriate directories of your project
  2. Add the CSS to the head
    3. <head>
  ...
  <link rel="stylesheet" type="text/css" href="css/quizyfillblank.css" />
  ...
</head>
  3. Add all the necessary javascript files before the closing body tag, in the following order:
    4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" /></script>
<script src="js/jquery.quizyfillblank.js" /></script>
...
</body>
  4. Add the fill in the blank activation script between the script files and the closing body tag:
    5. <script>
    $('#tutorial-fillblank').quizyFillBlank({
      textItems:['Start of your text', '. text continues ', '. text continues here ', ', ... and here', 'and here it ends.'],
          anItems:['Answer1', 'Answer2', 'Answer3', 'Answer4', 'Answer5', 'Answer6', 'Answer7' ], 
          anItemsCorrect:[2,1,4,6],
          blockSize:150
        });
</script>

</body>
    The mandatory parameters you need to add are the textItems, anItems and anItemsCorrect. textItems is an array, which comprises the texts in-between the blank spaces. For example, if your text is 'The current president of the US is Barack Obama, who is a democrat. He was preceded by George W. Bush, who was a republican' and the blank spaces are for 'Barack Obama' and 'George W. Bush', this means you need to add into the textItem array as first item the text 'The current president of the US is', as a second item ', who is a democrat. He was preceded by ', the third ', who was a republican.', and so on... In the anItems parameter you set an array with the strings, listing the possible answers. In our case this will be some president names. In the anItemsCorrect we put the correct items and their position in the anItems array, ordered by the blank spaces in the texts. For i.e.: if we have anItems array: ['George W. Bush', 'Ronald Reagan', 'Barack Obama'] then for the first blank space the answer will be the third item in the array (with key 2, because the counting starts form 0) and for the second blank space the answer will be the item with key 0 in the anItem array. This means, the array for the value of anItemsCorrect parameter will be: [2,0]; Later on I will explain what are the rest of properties used for.

  5. Now we have to create the html for it. It is pretty simple and shows where text and the answer should appear. You can put the two divs for the text and for the answers in different places depending on the layout of the page you are using. You can also change the ids of these two divs, to prevent any potential conflict in your code
    6. <div id="tutorial-fillblank">
  <div id="fillblank-text"></div>
  <div id="fillblank-ph"></div>
</div>
  6. That's it for a start! Check out the different properties below.

Properties