USA Map
For this setup, just copy the below question and replace the question label accordingly.
<radio
label="SVG_map"
randomize="0">
<title>Please select the state where you reside in.
<div id="map" class="center"></div></title>
<row label="r1">Hawaii</row>
<row label="r2">Alaska</row>
<row label="r3">Florida</row>
<row label="r4">New Hampshire</row>
<row label="r5">Vermont</row>
<row label="r6">Maine</row>
<row label="r7">Rhode Island</row>
<row label="r8">New York</row>
<row label="r9">Pennsylvania</row>
<row label="r10">New Jersey</row>
<row label="r11">Delaware</row>
<row label="r12">Maryland</row>
<row label="r13">Virginia</row>
<row label="r14">West Virginia</row>
<row label="r15">Ohio</row>
<row label="r16">Indiana</row>
<row label="r17">Illinois</row>
<row label="r18">Connecticut</row>
<row label="r19">Wisconsin</row>
<row label="r20">North Carolina</row>
<row label="r21">Massachusetts</row>
<row label="r22">Tennessee</row>
<row label="r23">Arkansas</row>
<row label="r24">Missouri</row>
<row label="r25">Georgia</row>
<row label="r26">South Carolina</row>
<row label="r27">Kentucky</row>
<row label="r28">Alabama</row>
<row label="r29">Louisiana</row>
<row label="r30">Mississippi</row>
<row label="r31">Iowa</row>
<row label="r32">Minnesota</row>
<row label="r33">Oklahoma</row>
<row label="r34">Texas</row>
<row label="r35">New Mexico</row>
<row label="r36">Kansas</row>
<row label="r37">Nebraska</row>
<row label="r38">South Dakota</row>
<row label="r39">North Dakota</row>
<row label="r40">Wyoming</row>
<row label="r41">Montana</row>
<row label="r42">Colorado</row>
<row label="r43">Utah</row>
<row label="r44">Arizona</row>
<row label="r45">Nevada</row>
<row label="r46">Oregon</row>
<row label="r47">Washington</row>
<row label="r48">California</row>
<row label="r49">Michigan</row>
<row label="r50">Idaho</row>
<style name="question.after"><![CDATA[
<link rel="stylesheet" href="${KEDomain}/ketools/usa_map/svgmap.css">
<style>
.answers {
display:none;
}
</style>
]]></style>
<style name="question.after"><![CDATA[
<script type="text/javascript" src="${KEDomain}/ketools/usa_map/mapdata.js"></script>
<script type="text/javascript" src="${KEDomain}/ketools/usa_map/usmap.js"></script>
<script>
var qn = ${jsexport()}; //returns json object of the question
console.log(qn) //loads question variables into a console tool
var rsp_id=qn.uid;
var k=0;
var m;
var z=1;
var l=1;
var e1;
jQuery(".sel").hide();
var city_ab=["","Hawaii",
"Alaska",
"Florida",
"New Hampshire",
"Vermont",
"Maine",
"Rhode Island",
"New York",
"Pennsylvania",
"New Jersey",
"Delaware",
"Maryland",
"Virginia",
"West Virginia",
"Ohio",
"Indiana",
"Illinois",
"Connecticut",
"Wisconsin",
"North Carolina",
"Massachusetts",
"Tennessee",
"Arkansas",
"Missouri",
"Georgia",
"South Carolina",
"Kentucky",
"Alabama",
"Louisiana",
"Mississippi",
"Iowa",
"Minnesota",
"Oklahoma",
"Texas",
"New Mexico",
"Kansas",
"Nebraska",
"South Dakota",
"North Dakota",
"Wyoming",
"Montana",
"Colorado",
"Utah",
"Arizona",
"Nevada",
"Oregon",
"Washington",
"California",
"Michigan",
"Idaho"];
var code=0;
function on(e){
var a=jQuery(e).attr("data-val");
k=a;
code=a;
a--;
document.getElementById("ans"+rsp_id+".0."+a).checked = true;
/*jQuery("label[for='ans"+rsp_id+".0."+a+"']").click();
jQuery("#ans"+rsp_id+".0."+a).prop("checked",true);*/
//SSI_SetSelect('[% QuestionName() %]_'+a,true);
jQuery(".sel").show();
jQuery(".sel").text(city_ab[code]) ;
var z=0;
}
setTimeout(function(){
var state_code=["HI","AK","FL","NH","VT","ME","RI","NY","PA","NJ","DE","MD","VA","WV","OH","IN","IL","CT","WI","NC","MA","TN","AR","MO","GA","SC","KY","AL","LA","MS","IA","MN","OK","TX","NM","KS","NE","SD","ND","WY","MT","CO","UT","AZ","NV","OR","WA","CA","MI","ID"];
var position=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50];
for(var n=0; n<=state_code.length; n++){
var abc=jQuery(".sm_state_"+state_code[n]).attr('opacity');
jQuery(".sm_state_"+state_code[n]).attr('data-val',position[n]);
jQuery(".sm_state_"+state_code[n]).attr('data-label','1');
jQuery(".sm_state_"+state_code[n]).attr('onmousedown','on(this)');
jQuery(".sm_state_"+state_code[n]).attr('onclick','on(this)');
}
},500);
window.alert = function() {};
// or simply
alert = function() {};
setInterval(function(){
/*var c_vals=SSI_GetValue("city");
if(c_vals>0)
{
jQuery("path").css("fill","#88a4bc");
jQuery("path[data-val="+c_vals+"]").css("fill","#3399cc");
}*/
},100);
jQuery(document).ready(function(){
setTimeout(function(){
jQuery("svg").attr("id","table_svg") ;
jQuery("#map_holder").prepend('<div id="result"><img src="https://au.focusvision.com/survey/selfserve/560/200209/location_map_pin_light_green5.png" style="display: none;"><span class="sel" style="display: none;" ></span></div>');
},1500);
});
function FindPosition(oElement)
{
if(typeof( oElement.offsetParent ) != "undefined")
{
for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
{
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
return [ posX, posY ];
}
else
{
return [ oElement.x, oElement.y ];
}
}
function GetCoordinates(e)
{
var PosX = 0;
var PosY = 0;
var ImgPos;
ImgPos = FindPosition(myImg);
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
PosX = e.pageX;
PosY = e.pageY;
}
else if (e.clientX || e.clientY)
{
PosX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
PosY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
PosX = PosX - ImgPos[0];
PosY = PosY - ImgPos[1];
var x= PosX.toFixed(2);
var y= PosY.toFixed(2);
y=parseInt(y)-80+8+20; // 35
x=parseInt(x)-9-4; // 7
if(k==0 || k==m ) {
}
else {
var newWidth=jQuery("#map_inner").width();
var newHeight=jQuery("#map_inner").height();
var oWidth=931;
var oHeight=578;
var left=["",322,128,732,824,805,849,835,777,740,797,791,767,746,709,670,620,572,819,555,745,824,625,527,523,687,722,651,624,529,574,506,494,443,417,302,429,416,413,410,296,282,316,223,208,151,114,141,90,636,200];
var top=["",532,463,485,140,125,84,169,156,211,222,244,237,273,255,232,239,248,173,151,313,160,326,355,283,387,353,288,393,427,392,207,123,340,416,351,275,219,157,92,170,83,253,229,330,206,113,46,261,160,125];
var X=(left[k]/oWidth)*100;
var Y=(top[k]/oHeight)*100;
X=(newWidth / 100)*X;
Y=(newHeight / 100)*Y;
X=X+"px";
Y=Y+"px";
m=k;
jQuery("#result").css({"top":Y,"left":X});
jQuery("#result").show();
jQuery("#result>.sel").css("display","inline-block");
jQuery("#result>img").show();
}
}
var myImg = document.getElementById("map");
myImg.onmouseup = GetCoordinates;
</script>
]]></style>
</radio>