Merge pull request #1203 from jspsych/freesort

Updates to free-sort plugin
jspsych · Nov 25, 2020 · bbef9ef · bbef9ef
2 parents e94bc9f + 6471e4b
commit bbef9ef
Show file tree

Hide file tree

Showing 5 changed files with 407 additions and 79 deletions.
diff --git a/contributors.md b/contributors.md
@@ -9,6 +9,7 @@ The following people have contributed to the development of jsPsych by writing c
 * Gustavo Juantorena - https://github.com/GEJ1
 * Chris Jungerius - https://github.com/cjungerius
 * Jana Klaus - https://github.com/janakl4us
+* Peter Jes Kohler - https://github.com/pjkohler 
 * Jonas Lambers
 * Shane Martin - https://github.com/shamrt
 * Adrian Oesch - https://github.com/adrianoesch

diff --git a/docs/plugins/jspsych-free-sort.md b/docs/plugins/jspsych-free-sort.md
@@ -1,10 +1,6 @@
 # jspsych-free-sort plugin
 
-The free-sort plugin displays a collection of images on the screen that the subject can interact with by clicking and dragging. All of the moves that the subject performs are recorded.
-
-## Dependency
-
-This plugin requires the jQuery UI library, available at [https://jqueryui.com/](https://jqueryui.com/). You must include the library in the `<head>` section of your experiment page. You can use the [Google-hosted version of the library](https://developers.google.com/speed/libraries/#jquery-ui).
+The free-sort plugin displays one or more images on the screen that the participant can interact with by clicking and dragging. When the trial starts, the images can be positioned outside or inside the sort area. All images must be moved into the sorting area before the participant can click a button to end the trial. All of the moves that the participant performs are recorded, as well as the final positions of all images. This plugin could be useful when asking participants to position images based on similarity to one another, or to recall image spatial locations.
 
 ## Parameters
 
@@ -15,12 +11,20 @@ Parameter | Type | Default Value | Description
 stimuli | array | *undefined* | Each element of this array is an image path.
 stim_height | numeric | 100 | The height of the images in pixels.
 stim_width | numeric | 100 | The width of the images in pixels.
-sort_area_height | numeric | 800 | The height of the container that subjects can move the stimuli in. Stimuli will be constrained to this area.
-sort_area_width | numeric | 800 | The width of the container that subjects can move the stimuli in. Stimuli will be constrained to this area.
-prompt | string | null | This string can contain HTML markup. 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).
+scale_factor | numeric | 1.5 | How much larger to make the stimulus while moving (1 = no scaling).
+sort_area_height | numeric | 800 | The height of the container that participants can move the stimuli in. Stimuli will be constrained to this area.
+sort_area_width | numeric | 800 | The width of the container that participants can move the stimuli in. Stimuli will be constrained to this area.
+sort_area_shape | string | "ellipse" | The shape of the sorting area, can be "ellipse" or "square".
+prompt | string | null | This string can contain HTML markup. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
 prompt_location | string | "above" | Indicates whether to show the prompt `"above"` or `"below"` the sorting area.
-button_label | string |  'Continue' | The text that appears on the button to continue to the next trial.
-
+button_label | string | 'Continue' | The text that appears on the button to continue to the next trial.
+change_border_background_color | boolean | true | If `true`, the sort area border color will change while items are being moved in and out of the sort area, and the background color will change once all items have been moved into the sort area. If `false`, the border will remain black and the background will remain white throughout the trial.
+border_color_in | string | '#a1d99b' | If `change_border_background_color` is `true`, the sort area border will change to this color when an item is being moved into the sort area, and the background will change to this color when all of the items have been moved into the sort area.
+border_color_out | string | '#fc9272' | If `change_border_background_color` is `true`, this will be the color of the sort area border when there are one or more items that still need to be moved into the sort area.
+border_width | numeric | null | The width in pixels of the border around the sort area. If `null`, the border width will be 3% of the `sort_area_height`.
+counter_text_unfinished | string | You still need to place %n% item%s% inside the sort area. | Text to display when there are one or more items that still need to be placed in the sort area. If "%n%" is included in the string, it will be replaced with the number of items that still need to be moved inside. If "%s%" is included in the string, a "s" will be included when the number of items remaining is greater than one.
+counter_text_finished | string | All items placed. Feel free to reposition items if necessary. | Text that will take the place of the counter_text_unfinished text when all items have been moved inside the sort area.
+stim_starts_inside | boolean | false | If `false`, the images will be positioned to the left and right of the sort area when the trial loads. If `true`, the images will be positioned at random locations inside the sort area when the trial loads.
 
 ## Data Generated
 
