I have a code which actually calls all the possible routes with their travel time for the origin and destination zip code. Now, I want to pop it in the qualtrics survey. How can I do that? Basically, in the survey, I want to ask the participant about their origin and destination zip code and based on that I will give them 3 possible rooute choice. Then, I will ask them what route they will usually prefer. After that, I will add some facility to the other non-choosen routes and examine whether their choice change or not. So, I want a code which actually pop out the routes based on the zip codes. I already wrote the code , now I want it to call it in the survey.
The code is as follows:
<body>
<div id="floating-panel" style="border:1px; width:600px">
<div style="width:300px; float:left">
<strong>Home:</strong>
<select id="Home">
<option value="32826, FL">32826</option>
<option value="32817, FL">32817</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<br>
<strong>Work:</strong>
<select id="Work">
<option value="32826, FL">32826</option>
<option value="32817, FL">32817</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>
<br>
<strong>Routes:</strong>
<select id="Routes" onchange="selectRoute(value);">
<option value="NA">No routes available</option>
</select>
</div>
<div style="width:300px; float:left">
<textarea id="route_info" style="width:300px; height:100px; float:left; font-size:10px; padding:10px; resize: none" readonly></textarea>
</div>
</div>
<div id="map"></div>
<script>
var directionsDisplayObjects = [];
var routeInfo = [];
var map;
var colors = ["red", "green", "blue", "yellow", "black"]
function initMap()
{
var directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
var directionsRequest =
{
origin: document.getElementById('Home').value,
destination: document.getElementById('Work').value,
provideRouteAlternatives: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
var onChangeHandler = function()
{
calculateAndDisplayRoute(directionsService, directionsRequest);
};
document.getElementById('Home').addEventListener('change', onChangeHandler);
document.getElementById('Work').addEventListener('change', onChangeHandler);
}
function resetColors()
{
for(value in directionsDisplayObjects)
{
directionsDisplayObjects[value].setOptions(
{
polylineOptions:
{
strokeColor: colors[value]
}
});
directionsDisplayObjects[value].setMap(map);
}
}
function selectRoute(value)
{
resetColors();
if(value == "NA")
{
document.getElementById("route_info").innerHTML = routeInfo.join("\n");
return;
}
var polyline = new google.maps.Polyline(
{
strokeColor: "#555555",
strokeOpacity: 0.7,
strokeWeight: 8
});
directionsDisplayObjects[value].setOptions(
{
polylineOptions:polyline
});
directionsDisplayObjects[value].setMap(map);
document.getElementById("route_info").innerHTML = routeInfo[value];
}
function calculateAndDisplayRoute(directionsService, directionsRequest)
{
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsService.route(
{
origin: document.getElementById('Home').value,
destination: document.getElementById('Work').value,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives: true
},
function(response, status)
{
if (status === 'OK')
{
var len = response.routes.length;
var routes = document.getElementById("Routes");
var routeOptions = routes.options;
if(len > 0)
{
for(i in routeOptions)
{
if(routeOptions[i].value == "NA")
{
routes.remove(routeOptions[i]);
}
}
var option = document.createElement("option");
option.text = "All routes (" + len + ")";
option.value = "NA";
option.selected = true;
routes.add(option);
directionsDisplayObjects = [];
routeInfo = [];
for (var i = 0; i < len; i++)
{
var directionsDisplay = new google.maps.DirectionsRenderer(
{
polylineOptions: {
strokeColor: colors[i]
}
});
directionsDisplay.setDirections(response);
directionsDisplay.setRouteIndex(i);
directionsDisplay.setMap(map);
var option = document.createElement("option");
option.text = "Route " + i;
option.value = i;
routes.add(option);
directionsDisplayObjects.push(directionsDisplay);
duration = response.routes[i].legs[0].duration.text;
distance = response.routes[i].legs[0].distance.text;
route_message = "--------------------------------\nRoute: " + colors[i] + "\n-------------\nDistance: " + distance +
"\nDuration: " + duration + "\n-------------------------------"
routeInfo.push(route_message);
}
}
else
{
var option = document.createElement("option");
option.text = "No routes available";
option.value = "NA";
routes.add(option);
}
document.getElementById("route_info").innerHTML = routeInfo.join("\n");
}
else
{
window.alert('Directions request failed due to ' + status);
}
});
}
Now, I want to upload it in the qualtrics survey. Please help me about it
0 Comment
NO COMMENTS