JavaScript applying to multiple questions in a block

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.

You need to be in source/html view (<> icon) when you add JS to header.

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.rows[0].innerHTML;
        choice_table.rows[0].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>