Line Break for custom text on Next Button

Hello,

I added a privacy notice for my survey and added a custom text on the next button saying “I consent to the processing as described above and will participate in the market research study”.

Unfortunately the text is quite long and not fully displayed on mobile. How can I add a line break?

If I do it with HTML, then this code is shown as button text, but no line break is executed.

FYI: I have a customized survey layout with logo and customized colors for buttons, maybe this has an influence

Thanks & best,

Laura

Page 1 / 1

You can add <br> for a line break.

Unfortunately I tried this already and then it is written as text on the button “xxxxx <br> xxxx” but not executed as line break :(

Okay. For the next button it is not HTML, but value. replace <br> with \n

thank you! unfortunately this did not work for me :(

How are you adding this?

See this JS:

document.querySelector("#NextButton").value = "first line \n second line \n third line";

How are you adding this?

See this JS:

document.querySelector("#NextButton").value = "first line \n second line \n third line";

Thank you so much! This worked! How can I display a text depending on the language, e.g. if q_language=DE display “xxxxx” ?

I thought of something like:

{
   let lang = "${e://Field/Q_Language}",
document.querySelector("#NextButton").value;

switch (lang) {
case "EN":
document.querySelector("#NextButton").value = "first line \n second line \n third line";
default:
document.querySelector("#NextButton").value = " xxxxx";
}
   }

Hi @Lee783 ,

You can add below JS code to your question for the same :

How are you adding this?

See this JS:

document.querySelector("#NextButton").value = "first line \n second line \n third line";

Thank you so much! This worked! How can I display a text depending on the language, e.g. if q_language=DE display “xxxxx” ?

I thought of something like:

{
   let lang = "${e://Field/Q_Language}",
document.querySelector("#NextButton").value;

switch (lang) {
case "EN":
document.querySelector("#NextButton").value = "first line \n second line \n third line";
default:
document.querySelector("#NextButton").value = " xxxxx";
}
   }

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{

const translations = {
  "RU": "Я даю согласие на обработку, как \n описано выше, и буду участвовать \n в исследовании рынка",
  "DE": "Ich bin mit der oben beschriebenen \n Verarbeitung einverstanden und \n werde an der Marktstudie teilnehmen",
  "HI": "मैं ऊपर वर्णित अनुसार प्रसंस्करण \n के लिए सहमति देता हूं और \n बाजार अध्ययन में भाग लूंगा",
  "EN": "I consent to the processing \n as described above and will participate \n in the market study"
};

const update = (lan) => {
  const translation = translations�lan] || translations�"EN"];
  document.querySelector("#NextButton").value = translation;
};


update(document.querySelector("#Q_lang").value);

document.querySelector("#Q_lang").addEventListener("change", (event) => {
  update(event.target.value);
});



});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

Hope this resolves your query!!

Hi @Lee783 ,

You can add below JS code to your question for the same :

How are you adding this?

See this JS:

document.querySelector("#NextButton").value = "first line \n second line \n third line";

Thank you so much! This worked! How can I display a text depending on the language, e.g. if q_language=DE display “xxxxx” ?

I thought of something like:

{
   let lang = "${e://Field/Q_Language}",
document.querySelector("#NextButton").value;

switch (lang) {
case "EN":
document.querySelector("#NextButton").value = "first line \n second line \n third line";
default:
document.querySelector("#NextButton").value = " xxxxx";
}
   }

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{

const translations = {
  "RU": "Я даю согласие на обработку, как \n описано выше, и буду участвовать \n в исследовании рынка",
  "DE": "Ich bin mit der oben beschriebenen \n Verarbeitung einverstanden und \n werde an der Marktstudie teilnehmen",
  "HI": "मैं ऊपर वर्णित अनुसार प्रसंस्करण \n के लिए सहमति देता हूं और \n बाजार अध्ययन में भाग लूंगा",
  "EN": "I consent to the processing \n as described above and will participate \n in the market study"
};

const update = (lan) => {
  const translation = translations lan] || translations�"EN"];
  document.querySelector("#NextButton").value = translation;
};


update(document.querySelector("#Q_lang").value);

document.querySelector("#Q_lang").addEventListener("change", (event) => {
  update(event.target.value);
});



});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

Hope this resolves your query!!

Thanks for your reply! If I add it like this I get the alert: “Invalid JavaScript! You cannot save until you fix all errors: Unexpected end of input”

Does it work on your end?

Hi @Lee783 ,

You can add below JS code to your question for the same :

How are you adding this?

See this JS:

document.querySelector("#NextButton").value = "first line \n second line \n third line";

Thank you so much! This worked! How can I display a text depending on the language, e.g. if q_language=DE display “xxxxx” ?

I thought of something like:

{
   let lang = "${e://Field/Q_Language}",
document.querySelector("#NextButton").value;

switch (lang) {
case "EN":
document.querySelector("#NextButton").value = "first line \n second line \n third line";
default:
document.querySelector("#NextButton").value = " xxxxx";
}
   }

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{

const translations = {
  "RU": "Я даю согласие на обработку, как \n описано выше, и буду участвовать \n в исследовании рынка",
  "DE": "Ich bin mit der oben beschriebenen \n Verarbeitung einverstanden und \n werde an der Marktstudie teilnehmen",
  "HI": "मैं ऊपर वर्णित अनुसार प्रसंस्करण \n के लिए सहमति देता हूं और \n बाजार अध्ययन में भाग लूंगा",
  "EN": "I consent to the processing \n as described above and will participate \n in the market study"
};

const update = (lan) => {
  const translation = translations lan] || translations�"EN"];
  document.querySelector("#NextButton").value = translation;
};


update(document.querySelector("#Q_lang").value);

document.querySelector("#Q_lang").addEventListener("change", (event) => {
  update(event.target.value);
});



});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

Hope this resolves your query!!

Thanks, making sure also the rest of the code is added to JS (onLoad and addOnUnLoad function) made it work Thanks so much!

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded