survey-Multi-Choice breaks study in Qualtrics integration, survey-Multi-Select works fine?!

[keremoktar]

Hello,
I'm trying to embed a jsPsych survey in a Qualtrics survey. I'm running into a weird issue: in the survey below, multi-select works perfectly fine but multi-choice breaks the experiment. I would ideally use the multi-choice plugin (since I want only one response on the question below), so I'm interested in troubleshooting the issue.

Here is what I mean by break the experiment. My study randomly assigns participants to one of four 'domain' (groups of stimuli). Then:

1. they are shown 3 sets of 8 items in random order from that domain.
2. these sets are shown as multi-select questions. participants choose a subset of these items.
3. one of these items chosen by the participant is randomly selected, and participants answer a follow-up question about this chosen item.
4. then the remaining two sets of items are shown, then the final, and the survey moves on.

What's happening is that when I use a multi-choice item instead of multi-select, the survey keeps looping through each possible stimulus set, rather than stopping after the three sets that participants are assigned to. I have not been able to understand this behavior; when I use multi-select instead, everything works fine. Multi-select also works fine for me in a local implementation.

I know it's a big ask to try and troubleshoot this, so if you go through it, thank you! You may find this guide to qualtrics/jspsych integration I used helpful: https://kywch.github.io/jsPsych-in-Qualtrics/

Note that I'm using jsPysch 6.3 to be able to follow the tutorial, since Qualtrics integration may have apparently changed since then and there aren't any guides I can find on 7.x.

To reproduce this issue, you will have to paste the following into the 'javascript' box in a qualtrics 'text/graphic' question.

Copy below (excluding dashes):

