Apply javascript code to all the pages | XM Community
Solved

Apply javascript code to all the pages

  • 2 October 2020
  • 9 replies
  • 1013 views
A
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

TomG
Rank
Userlevel 7
Badge +27

Place the JavaScript in the survey header inside a 

 with your JS inside.
D
Badge +2

Hi TomG ,
I have similar requirements but instead of a single survey, we have nearly 20 different surveys.
So is there a way to apply custom JS code to all the surveys and questions inside them in a single place?
I think with the above approach suggested by Anna_Kebets I need to copy past the code at least at 20 different surveys.

TomG
Rank
Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/42868#Comment_42868You could create a Look & Feel library message that includes the script then use that message as your header or footer in the 20 surveys.

A
Rank
Userlevel 7
Badge +21

You could also look at creating a new theme and placing it there.

D
Badge +2

Hi TomG ahmedA
I have added something like below in my header not in javascript block of the question

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.

TomG
Rank
Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/42981#Comment_42981It really depends on if you really need access to the question object 'this'. You can find questions on the page using:
jQuery(".QuestionOuter");
Then just traverse and manipulate the DOM from there. You really only need the question object if you need to use specific Qualtrics JavaScript API functions. You don't actually need the question object do the same thing as many of the API functions. You can do the same thing in the DOM.

D
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.

TomG
Rank
Userlevel 7
Badge +27

If I were doing it, I wouldn't use QID in the selectors at all. Assuming you want it to apply to the first question on the page:
var q = jQuery(".QuestionOuter").first(); //get the first question
q.find(".InputText").hide(); //find within the question
etc.

Leave a Reply


Terms & Conditions