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)
(the correct answers will appear once you drag the last item)
Features
- Works in most of the major browsers: IE7+, FF 3.6+, Chrome, Opera, Safari, Mobile Safari, Android Browser
- Easy to use and add new text and answers
- Can add any number of answers and blank spaces (the amount of both can or can't match)
- An option to make an AJAX call and send user's result and process it with a server-side script
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).- 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
- Add the CSS to the head
- Add all the necessary javascript files before the closing body tag, in the following order:
- Add the fill in the blank activation script between the script files and the closing body tag:
- 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
- That's it for a start! Check out the different properties below.
<head>
...
<link rel="stylesheet" type="text/css" href="css/quizyfillblank.css" />
...
</head>
<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>
<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.
<div id="tutorial-fillblank">
<div id="fillblank-text"></div>
<div id="fillblank-ph"></div>
</div>
Properties
- elementAnId: String to change the id of the div with the answers. The default is fillblank-ph.
- elementTextId: String to change the id of the div with the answers. The default is fillblank-text.
- answerId: String to change the class of the div with the answers to prevent any potential conflicts in your code. The default is d-answer.
- phId: String to change the class of the spans with the blank spaces to prevent any potential conflicts in your code. The default is d-nest.
- checkId: String to change the class of the divs with the icons showing if the answers was correct or not (in order to prevent any potential conflicts in your code). The default is d-check.
- numberId: String to change the class of the divs with the icons showing if the correct position of the item (in order to prevent any potential conflicts in your code). The default is d-number.
- blockSize: The size of the answer divs and also the blank spaces. Change it if you have shorter or longer words than normal. Default is 100.
- onFinishCall: A callback function. Will return object with three parameters: correct_answers, all_answers and time. You can add it when calling the plugin like this:
onFinishCall: function(param){alert(param.correct_answers)}
- allowTouchDrag: A boolean parameter (true or false), which enables dragging on touch devices. By default is true