Qualtrics.SurveyEngine.addOnload(function () {

/*Place your JavaScript here to run when the page loads*/

/* Change 2: Hiding the Next button */
// Retrieve Qualtrics object and save in qthis
var qthis = this;

// Hide buttons
qthis.hideNextButton();

/* Change 3: Defining and load required resources */
var jslib_url = "https://keremoktar.github.io";

// the below urls must be accessible with your browser
// for example, https://kywch.github.io/jsPsych/jspsych.js
var requiredResources = [
	jslib_url + "/disagreement_statsampling/issues.js",
    jslib_url + "/jspsych6.3/jspsych.js",
    jslib_url + "/jspsych6.3/plugins/jspsych-html-keyboard-response.js",
	jslib_url + "/jspsych6.3/plugins/jspsych-survey-multi-choice.js",
	jslib_url + "/jspsych6.3/plugins/jspsych-survey-multi-select.js"
];

function loadScript(idx) {
    console.log("Loading ", requiredResources[idx]);
    jQuery.getScript(requiredResources[idx], function () {
        if ((idx + 1) < requiredResources.length) {
            loadScript(idx + 1);
        } else {
            initExp();
        }
    });
}

if (window.Qualtrics && (!window.frameElement || window.frameElement.id !== "mobile-preview-view")) {
    loadScript(0);
}

/* Change 4: Appending the display_stage Div using jQuery */
// jQuery is loaded in Qualtrics by default
jQuery("<div id = 'display_stage_background'></div>").appendTo('body');
jQuery("<div id = 'display_stage'></div>").appendTo('body');


/* Change 5: Wrapping jsPsych.init() in a function */
function initExp() {
	
	var timeline = [ ];
	
	var all_domains = ["Moral", "Politics", "Religion", "Science"];
	var cond = Math.floor(Math.random() * 3);
	var domain = all_domains[cond];
	
	jsPsych.data.addProperties({
	  domain: domain
	})

	//console.log(stimuli);
	
	//this is how to filter the items by specific properties
	var subj_stimuli = stimuli.filter(function(item) {
	  return item["Domain"] === domain;
	});
	//console.log(subj_stimuli);
	
	var agreement_levels = [
	  { disagreement_lvl: 'low', selected_item: "None" },
	  { disagreement_lvl: 'medium', selected_item: "None" },
	  { disagreement_lvl: 'high', selected_item: "None" }
	];
	
	var agreement_selexn_trial = {
	  type: "survey-multi-select",
	  on_start: function(){
	    console.log(subj_stimuli);
	  },
	  questions: [
	  {
		prompt: "Which of the following statements do you agree with? You may select multiple statements.", 
		options: function(){
					//filtering by disagreement level
					current_stimuli = subj_stimuli.filter(function(item) {
										return item["Disagreement Level"] === jsPsych.timelineVariable('disagreement_lvl');
									  });
					console.log("current stim disagreement level:", jsPsych.timelineVariable('disagreement_lvl'))
					console.log("current stim: ", current_stimuli)
					//randomizing order of presentation
					for (let i = current_stimuli.length - 1; i > 0; i--) {
					  const j = Math.floor(Math.random() * (i + 1));
					  [current_stimuli[i], current_stimuli[j]] = [current_stimuli[j], current_stimuli[i]];
					}
					//extracting only the item string from the data and returning the full array to populate "options"
					return current_stimuli.map(function(item) {return item.Item;})
				  },
		required: false,
		name: 'Agreement Selection Trial'
	  }],
		on_finish: function(data) { //storing information about subj response to give feedback in next trial
		  var agreed_items = data.response['Agreement Selection Trial']
		  var num_agreed = agreed_items.length
		  if (num_agreed > 0) {
			var random_ind = Math.floor(Math.random() * agreed_items.length);
			data.selected_item = agreed_items[random_ind]
		  } else {
			console.log("No response selected, skipping to next round")
			data.selected_item = "None"
			//jsPsych.endCurrentTimeline()
		  }
		  	//Qualtrics.SurveyEngine.setEmbeddedData("item1", data.selected_item);
		}
	};
	
	
	//////////////////////////////////////
	//    Agreement Confidence Trial    //
	//////////////////////////////////////
	// select all trials
	// get csv representation of data and log to console

	var agreement_confidence_trial = {
	  type: "survey-multi-choice",
	  questions: [
	  {
		prompt: function() {
		  var prompt_html = 
          "You selected that you agreed with the following claim: <b>" + 
            jsPsych.data.get().last(1).select('selected_item').values[0] + 
            "</b><br><br> How confident are you in this response?"
		  return prompt_html
		},
		options: ["Very confident", "Moderately confident", 
				  "Somewhat confident", "Only slightly confident", "Not at all confident"],
		required: true,
		horizontal: false,
		name: 'confidence'
	  }
	  ]
	};

	var if_selection = {
		timeline: [agreement_confidence_trial],
		conditional_function: function(){
			// get the data from the previous trial,
			// and check if there was a selection
			var selected_item = jsPsych.data.get().last(1).select('selected_item').values[0]
			if (selected_item === "None") {
			  return false;
			} else {
			  return true;
			}
		}
	};

	var dv_block = {
	  timeline: [agreement_selexn_trial, if_selection], //will only run if_selection if participant chose a statement to agree with
	  timeline_variables: agreement_levels,
	  randomize_order: true
	};
	
	timeline.push(dv_block);
	
    jsPsych.init({
        timeline: timeline,
        display_element: 'display_stage',

        /* Change 6: Adding the clean up and continue functions.*/
        on_finish: function (data) {
			
			// select all trials
			var all_data = jsPsych.data.get();

			// get csv representation of data and log to console
			console.log(all_data.csv());
			
			Qualtrics.SurveyEngine.setEmbeddedData("domain", domain);
		
            // clear the stage
            jQuery('#display_stage').remove();
            jQuery('#display_stage_background').remove();

            // simulate click on Qualtrics "next" button, making use of the Qualtrics JS API
            qthis.clickNextButton();
        }
    });
}

});

Qualtrics.SurveyEngine.addOnReady(function () {
});

Qualtrics.SurveyEngine.addOnUnload(function () {
});

And paste the following into the 'text' question as html:

If you are seeing this message for more than 5 minutes,
please screen-capture this screen and send the image to us.

We are very sorry for the inconvenience.

<style> #display_stage_background { width: 100vw; background-color: white; z-index: -1; } #display_stage { position: fixed; left: 1vw; top: 1vh; height: 98vh; width: 98vw; background-color: white; box-shadow: 1px 1px 1px #999; border-radius: 15px; z-index: 0; overflow-y: hidden; overflow-x: hidden; } </style>

---