Javascript not working on mobile devices

Hi @tjwomble ,

The event listener is not touch device compatible.
Please find below updated code compatible with touch devices:
 

Qualtrics.SurveyEngine.addOnload(function()
{
  var choices = document.querySelectorAll(".Choice");

this.questionclick = function (event, el) {
  const disableChoice = function (choiceTD) {
    choiceTD.children[0].disabled = true;
    choiceTD.children[1].style.background = "lightgrey";
    choiceTD.children[1].style.borderColor = "lightgrey";
    choiceTD.children[1].style.opacity = "25%";
  };

  const enableChoice = function(choiceTD) {
    choiceTD.children[0].disabled = false;
    choiceTD.children[1].style.background = "";
    choiceTD.children[1].style.borderColor = "";
    choiceTD.children[1].style.opacity = "";
  };

  console.log('clicked', {event, el});
  c_el = el.id.split("#")[1].split("~");
  if (c_el[0] == 1) {
    if (c_el[2] == 1) {
      const action = jQuery("input[id='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
      choices[c_el[1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
      choices[c_el[1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
      choices[c_el[1] - 1].querySelectorAll(".SBS4").forEach(element => action(element));
    }
  }
};

// Add event listeners for both "click" and "touchstart"
var eventNames = ['click', 'touchstart'];
for (var i = 0; i < eventNames.length; i++) {
  document.addEventListener(eventNames[i], function(event) {
       var el = event.target;
    while (el && !el.classList.contains("Choice")) {
      el = el.parentElement;
    }
    if (el) {
      this.questionclick(event, el);
    }
  }.bind(this));
}

});

Hope this resolves your Query😊!!

@qualtrics_nerd, thanks!  I’ve gotten too used to frameworks abstracting the hardware away.

Unfortunately, it didn’t resolve the issue.  I re-published and the script still works on desktop, but still no luck on my iphone.

I added a log statement to the addEventListener loop, but I don’t see that firing in web inspector on page refresh (I do see it in chrome dev tools on the desktop). 

// Add event listeners for both "click" and "touchstart"
  var eventNames = ['click', 'touchstart'];
  for (var i = 0; i < eventNames.length; i++) {
/*
 * the below isn't running, so I don't believe the event listeners are ever added on mobile 
 * devices.
 */
	 console.log("Adding Listener for " + eventNames[i] + " events.");
    document.addEventListener(eventNames[i], function(event) {
      var el = event.target;
      while (el && !el.classList.contains("Choice")) {
        el = el.parentElement;
      }
      if (el) {
        this.questionclick(event, el);
      }
    }.bind(this));
  }

Looking through the source files, I see where the custom JS is passed as text in an object (part of the question’s metadata), but no where as actual code. 

Hi @tjwomble ,

I have checked  at my end on Android phones and desktop  and also in Chrome inspection for mobile(iphone).
And its working , as expected .
At present I don't have Apple products so can’t test on them.
I have added one more event listener can you please check if it works.
 

Qualtrics.SurveyEngine.addOnload(function() {
  var choices = document.querySelectorAll(".Choice");

  this.questionclick = function (event, el) {
    const disableChoice = function (choiceTD) {
      choiceTD.children[0].disabled = true;
      choiceTD.children[1].style.background = "lightgrey";
      choiceTD.children[1].style.borderColor = "lightgrey";
      choiceTD.children[1].style.opacity = "25%";
    };

    const enableChoice = function(choiceTD) {
      choiceTD.children[0].disabled = false;
      choiceTD.children[1].style.background = "";
      choiceTD.children[1].style.borderColor = "";
      choiceTD.children[1].style.opacity = "";
    };

    console.log('clicked', {event, el});
    c_el = el.id.split("#")[1].split("~");
    if (c_el[0] == 1) {
      if (c_el[2] == 1) {
        const action = jQuery("input[id='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
        choices[c_el[1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
        choices[c_el[1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
        choices[c_el[1] - 1].querySelectorAll(".SBS4").forEach(element => action(element));
      }
    }
  };

  // Add event listeners for "click", "touchstart", and "touchend"
  var eventNames = ['click', 'touchstart', 'touchend'];
  for (var i = 0; i < eventNames.length; i++) {
    document.addEventListener(eventNames[i], function(event) {
      var el = event.target;
      while (el && !el.classList.contains("Choice")) {
        el = el.parentElement;
      }
      if (el) {
        this.questionclick(event, el);
      }
    }.bind(this));
  }
});

Also , can you confirm that this issue is with ioS devices or with android also?

Hope this resolves your issue😊!!