I would like to know how to create a gradation between flat, modern, and classic layouts in terms of Look and Feel.
If possible, please post the code.
Like this??
Yes, I could only do the classic layout.
So I would like to be able to do this with other layout types as well.
Hi
you can create a gradation between flat, modern and another unique layout by customizing the CSS.
Hope following codes will help:
/* Flat Layout */
body {
background-color: #fff; /* Flat background color */
font-family: Arial, sans-serif; /* Modern font */
}
/* Modern Layout */
.question-container.modern {
border: 2px solid #3498db; /* Modern border style */
border-radius: 5px; /* Rounded corners */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Drop shadow */
}
/* Classic Layout */
.question-container.classic {
border: 1px solid #000; /* Classic border style */
background-color: #f0f0f0; /* Classic background color */
font-family: Times New Roman, serif; /* Classic font */
}
/* Elegant Layout */
.question-container.elegant {
border: 2px solid #a9a9a9; /* Elegant border style */
background-color: #f5f5f5; /* Elegant background color */
font-family: 'Palatino Linotype', serif; /* Elegant font */
}
Thanks for the suggestion
However, I added the CSS you taught me, but there was no change.
thank you
Please by all means.
Edit Question on the survey editing screen Is it possible to add a gradation using JavaScript?
Edit Question on the survey editing screen Is it possible to add a gradation using JavaScript?
Yes, you can. Use add javascript on the bottom of the left bar
If you know the code to set the gradient in JavaScript, please let me know.
Here the JS for Flat, Classic & Modern layout
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");
}
}
});
Here’s the CSS for Simple layout
#choice-display-QID1-0.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-1.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-2.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-3.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-4.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-5.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-6.choice-label {
background: #FF8E8E !important;
}
#choice-display-QID1-7.choice-label {
background: #ffe500 !important;
}
#choice-display-QID1-8.choice-label {
background: #ffe500 !important;
}
#choice-display-QID1-9.choice-label {
background: #00ff00 !important;
}
#choice-display-QID1-10.choice-label {
background: #00ff00 !important;
}
This cover all 4 layout and can be used at the same time. I remember being unable to squeeze the simple layout in JS without disrupting other lay out so I have to bring it to CSS. If you want gradient use a color picker to change each choice invidually or just play with this to find your best.
Hope it helps
I am not a fan of colouring the NPS question typically as your substantially influencing selection respondent makes which takes away from intention behind the groupings NPS uses. However I must say I like the gradient your using
I’ll need to remember this next time it’s a requirement to colour the scale, and then also the code to replicate (thanks for that
Thank you very much.
I was able to do everything except the modern style.
Modern is a radio button, so I may need to enter another code.
Thank you, that's right.
If you want respondents to give equal answers, it's better not to add color.
This was to increase the visibility of respondents, but we will use them accordingly.
Thank you very much.
I was able to do everything except the modern style.
Modern is a radio button, so I may need to enter another code.
This is my modern look, the number have it’s color. If you want to change the button also then go for class: SingleAnswer, q-checked, q-focus
Sorry.
Could you please tell me the code in detail?
Could you share the code please. Thanks!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.