implements randomize order for all survey plugins, including tests #305

examples/jspsych-survey-multi-select.html

@@ -25,7 +25,7 @@
             prompt: "Which of these foods do you like?", 
             options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"], 
             horizontal: true,
-            required: false
+            required: true
           }
         ], 
         randomize_question_order: true

plugins/jspsych-survey-multi-choice.js

@@ -150,9 +150,8 @@ jsPsych.plugins['survey-multi-choice'] = (function() {
 
       // create object to hold responses
       var question_data = {};
-      var matches = display_element.querySelectorAll("div." + plugin_id_name + "-question");
+      for(var i=0; i<trial.questions.length; i++){
-      for(var i=0; i<matches.length; i++){
+        var match = display_element.querySelector('#jspsych-survey-multi-choice-'+i);
-        match = matches[i];
         var id = "Q" + i;
         if(match.querySelector("input[type=radio]:checked") !== null){
           var val = match.querySelector("input[type=radio]:checked").value;

plugins/jspsych-survey-text.js

@@ -138,10 +138,10 @@ jsPsych.plugins['survey-text'] = (function() {
 
       // create object to hold responses
       var question_data = {};
-      var matches = display_element.querySelectorAll('div.jspsych-survey-text-question');
+      
-      for(var index=0; index<matches.length; index++){
+      for(var index=0; index < trial.questions.length; index++){
         var id = "Q" + index;
-        var val = matches[index].querySelector('textarea, input').value;
+        var val = document.querySelector('#jspsych-survey-text-'+index).querySelector('textarea, input').value;
         var obje = {};
         obje[id] = val;
         Object.assign(question_data, obje);

tests/plugins/plugin-survey-likert.test.js

@@ -1,4 +1,5 @@
 const root = '../../';
+const utils = require('../testing-utils.js');
 
 jest.useFakeTimers();
 
@@ -13,4 +14,35 @@ describe('survey-likert plugin', function(){
 		expect(typeof window.jsPsych.plugins['survey-likert']).not.toBe('undefined');
 	});
 
+	test('data are logged with the right question when randomize order is true', function(){
+		var scale = ['a','b','c','d','e'];
+		var t = {
+			type: 'survey-likert',
+			questions: [
+				{ prompt: 'Q0', labels: scale },
+				{ prompt: 'Q1', labels: scale },
+				{ prompt: 'Q2', labels: scale },
+				{ prompt: 'Q3', labels: scale },
+				{ prompt: 'Q4', labels: scale }
+			],
+			randomize_question_order: true
+		}
+		jsPsych.init({timeline:[t]});
+
+		document.querySelector('input[name="Q0"][value="0"]').checked = true;
+		document.querySelector('input[name="Q1"][value="1"]').checked = true;
+		document.querySelector('input[name="Q2"][value="2"]').checked = true;
+		document.querySelector('input[name="Q3"][value="3"]').checked = true;
+		document.querySelector('input[name="Q4"][value="4"]').checked = true;
+
+		utils.clickTarget(document.querySelector('#jspsych-survey-likert-next'));
+
+		var survey_data = JSON.parse(jsPsych.data.get().values()[0].responses);
+		expect(survey_data.Q0).toBe(0);
+		expect(survey_data.Q1).toBe(1);
+		expect(survey_data.Q2).toBe(2);
+		expect(survey_data.Q3).toBe(3);
+		expect(survey_data.Q4).toBe(4);
+	});
+
 });

tests/plugins/plugin-survey-multi-choice.test.js

@@ -1,4 +1,5 @@
 const root = '../../';
+const utils = require('../testing-utils.js');
 
 jest.useFakeTimers();
 
@@ -13,4 +14,35 @@ describe('survey-multi-choice plugin', function(){
 		expect(typeof window.jsPsych.plugins['survey-multi-choice']).not.toBe('undefined');
 	});
 
+	test('data are logged with the right question when randomize order is true', function(){
+		var scale = ['a','b','c','d','e'];
+		var t = {
+			type: 'survey-multi-choice',
+			questions: [
+				{ prompt: 'Q0', options: scale },
+				{ prompt: 'Q1', options: scale },
+				{ prompt: 'Q2', options: scale },
+				{ prompt: 'Q3', options: scale },
+				{ prompt: 'Q4', options: scale }
+			],
+			randomize_question_order: true
+		}
+		jsPsych.init({timeline:[t]});
+
+		document.querySelector('#jspsych-survey-multi-choice-0 input[value="a"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-choice-1 input[value="b"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-choice-2 input[value="c"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-choice-3 input[value="d"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-choice-4 input[value="e"]').checked = true;
+
+		utils.clickTarget(document.querySelector('#jspsych-survey-multi-choice-next'));
+
+		var survey_data = JSON.parse(jsPsych.data.get().values()[0].responses);
+		console.log(jsPsych.data.get().json())
+		expect(survey_data.Q0).toBe('a');
+		expect(survey_data.Q1).toBe('b');
+		expect(survey_data.Q2).toBe('c');
+		expect(survey_data.Q3).toBe('d');
+		expect(survey_data.Q4).toBe('e');
+	});
 });

tests/plugins/plugin-survey-multi-select.test.js

@@ -1,4 +1,5 @@
 const root = '../../';
+const utils = require('../testing-utils.js');
 
 jest.useFakeTimers();
 
@@ -34,6 +35,38 @@ describe('survey-multi-select plugin', function(){
 		expect(jsPsych.getDisplayElement().innerHTML).toBe('');
 
 
-	})
+	});
+
+	test('data are logged with the right question when randomize order is true', function(){
+		var scale = ['a','b','c','d','e'];
+		var t = {
+			type: 'survey-multi-select',
+			questions: [
+				{ prompt: 'Q0', options: scale },
+				{ prompt: 'Q1', options: scale },
+				{ prompt: 'Q2', options: scale },
+				{ prompt: 'Q3', options: scale },
+				{ prompt: 'Q4', options: scale }
+			],
+			randomize_question_order: true
+		}
+		jsPsych.init({timeline:[t]});
+
+		document.querySelector('#jspsych-survey-multi-select-0 input[value="a"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-select-1 input[value="b"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-select-2 input[value="c"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-select-3 input[value="d"]').checked = true;
+		document.querySelector('#jspsych-survey-multi-select-4 input[value="e"]').checked = true;
+
+		utils.clickTarget(document.querySelector('#jspsych-survey-multi-select-next'));
+
+		var survey_data = JSON.parse(jsPsych.data.get().values()[0].responses);
+		console.log(jsPsych.data.get().json())
+		expect(survey_data.Q0[0]).toBe('a');
+		expect(survey_data.Q1[0]).toBe('b');
+		expect(survey_data.Q2[0]).toBe('c');
+		expect(survey_data.Q3[0]).toBe('d');
+		expect(survey_data.Q4[0]).toBe('e');
+	});
 
 });

tests/plugins/plugin-survey-text.test.js

@@ -82,4 +82,34 @@ describe('survey-text plugin', function(){
 		expect(jsPsych.getDisplayElement().innerHTML).toBe('');
 	});
 
+	test('data are logged with the right question when randomize order is true', function(){
+		var t = {
+			type: 'survey-text',
+			questions: [
+				{ prompt: 'Q0' },
+				{ prompt: 'Q1' },
+				{ prompt: 'Q2' },
+				{ prompt: 'Q3' },
+				{ prompt: 'Q4' }
+			],
+			randomize_question_order: true
+		}
+		jsPsych.init({timeline:[t]});
+
+		document.querySelector('#input-0').value = "a0";
+		document.querySelector('#input-1').value = "a1";
+		document.querySelector('#input-2').value = "a2";
+		document.querySelector('#input-3').value = "a3";
+		document.querySelector('#input-4').value = "a4";
+
+		utils.clickTarget(document.querySelector('#jspsych-survey-text-next'));
+
+		var survey_data = JSON.parse(jsPsych.data.get().values()[0].responses);
+		expect(survey_data.Q0).toBe('a0');
+		expect(survey_data.Q1).toBe('a1');
+		expect(survey_data.Q2).toBe('a2');
+		expect(survey_data.Q3).toBe('a3');
+		expect(survey_data.Q4).toBe('a4');
+	});
+
 });