Dear Soscisurvey,
I am having trouble getting my javascript to work. I am honestly a beginner at coding and very new to javascript.
The HTML element which I am using is called the Dynamic Identity Fusion Index (DIFI). It provides information on the permeability of the boundary between the personal and social self on a sliding pictorial scale. For more information you can refer the website below:
http://www2.uned.es/pspp/measures/difi/index.htm
I received almost the entire script from the website and have been tinkering with different tags. e.g and to make it work but these do not seem to be compatible with soscisurvey's format.
So far the script does not show anything on the preview page. Can you help me understand where I have gone wrong on creating the script?
Please see the javascript below:
Kind regards,
Divan
<p>The diagram below is designed to represent your relationship with a group ("My Group").
Please indicate your relationship by clicking and dragging the smaller "Me"
circle to the position that best captures your relationship with this group.
</p>
<SCRIPT SRC="./difi/difi.js"></SCRIPT>
<SCRIPT language="JavaScript">difi("Scale", "My Group", "Me", "grey", "-50");
</SCRIPT>
<script>
var extremeX=450;
var moveTo=0;
var results = [];
var containerScale;
var figureScale;
var backgroundScale;
var whichFigureIsMoving = null;
var offsetX = 0;
var absoluteOffsetX;
var minX;
var maxX;
var figureScaleRadius = 100;
var backgroundScaleRadius = 150;
function globalX(elem) {
var l = elem.offsetLeft;
while (elem = elem.offsetParent)
l += elem.offsetLeft;
return l;
}
function setPositionX(elem, pixels) {
if (elem.style.pixelLeft==undefined)
elem.style.left = pixels + "px"; // Firefox
else
elem.style.pixelLeft = pixels; // Others
}
function addEvent(evnt, elem, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent) // IE DOM
elem.attachEvent("on"+evnt, function(a){a.currentTarget=elem;func(a);});
else // Not much to do
elem["on"+evnt] = func;
}
function overlappingArea(centerSmall, centerBig) {
var R = figureScaleRadius;
var r = backgroundScaleRadius;
var d = centerBig - centerSmall;
var t1 = (d*d+r*r-R*R)/(2*d*r);
var t2 = (d*d+R*R-r*r)/(2*d*R);
var t3 = (-d+r+R)*(d+r-R)*(d-r+R)*(d+r+R);
var area = r*r*Math.acos(t1) + R*R*Math.acos(t2) - Math.sqrt(t3)/2;
return area;
}
function myMouseMove(e) {
e.touches = [{clientX: e.clientX, clientY: e.clientY}];
return myTouchMove(e);
}
function myTouchMove(e) {
if (whichFigureIsMoving != null) {
var positionX = e.touches[0].clientX;
if (positionX < minX + offsetX)
positionX = minX + offsetX;
else if (positionX > maxX + offsetX)
positionX = maxX + offsetX;
setPositionX(whichFigureIsMoving, positionX - offsetX - absoluteOffsetX);
calculateResults();
}
return false;
}
function myMouseUp(e) {
if (whichFigureIsMoving != null)
whichFigureIsMoving = null;
document.onmouseup = null;
document.onmousemove = null;
document.ontouchup = null;
document.ontouchmove = null;
}
function myMouseDown(e) {
if (e.offsetX == undefined)
offsetX = e.layerX;
else
offsetX = e.offsetX;
whichFigureIsMoving = e.currentTarget;
absoluteOffsetX = globalX(containerScale);
minX = globalX(containerScale);
maxX = minX + extremeX;
addEvent('mouseup', document, myMouseUp);
addEvent('mousemove', document, myMouseMove);
addEvent('touchend', document, myMouseUp);
addEvent('touchmove', document, myTouchMove);
// So touchstart would work in Android browser
if (navigator.userAgent.match(/Android/i) )
e.preventDefault();
// Prevent cursor to change (as if we where selecting text)
return false;
}
function calculateResults() {
// Calculate overlapping
var figureScaleCenter = globalX(whichFigureIsMoving) + figureScaleRadius;
var backgroundScaleCenter = globalX(backgroundScale) + backgroundScaleRadius;
var displacement;
// Calcular porcentaje
var percentage = 0;
if (backgroundScaleCenter - figureScaleCenter > figureScaleRadius + backgroundScaleRadius)
percentage = 0;
else if (backgroundScaleCenter - backgroundScaleRadius < figureScaleCenter - figureScaleRadius)
percentage = 100;
else {
var area = overlappingArea(figureScaleCenter, backgroundScaleCenter);
percentage = Math.round((area * 100)/(Math.PI*figureScaleRadius*figureScaleRadius));
}
if (whichFigureIsMoving.style.pixelLeft == undefined)
// Firefox
displacement = Math.round((parseInt(whichFigureIsMoving.style.left) - 200) / 2);
else
// Others
displacement = Math.round((whichFigureIsMoving.style.pixelLeft - 200) / 2);
results[whichFigureIsMoving.myScale][0].value = displacement;
results[whichFigureIsMoving.myScale][1].value = percentage;
}
function setPositionForward(myScaleTo) {
moveTo=20;
setPositionTo(myScaleTo)
}
function setPositionRewind(myScaleTo) {
moveTo=-20;
setPositionTo(myScaleTo)
}
function setPositionPlay(myScaleTo) {
moveTo=2;
setPositionTo(myScaleTo)
}
function setPositionReverse(myScaleTo) {
moveTo=-2;
setPositionTo(myScaleTo)
}
function setPositionTo(myScaleTo) {
var positionX = 0;
figureScale = document.getElementById('mySlider'+myScaleTo);
whichFigureIsMoving = figureScale;
if (figureScale.style.pixelLeft==undefined)
positionX = parseInt(figureScale.style.left); // Firefox
else
positionX = figureScale.style.pixelLeft; // Others
positionX = positionX + moveTo;
if (positionX < 0)
positionX = 0;
else if (positionX > extremeX)
positionX = extremeX;
if (figureScale.style.pixelLeft==undefined)
figureScale.style.left = positionX + "px"; // Firefox
else
figureScale.style.pixelLeft = positionX; // Others
calculateResults();
myMouseUp(figureScale);
}
function difi(myScale, myGroup, mySelf, myColor, myDistance, myVisible) {
if (typeof(myScale)=="undefined") myScale="Scale";
if (typeof(myGroup)=="undefined") myGroup="Group";
if (typeof(mySelf)=="undefined") mySelf="I";
if (typeof(myColor)=="undefined") myColor="grey";
if (typeof(myDistance)=="undefined") myDistance="-50";
if (typeof(myVisible)=="undefined") myVisible="false";
myColor = myColor.toLowerCase();
myDistance = parseInt(myDistance);
if (myDistance>125) myDistance=125;
if (myDistance<-100) myDistance=-100;
</SCRIPT>
