Drawing boxes on images

Hi there, your best bet to get specific coordinates is probably to use the Heat Map question. Alternatively, you might be able to use the Signature question and include an image in the space where respondents would be "signing". This would let respondents draw a box over the image.
If you go that route, create a Signature question and then remove the "Sign Here" toggle and also set the Box size to large. Then add the below JavaScript to the Onload section of the question, changing out the URL and also updating the QID to point to the Signature question. Mine was QID14 in the below example.
jQuery("#QID14-SignatureOverlay").css({"background":"url('https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-bright-sunny-landscape-civilized-city-background-material-homesgreen-citylow-carbonenvironmental-image_82202.jpg')",
"background-size": "cover",
"background-repeat": "no-repeat",
"background-position": "center center"});

Hi Tom_1842 ,
Interested in this example. I copied the code but for me the white signature box is appearing on top of the image. Would be grateful if you could suggest what might be the issue.
Thanks
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#QID1").css({"background":"url('https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-bright-sunny-landscape-civilized-city-background-material-homesgreen-citylow-carbonenvironmental-image_82202.jpg')",
"background-size": "cover",
"background-repeat": "no-repeat",
"background-position": "center center"});
});

Hmm, looks like you might be missing the "SignatureOverlay" part after the QID1. You can also make use of the full signature canvas if you add just "Signature", like in the below. Also, "100% 100%" for the background-size will display the full picture. QSF attached where it's working for me if it helps.
jQuery("#"+this.questionId+"-Signature").css({"background":"url('https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-bright-sunny-landscape-civilized-city-background-material-homesgreen-citylow-carbonenvironmental-image_82202.jpg')",
"background-size": "100% 100%",
"background-repeat": "no-repeat",
"background-position": "center center"});

jQuery("#"+this.questionId+"-ClearSignature").css({"background-color": "white"})
Signature_DrawImage.qsf

How do you go about changing the url?

Hi alvir_s , the URL can be changed by editing the JavaScript of the question and changing the address after the 'url' bit. To edit the question's JavaScript, click the "" icon in the top right of the question within the Survey Builder, or click " JavaScript" under Question Behavior with the question selected.

Also, if it is helpful to anyone, the below CSS can be used to increase the size of the Signature box for non-mobile devices:
@media (min-width: 480px) {
 .SignatureBox {
 width: 1200px !important;
 height: 450px !important;
}
}

This is an amazing hack. Thank you for sharing the JavaScript and CSS code. I may try using this with children on a survey question where I'd like them to be able to trace their idea over the top of a picture.

Hi claire_q that sounds cool! You might also check out the follow up thread which touches on changing brush color, width, and even opacity:
https://community.qualtrics.com/XMcommunity/discussion/22033/is-it-possible-to-change-the-colour-opacity-of-the-brush-stroke-in-signature-type-question