Solved
Disable Next Button until embedded data field condition is met
I have a task where participants are asked to move two chairs and the computer records the location of the chairs. I want to be sure that participants move the chairs before being able to click on the next button.
One way I was thinking to do this is to disable the next button until the condition of moving the chair is met. The computer records the movement of the chairs with pixels using embedded data. If participants do not move the chairs the values for the embedded data fields "you x" and "you y" are left blank. Is there a way to write java code so that the next button will appear only if the chair is moved (if embedded data field is not blank)? I am not a programmer so am not sure what to do.
Here is a link to my task: https://qaz1.az1.qualtrics.com/jfe/form/SV_9Griq4aYcfbUBWl
Here is the embedded data code:
![](https://uploads-us-west-2.insided.com/qualtrics-us/attachment/ao_ap33yscn6m6g.jpg ""
Here is the code for the java script I currently have for this question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function() {
//variables
var draggableClassName = ".chair"; // the class name of elements that should be draggable
var edField = "distance"; // this will be the name of the Embedded Data field with the distance.
var partnerx = "aPosition"; //this will get center x coordinate of Partner Chair
var partnery = "aPosition"; //this will get center y coordinate of Partner Chair
var youx = "bPosition"; //this will get center x coordinate of You Chair
var youy = "bPosition"; //this will get center y coordinate of You Chair
jQuery( function() {
jQuery( draggableClassName ).draggable({
stop: function() {
var distance = getDistanceBetweenElements(document.getElementById("Chair1"),
document.getElementById("Chair2"));
Qualtrics.SurveyEngine.setEmbeddedData('edField', distance);
}
});
});
var getPositionAtCenter = function (element) {
var data = element.getBoundingClientRect();
return {
x: data.left + data.width / 2,
y: data.top + data.height / 2
};
};
var getDistanceBetweenElements = function(a, b) {
var aPosition = getPositionAtCenter(a);
Qualtrics.SurveyEngine.setEmbeddedData('partnerx', aPosition.x);
Qualtrics.SurveyEngine.setEmbeddedData('partnery', aPosition.y);
var bPosition = getPositionAtCenter(b);
Qualtrics.SurveyEngine.setEmbeddedData('youx', bPosition.x);
Qualtrics.SurveyEngine.setEmbeddedData('youy', bPosition.y);
return Math.sqrt(
Math.pow(aPosition.x - bPosition.x, 2) +
Math.pow(aPosition.y - bPosition.y, 2)
);
};
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Best answer by fleb
Disable your next button at the beginning of your code: `this.disableNextButton();` (e.g.: bellow this line: `Qualtrics.SurveyEngine.addOnReady(function() {`)
In case moving with one chair is sufficient to enable the next button, just enable it again `this.enableNextButton();` in your `stop` function.
In case you want both chairs to be moved:
1) Define the following variables before your `jQuery`:
var moved_CH1 = false;
var moved_CH2 = false;
2) Add this to your `stop` function:
if(this.id == "Chair1") {moved_CH1 = true;}
if(this.id == "Chair2") {moved_CH2 = true;}
if(moved_CH1 = true && moved_CH2 = true) {this.enableNextButton();}
I have tested the first case using click event in Qualtrics and the second case using draggable but outside Qualtrics since implementing the exact copy of your survey in Qualtrics would be too time-consuming for me. Therefore I'm not 100% sure it will work, but I hope so.
+6Disable your next button at the beginning of your code: `this.disableNextButton();` (e.g.: bellow this line: `Qualtrics.SurveyEngine.addOnReady(function() {`)
In case moving with one chair is sufficient to enable the next button, just enable it again `this.enableNextButton();` in your `stop` function.
In case you want both chairs to be moved:
1) Define the following variables before your `jQuery`:
var moved_CH1 = false;
var moved_CH2 = false;
2) Add this to your `stop` function:
if(this.id == "Chair1") {moved_CH1 = true;}
if(this.id == "Chair2") {moved_CH2 = true;}
if(moved_CH1 = true && moved_CH2 = true) {this.enableNextButton();}
I have tested the first case using click event in Qualtrics and the second case using draggable but outside Qualtrics since implementing the exact copy of your survey in Qualtrics would be too time-consuming for me. Therefore I'm not 100% sure it will work, but I hope so.
+6> @bibi said:
> Thank you so much for getting back to me. Can you please clarify what is the Stop function?
I meant the part of the code which is run when dragging is finished: `stop: function(){} `
I like your first solution and tried it below but for some reason the next button is disabled and won't enable after moving a chair. Did I implement it correctly?
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function() {
this.disableNextButton();
//variables
var draggableClassName = ".chair"; // the class name of elements that should be draggable
var edField = "distance"; // this will be the name of the Embedded Data field with the distance.
var partnerx = "aPosition"; //this will get center x coordinate of Partner Chair
var partnery = "aPosition"; //this will get center y coordinate of Partner Chair
var youx = "bPosition"; //this will get center x coordinate of You Chair
var youy = "bPosition"; //this will get center y coordinate of You Chair
jQuery( function() {
jQuery( draggableClassName ).draggable({
stop: function() {
this.enableNextButton();
var distance = getDistanceBetweenElements(document.getElementById("Chair1"),
document.getElementById("Chair2"));
Qualtrics.SurveyEngine.setEmbeddedData('edField', distance);
}
});
});
var getPositionAtCenter = function (element) {
var data = element.getBoundingClientRect();
return {
x: data.left + data.width / 2,
y: data.top + data.height / 2
};
};
var getDistanceBetweenElements = function(a, b) {
var aPosition = getPositionAtCenter(a);
Qualtrics.SurveyEngine.setEmbeddedData('partnerx', aPosition.x);
Qualtrics.SurveyEngine.setEmbeddedData('partnery', aPosition.y);
var bPosition = getPositionAtCenter(b);
Qualtrics.SurveyEngine.setEmbeddedData('youx', bPosition.x);
Qualtrics.SurveyEngine.setEmbeddedData('youy', bPosition.y);
return Math.sqrt(
Math.pow(aPosition.x - bPosition.x, 2) +
Math.pow(aPosition.y - bPosition.y, 2)
);
};
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Fleb found a solution that worked! Yay! Thank you so much.
Add this under "variables" at the top:
var Q = this;
this.disableNextButton();
Then add this to stop function: {Q.enableNextButton();
So in the syntax about it should look like this:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function() {
//variables
var draggableClassName = ".chair"; // the class name of elements that should be draggable
var edField = "distance"; // this will be the name of the Embedded Data field with the distance.
var partnerx = "aPosition"; //this will get center x coordinate of Partner Chair
var partnery = "aPosition"; //this will get center y coordinate of Partner Chair
var youx = "bPosition"; //this will get center x coordinate of You Chair
var youy = "bPosition"; //this will get center y coordinate of You Chair
var Q = this;
this.disableNextButton();
jQuery( function() {
jQuery( draggableClassName ).draggable({
stop: function() {Q.enableNextButton();
var distance = getDistanceBetweenElements(document.getElementById("Chair1"),
document.getElementById("Chair2"));
I have a similar question... I have a counter that calculates a "running total" score in the JS code handler portion where I define a variable (which I call qScore) that I make into embedded data (which I call etotalscore). I want participants to only be able to go to the next page if their score is at least 200.
I was able to get the Next button to be disabled onLoad using:
this.disableNextButton();
but I couldn't get it to disable using:
if(qScore >= 200) {this.enableNextButton();}
Any suggestions? Thank you :)
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.