@@ -31,7 +35,7 @@ Name | Type | Value
 init_locations | JSON string | A JSON-encoded object representing the initial locations of all the stimuli in the sorting area. The object is an array with one element per stimulus. Each element in the array has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location.
 moves | JSON string |  A JSON-encoded object representing all of the moves the participant made when sorting. The object is an array with each element representing a move. Each element in the array has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location after the move.
 final_locations | JSON string | A JSON-encoded object representing the final locations of all the stimuli in the sorting area. The object is an array with one element per stimulus. Each element in the array has a "src", "x", and "y" value. "src" is the image path, and "x" and "y" are the object location.
-rt | numeric | The response time in milliseconds for the subject to finish all sorting.
+rt | numeric | The response time in milliseconds for the participant to finish all sorting.
 
 ## Examples
 

diff --git a/examples/jspsych-free-sort.html b/examples/jspsych-free-sort.html
@@ -3,19 +3,92 @@
   <head>
     <script src="../jspsych.js"></script>
     <script src="../plugins/jspsych-free-sort.js"></script>
+    <script src="../plugins/jspsych-canvas-keyboard-response.js"></script>
     <link rel="stylesheet" href="../css/jspsych.css">
   </head>
   <body></body>
   <script>
 
-  var trials = {
+  var trial_1 = {
     type: 'free-sort',
-    stimuli: ['img/happy_face_1.jpg','img/happy_face_2.jpg','img/happy_face_3.jpg','img/happy_face_4.jpg']
+    stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
+    stim_height: 150,
+    stim_width: 200,
+    prompt: 'Please group similar expressions together. '
   };
 
+  var trial_2 = {
+    type: 'free-sort',
+    stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
+    stim_height: 120,
+    stim_width: 160,
+    prompt: '<p>Arrange the faces.</p>',
+    prompt_location: "below",
+    sort_area_height: 500,
+    sort_area_width: 600,
+    sort_area_shape: "square",
+    scale_factor: 1.2,
+    border_color_in: '#DCDCDC',
+    border_color_out: 'red'
+  };
+
+  var trial_3 = {
+    type: 'canvas-keyboard-response',
+    stimulus: function(c) {
+      c.style.border = "5px solid #A9A9A9";
+      // present images on a canvas at specific locations
+      var ctx = c.getContext('2d');
+      var img1 = new Image();
+      var img2 = new Image();
+      var img3 = new Image();
+      img1.src = 'img/1.gif';
+      img2.src = 'img/2.gif';
+      img3.src = 'img/3.gif';
+      img1.addEventListener('load', function() {
+        ctx.drawImage(img1, 0, 0, 90, 90);
+      }, false);
+      img2.addEventListener('load', function() {
+        ctx.drawImage(img2, 500, 600,  90, 90);
+      }, false);
+      img3.addEventListener('load', function() {
+        ctx.drawImage(img3, 300, 100,  90, 90);
+      }, false);
+    },
+    canvas_size: [700,700],
+    prompt: "Memorize the image locations (5s).",
+    choices: jsPsych.NO_KEYS,
+    trial_duration: 5000
+  };
+
+  var trial_4 = {
+    type: 'free-sort',
+    stimuli: ['img/1.gif','img/2.gif','img/3.gif'],
+    stim_height: 90,
+    stim_width: 90,
+    scale_factor: 1.0,
+    prompt: '<p>Where were the images?</p>',
+    prompt_location: 'below',
+    sort_area_shape: "square",
+    change_border_background_color: false,
+    border_width: 5,
+    counter_text_unfinished: "Not done yet...",
+    counter_text_finished: "Done!"
+  };
+
+  var trial_5 = {
+    type: 'free-sort',
+    stimuli: ['img/4.gif','img/5.gif','img/6.gif'],
+    prompt: '<p>Arrange the images.</p><p>Images start at random locations inside the sort area.</p>',
+    change_border_background_color: false,
+    border_width: 3,
+    counter_text_unfinished: "",
+    counter_text_finished: "",
+    stim_starts_inside: true,
+    sort_area_shape: "square"
+  };
 
   jsPsych.init({
-    timeline: [trials],
+    timeline: [trial_1, trial_2, trial_3, trial_4, trial_5],
     on_finish: function(){jsPsych.data.displayData();}
   });