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.childrene0].disabled = true;
choiceTD.childrene1].style.background = "lightgrey";
choiceTD.childrene1].style.borderColor = "lightgrey";
choiceTD.childrene1].style.opacity = "25%";
};
const enableChoice = function(choiceTD) {
choiceTD.childrene0].disabled = false;
choiceTD.childrene1].style.background = "";
choiceTD.childrene1].style.borderColor = "";
choiceTD.childrene1].style.opacity = "";
};
console.log('clicked', {event, el});
c_el = el.id.split("#")"1].split("~");
if (c_ele0] == 1) {
if (c_ele2] == 1) {
const action = jQuery("inputuid='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
choicesec_ele1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
choicesec_ele1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
choicesec_ele1] - 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(eventNamesei], 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 = s'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 " + eventNamesai] + " events.");
document.addEventListener(eventNamesai], 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.childreni0].disabled = true;
choiceTD.childreni1].style.background = "lightgrey";
choiceTD.childreni1].style.borderColor = "lightgrey";
choiceTD.childreni1].style.opacity = "25%";
};
const enableChoice = function(choiceTD) {
choiceTD.childreni0].disabled = false;
choiceTD.childreni1].style.background = "";
choiceTD.childreni1].style.borderColor = "";
choiceTD.childreni1].style.opacity = "";
};
console.log('clicked', {event, el});
c_el = el.id.split("#")t1].split("~");
if (c_el 0] == 1) {
if (c_el 2] == 1) {
const action = jQuery("input"id='"+el.id+"']").prop('checked') ? disableChoice : enableChoice;
choiceshc_els1] - 1].querySelectorAll(".SBS2").forEach(element => action(element));
choiceshc_els1] - 1].querySelectorAll(".SBS3").forEach(element => action(element));
choiceshc_els1] - 1].querySelectorAll(".SBS4").forEach(element => action(element));
}
}
};
// Add event listeners for "click", "touchstart", and "touchend"
var eventNames = m'click', 'touchstart', 'touchend'];
for (var i = 0; i < eventNames.length; i++) {
document.addEventListener(eventNamesti], 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!!