diff --git a/docs/markdown_docs/plugins/jspsych-iat.md b/docs/markdown_docs/plugins/jspsych-iat.md
new file mode 100644
index 00000000..c427df75
--- /dev/null
+++ b/docs/markdown_docs/plugins/jspsych-iat.md
@@ -0,0 +1,70 @@
+# jspsych-iat plugin
+
+This plugin displays an image or HTML-formatted content and allows the subject to respond by pressing a key on the keyboard. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+
+Because this plugin can display any HTML content, it is quite versatile. It can be used for any situation in which the response generated by the subject is a single keystroke.
+
+## Parameters
+
+This table lists the parameters associated with this plugin. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
+
+Parameter | Type | Default Value | Description
+----------|------|---------------|------------
+stimulus | string | *undefined* | The stimulus to display. Either HTML-formatted, or the path to an image.
+is_html | boolean | false | If `stimulus` is an HTML-formatted string, this parameter needs to be set to `true`.
+prompt | string | "" | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press).
+image_when_wrong | string | *undefined* | Displays image feedback when user presses wrong key. Only needed when display_feedback == true. 
+wrong_image_name | string | *undefined* | The name associated with image_when_wrong. 
+display_feedback | boolean | false | If true, then image_when_wrong and wrong_image_name is required. If false, timing_response is needed and trial will continue automatically. 
+left_category_key | string | 'e' | Key press that is associated with the left_category_label. 
+right_category_key | string | 'i' | Key press that is associated with the right_category_label. 
+left_category_label | string | ['left'] | An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the left side of the page.
+right_category_label | string | ['right'] | An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the right side of the page. 
+stim_key_association | string | 'undefined' | Inputs are either 'left' or 'right'. It will associate the stimulus with the key presses on the left or right side of the page(left_category_key or right_category_key). 
+key_to_move_forward | array of characters | [jsPsych.ALL_KEYS] | This array contains the characters the subject is allowed to press to move on to the next trial if their key press was incorrect and feedback was displayed. 
+timing_response | numeric | -1 | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the the subject's response will be recorded as -1 for the trial and the trial will end. If the value of this parameter is -1, then the trial will wait for a response indefinitely.
+response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `timing_response` parameter). If false, then the trial will continue until the value for `timing_response` is reached. You can use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
+
+## Data Generated
+
+In addition to the [default data collected by all plugins](overview#datacollectedbyplugins), this plugin collects the following data for each trial.
+
+Name | Type | Value
+-----|------|------
+stimulus | string | Either the path to the image file or the string containing the HTML formatted content that the subject saw on this trial.
+key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response.
+rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response.
+correct | boolean | Boolean of whether the user's key press was correct for the given image or incorrect. 
+
+## Examples
+
+####Displaying feedback after wrong response 
+
+'''javascript 
+var trial = {
+	type:'iat',
+	is_html: false,
+	stimulus: 'img/blue.png,'
+	stim_key_association: 'right',
+	image_when_wrong: 'img/redX.png',
+	wrong_image_name: 'red X',
+	left_category_key: 'F',
+	right_category_key: 'J',
+	left_category_label: ['orange','happy'],
+	right_category_label: ['blue','sad'],
+	key_to_move_forward:['a','b'],
+	display_feedback: true,
+	response_ends_trial: true
+}
+'''
+
+####Setting timing response 
+
+'''javascrpt
+var trial = {
+	type:'iat',
+	stimulus: 'img/blue.png',
+	left_category_key: 'F',
+	right_category_key: 'J',
+	
+}
diff --git a/examples/age/of1.jpg b/examples/img/age/of1.jpg
similarity index 100%
rename from examples/age/of1.jpg
rename to examples/img/age/of1.jpg
diff --git a/examples/age/of2.jpg b/examples/img/age/of2.jpg
similarity index 100%
rename from examples/age/of2.jpg
rename to examples/img/age/of2.jpg
diff --git a/examples/age/of3.jpg b/examples/img/age/of3.jpg
similarity index 100%
rename from examples/age/of3.jpg
rename to examples/img/age/of3.jpg
diff --git a/examples/age/om1.jpg b/examples/img/age/om1.jpg
similarity index 100%
rename from examples/age/om1.jpg
rename to examples/img/age/om1.jpg
diff --git a/examples/age/om2.jpg b/examples/img/age/om2.jpg
similarity index 100%
rename from examples/age/om2.jpg
rename to examples/img/age/om2.jpg
diff --git a/examples/age/om3.jpg b/examples/img/age/om3.jpg
similarity index 100%
rename from examples/age/om3.jpg
rename to examples/img/age/om3.jpg
diff --git a/examples/age/yf1.jpg b/examples/img/age/yf1.jpg
similarity index 100%
rename from examples/age/yf1.jpg
rename to examples/img/age/yf1.jpg
diff --git a/examples/age/yf4.jpg b/examples/img/age/yf4.jpg
similarity index 100%
rename from examples/age/yf4.jpg
rename to examples/img/age/yf4.jpg
diff --git a/examples/age/yf5.jpg b/examples/img/age/yf5.jpg
similarity index 100%
rename from examples/age/yf5.jpg
rename to examples/img/age/yf5.jpg
diff --git a/examples/age/ym2.jpg b/examples/img/age/ym2.jpg
similarity index 100%
rename from examples/age/ym2.jpg
rename to examples/img/age/ym2.jpg
diff --git a/examples/age/ym3.jpg b/examples/img/age/ym3.jpg
similarity index 100%
rename from examples/age/ym3.jpg
rename to examples/img/age/ym3.jpg
diff --git a/examples/age/ym5.jpg b/examples/img/age/ym5.jpg
similarity index 100%
rename from examples/age/ym5.jpg
rename to examples/img/age/ym5.jpg
diff --git a/examples/redX.png b/examples/img/redX.png
similarity index 100%
rename from examples/redX.png
rename to examples/img/redX.png
diff --git a/examples/jspsych-iat.html b/examples/jspsych-iat.html
index cb39763a..89ac9557 100644
--- a/examples/jspsych-iat.html
+++ b/examples/jspsych-iat.html
@@ -6,7 +6,7 @@
   <script src="../jspsych.js"></script>
   <script src="../plugins/jspsych-text.js"></script>
   <script src="../plugins/jspsych-iat.js"></script>
-  <link href="../css/jspsych.css" rel="stylesheet" type="text/css"></link>
+  <link href="../css/jspsych.css" rel="stylesheet"></link>
 </head>
 <body>
 </body>
@@ -42,15 +42,14 @@ var category_block = {
 
 var instructions_block = {
   type: 'text',
-  text: "<div style='position: fixed; left: 100px; top: 80px;'><p>Press E for:<br> " + 
-  "<strong>OLD</strong></p></div>" + "<div style='position: fixed; right: 100px; top: 80px;'><p>Press I for:<br>" + "<strong>YOUNG</strong></p></div>" + 
-  "<div style='position: relative; width: 900px;'>" +
-  "<p>Put a left finger on the <strong>E</strong> key for items that belong to the Old People category. Put a right finger on the " +
+  text: "<div style='position: absolute; top: 18%; left: 20%'><p>Press E for:<br><strong>OLD</strong></p></div>" + 
+  "<div style='position: absolute; top: 18%; right: 20%'><p>Press I for:<br><strong>YOUNG</strong></p></div>" + 
+  "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>E</strong> key for items that belong to the Old People category. Put a right finger on the " +
   "<strong>I</strong> key for items that belong to the Young People " +
   "category. Items will appear one at a time.<br><br>" + "If you " +
   "make a mistake, a red X will appear. Press the keys listed below " +
   "to continue. Go as fast as you can while being accurate.<br><br> " +
-  "Press the any key when you are ready to start.</p></div>",
+  "Press the any key when you are ready to start.</div>",
 };
 
 
@@ -61,7 +60,7 @@ var trial_block = {
     stimulus: jsPsych.timelineVariable('stimulus'),
     stim_key_association: jsPsych.timelineVariable('stim_key_association'),
     is_html: false,
-    image_when_wrong: 'redX.png',
+    image_when_wrong: 'img/redX.png',
     wrong_image_name: 'red X',
     display_feedback: true, 
     timing_response: 3000, //Only if display_feedback is false 
@@ -74,18 +73,18 @@ var trial_block = {
   }
   ],
   timeline_variables: [
-  {stimulus: "age/of1.jpg", stim_key_association: "left"},
-  {stimulus: "age/of2.jpg", stim_key_association: "left"},
-  {stimulus: "age/of3.jpg", stim_key_association: "left"},
-  {stimulus: "age/om1.jpg", stim_key_association: "left"},
-  {stimulus: "age/om2.jpg", stim_key_association: "left"},
-  {stimulus: "age/om3.jpg", stim_key_association: "left"},
-  {stimulus: "age/yf1.jpg", stim_key_association: "right"},
-  {stimulus: "age/yf4.jpg", stim_key_association: "right"},
-  {stimulus: "age/yf5.jpg", stim_key_association: "right"},
-  {stimulus: "age/ym2.jpg", stim_key_association: "right"},
-  {stimulus: "age/ym3.jpg", stim_key_association: "right"},
-  {stimulus: "age/ym5.jpg", stim_key_association: "right"}
+  {stimulus: "img/age/of1.jpg", stim_key_association: "left"},
+  {stimulus: "img/age/of2.jpg", stim_key_association: "left"},
+  {stimulus: "img/age/of3.jpg", stim_key_association: "left"},
+  {stimulus: "img/age/om1.jpg", stim_key_association: "left"},
+  {stimulus: "img/age/om2.jpg", stim_key_association: "left"},
+  {stimulus: "img/age/om3.jpg", stim_key_association: "left"},
+  {stimulus: "img/age/yf1.jpg", stim_key_association: "right"},
+  {stimulus: "img/age/yf4.jpg", stim_key_association: "right"},
+  {stimulus: "img/age/yf5.jpg", stim_key_association: "right"},
+  {stimulus: "img/age/ym2.jpg", stim_key_association: "right"},
+  {stimulus: "img/age/ym3.jpg", stim_key_association: "right"},
+  {stimulus: "img/age/ym5.jpg", stim_key_association: "right"}
   ],
   randomize_order: true,
   repititions: 2
@@ -93,17 +92,15 @@ var trial_block = {
 
 var instructions_block2 = {
   type: 'text',
-  text: "<div style='position: fixed; left: 100px; top: 80px;'>Press E for:<br> " + 
-  "<strong>BAD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
-  "Press I for:<br>" + "<strong>GOOD</strong></div>" + 
-  "<div style='position: relative; width: 900px;'>" + 
-  "<p>Put a left finger on the <strong>E</strong> key for items that " +
+  text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" + 
+  "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br><strong>GOOD</strong></div>" + 
+  "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>E</strong> key for items that " +
   "belong to the Bad category. Put a right finger on the " +
   "<strong>I</strong> key for items that belong to the Good " +
   "category. Items will appear one at a time.<br><br>" + "If you " +
   "make a mistake, a red X will appear. Press the keys listed below " +
   "to continue. Go as fast as you can while being accurate.<br><br> " +
-  "Press the any key when you are ready to start.</p></div>",
+  "Press the any key when you are ready to start.</div>",
 };
 
 var trial_block2 = {
@@ -113,7 +110,7 @@ var trial_block2 = {
     is_html: true,
     stimulus: jsPsych.timelineVariable('stimulus'),
     stim_key_association: jsPsych.timelineVariable('stim_key_association'),
-    image_when_wrong: 'redX.png',
+    image_when_wrong: 'img/redX.png',
     wrong_image_name: 'red X',
     display_feedback: true, 
     timing_response: 3000, //Only if display_feedback is false 
@@ -149,15 +146,15 @@ var trial_block2 = {
 
 var instructions_block3 = {
   type: 'text',
-  text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " + 
-  "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
-  "Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + 
-  "<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for " +
+  text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + 
+  "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
+  "Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + 
+  "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for " +
   "Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" + 
   "Each item belongs to only one category.<br><br>" + "If you " +
   "make a mistake, a red X will appear. Press the keys listed below " +
   "to continue. Go as fast as you can while being accurate.<br><br> " +
-  "Press the any key when you are ready to start.</p>",
+  "Press the any key when you are ready to start.</div>",
 };
 
 var trial_block3 = {
@@ -167,7 +164,7 @@ var trial_block3 = {
     is_html: jsPsych.timelineVariable('is_html'),
     stimulus: jsPsych.timelineVariable('stimulus'),
     stim_key_association: jsPsych.timelineVariable('stim_key_association'),
-    image_when_wrong: 'redX.png',
+    image_when_wrong: 'img/redX.png',
     wrong_image_name: 'red X',
     display_feedback: true, 
     timing_response: 3000, //Only if display_feedback is false 
@@ -180,18 +177,18 @@ var trial_block3 = {
   }
   ],
   timeline_variables: [
-  {stimulus: "age/of1.jpg", stim_key_association: "left", is_html: false},
-  {stimulus: "age/of2.jpg", stim_key_association: "left", is_html: false},
-  {stimulus: "age/of3.jpg", stim_key_association: "left", is_html: false},
-  {stimulus: "age/om1.jpg", stim_key_association: "left", is_html: false},
-  {stimulus: "age/om2.jpg", stim_key_association: "left", is_html: false},
-  {stimulus: "age/om3.jpg", stim_key_association: "left", is_html: false},
-  {stimulus: "age/yf1.jpg", stim_key_association: "right", is_html: false},
-  {stimulus: "age/yf4.jpg", stim_key_association: "right", is_html: false},
-  {stimulus: "age/yf5.jpg", stim_key_association: "right", is_html: false},
-  {stimulus: "age/ym2.jpg", stim_key_association: "right", is_html: false},
-  {stimulus: "age/ym3.jpg", stim_key_association: "right", is_html: false},
-  {stimulus: "age/ym5.jpg", stim_key_association: "right", is_html: false},
+  {stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
+  {stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
+  {stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
+  {stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
+  {stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
+  {stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
+  {stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
+  {stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
+  {stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
+  {stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
+  {stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
+  {stimulus: "img/age/ym5.jpg", stim_key_association: "right", is_html: false},
   {stimulus: "Humiliate", stim_key_association: "left", is_html: true},
   {stimulus: "Evil", stim_key_association: "left", is_html: true},
   {stimulus: "Grief", stim_key_association: "left", is_html: true},
@@ -215,15 +212,15 @@ var trial_block3 = {
 
 var instructions_block4 = {
   type: 'text',
-  text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " + 
-  "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
-  "Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + 
-  "<p style='padding-top: 100px'>This is the same as the previous part.<br>" + "Use <strong>E</strong> for Bad and for " +
+  text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + 
+  "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
+  "Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + 
+  "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part.<br>" + "Use <strong>E</strong> for Bad and for " +
   "Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" + 
   "Each item belongs to only one category.<br><br>" + "If you " +
   "make a mistake, a red X will appear. Press the keys listed below " +
   "to continue. Go as fast as you can while being accurate.<br><br> " +
-  "Press the any key when you are ready to start.</p>",
+  "Press the any key when you are ready to start.</div>",
 };
 
 var trial_block4 = {
@@ -233,7 +230,7 @@ var trial_block4 = {
     is_html: jsPsych.timelineVariable('is_html'),
     stimulus: jsPsych.timelineVariable('stimulus'),
     stim_key_association: jsPsych.timelineVariable('stim_key_association'),
-    image_when_wrong: 'redX.png',
+    image_when_wrong: 'img/redX.png',
     wrong_image_name: 'red X',
     display_feedback: true, 
       timing_response: 3000, //Only if display_feedback is false 
@@ -246,18 +243,18 @@ var trial_block4 = {
     }
     ],
     timeline_variables: [
-    {stimulus: "age/of1.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/of2.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/of3.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/om1.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/om2.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/om3.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/yf1.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/yf4.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/yf5.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/ym2.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/ym3.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/ym5.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/ym5.jpg", stim_key_association: "right", is_html: false},
     {stimulus: "Humiliate", stim_key_association: "left", is_html: true},
     {stimulus: "Evil", stim_key_association: "left", is_html: true},
     {stimulus: "Grief", stim_key_association: "left", is_html: true},
@@ -281,13 +278,13 @@ var trial_block4 = {
 
   var instructions_block5 = {
     type: 'text',
-    text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>YOUNG</strong></div>" +
-    "<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>OLD</strong></div>" +
-    "<p style='padding-top: 100px'>Watch out, the labels have changed positions!<br>" +
+    text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>YOUNG</strong></div>" +
+    "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>OLD</strong></div>" +
+    "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Watch out, the labels have changed positions!<br>" +
     "Use <strong>E</strong> for Young People<br>" + "Use <strong>I</strong> for Old People<br><br>" +
     "If you make a mistake, a red X will appear. Press the keys listed below " +
     "to continue. Go as fast as you can while being accurate.<br><br> " +
-    "Press the any key when you are ready to start.</p>"
+    "Press the any key when you are ready to start.</div>"
   };
 
   var trial_block5 = {
@@ -297,7 +294,7 @@ var trial_block4 = {
       is_html: false,
       stimulus: jsPsych.timelineVariable('stimulus'),
       stim_key_association: jsPsych.timelineVariable('stim_key_association'),
-      image_when_wrong: 'redX.png',
+      image_when_wrong: 'img/redX.png',
       wrong_image_name: 'red X',
       display_feedback: true, 
       timing_response: 3000, //Only if display_feedback is false 
@@ -310,18 +307,18 @@ var trial_block4 = {
     }
     ],
     timeline_variables: [
-    {stimulus: "age/of1.jpg", stim_key_association: "right"},
-    {stimulus: "age/of2.jpg", stim_key_association: "right"},
-    {stimulus: "age/of3.jpg", stim_key_association: "right"},
-    {stimulus: "age/om1.jpg", stim_key_association: "right"},
-    {stimulus: "age/om2.jpg", stim_key_association: "right"},
-    {stimulus: "age/om3.jpg", stim_key_association: "right"},
-    {stimulus: "age/yf1.jpg", stim_key_association: "left"},
-    {stimulus: "age/yf4.jpg", stim_key_association: "left"},
-    {stimulus: "age/yf5.jpg", stim_key_association: "left"},
-    {stimulus: "age/ym2.jpg", stim_key_association: "left"},
-    {stimulus: "age/ym3.jpg", stim_key_association: "left"},
-    {stimulus: "age/ym5.jpg", stim_key_association: "left"}
+    {stimulus: "img/age/of1.jpg", stim_key_association: "right"},
+    {stimulus: "img/age/of2.jpg", stim_key_association: "right"},
+    {stimulus: "img/age/of3.jpg", stim_key_association: "right"},
+    {stimulus: "img/age/om1.jpg", stim_key_association: "right"},
+    {stimulus: "img/age/om2.jpg", stim_key_association: "right"},
+    {stimulus: "img/age/om3.jpg", stim_key_association: "right"},
+    {stimulus: "img/age/yf1.jpg", stim_key_association: "left"},
+    {stimulus: "img/age/yf4.jpg", stim_key_association: "left"},
+    {stimulus: "img/age/yf5.jpg", stim_key_association: "left"},
+    {stimulus: "img/age/ym2.jpg", stim_key_association: "left"},
+    {stimulus: "img/age/ym3.jpg", stim_key_association: "left"},
+    {stimulus: "img/age/ym5.jpg", stim_key_association: "left"}
     ],
     randomize_order: true,
     repititions: 2
@@ -329,14 +326,14 @@ var trial_block4 = {
 
   var instructions_block6 = {
     type: 'text',
-    text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
-    "<strong>OLD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" +
+    text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
+    "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" +
     "<strong>YOUNG</strong></div>" +
-    "<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for Old People<br>" + 
+    "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for Old People<br>" + 
     "Use <strong>I</strong> for Good and for Young People<br><br>" +
     "If you make a mistake, a red X will appear. Press the keys listed below " +
     "to continue. Go as fast as you can while being accurate.<br><br> " +
-    "Press the any key when you are ready to start.</p>"
+    "Press the any key when you are ready to start.</div>"
   };
 
   var trial_block6 = {
@@ -346,7 +343,7 @@ var trial_block4 = {
       is_html: jsPsych.timelineVariable('is_html'),
       stimulus: jsPsych.timelineVariable('stimulus'),
       stim_key_association: jsPsych.timelineVariable('stim_key_association'),
-      image_when_wrong: 'redX.png',
+      image_when_wrong: 'img/redX.png',
       wrong_image_name: 'red X',
       display_feedback: true, 
       timing_response: 3000, //Only if display_feedback is false 
@@ -358,18 +355,18 @@ var trial_block4 = {
     }
     ],
     timeline_variables: [
-    {stimulus: "age/of1.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/of2.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/of3.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/om1.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/om2.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/om3.jpg", stim_key_association: "left", is_html: false},
-    {stimulus: "age/yf1.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/yf4.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/yf5.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/ym2.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/ym3.jpg", stim_key_association: "right", is_html: false},
-    {stimulus: "age/ym5.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
+    {stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
+    {stimulus: "img/age/ym5.jpg", stim_key_association: "right", is_html: false},
     {stimulus: "Humiliate", stim_key_association: "left", is_html: true},
     {stimulus: "Evil", stim_key_association: "left", is_html: true},
     {stimulus: "Grief", stim_key_association: "left", is_html: true},
@@ -393,16 +390,16 @@ var trial_block4 = {
 
   var instructions_block7 = {
     type: 'text',
-    text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
-    "<strong>Old People</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
+    text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
+    "<strong>Old People</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
     "<strong>Young People</strong></div>" +
-    "<p style='padding-top: 100px'>This is the same as the previous part<br>" + 
+    "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part<br>" + 
     "Use <strong>E</strong> for Bad and for Old People<br>" + 
     "Use <strong>I</strong> for Good and for Young People<br>" +
     "Each item belongs to only one category<br><br>" +
     "If you make a mistake, a red X will appear. Press the keys listed below " +
     "to continue. Go as fast as you can while being accurate.<br><br> " +
-    "Press the any key when you are ready to start.</p>"
+    "Press the any key when you are ready to start.</div>"
   };
 
   var debrief_block = {
@@ -422,29 +419,29 @@ var trial_block4 = {
   };
 
   var timeline = [];
-// timeline.push(welcome_block);
-// timeline.push(category_block);
-// timeline.push(instructions_block);
-// timeline.push(trial_block);
-// timeline.push(instructions_block2);
-// timeline.push(trial_block2);
-// timeline.push(instructions_block3);
-// timeline.push(trial_block3);
-timeline.push(instructions_block4);
-timeline.push(trial_block4);
-timeline.push(instructions_block5);
-timeline.push(trial_block5);
-timeline.push(instructions_block6);
-timeline.push(trial_block6);
-timeline.push(instructions_block7);
-timeline.push(trial_block6);
-timeline.push(debrief_block);
+  timeline.push(welcome_block);
+  timeline.push(category_block);
+  timeline.push(instructions_block);
+  timeline.push(trial_block);
+  timeline.push(instructions_block2);
+  timeline.push(trial_block2);
+  timeline.push(instructions_block3);
+  timeline.push(trial_block3);
+  timeline.push(instructions_block4);
+  timeline.push(trial_block4);
+  timeline.push(instructions_block5);
+  timeline.push(trial_block5);
+  timeline.push(instructions_block6);
+  timeline.push(trial_block6);
+  timeline.push(instructions_block7);
+  timeline.push(trial_block6);
+  timeline.push(debrief_block);
 
-jsPsych.init({
-  timeline: timeline,
-  on_finish: function() {
-    jsPsych.data.displayData();
-  }
-});
-</script>
-</html>
\ No newline at end of file
+  jsPsych.init({
+    timeline: timeline,
+    on_finish: function() {
+      jsPsych.data.displayData();
+    }
+  });
+  </script>
+  </html>
\ No newline at end of file
diff --git a/plugins/jspsych-iat.js b/plugins/jspsych-iat.js
index bdadafcf..e9c29e05 100644
--- a/plugins/jspsych-iat.js
+++ b/plugins/jspsych-iat.js
@@ -41,17 +41,17 @@
     trial.stim_key_association = trial.stim_key_association || 'undefined';
     trial.response_ends_trial = (typeof trial.response_ends_trial == 'undefined') ? true : trial.response_ends_trial;
     trial.timing_response = trial.timing_response || 0;
-    trial.key_to_move_forward = trial.key_to_move_forward || jsPsych.ALL_KEYS;
+    trial.key_to_move_forward = trial.key_to_move_forward || [jsPsych.ALL_KEYS];
     trial.is_html = (typeof trial.is_html == 'undefined') ? false : trial.is_html;
     trial.prompt = trial.prompt || "";
 
 
     //Creates extra styling needed 
-    var node = display_element.innerHTML += "<style id='jspsych-iat-css'>";
-    var cssstr = ".jspsych-iat-left {float: left; margin: 0px 150px 30px 0px;}" + 
-    ".jspsych-iat-right {float: right; margin: 0px 0px 30px 150px;}" 
+    //var node = display_element.innerHTML += "<style id='jspsych-iat-css'>";
+    // var cssstr = ".jspsych-iat-left {float: left; margin: 0px 150px 30px 0px;}" + 
+    // ".jspsych-iat-right {float: right; margin: 0px 0px 30px 150px;}" 
 
-    display_element.querySelector('#jspsych-iat-css').innerHTML = cssstr;
+    //display_element.querySelector('#jspsych-iat-css').innerHTML = cssstr;
 
     //Get keys to continue and put them in a string 
     var i;
@@ -61,43 +61,43 @@
       keysToContinue += trial.key_to_move_forward[i] + ", ";
     }
 
-    var html_str = "";
-    html_str += "<div style='position: relative; width: 100%; height: 100%' id='jspsych-iat-stim'>";
+    var html_str = " ";
+    //html_str += "<div class='main_layout' style='position: relative; height: 100vh; width: 100vh' id='jspsych-iat-stim'>";
 
     if (!trial.is_html) {
-      html_str += "<div style='position: relative; width: 100%; height: 100%'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>";
+      html_str += "<div style='position: absolute; height: 20%; width: 100%; margin-left: auto; margin-right: auto; top: 42%; left: 0; right: 0'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>";
     } else {
-      html_str += "<div style='position: relative; width: 100%; height: 100%'><p id='jspsych-iat-stim'>"+trial.stimulus+"</p></div>";
+      html_str += "<div style='position: absolute; height: 20%; width: 100%; margin-left: auto; margin-right: auto; top: 42%; left: 0; right: 0'><p id='jspsych-iat-stim'>" + trial.stimulus + "</p></div>";
     } 
 
-    html_str += "<div id='trial_left_align' style='position: fixed; left: 100px; top: 80px;'>";
+    html_str += "<div id='trial_left_align' style='position: absolute; top: 18%; left: 20%'>";
 
     if(trial.left_category_label.length == 1) {
       html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " + 
-      trial.left_category_label[0].toUpperCase().bold() + "</p>";
+      trial.left_category_label[0].toUpperCase().bold() + "</p></div>";
     } else {
       html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " + 
       trial.left_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
-      trial.left_category_label[1].toUpperCase().bold() + "</p>";
+      trial.left_category_label[1].toUpperCase().bold() + "</p></div>";
     }
     
-    html_str += "</div><div id='trial_right_align' style='position: fixed; right: 100px; top: 80px;'>";
+    html_str += "<div id='trial_right_align' style='position: absolute; top: 18%; right: 20%'>";
 
     if(trial.right_category_label.length == 1) {
       html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " + 
-      trial.right_category_label[0].toUpperCase().bold() + '</p>';
+      trial.right_category_label[0].toUpperCase().bold() + '</p></div>';
     } else {
       html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " + 
       trial.right_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" + 
-      trial.right_category_label[1].toUpperCase().bold() + "</p>";
+      trial.right_category_label[1].toUpperCase().bold() + "</p></div>";
     }
     
-    html_str += "</div><div id='wrongImg' style='position:relative; top: 100px'>";
+    html_str += "<div id='wrongImg' style='position:relative; top: 300px; margin-left: auto; margin-right: auto; left: 0; right: 0'>";
 
     if(trial.display_feedback == true) {
 
 
-      html_str += "<div id='wrongImgContainer' style='align:center'><img src='" + trial.image_when_wrong + "' style='visibility: hidden;' id='wrongImgID'></img></div>";
+      html_str += "<div id='wrongImgContainer' style='position: absolute; top: -75px; margin-left: auto; margin-right: auto; left: 0; right: 0'><img src='" + trial.image_when_wrong + "' style='visibility: hidden;' id='wrongImgID'></img></div>";
       var wImg = document.getElementById("wrongImgID");
       //wImg.style.visibility = "hidden"; 
 
@@ -118,7 +118,7 @@
       html_str += "<p>Trial will continue automatically.</p>";
     }
 
-    html_str += "</div></div>";
+    html_str += "</div>";
     
     display_element.innerHTML += html_str;
 
diff --git a/tests/plugins/plugin-iat.test.js b/tests/plugins/plugin-iat.test.js
new file mode 100644
index 00000000..811e4cd0
--- /dev/null
+++ b/tests/plugins/plugin-iat.test.js
@@ -0,0 +1,201 @@
+const root = '../../';
+
+jest.useFakeTimers();
+
+describe('iat plugin', function(){
+
+  beforeEach(function(){
+    require(root + 'jspsych.js');
+    require(root + 'plugins/jspsych-iat.js');
+  });
+
+  test('loads correctly', function(){
+    expect(typeof window.jsPsych.plugins['iat']).not.toBe('undefined');
+  });
+
+  test('displays image by default', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '../media/blue.png'
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src="../media/blue.png" id="jspsych-iat-stim">');
+  });
+
+  test('displays html when is_html is true', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stimu"><p>hello</p></div>');
+  });
+
+  test('display should clear after key press', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('');
+  });
+
+  test('display should not clear after key press when choices is jsPsych.NO_KEYS', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true,
+      choices: jsPsych.NO_KEYS
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div>');
+  });
+
+  test('display should only clear when key is in choices array', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true,
+      choices: ['f']
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div>');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('');
+  });
+
+  test('prompt should append html below stimulus', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true,
+      prompt: '<div id="foo">this is the prompt</div>'
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div id="foo">this is the prompt</div>');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
+
+  });
+
+  test('timing_response should end trial after time has elapsed; only if display_feedback is false', function(){
+
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true,
+      display_feedback: false,
+      timing_response: 500
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div>');
+
+    jest.runAllTimers();
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('');
+
+  });
+
+  test('trial should not end when response_ends_trial is false and stimulus should get responded class', function(){
+    var trial = {
+      type: 'iat',
+      stimulus: '<p>hello</p>',
+      is_html: true,
+      response_ends_trial: false,
+      display_feedback: false,
+      timing_response: 500
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim" class=" responded"><p>hello</p></div>');
+
+    jest.runAllTimers();
+  });
+
+  test('should accept functions as parameters', function(){
+
+    var trial = {
+      type: 'iat',
+      stimulus: function(){ return '<p>hello</p>'; },
+      is_html: function(){ return true; },
+      choices: function(){ return ['j']; },
+      prompt: function(){ return '<div>prompt</div>'; },
+      timing_response: function(){ return 1000; },
+      response_ends_trial: function(){ return false; }
+    }
+
+    jsPsych.init({
+      timeline: [trial]
+    });
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div>prompt</div>');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div>prompt</div>');
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
+    document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div>prompt</div>');
+
+    jest.runTimersToTime(500);
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim" style="visibility: hidden;"><p>hello</p></div><div>prompt</div>');
+
+    jest.runTimersToTime(1000);
+
+    expect(jsPsych.getDisplayElement().innerHTML).toBe('');
+  });
+});
\ No newline at end of file