Javascript not working on iphone | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

Javascript not working on iphone

H
Level 1 ●
Forum|alt.badge.img+2

I colour coded the NPS scale using Javascript.

It works as intended on desktop and android mobile devices but not for Iphone.

On Iphone, respondents can see the colour coded scale but cant select them. Please advice.

 

 

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    for (var i=1;i<=11;i++){

        jQuery("td:eq("+i+")").find('label span').css("color", "#ffffff");

    }
    
    for (var i=1;i<=7;i++){

        jQuery("td:eq("+i+")").find('label').css("background-color", "rgb(255,0,0)");

    }

    for (var i=8;i<=9;i++){

        jQuery("td:eq("+i+")").find('label').css("background-color", "rgb(255,165,0)");

    }
    
    for (var i=10;i<=11;i++){

        jQuery("td:eq("+i+")").find('label').css("background-color", "rgb(60,179,113)");

    }
    

});
 

Best answer by TomG

What is really happening is that they can select them, but they can’t see what they’ve selected.  Because you’ve applied the background color directly to the elements, those are overriding the .q-checked style.

You can add an important CSS style something like this to the question text:

<style>
.Skin .NPS label.SingleAnswer.q-checked { background: #0091e4 !important; }
</style>

Also, your JS could be more efficient:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery(this.questionContainer).find("td label.SingleAnswer").each(function(i) {
		var label = jQuery(this);
		label.find("span").css("color","#ffffff");
		if(i<7) label.css("background-color","rgb(255,0,0)");
		else if(i<9) label.css("background-color","rgb(255,165,0)");
		else label.css("background-color","rgb(60,179,113)");
	});
});

 

View original
Aanurag_QC
N
Shivamvig_sv
5 people like this
  • Aanurag_QC
    Aanurag_QC
  • N
    Naimisha_Tippabhotla
  • Shivamvig_sv
    Shivamvig_sv
  • KISHORE1997
    KISHORE1997
  • R
    Ridashaikh15

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • Answer
  • August 30, 2023

What is really happening is that they can select them, but they can’t see what they’ve selected.  Because you’ve applied the background color directly to the elements, those are overriding the .q-checked style.

You can add an important CSS style something like this to the question text:

<style>
.Skin .NPS label.SingleAnswer.q-checked { background: #0091e4 !important; }
</style>

Also, your JS could be more efficient:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery(this.questionContainer).find("td label.SingleAnswer").each(function(i) {
		var label = jQuery(this);
		label.find("span").css("color","#ffffff");
		if(i<7) label.css("background-color","rgb(255,0,0)");
		else if(i<9) label.css("background-color","rgb(255,165,0)");
		else label.css("background-color","rgb(60,179,113)");
	});
});

 

Nam Nguyen
H
Shivamvig_sv
3 people like this
  • Nam Nguyen
    Nam Nguyen
  • H
    hellolemon
  • Shivamvig_sv
    Shivamvig_sv
H
Level 1 ●
Forum|alt.badge.img+2
  • hellolemon
  • Author
  • Level 1 ●
  • 1 reply
  • August 31, 2023

@TomG Thank you! It worked.

A
Level 1 ●
Forum|alt.badge.img+1
  • arezzo
  • Level 1 ●
  • 8 replies
  • March 13, 2024

Hello, I am facing the same problem, but the tips are not working with me.

 

Here is my js code:

 

label#QID4-0-label.SingleAnswer{

color :red !Important;

}

label#QID4-1-label.SingleAnswer{

color :red !Important;

}

label#QID4-2-label.SingleAnswer{

color :red !Important;

}

label#QID4-3-label.SingleAnswer{

color :red !Important;

}

label#QID4-4-label.SingleAnswer{

color :red !Important;

}

label#QID4-5-label.SingleAnswer{

color :red !Important;

}

label#QID4-6-label.SingleAnswer{

color :red !Important;

}

label#QID4-7-label.SingleAnswer{

color : #f9d71c !Important;

}

label#QID4-8-label.SingleAnswer{

color : #f9d71c!Important;

}

label#QID4-9-label.SingleAnswer{

color :green !Important;

}

label#QID4-10-label.SingleAnswer{

color :green !Important;

}

label#QID4-0-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-1-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-2-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-3-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-4-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-5-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-6-label.SingleAnswer.q-checked {

background-color :red !Important;

color:white !Important;

}

label#QID4-7-label.SingleAnswer.q-checked {

background-color : #f9d71c !Important;

color:white !Important;

}

label#QID4-8-label.SingleAnswer.q-checked {

background-color : #f9d71c !Important;

color:white !Important;

}

label#QID4-9-label.SingleAnswer.q-checked {

background-color :green !Important;

color:white !Important;

}

label#QID4-10-label.SingleAnswer.q-checked {

background-color :green !Important;

color:white !Important;

}

A
Level 1 ●
Forum|alt.badge.img+1
  • arezzo
  • Level 1 ●
  • 8 replies
  • March 13, 2024

It is not working for my.

 

Here is my js code

 

Qualtrics.SurveyEngine.addOnload(function() { for (var i = 0; i <= 11; i++) { if ((i >= 0 && i <= 7)) { jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FF8E8E"); jQuery("td:eq(" + i + ")").find('label span').css("color", "#ff0000"); } else if ((i >= 8 && i <= 9)) { jQuery("td:eq(" + i + ")").find('label').css("background-color", "#FFFAAE"); jQuery("td:eq(" + i + ")").find('label span').css("color", "#ffe500"); } else if ((i >= 10 && i <= 11)) { jQuery("td:eq(" + i + ")").find('label').css("background-color", "#AEFFB3"); jQuery("td:eq(" + i + ")").find('label span').css("color", "#00ff00"); } } });

 

tks for the help

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5938 replies
  • March 13, 2024

@arezzo - The code won’t work with Simple layout.

A
Level 1 ●
Forum|alt.badge.img+1
  • arezzo
  • Level 1 ●
  • 8 replies
  • March 13, 2024

I’m trying using the classic layout.

Is it possible just to have a line contouring the number selected?

 

 

Leave a Reply


Terms & Conditions