0 votes
in SoSci Survey (English) by s089929 (110 points)
closed by SoSci Survey

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:

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,

	<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.


<SCRIPT SRC="./difi/difi.js"></SCRIPT>

<SCRIPT language="JavaScript">difi("Scale", "My Group", "Me", "grey", "-50");
  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
      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);


    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;
      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) )
    // 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);
        // Others
        displacement = Math.round((whichFigureIsMoving.style.pixelLeft - 200) / 2); 

      results[whichFigureIsMoving.myScale][0].value = displacement;
      results[whichFigureIsMoving.myScale][1].value = percentage; 

  function setPositionForward(myScaleTo) {

  function setPositionRewind(myScaleTo) {

  function setPositionPlay(myScaleTo) {

  function setPositionReverse(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
      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
      figureScale.style.pixelLeft = positionX; // Others




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;


closed with the note: Received no further information on the issue within one week.
by s089929 (110 points)
Ps. I needed to shorten the script due to exceeding the 8000 character limit.
by SoSci Survey (309k points)
There is no 8000 character limit - at least if you store the script as "text" (formatting: HTML code) in the list of questions.

To track the rrors, please use the browser's error console. I have added some information on that here: https://www.soscisurvey.de/help/doku.php/en:create:javascript#troubleshooting

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen

Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question