Self-Assessment Creator

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:

  1. Link to the CSS file in the <head> section of your page: <link rel="stylesheet" href="//ehealth.kcl.ac.uk/tel/self-assessment/3.5/css/self-assessment.css" />
  2. Link to the Javascript file at the end of your document, before the </body> tag: <script type="text/javascript" src="//ehealth.kcl.ac.uk/tel/self-assessment/3.5/js/self-assessment.js"></script>
  3. Create an html element on your page with the id of "selfassessment" wherever you want the self-assessment to appear: <div id="selfassessment"></div>
  4. Create the JSON (see section below) file with your required settings and questions and ensure it is in the same directory as your html file and with the identical filename except with the extension changed to '.json'

File name and format

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:

  • Omitting commas from between item definitions.
  • Adding a comma after the last item definition.
  • Having a line-break within an item defintion.
  • Using quotation marks within an item definiton - quote marks need to be "escaped" using a back-slash before the quotation mark.

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"
	}
	]
}

Overall settings

As well as defining the questions in the JSON file, you can define a few preferences to control how the quiz looks and appears:

Colours

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": [
	{
	...
	}
	]
}

Attempts

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": [
	{
	...
	}
	]
}

Default Feedback Text

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": [
	{
	...
	}
	]
}

Progress Bar

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": [
	{
	...
	}
	]
}

Allow skipping of 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

View MCQ example

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",

Draggable Labels

View draggable labels example

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"
},

Draggable Arrows

View draggable arrows example

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."

Reflection

View reflective example

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>"

Information

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>