Apply javascript code to all the pages | XM Community
Solved

Apply javascript code to all the pages

  • 2 October 2020
  • 9 replies
  • 1090 views

Badge

Hi!
Our company has several brands. We are using JS (+custom CSS) in order to show the survey in different color depending on which brand the client uses.
However, what I've noticed is that the code get applied only to the first page of the survey and when you move further, the color returns to the default.
Sometimes we might have 20-30 questions (each on a separate page). So pasting this code 20-30 times looks like a poor solution.
Is there any way to apply the code to the entire survey rather than only 1 page?

icon

Best answer by TomG 2 October 2020, 18:49

View original

9 replies

Badge

Thanks a lot, TomG !
It works!
I'll leave these instructions in case someone else runs into the same issue.
In order to add it to the header:

  • Go to the Look&Feel

  • Select "General" and there click on "Edit" under the field saying "Header"

  • Click on the icon "<>" in the first row. And here you can add the tag with your JS inside.


Userlevel 7
Badge +27

Place the JavaScript in the survey header inside a


But I started getting "this" as null in the header. I know there is a way to create a custom function and then call it inside your JS of your question like ref: customFunc(this) but if I do like that then I will be repeating myself again for N number of times in all those questions.
Do you think is there a way to access question ID and perform some actions inside the header.

Badge +2

Hi TomG
I am trying to show and hide a text box based on the selection of checkbox. Like below
Qualtrics.SurveyEngine.addOnReady(function () {
var QID = this.questionId;
 jQuery("#" + QID + " .InputText ").hide();
 jQuery("#" + QID + " input[type='checkbox']").each(function () {
  if (jQuery(this).prop("checked") == true) {
   var v1 = jQuery(this).attr("id");
   jQuery("[id*='" + v1 + "~TEXT']").show();
  } else {
   var v1 = jQuery(this).attr("id");
   jQuery("[id*='" + v1 + "~TEXT']").val("");
   jQuery("[id*='" + v1 + "~TEXT']").hide();
  }
 });

 jQuery("#" + QID + " .Selection ").on("click", function () {
  jQuery("#" + QID + " input[type='checkbox']").each(function () {
   if (jQuery(this).prop("checked") == true) {
    var v1 = jQuery(this).attr("id");
    jQuery("[id*='" + v1 + "~TEXT']").show();
   } else {
    var v1 = jQuery(this).attr("id");
    jQuery("[id*='" + v1 + "~TEXT']").val("");
    jQuery("[id*='" + v1 + "~TEXT']").hide();
   }
  });
 });
});
because of the above code, I wanted to access "this" inside the script placed in the header of the survey.

Leave a Reply