Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Disable Next Button until embedded data field condition is met

bibi
bibi Community Member, Qualtrics Brand Admin Qubie ✭
edited December 2018 in Custom Code

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://us.v-cdn.net/6030293/uploads/editor/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 Answers

  • fleb
    fleb Czech RepublicCommunity Member Sage ✭✭✭
    Accepted Answer

    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.

  • bibi
    bibi Community Member, Qualtrics Brand Admin Qubie ✭
    Accepted Answer

    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"));
    

Answers

  • bibi
    bibi Community Member, Qualtrics Brand Admin Qubie ✭

    Thank you so much for getting back to me. Can you please clarify what is the Stop function?

  • fleb
    fleb Czech RepublicCommunity Member Sage ✭✭✭

    @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(){}

  • bibi
    bibi Community Member, Qualtrics Brand Admin Qubie ✭
    edited January 2019

    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/

    });

  • avashist
    avashist University City, MOCommunity Member Qubie ✭

    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 :)