jspsych · DomDaSquishyBomb · May 13, 2025 · May 13, 2025 · May 13, 2025 · May 13, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/plugin-free-sort-ordered/README.md b/packages/plugin-free-sort-ordered/README.md
@@ -18,4 +18,4 @@ See [documentation](/packages/plugin-free-sort-ordered/README.md)
 
 ## Author / Citation
 
-[Cherrie Chang](https://github.com/cherriechang)
+[Cherrie Chang](https://github.com/cherriechang) 
diff --git a/packages/plugin-free-sort-ordered/assets/green-circle.png b/packages/plugin-free-sort-ordered/assets/green-circle.png
diff --git a/packages/plugin-free-sort-ordered/assets/green-square.png b/packages/plugin-free-sort-ordered/assets/green-square.png
diff --git a/packages/plugin-free-sort-ordered/assets/green-triangle.png b/packages/plugin-free-sort-ordered/assets/green-triangle.png
diff --git a/packages/plugin-free-sort-ordered/assets/index.html b/packages/plugin-free-sort-ordered/assets/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>jsPsychPluginFreeSortOrdered Example</title>
+    <script src="https://unpkg.com/jspsych"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <!-- Load the published plugin package here, e.g.
+<script src="https://unpkg.com/plugin-free-sort-ordered"></script>
+<script src="../dist/index.browser.js"></script> -->
+    <script src="../dist/index.browser.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" />
+    <link rel="stylesheet" href="../src/styles.css" />
+  </head>
+
+  <body></body>
+  <script>
+    const jsPsych = initJsPsych({
+      on_finish: function() {
+        jsPsych.data.displayData();
+      }
+    });
+
+    const trial = {
+      type: jsPsychPluginFreeSortOrdered,
+      stimulus: [
+        '../assets/blue-rec.png',
+        '../assets/green-rec.png',
+        '../assets/red-rec.png',
+        '../assets/blue-rec.png',
+        '../assets/green-rec.png',
+      ],
+      stim_height: 100,
+      stim_width: 120,
+      scale_factor: 1.1,
+      holding_area_height: 400,
+      holding_area_width: 1000,
+      box_colors: ["#0271bc", "#3ab54b", "#FF0000", "#0271bc", "#3ab54b"],
+      check_correct_order: true,
+      allow_multiple: true,
+      box_margin: 30,
+      snap_margin: 15,
+      prompt: 'Drag and drop the boxes to sort them in order.',
+      prompt_location: 'above',
+      button_label: 'Continue',
+      include_counter: true,
+    };
+
+    jsPsych.run([trial])
+  </script>
+</html>
diff --git a/packages/plugin-free-sort-ordered/assets/orange-circle.png b/packages/plugin-free-sort-ordered/assets/orange-circle.png
diff --git a/packages/plugin-free-sort-ordered/assets/orange-square.png b/packages/plugin-free-sort-ordered/assets/orange-square.png
diff --git a/packages/plugin-free-sort-ordered/assets/orange-triangle.png b/packages/plugin-free-sort-ordered/assets/orange-triangle.png
diff --git a/packages/plugin-free-sort-ordered/assets/purple-circle.png b/packages/plugin-free-sort-ordered/assets/purple-circle.png
diff --git a/packages/plugin-free-sort-ordered/assets/purple-square.png b/packages/plugin-free-sort-ordered/assets/purple-square.png
diff --git a/packages/plugin-free-sort-ordered/assets/purple-triangle.png b/packages/plugin-free-sort-ordered/assets/purple-triangle.png
diff --git a/packages/plugin-free-sort-ordered/examples/index.html b/packages/plugin-free-sort-ordered/examples/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>jsPsychPluginFreeSortOrdered Example</title>
     <script src="https://unpkg.com/jspsych"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <!-- Load the published plugin package here, e.g.
 <script src="https://unpkg.com/plugin-free-sort-ordered"></script>
 <script src="../dist/index.browser.js"></script> -->
@@ -13,27 +14,130 @@
 
   <body></body>
   <script>
-    const jsPsych = initJsPsych();
+    const jsPsych = initJsPsych({
+      on_finish: function() {
+        jsPsych.data.displayData();
+      }
+    });
 
-    const trial = {
+    const trial1 = {
       type: jsPsychPluginFreeSortOrdered,
       stimulus: [
-        '../assets/blue-rec.png',
-        '../assets/green-rec.png',
-        '../assets/red-rec.png',
+        {id: 0, file: '../assets/blue-rec.png', height: 100, width: 200},
+        {id: 1, file: '../assets/green-rec.png', height: 100, width: 200},
+        {id: 2, file: '../assets/red-rec.png', height: 100, width: 200}
       ],
       stim_height: 100,
-      stim_width: 200,
-      stim_order: [2, 0, 1],
-      scale_factor: 1,
-      holding_area_height: 500,
-      holding_area_width: 1000,
+      stim_width: 120,
+      scale_factor: 1.1,
+      boxes: [
+        {id: 0, color: '#0271bc', height: 100, width: 200},
+        {id: 1, color: '#3ab54b', height: 100, width: 200},
+        {id: 2, color: '#FF0000', height: 100, width: 200}
+      ],
+      use_correctness: true,
+      correctness_by: "color",
+      box_margin: 40,
+      snap_margin: 20,
       prompt: 'Drag and drop the boxes to sort them in order.',
       prompt_location: 'above',
       button_label: 'Continue',
       include_counter: true,
     };
 
-    jsPsych.run([trial])
+    const trial2 = {
+      type: jsPsychPluginFreeSortOrdered,
+      prompt: 'This is a template trial, we can make lots of variations to see how this plugin can function!',
+      scale_factor: 1.1,
+      holding_area_height: 400,
+      holding_area_width: 800,
+      box_margin: 40,
+      snap_margin: 20,
+      prompt_location: 'above',
+      button_label: 'Continue',
+      include_counter: false,
+      stimulus: [
+        {id: 0, file: '../assets/blue-rec.png', height: 100, width: 200},
+        {id: 1, file: '../assets/blue-rec.png', height: 100, width: 200},
+        {id: 2, file: '../assets/blue-rec.png', height: 100, width: 200}
+      ],
+      stim_height: 100, 
+      <!--Debug note! If you dont include these stim height and width parameters, you get bad box clicking behavior-->
+      stim_width: 120,
+      boxes: [
+        {id: 0, colour: '#0271bc', height: 100, width: 200},
+        {id: 1, colour: '#3ab54b', height: 100, width: 200},
+        {id: 2, colour: '#FF0000', height: 100, width: 200}
+      ],
+      use_correctness: false
+
+    };
+
+
+    const trial10 = {
+      type: jsPsychPluginFreeSortOrdered,
+      prompt: 'WONT WORK YET. This is a trial with a correct answer. You have to put all of the green shapes in the single box before you can move on.',
+      scale_factor: 1.1,
+      holding_area_height: 400,
+      holding_area_width: 800,
+      box_margin: 40,
+      snap_margin: 20,
+      prompt_location: 'above',
+      button_label: 'Continue',
+      include_counter: false,
+      stimulus: [
+        {id: 0, file: '../assets/green-circle.png', height: 100, width: 100},
+        {id: 0, file: '../assets/green-triangle.png', height: 100, width: 100},
+        {id: 0, file: '../assets/green-square.png', height: 100, width: 100},
+        {id: 1, file: '../assets/orange-circle.png', height: 100, width: 100},
+        {id: 1, file: '../assets/purple-triangle.png', height: 100, width: 100},
+        {id: 1, file: '../assets/purple-square.png', height: 100, width: 100}
+      ],
+      stim_height: 100, 
+      stim_width: 120,
+      boxes: [
+        {id: 0, colour: '#0271bc', height: 100, width: 200}
+      ],
+      use_correctness: true,
+      correctness_by: 'id',
+      use_criteria: true,
+      criteria: 'exact_correct_answers',
+      show_button: 'on_criteria'
+    };
+
+    const trial11 = {
+      type: jsPsychPluginFreeSortOrdered,
+      prompt: 'WONT WORK YET. Put the circles in the red box, the triangles in the blue box, and the squares in the green box. The trial will advance automatically once you put the last shape in the boxes, even if the answer is wrong.',
+      scale_factor: 1.1,
+      holding_area_height: 400,
+      holding_area_width: 800,
+      box_margin: 40,
+      snap_margin: 20,
+      prompt_location: 'above',
+      button_label: 'Continue',
+      include_counter: false,
+      stimulus: [
+        {id: 0, file: '../assets/green-circle.png', height: 100, width: 100},
+        {id: 1, file: '../assets/green-triangle.png', height: 100, width: 100},
+        {id: 2, file: '../assets/green-square.png', height: 100, width: 100},
+        {id: 0, file: '../assets/orange-circle.png', height: 100, width: 100},
+        {id: 1, file: '../assets/purple-triangle.png', height: 100, width: 100},
+        {id: 2, file: '../assets/purple-square.png', height: 100, width: 100}
+      ],
+      stim_height: 100, 
+      stim_width: 120,
+      boxes: [
+        {id: 0, colour: 'Red', height: 100, width: 200},
+        {id: 1, colour: 'Blue', height: 100, width: 200},
+        {id: 2, colour: 'Green', height: 100, width: 200}
+      ],
+      use_correctness: false,
+      use_criteria: true,
+      criteria: 'all_items_sorted',
+      response_ends_trial: true 
+    };
+
+
+    jsPsych.run([trial1, trial2])
   </script>
 </html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,4 +18,4 @@ See [documentation](/packages/plugin-free-sort-ordered/README.md)

		## Author / Citation

		[Cherrie Chang](https://github.com/cherriechang)
		[Cherrie Chang](https://github.com/cherriechang)