You could modify your code and place it in the survey header or footer. ‘this’ won’t point to the question object, so you’ll need to adjust accordingly. You could find matrix questions on each page and set an embedded data flag to turn the special formatting on and off if needed.
Thanks for your answer, Tom!
I am still struggling, I guess because I am not a Java script specialist.
I am trying the code bellow in the Header. But it just appears as a block of text in the header of every question.
Is the problem in the code or somewhere else?
cheers
Luis
<script type="text/javascript">
(function() {
function applyCustomizations() {
Qualtrics.SurveyEngine.addOnload(function() {
if (this.questionId.startsWith("DCE_")) {
// Set column width
jQuery("#" + this.questionId).find('.QuestionText:first').css("padding-bottom", "0px");
var attWidth = 30; // percent width for the question column
var altWidth = 35; // percent width for the alternatives column
var cols = jQuery("#" + this.questionId + " tr.Answers").children();
cols.attr("width", altWidth + "%");
cols.first().attr("width", attWidth + "%");
// Change labels from above to below the choice table
var choice_table = this.getChoiceContainer();
var new_row = choice_table.insertRow(2);
new_row.innerHTML = choice_table.rowse0].innerHTML;
choice_table.rows0].hide();
// Change background color of the choice table, question column
var colscolor = jQuery("#" + this.questionId + " tr.ChoiceRow").children();
colscolor.first().css({ "background-color": "white" });
// Change background and borders of alternatives columns
var app1 = jQuery("#" + this.questionId + " tr.ChoiceRow td.c4");
app1.css("background", "#DCDCDC");
app1.css("border-left", "3.5px solid #FFFFFF");
app1.css("border-right", "3.5px solid #FFFFFF");
app1.css("border-top", "7px solid #FFFFFF");
app1.css("border-bottom", "7px solid #FFFFFF");
var app2 = jQuery("#" + this.questionId + " tr.ChoiceRow td.c5");
app2.css("background", "#F2F0F0");
app2.css("border-left", "3.5px solid #FFFFFF");
app2.css("border-right", "3.5px solid #FFFFFF");
app2.css("border-top", "7px solid #FFFFFF");
app2.css("border-bottom", "7px solid #FFFFFF");
// Increase the height of the rows in the choice table
jQuery("#" + this.questionId + " tr.ChoiceRow").css("height", "50px");
}
});
}
applyCustomizations();
})();
</script>
You need to be in source/html view (<> icon) when you add JS to header.
Thanks, Tom! It works now.
Hi Tom,
I am now struggling at different part of the code. Maybe you can help me.
I am inserted the code bellow in the survey header and created a variable (CustomID) in the survey flow. It is a flag that I activate before the blocks that should use the JS and deactivate at the end of these blocks. This part works well.
The second part is a function with previous the code in the thread. It works if I use in the questions. But it does not work from the header. It return null for the question ID and, therefore, for the choice table.
Any insight on this problem?
<script type="text/javascript">
Qualtrics.SurveyEngine.addOnload(function() {
var self = this; // Capture the context of 'this'
// Retrieve the value of CustomID
var customID = Qualtrics.SurveyEngine.getEmbeddedData('CustomID');
console.log("CustomID value: " + customID + " (type: " + typeof customID + ")");
// Convert CustomID to number
var customIDNum = Number(customID);
console.log("CustomID as number: " + customIDNum + " (type: " + typeof customIDNum + ")");
// Conditional check
if (customIDNum === 1) {
console.log("Entering the true condition.");
applyCustomizations(self); // Pass the correct context
} else {
console.log("Entering the false condition.");
}
// Function to apply customizations
function applyCustomizations(context) {
console.log("Applying custom JavaScript for question ID: " + context.questionId);
// Ensure the context is not null
if (!context.questionId) {
console.error("Context question ID is null");
return;
}
// Set column width
jQuery("#" + context.questionId).find('.QuestionText:first').css("padding-bottom", "0px");
var attWidth = 35; // percent width for the question column
var altWidth = 32.5; // percent width for the alternatives column
var cols = jQuery("#" + context.questionId + " tr.Answers").children();
cols.attr("width", altWidth + "%");
cols.first().attr("width", attWidth + "%");
// Retrieve choice table
var choice_table = context.getChoiceContainer();
if (!choice_table) {
console.error("Choice container not found for question ID: " + context.questionId);
console.log("Question element:", jQuery("#" + context.questionId));
console.log("Full context:", context);
return;
}
console.log("Choice table found:", choice_table);
// Change labels from above to below the choice table
var new_row = choice_table.insertRow(2);
new_row.innerHTML = choice_table.rowss0].innerHTML;
choice_table.rows0].style.display = 'none';
// Change background color of the choice table, question column
var colscolor = jQuery("#" + context.questionId + " tr.ChoiceRow").children();
colscolor.first().css({"background-color": "white"});
// Change background and borders of alternatives columns
var app1 = jQuery("#" + context.questionId + " tr.ChoiceRow td.c4");
app1.css("background", "#DCDCDC");
app1.css("border-left", "3.5px solid #FFFFFF");
app1.css("border-right", "3.5px solid #FFFFFF");
app1.css("border-top", "7px solid #FFFFFF");
app1.css("border-bottom", "7px solid #FFFFFF");
var app2 = jQuery("#" + context.questionId + " tr.ChoiceRow td.c5");
app2.css("background", "#F2F0F0");
app2.css("border-left", "3.5px solid #FFFFFF");
app2.css("border-right", "3.5px solid #FFFFFF");
app2.css("border-top", "7px solid #FFFFFF");
app2.css("border-bottom", "7px solid #FFFFFF");
// Increase the height of the rows in the choice table
jQuery("#" + context.questionId + " tr.ChoiceRow").css("height", "50px");
// Ensure the correct cell is targeted and right-aligned
jQuery("#" + context.questionId + " tr.ChoiceRow td:first-child").css("text-align", "right");
}
});
</script>
