Line Break for custom text on Next Button | XM Community
Solved

Line Break for custom text on Next Button

  • 20 March 2024
  • 9 replies
  • 69 views
L
Rank
Badge +5

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

 

 

icon

Best answer by qualtrics_nerd 21 March 2024, 00:29

View original

9 replies

A
Rank
Userlevel 7
Badge +21

You can add <br> for a line break.

L
Rank
Badge +5

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 :(

 

 

A
Rank
Userlevel 7
Badge +21

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

L
Rank
Badge +5

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

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

 

A
Rank
Userlevel 7
Badge +21

How are you adding this?

See this JS:

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

 

L
Rank
Badge +5

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_nerd
Rank
Userlevel 5
Badge +19

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😊!!
 

L
Rank
Badge +5

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?

L
Rank
Badge +5

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


Terms & Conditions