Merge pull request #455 from kristiyip/master

survey plugin docs

docs/markdown_docs/plugins/jspsych-survey-likert.md

@@ -8,10 +8,8 @@ This table lists the parameters associated with this plugin. Parameters with a d
 
 Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
-questions | array | *undefined* | Each array element a string. The strings are the prompts/questions that will be associated with a slider.
+questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, labels and required parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value is *undefined*. The strings are the question that will be associated with a slider. `labels`: Type array, default value is *undefined*. Each array element is an array of strings. The innermost arrays contain a set of labels to display for an individual question. If you want to use blank responses and only label the end points or some subset of the options, just insert a blank string for the unlabeled responses.`required`: Type boolean, default value is false. Makes answering questions required. 
-labels | array |  *undefined* | Each array element is an array of strings. The innermost arrays contain a set of labels to display for an individual question. If you want to use blank responses and only label the end points or some subset of the options, just insert a blank string for the unlabeled responses.
 preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
-required | boolean | false | Makes answering questions required.
 button_label | string | 'Button label' | Label of the button.
 
 ## Data Generated
@@ -28,15 +26,12 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
 #### Basic example with multiple questions on a page.
 
 ```javascript
-// defining groups of questions that will go together.
-var page_1_questions = ["I like vegetables.", "I hate eggs."];
 
 // defining two different response scales that can be used.
 var scale_1 = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
 
 var likert_page = {
     type: 'survey-likert',
-    questions: ["I like vegetables.", "I like fruit."],
+    questions: [{prompt: "I like vegetables.", labels: scale_1],
-    labels: [scale_1, scale_1], // need one scale for every question on a page
 };
 ```

docs/markdown_docs/plugins/jspsych-survey-multi-choice.md

@@ -8,10 +8,7 @@ This table lists the parameters associated with this plugin. Parameters with a d
 
 Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
-questions | array | *undefined* | An array of strings. The strings are the prompts/questions that will be associated with a group of options (radio buttons). All questions will get presented on the same page (trial).
+questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, options, required, and horizontal parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value is *undefined*. The string is prompt/question that will be associated with a group of options (radio buttons). All questions will get presented on the same page (trial).`options`: Type array, defualt value is *undefined*. An array of strings. The array contains a set of options to display for an individual question.`required`: Type boolean, default value is null. The boolean value indicates if a question is required('true') or not ('false'), using the HTML5 `required` attribute. If this parameter is undefined, the question will be optional. Note: The HTML5 `required` attribute is [not currently supported by the Safari browser][1].`horizontal`:Type boolean, default value is false. If true, then the question is centered and the options are displayed horizontally.
-options | array |  *undefined* | An array of arrays. The innermost arrays contain a set of options to display for an individual question. The length of the outer array should be the same as the number of questions.
-required | array | null | An array of boolean values. Each boolean indicates if a question is required (`true`) or not (`false`), using the HTML5 `required` attribute. The length of this array should correspond to the length of the questions array. If this parameter is undefined, all questions will be optional. Note: The HTML5 `required` attribute is [not currently supported by the Safari browser][1].
-horizontal | boolean | false | If true, then questions are centered and options are displayed horizontally.
 preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions. 
 button_label | string | 'Button label' | Label of the button.
 
@@ -39,20 +36,15 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
     var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];
 
     var multi_choice_block = {
-        type: 'survey-multi-choice',
+      type: 'survey-multi-choice',
-        questions: page_1_questions,
+      questions: [{prompt: "I like vegetables", options: page_1_options, required:true,}, {prompt: "I like fruit", options: page_2_options, required: false}],
-        options: [page_1_options, page_2_options],  // need one scale for every question on a page
-        required: [true, false]   // set whether questions are required
     };
 
     var multi_choice_block_horizontal = {
-        type: 'survey-multi-choice',
+      type: 'survey-multi-choice',
-        questions: page_1_questions,
+      questions: [{prompt: "I like vegetables", options: page_1_options, required: true, horizontal: true,}, {prompt: "I like fruit", options: page_2_options, required: false, horizontal: false}],
-        options: [page_1_options, page_2_options],  // need one scale for every question on a page
-        required: [true, false],   // set whether questions are required
-        horizontal: true  // centres questions and makes options display horizontally
     };
