Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Record mouse click on image

I wish to record x and y coordinates of where respondents click on an image.

I am using SSI Web V6

What is the easiest way of doing this? I have been trying to use javascript, but am having problems registering the x and y coordinates from the javascript to the free format variables.

Using the following code in free format I am able to get the arrow.png to show where they've clicked, but not able to record this in variables:

(I have limited familiarity with javascript)

<script language="JavaScript">
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.getElementById("cross").style.left = (pos_x-1) ;
    document.getElementById("cross").style.top = (pos_y-15) ;
    document.getElementById("cross").style.visibility = "visible" ;
    document.pointform.position_x.value = pos_x;
    document.pointform.position_y.value = pos_y;

}
</script>

<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('[%GraphicsPath()%]alt1.png');width:500px;height:500px;">
<img src="[%GraphicsPath()%]arrow.png" width="25" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>

You pointed on x = <input type="text" name="position_x" size="4" > - y = <input type="text" name="position_y" size="4" >


Any tips would be appreciated.
asked Oct 22, 2012 by arneholger (175 points)
retagged Oct 22, 2012 by Walter Williams

1 Answer

+1 vote
 
Best answer
Not 100% sure about the naming in v6, but in v7 when i change

 document.pointform.position_x.value = pos_x;
 document.pointform.position_y.value = pos_y;

to

 document.mainform.position_x.value = pos_x;
 document.mainform.position_y.value = pos_y;

it records the coordinates fine. You have this entered in the Variables/ Question HTML tab?
answered Oct 22, 2012 by Nolan Kaplan Bronze (4,090 points)
selected Oct 22, 2012 by arneholger
That works perfectly.

(Yes, in Variables/Question HTML tab)

Thank you so much. Greatly appreciated.
How would I get this to work in Firefox?
...