Self-Assessment Creator
Tool to easily create formative web-based self-assessment quizzes
Tool to easily create formative web-based self-assessment quizzes
It's dead easy to embed a self-assessment quiz created with this tool in any webpage. Just follow these 4 simple steps:
<link rel="stylesheet" href="//ehealth.kcl.ac.uk/tel/self-assessment/3.5/css/self-assessment.css" /><script type="text/javascript" src="//ehealth.kcl.ac.uk/tel/self-assessment/3.5/js/self-assessment.js"></script> <div id="selfassessment"></div>The self-assessment quiz is created and configured from a single JSON file. This file can be created by any text editor. The JSON file has to be 100% valid JSON or the quiz will not be generated. An online JSON validator such a JSON Lint can help you identify any errors in your JSON code.
The most common JSON errors are:
The JSON file should have the same filename as the web page. So if the webpage is "quiz.html" or "quiz.php" or "quiz.aspx", the JSON file should be named "quiz.json".
NOTE If it's not convenient to have the json file having the same name as the html page (perhaps when embedding in dynamic sites, KEATS etc) you can specify the name of the JSON file using the "data-json" attribute in the div tag: <div id="selfassessment" data-json="http://path.to/json_file.json"></div>
A minimal JSON file with 1 question would look like this:
{
"questions": [
{
"question":"<p>Does 1 + 1 = 2 ?</p>",
"answers": {
"a":"Yes",
"b":"No"
},
"feedback": {
"a":"<p>That is the correct answer.</p>",
"b":"<p>That is the wrong answer.</p>"
},
"correct":"a"
}
]
}
And with multiple questions:
{
"questions": [
{
"question":"<p>Does 1 + 1 = 2 ?</p>",
"answers": {
"a":"Yes",
"b":"No"
},
"feedback": {
"a":"<p>That is the correct answer.</p>"
},
"correct":"a"
},
{
"question":"<p>Does 2 + 2 = 5 ?</p>",
"answers": {
"a":"Yes",
"b":"No"
},
"feedback": {
"a":"<p>That is the wrong answer.</p>",
"b":"<p>That is the correct answer.</p>"
},
"correct":"b"
}
]
}
As well as defining the questions in the JSON file, you can define a few preferences to control how the quiz looks and appears:
You can change the colour of the red and green used for correct and incorrect answer feedback by setting values for colourRed and colourGreen:
{
"colourRed": "#ff0000",
"colourGreen": "#00ff00",
"questions": [
{
...
}
]
}
You can set the number of attempts the user gets before the "Reveal answers" button is shown with the attempts value. This sets the default number of attempts for the quiz. This can be overridden for each individual question.
If this is not set, the default number of attempts before the reveal button is shown is set to 3. If you do never want the "Reveal answers" button to appear, just set this value very high (99999 or something).
{
"attempts": "5",
"questions": [
{
...
}
]
}
Each question can have individual feedback for when the suer gets the answer right or wrong. Additionally, for multiple choice questions, each answer can have its own feedback comment.
If no feedback is specified for a question then a generic "That is correct" or "That is incorrect" comment is displayed. You can change what these default feedback comments are by setting the "defaultCorrectFeedback" and "defaultIncorrectFeedback" settings:
{
"defaultCorrectFeedback": "That is the correct answer - congratulations!",
"defaultIncorrectFeedback": "That is not the correct answer - try harder.",
"questions": [
{
...
}
]
}
By default, the progress bar along the top of the quiz is visible when there are multiple questions in the quiz. If the JSON file only contains one question, the progress bar will be hidden. This behaviour can be overridden (mainly useful to hide progress bar when there are multiple questions) by setting the progressBar value to "true" or "false".
Note that in a multiple question quiz, if the progress bar is hidden, users can still skip back to previous questions using the back and forward buttons on their browser and the results page will still appear when they complete the final question. The results page will never appear on a single question quiz (as there is no need for it).
{
"progressBar": "false",
"questions": [
{
...
}
]
}
you can make it so that students don't have to attempt the questions in the original order but can skip between them at will by setting the "createLinks" option to "true".
When this option is set, the numbers in the progress bar will be converted to links on quiz creation allowing the user to jump to any question at any time.
{
"createLinks": "true",
"questions": [
{
...
}
]
}
Multiple choice questions can have multiple correct answers and each correct and incorrect answer can have individual feedback.
To use the multiple choice question type, set the "questiontype" to "mcq":
"questiontype": "mcq",
The question text is set as follows:
"question": "<p>What is 1 + 1?</p>",
The answer options are set as follows. You can have as many answers as you want (therefore you can create a true/false question by creating an MCQ with two answer options):
"answers": {
"a":"2",
"b":"3",
"c":"Banana"
},
If there are multiple correct answers, just separate the letter of each correct answer with a comma when specifying the correct answer. For example:
"correct": "a,b,c",
You can add general feedback which can be shown when the correct answer is displayed and also individual feedback for each question. If general feedback is set it will be shown as well as any individual feedback. These settings are optional - if not feedback is set then a generic "That is correct" or "That is incorrect" message will be displayed.
"feedback": {
"a": "<p>That is the correct answer.</p>",
"b": "<p>Almost.</p>",
"c": "<p>Try a number.</p>"
},
"feedbackGeneral": "<p>That was an easy question.</p>",
Optionally, you can set the number of incorrect guesses are required before the "Reveal answers" button appears:
"revealAnswers": "3",
To use the multiple choice question type, set the "questiontype" to "draglabels":
"questiontype": "draglabels",
The question text is set as follows:
"question": "<p>Drag the labels to the correct position on the diagram below.</p>",
You need to specify the location of the image file to be used as the image upon which the draggables are dropped. The file location needs to be described relative to the HTML/JSON file (or specify an absolute location). You also need to specify the image width and height:
"image":"img/fruits.jpg", "imagewidth":"400", "imageheight":"300",
You can choose whether the labels appear above or to the right of the diagram by specifying "top" or "right" for the "draggableslocation" option (if you omit this, the labels will be placed along the top by default):
"draggableslocation": "top",
The draggable labels and their corresponding correct positions on the diagram are set as follows. The centre of the position of where the labels are dropped is defined by pixel coordinates from the top left of the image. The first number is the number of pixels from the left; the second coordinate is the number of pixels from the top. If you have some "dummy" draggables for which there is no correct location on the diagram, enter "none" as the answer:
"draggables": {
"house":"none",
"apple":"6",
"banana":"5",
"desk":"none",
"orange":"7",
"car":"none"
},
"dropzones": {
"5":"207,52",
"6":"70,245",
"7":"343,105"
},
If you have long names for your labels and as a result the draggables are taking up too much space on the diagram, you can experiment with giving the labels letters instead by separating the letter from the description using the "pipe" ( | ) symbol:
"draggables": {
"A|house":"none",
"B|apple":"6",
"C|banana":"5",
"D|desk":"none",
"E|orange":"7",
"F|this is a long label name":"none"
},
To use the multiple choice question type, set the "questiontype" to "dragarrows":
"questiontype": "dragarrows",
The draggable arrows question type is set up in a nearly identical way to the draggable labels question type. However, instead of specifying a single pair of coordinates for the location of the droppable, you need to hive several coordinate pairs to accurately describe the correct area. You can either define a rectangle using two pairs of coordinates separated by a hyphen:
"1":"141,98-114,148",
Or 3 or more pairs of coordinates (each pair separated by a comma) to define a polygonal area:
"2":"368,177,372,208,349,218,353,236,339,259,319,240,313,244,304,216,292,217,282,203,298,204,297,186,313,194,344,192,353,180",
Declare the items to be dragged as follows:
"draggables": {
"Draggable Item One":"1",
"Draggable Item Two":"2"
},
and then pair them with the drop zones defined as follows:"dropzones": {
"1":"0,0-126,150",
"2":"250,100-375,200"
},
Feedback for when the user gets the right answer/reveals the wrong answer is specified as follows:
"feedbackGeneral": "Those are the correct answers."
To use the reflective question type, set the "questiontype" to "reflection":
"questiontype": "reflection",
The reflective question type simply provides the student with a text box into which they can enter some free text. Once they have entered some text they can click to reveal a model answer. Simply set the question text as usual and the model answer is set using the "feedbackGeneral" value:
"feedbackGeneral": "<p>Thank you for writing something. Here is a model answer:</p><p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>"
To use the information question type, set the "questiontype" to "information":
"questiontype": "information",
The only option to be set for this question type is the "question". This "question" is intended to give extra information in between questions. The student can simply click the "Continue" button to move to the next question. The question can contain any HTML including embedded YouTube videos etc.
Due to the closed nature of KEATS, embedding custom elements that rely heavily on JavaScript and CSS can be problematic as Moodle will automatically try to strip out CSS and Javascript. To get around this, you first need to ensure that you have disabled the WYSIWYG editor in your profile settings (change the "When editing text" setting from "Use HTML editor" to "Use standard web forms". The CSS and JSON files need to uploaded to your KEATS course - you can just drag and drop them from your desktop to a hidden section of your course. Once they are uploaded, open them each and copy the URL that directs to each. Then use the following code in the label you create - note that you explicitly declare the location of the CSS and JSON files using the "data-css" and "data-json" attributes.
<script type="text/javascript">// <![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js\"></scr" + "ipt>");
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ehealth.kcl.ac.uk/tel/self-assessment/2.4/js/self-assessment.js\"></scr" + "ipt>");
// ]]></script>
<div id="selfassessment" data-json="http://keats.kcl.ac.uk/PATH/TO/YOUR/JSON/HERE" data-css="http://keat.kcl.ac.uk/PATH/TO/THE/CSS/HERE"></div>