-
+    
     jsPsych.init({
       timeline: [multi_choice_block, multi_choice_block_horizontal],
       on_finish: function() {

docs/markdown_docs/plugins/jspsych-survey-multi-select.md

@@ -8,10 +8,8 @@ This table lists the parameters associated with this plugin. Parameters with a d
 
 Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
-questions | array | *undefined* | An array of strings. The strings are the prompts/questions that will be associated with a group of options (check boxes). All questions will get presented on the same page (trial).
+questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, options and horizontal parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value of *undefined*. The string is the prompt/question that will be associated with a group of options (check boxes). All questions will get presented on the same page (trial).`options`: Type array, default value of *undefined*. The array contains a set of options to display for an individual question.`horizontal`: Type boolean, default value of false. If true, the questions are centered and options are displayed horizontally.
-options | array |  *undefined* | An array of arrays. The innermost arrays contain a set of options to display for an individual question. The length of the outer array should be the same as the number of questions.
 required | boolean | true | If true, then at least one option must be selected.
-horizontal | boolean | false | If true, then questions are centered and options are displayed horizontally.
 preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
 button_label | string | 'Button label' | Label of the button.
 
@@ -29,24 +27,18 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
 #### Basic example with multiple questions on a page.
 
 ```javascript
-    // defining groups of questions that will go together.
-    var page_1_questions = ["I like vegetables.", "I like fruit."];
-
     // definiting two different response scales that can be used.
     var page_1_options = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
     var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];
 
     var multi_select_block = {
         type: 'survey-multi-select',
-        questions: page_1_questions,
+        questions: [{prompt: "I like vegetables", options: page_1_options}, {prompt: "I like fruit", options: page_2_options}]
-        options: [page_1_options, page_2_options],  // need one scale for every question on a page
     };
 
     var multi_select_block_horizontal = {
         type: 'survey-multi-select',
-        questions: page_1_questions,
+        questions: [{prompt: "I like vegetables", options: page_1_options, horizontal: true}, {prompt: "I like fruit", options: page_2_options, horiztonal: false}]
-        options: [page_1_options, page_2_options],  // need one scale for every question on a page
-        horizontal: true  // centers questions and makes options display horizontally
     };
 
     jsPsych.init({

docs/markdown_docs/plugins/jspsych-survey-text.md

@@ -8,11 +8,8 @@ This table lists the parameters associated with this plugin. Parameters with a d
 
 Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
-questions | array | *undefined* | An array of strings. The strings are the prompts for the subject to respond to. Each string gets its own response field.
+questions | array | *undefined* | An array of objects, each object represents a question that appears on the screen. Each object contains a prompt, value, rows, and columns parameter that will be applied to the question. See examples below for further clarification.`prompt`: Type string, default value of *undefined*. The string is the prompt for the subject to respond to. Each question gets its own response field.`value`: Type array, default value of `[""]`. The string will be used to populate the response field with editable answers.`rows`: Type array, default value of 1. The number of rows for the response text box. `columns`: Type array, default value of 40. The number of columns for the response text box. 
 preamble | string | empty string | HTML formatted string to display at the top of the page above all the questions.
-values | array | `[""]` | An array of strings. The strings will be used to populate the response fields with editable answers.
-rows | array | 1 | The number of rows for the response text box. Array length must match `questions` array, with a numeric value for each entry indicating the number of rows for that question's box.
-columns | array | 40 | The number of columns for the response text box. Array length must match `questions` array, with a numeric value for each entry indicating the number of columns for that question's box.
 button_label | string | 'Next' | The text that appears on the button to finish the trial.
 
 ## Data Generated
@@ -32,7 +29,7 @@ rt | numeric | The response time in milliseconds for the subject to make a respo
 // defining groups of questions that will go together.
 var survey_trial = {
   type: 'survey-text',
-  questions: ["How old are you?", "Where were you born?"],
+  questions: [{prompt: "How old are you?"}, {prompt: "Where were you born?"}],
 };
 ```
 
@@ -41,8 +38,6 @@ var survey_trial = {
 ```javascript
 var survey_trial = {
   type: 'survey-text',
-  questions: ["How old are you?", "Where were you born?"],
+  questions: [{prompt: "How old are you?", rows: 5, columns: 40}, {prompt: "Where were you born?", rows: 3, columns: 50}],
-  rows: [5,3],
-  columns: [40,50]
 };
 ```

examples/jspsych-categorize-animation.html

@@ -20,6 +20,7 @@
     key_answer: 68,
     choices: [68, 83],
     text_answer: 'different',
+    feedback_duration: 500,
     correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
     incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
     prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",

examples/jspsych-instructions.html

@@ -12,8 +12,7 @@
     type: 'instructions',
     pages: ['Welcome to the experiment. Click next to begin.',
       'This is the second page of instructions.',
-      'This is the final page.'
+      'This is the final page.'],
-    ],
     show_clickable_nav: true
   }
 

examples/jspsych-survey-multi-choice.html

@@ -8,9 +8,6 @@
   <body></body>
   <script>
 
-  // defining groups of questions that will go together.
-  var page_1_questions = ["I like vegetables.", "I like fruit."];
-
   // definiting two different response scales that can be used.
   var page_1_options = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"];
   var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];

plugins/jspsych-survey-likert.js

@@ -19,6 +19,7 @@ jsPsych.plugins['survey-likert'] = (function() {
       questions: {
         type: jsPsych.plugins.parameterType.COMPLEX,
         array: true,
+        pretty_name: 'Questions',
         nested: {
           prompt: {type: jsPsych.plugins.parameterType.STRING,
                      pretty_name: 'Prompt',

plugins/jspsych-survey-multi-choice.js

@@ -19,6 +19,7 @@ jsPsych.plugins['survey-multi-choice'] = (function() {
       questions: {
         type: jsPsych.plugins.parameterType.COMPLEX,
         array: true,
+        pretty_name: 'Questions',
         nested: {
           prompt: {type: jsPsych.plugins.parameterType.STRING,
                      pretty_name: 'Prompt',
@@ -33,8 +34,8 @@ jsPsych.plugins['survey-multi-choice'] = (function() {
                      pretty_name: 'Required',
                      default: false,
                      description: 'Subject will be required to pick an option for each question.'},
-          horitzontal: {type: jsPsych.plugins.parameterType.BOOL,
+          horizontal: {type: jsPsych.plugins.parameterType.BOOL,
-                        pretty_name: 'Horitzontal',
+                        pretty_name: 'Horizontal',
                         default: false,
                         description: 'If true, then questions are centered and options are displayed horizontally.'},
         }

plugins/jspsych-survey-multi-select.js

@@ -17,6 +17,7 @@ jsPsych.plugins['survey-multi-select'] = (function() {
       questions: {
         type: jsPsych.plugins.parameterType.COMPLEX,
         array: true,
+        pretty_name: 'Questions',
         nested: {
           prompt: {type: jsPsych.plugins.parameterType.STRING,
                     pretty_name: 'Prompt',
@@ -27,8 +28,8 @@ jsPsych.plugins['survey-multi-select'] = (function() {
                     array: true,
                     default: undefined,
                     description: 'Displays options for an individual question.'},
-          horitzontal: {type: jsPsych.plugins.parameterType.BOOL,
+          horizontal: {type: jsPsych.plugins.parameterType.BOOL,
-                        pretty_name: 'Horitzontal',
+                        pretty_name: 'Horizontal',
                         default: false,
                         description: 'If true, then questions are centered and options are displayed horizontally.'},
         }

plugins/jspsych-survey-text.js

@@ -19,7 +19,8 @@ jsPsych.plugins['survey-text'] = (function() {
     parameters: {
       questions: {
         type: jsPsych.plugins.parameterType.COMPLEX,
-        array:true,
+        array: true,
+        pretty_name: 'Questions',
         nested: {
           prompt: {type: jsPsych.plugins.parameterType.STRING,
                    pretty_name: 'Prompt',

tests/plugins/plugin-categorize-animation.test.js

@@ -1,4 +1,5 @@
 const root = '../../';
+const utils = require('../testing-utils.js');
 
 jest.useFakeTimers();
 
@@ -13,4 +14,239 @@ describe('categorize-animation plugin', function(){
 		expect(typeof window.jsPsych.plugins['categorize-animation']).not.toBe('undefined');
 	});
 
+	test('displays stimulus every 500ms', function(){
+		var trial = {
+			type: 'categorize-animation',
+			stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+			key_answer: 68
+		}
+
+		jsPsych.init({
+			timeline: [trial]
+		});
+
+		jest.runTimersToTime(500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+		jest.runTimersToTime(500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">')
+	});
+
+	test('prompt should display after animation', function(){
+		var trial = {
+			type: 'categorize-animation',
+			stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+			key_answer: 68,
+			prompt: "<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>"
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		jest.runTimersToTime(1500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>');
+	});
+
+	test('should display correct if key_answer is pressed', function(){
+		var trial = {
+			type: 'categorize-animation',
+			stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+			key_answer: 68,
+			choices: [68, 83],
+			prompt: "<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>"
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		jest.runTimersToTime(1500);
+		utils.pressKey(68);
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('Correct.');
+	});
+
+	test('should display incorrect if different key is pressed', function(){
+		var trial = {
+			type: 'categorize-animation',
+			stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+			key_answer: 68,
+			choices: [68, 83],
+			prompt: "<p>Press d if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>"
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		jest.runTimersToTime(1500);
+		utils.pressKey(83);
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('Wrong.');
+	});
+
+	test('text answer should replace %ANS%', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		text_answer: 'different',
+    		correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
+    		incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+  		};
+
+  		jsPsych.init({
+    			timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1500);
+		utils.pressKey(68);
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>Correct. The faces had different expressions.</p>');
+	});
+
+	test('correct text displays when when key_answer is pressed', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		correct_text: "<p>You pressed the correct key</p>",
+    		incorrect_text: "<p>Incorrect.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+  		};
+
+  		jsPsych.init({
+    			timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1500);
+		utils.pressKey(68);
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>You pressed the correct key</p>');
+	});
+
+	test('correct text displays when when key_answer is pressed', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		correct_text: "<p>You pressed the correct key</p>",
+    		incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+  		};
+
+  		jsPsych.init({
+    			timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1500);
+		utils.pressKey(83);
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>Incorrect. You pressed the wrong key.</p>');
+	});
+
+	test('duration to display image is based on frame_time', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		frame_time: 1000,
+    		correct_text: "<p>You pressed the correct key</p>",
+    		incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+  		};
+
+  		jsPsych.init({
+    		timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+		jest.runTimersToTime(500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+		jest.runTimersToTime(500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+	});
+
+	test('sequence reps', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		frame_time: 1000,
+    		sequence_reps: 2,
+    		correct_text: "<p>You pressed the correct key</p>",
+    		incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+  		};
+
+  		jsPsych.init({
+    		timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/happy_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+		jest.runTimersToTime(1000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\">');
+	});
+
+	test('subject can response before animation is completed', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		frame_time: 1000,
+    		sequence_reps: 2,
+    		correct_text: "<p>You pressed the correct key</p>",
+    		incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+    		allow_response_before_complete: true,
+  		};
+
+  		jsPsych.init({
+    		timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1500);
+		utils.pressKey(68);
+		jest.runTimersToTime(500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src=\"img/sad_face_1.jpg\" class=\"jspsych-categorize-animation-stimulus\"><p>You pressed the correct key</p>');
+	});
+
+	test('display should clear after feeback_duration is done', function(){
+		var trials = {
+    		type: 'categorize-animation',
+    		stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
+    		key_answer: 68,
+    		choices: [68, 83],
+    		frame_time: 500,
+    		feeback_duration: 500,
+    		correct_text: "<p>You pressed the correct key</p>",
+    		incorrect_text: "<p>Incorrect. You pressed the wrong key.</p>",
+    		prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
+  		};
+
+  		jsPsych.init({
+    		timeline: [trials],
+  		});
+	
+		jest.runTimersToTime(1500);
+		utils.pressKey(68);
+		jest.runTimersToTime(500);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('<p>You pressed the correct key</p>');
+		jest.runTimersToTime(2000);
+		expect(jsPsych.getDisplayElement().innerHTML).toBe('');
+	});
+
 });

tests/plugins/plugin-free-sort.test.js

@@ -13,4 +13,94 @@ describe('free-sort plugin', function(){
 		expect(typeof window.jsPsych.plugins['free-sort']).not.toBe('undefined');
 	});
 
+	test('should display stimuli', function(){
+		var trial = {
+			type: 'free-sort',
+			stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg']
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_1.jpg\" data-src=\"img/happy_face_1.jpg\"'));
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_2.jpg\" data-src=\"img/happy_face_2.jpg\"'));
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_3.jpg\" data-src=\"img/happy_face_3.jpg\"'));
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('src=\"img/happy_face_4.jpg\" data-src=\"img/happy_face_4.jpg\"'));
+	});
+
+	test('should be able to adjust the height and width of free-sort area', function(){
+		var trial = {
+			type: 'free-sort',
+			stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
+			sort_area_height: 500,
+			sort_area_width: 700,
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('class=\"jspsych-free-sort-arena\" style=\"position: relative; width:700px; height:500px;'));
+	});
+
+	test('should be able to adjust the height and width of stimuli', function(){
+		var trial = {
+			type: 'free-sort',
+			stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
+			stim_height: 200,
+			stim_width: 200,
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<img src=\"img/happy_face_1.jpg\" data-src=\"img/happy_face_1.jpg\" class=\"jspsych-free-sort-draggable\" draggable=\"false\" style=\"position: absolute; cursor: move; width:200px; height:200px'));
+	});
+
+	test('should display prompt', function(){
+		var trial = {
+			type: 'free-sort',
+			stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
+			prompt: '<p>This is a prompt</p>'
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p>This is a prompt</p>'));
+	});
+
+	test('should display prompt at bottom if prompt_location is "below"',function(){
+		var trial = {
+			type: 'free-sort',
+			stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
+			prompt: '<p>This is a prompt</p>',
+			prompt_location: 'below',
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p>This is a prompt</p><button id=\"jspsych-free-sort-done-btn\"'));
+	});
+
+	test('should be able to change label of button', function(){
+		var trial = {
+			type: 'free-sort',
+			stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg'],
+			button_label: 'Finito'
+
+		}
+
+		jsPsych.init({
+			timeline: [trial],
+		});
+
+		expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<button id=\"jspsych-free-sort-done-btn\" class=\"jspsych-btn\">Finito</button>'));
+	});
+
 });