Best answer by mattyb513
View original
How to create a custom code to move and record the location of two objects?
Hello, I'd like to use the rank question type to create a task where on the left panel I show participants two pictures of virtual chairs and I ask them to drag both chairs to set them up for a virtual conversation. I'd like to then record the location of the two chairs or be able to record the image so I can print it out and measure the distance between the two chairs. Is this doable?
Userlevel 6
+6
@bibi
Why not just calculate it all in code? Use pythagorean's theorem to get the distance in pixels and record that as Embedded Data?
Here's a gist for the JavaScript.
https://gist.github.com/mattbloomfield/8f65a17aecd8c4ee2051d68cc7edbf17
To implement it, you can just make a Text/Graphic question type and add the following HTML:
```html
<div id="ChairContainer">
<div class="chair" id="Chair1">Chair1</div>
<div class="chair" id="Chair2">Chair2</div>
</div>
```
Then add this CSS for the chair images:
```css
/* Place your CSS here */
#Chair1 {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_ehS6PmtWQ7AMfHL');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#Chair2 {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5aNSgsceL6ZeGzP');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.chair {
height: 250px;
width: 150px;
}
```
And finally, load in jQuery UI for the draggable chairs. Put this in your Header as raw HTML:
```html
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
```
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_9nSVd3z2CZiTltj?Q_SurveyVersionID=current&Q_CHL=preview
Why not just calculate it all in code? Use pythagorean's theorem to get the distance in pixels and record that as Embedded Data?
Here's a gist for the JavaScript.
https://gist.github.com/mattbloomfield/8f65a17aecd8c4ee2051d68cc7edbf17
To implement it, you can just make a Text/Graphic question type and add the following HTML:
```html
<div id="ChairContainer">
<div class="chair" id="Chair1">Chair1</div>
<div class="chair" id="Chair2">Chair2</div>
</div>
```
Then add this CSS for the chair images:
```css
/* Place your CSS here */
#Chair1 {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_ehS6PmtWQ7AMfHL');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#Chair2 {
background: url('https://qualtricssfi.az1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5aNSgsceL6ZeGzP');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.chair {
height: 250px;
width: 150px;
}
```
And finally, load in jQuery UI for the draggable chairs. Put this in your Header as raw HTML:
```html
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
```
Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_9nSVd3z2CZiTltj?Q_SurveyVersionID=current&Q_CHL=preview
Thank you so much for figuring this out! I am not a programmer so am a little confused about where to add the codes.
Specifically where do I put the CSS code? Do I put that in the "look and feel" section for the whole survey or beneath the html code?
<div id="ChairContainer">
<div class="chair" id="Chair1">Chair1</div>
<div class="chair" id="Chair2">Chair2</div>
</div>
Where do I put the code below as a header? Do you mean just to place above all of the code or is there a specific place for headers?
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Is there a way to program the computer so that the distance is recorded but not displayed to participants?
Finally, from which parts of the chairs is the distance measured? The center?
Thank you so much!
Specifically where do I put the CSS code? Do I put that in the "look and feel" section for the whole survey or beneath the html code?
<div id="ChairContainer">
<div class="chair" id="Chair1">Chair1</div>
<div class="chair" id="Chair2">Chair2</div>
</div>
Where do I put the code below as a header? Do you mean just to place above all of the code or is there a specific place for headers?
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Is there a way to program the computer so that the distance is recorded but not displayed to participants?
Finally, from which parts of the chairs is the distance measured? The center?
Thank you so much!
Userlevel 6
+6
@bibi
> Specifically where do I put the CSS code? Do I put that in the "look and feel" section for the whole survey or beneath the html code?
Add the CSS to the Look and Feel under Custom CSS.
> Where do I put the code below as a header? Do you mean just to place above all of the code or is there a specific place for headers?
> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Add the tag above to the "Header" section of the Look and Feel. Make sure your are in Source mode.
> Is there a way to program the computer so that the distance is recorded but not displayed to participants?
This is already being done - in the gist you can see a variable set called `edField`, currently set to `"distance"`. This means it will save the distance as an embedded data field (not visible to participants) as `distance`.
> Finally, from which parts of the chairs is the distance measured? The center?
This is measuring center to center. I think this is probably the best way to do it, and yes, measured in pixels.
> Specifically where do I put the CSS code? Do I put that in the "look and feel" section for the whole survey or beneath the html code?
Add the CSS to the Look and Feel under Custom CSS.
> Where do I put the code below as a header? Do you mean just to place above all of the code or is there a specific place for headers?
> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Add the tag above to the "Header" section of the Look and Feel. Make sure your are in Source mode.
> Is there a way to program the computer so that the distance is recorded but not displayed to participants?
This is already being done - in the gist you can see a variable set called `edField`, currently set to `"distance"`. This means it will save the distance as an embedded data field (not visible to participants) as `distance`.
> Finally, from which parts of the chairs is the distance measured? The center?
This is measuring center to center. I think this is probably the best way to do it, and yes, measured in pixels.
Hi Matt,
Thank you so much! I did this. I also added the java script that you wrote to the question by clicking add Javascript and then pasting the code. Is that what I was supposed to do?
https://gist.github.com/mattbloomfield/8f65a17aecd8c4ee2051d68cc7edbf17
My last task is that I was hoping to change the names of the chairs. Instead of Chair 1 (top chair) I wanted the label to be "Partner". Instead of Chair 2 (bottom) I wanted the label to be "You".
To do this I changed the names of the chairs in the html code and tried to change this in the java script but I think I missed something because it isn't working:
HTML CODE:
<div id="ChairContainer">
<div class="chair" id="Partner">Partner</div>
<div class="chair" id="You">You</div>
</div>
JAVA SCRIPT:
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.
jQuery( function() {
jQuery( draggableClassName ).draggable({
stop: function() {
var distance = getDistanceBetweenElements(document.getElementById("Partner"),
document.getElementById("You"));
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);
var bPosition = getPositionAtCenter(b);
return Math.sqrt(
Math.pow(aPosition.x - bPosition.x, 2) +
Math.pow(aPosition.y - bPosition.y, 2)
);
};
});
Thank you in advance for your time,
Thank you so much! I did this. I also added the java script that you wrote to the question by clicking add Javascript and then pasting the code. Is that what I was supposed to do?
https://gist.github.com/mattbloomfield/8f65a17aecd8c4ee2051d68cc7edbf17
My last task is that I was hoping to change the names of the chairs. Instead of Chair 1 (top chair) I wanted the label to be "Partner". Instead of Chair 2 (bottom) I wanted the label to be "You".
To do this I changed the names of the chairs in the html code and tried to change this in the java script but I think I missed something because it isn't working:
HTML CODE:
<div id="ChairContainer">
<div class="chair" id="Partner">Partner</div>
<div class="chair" id="You">You</div>
</div>
JAVA SCRIPT:
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.
jQuery( function() {
jQuery( draggableClassName ).draggable({
stop: function() {
var distance = getDistanceBetweenElements(document.getElementById("Partner"),
document.getElementById("You"));
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);
var bPosition = getPositionAtCenter(b);
return Math.sqrt(
Math.pow(aPosition.x - bPosition.x, 2) +
Math.pow(aPosition.y - bPosition.y, 2)
);
};
});
Thank you in advance for your time,
Hi Matt,
I did a test run and unfortunately the distance wasn't recorded so I am not sure if I did something wrong. Here is a link to the survey with this one question. I wanted the distance to be recorded but not displayed to participants. When I downloaded the data from this one question survey there was no variable for distance:
https://qaz1.az1.qualtrics.com/jfe/form/SV_2aBs3kyQGdEx29D
Also, I uploaded different pictures of chairs and also wanted to change the size of those chairs so I went to the CSS code and changed this. Is that ok?
.chair {
height: 200px;
width: 100px;
}
Thank you. If you think it would be easier for me to share this survey with you then let me know what your qualtrics user name is and I can share it.
I did a test run and unfortunately the distance wasn't recorded so I am not sure if I did something wrong. Here is a link to the survey with this one question. I wanted the distance to be recorded but not displayed to participants. When I downloaded the data from this one question survey there was no variable for distance:
https://qaz1.az1.qualtrics.com/jfe/form/SV_2aBs3kyQGdEx29D
Also, I uploaded different pictures of chairs and also wanted to change the size of those chairs so I went to the CSS code and changed this. Is that ok?
.chair {
height: 200px;
width: 100px;
}
Thank you. If you think it would be easier for me to share this survey with you then let me know what your qualtrics user name is and I can share it.
Sorry for the multiple messages but I have been working on being able to record the distance measure since it currently doesn't appear in the data file after the survey has been completed. I think that the way to do this is to include it in the survey flow as an embedded data field. Is that correct? I created an embedded data filed distance=edField.
Thank you
Thank you
bibi, I'm curious if you figured out to get the distance variable to be recorded and shown in your data file?
Thank you
Thank you
+2
Hi mattyb513 ,
I have a question about a similar HTML code I am trying to use in my study. I'd like to display an image of a raffle ticket to all participants and change the number of each raffle ticket. I used an integer randomizer and piped text, but I do not know how I can display the randomly generated number on top of the raffle ticket image. I am attaching an image of what this should look like. 
The code I am using, displays the image and the number separately:
${e://Field/Random%20ID}
Thanks for any help!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.