Script to Move Language Selector Box Flashes for Split Second On Page Load | XM Community
Solved

Script to Move Language Selector Box Flashes for Split Second On Page Load

  • 18 December 2018
  • 11 replies
  • 23 views
Q
Userlevel 1
Hi,

Thanks to code in another post from Tom G, the following script allowed us to move the Language Selector Box down below the Next button. Here is a sequence to the problem:

1) Welcome page loads, Language Selector Box (LSB) displays below Next button. (good!)
2) Click Next to go to next page, LSB flashes below Next box for split second then disappears. (bad)
3) Press Back to go back to Welcome page, LSB flashes below Next box for split second then disappears. (bad)
4) Now clicking Next or Back (any page change), LSB flashes below Next box for split second then disappears. (bad)

My question is, how can I stop this "ghosting" effect? Any ideas welcome. Here is the script we are using:

<script>Qualtrics.SurveyEngine.addOnload(function() { jQuery("#Buttons").after(jQuery(".LanguageSelectorContainer"));});</script>

Thanks,

Derek
icon

Best answer by TomG 19 December 2018, 20:32

View original

11 replies

NiC
Rank
Userlevel 7
Badge +27
hi @derekk
So if You just want to hide the language selector box in one question add the below given code in HTML source of the question
`<style>#Q_lang{visibility:hidden}</style>`
XM Engineer | Zill Consulting
Q
Userlevel 1
Hi NiC,

Actually, I don't want to hide it. Ideally, I would like the language selector box to show below the Next button on the first page, but then disappear for all other pages.

With that likely being difficult, I'd like the Language Selector Box to show below the Next button for all pages.

But right now, it flashes for a split second on each page and disappears, which doesn't look very good.
NiC
Rank
Userlevel 7
Badge +27
> @derekk said:
> Hi NiC,
>
> Actually, I don't want to hide it. Ideally, I would like the language selector box to show below the Next button on the first page, but then disappear for all other pages.
>
> With that likely being difficult, I'd like the Language Selector Box to show below the Next button for all pages.
>
> But right now, it flashes for a split second on each page and disappears, which doesn't look very good.

Sorry , when i tried the code maybe there was a preexisting css code to hide LSB already so misunderstood the purpose of the code.
Also Javascript / jquery code added via the question run after the questions are loaded hence it flashes for a split second.
If the code is a javascript code you , there will be a slight delay in the change via javascript code.
there might be some css alternatives though !
XM Engineer | Zill Consulting
TomG
Rank
Userlevel 7
Badge +27
@derekk,

You could put an empty `<div>` with a lot of height in the header, then hide it at the end of the JS. It would have the effect of pushing all the page content off the bottom of the screen until the script completed.
Q
Userlevel 1
Hi Tom,

Thanks, I'll try that. I am lacking in coding skills. Should I put the div tag outside the script or inside? Should I wrap the function or not? Which of the 4 below?

Thanks

1) (div style=height 200px)</div)(script>fcn(/script)
2) (script)(div style=height 200px)(/div)fcn(/script)
3 (script) fcn (div style=height 200px)(/div) fcn end(/script)
4) (script) fcn (div style=height 200px)(/div)(/script)
TomG
Rank
Userlevel 7
Badge +27
In your header, add the following:
```
<div id="tempHead" style="height:1500px"></div>
<script>
Qualtrics.SurveyEngine.addOnReady(function() {
if("${e://Field/langSelect}"=="1") jQuery(".LanguageSelectorContainer").hide();
else jQuery("#Buttons").after(jQuery(".LanguageSelectorContainer"));
jQuery("#tempHead").hide();
});
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
Qualtrics.SurveyEngine.setEmbeddedData("langSelect", "1");
});
</script>
```
Q
Userlevel 1
Hi Tom, Thanks, that worked!

Summary for others: (See script Tom posted on Dec.19 - Accepted Answer)

* Setup: The survey has other language translations. Page/screen 1 is the landing page showing a welcome message (e.g. Welcome to the ABC satisfaction survey) with a page break after it. By default the Language Selector Box shows in the top-right.
* Tom's script moves the Language Selector Box down to the bottom-right, BELOW the next/continue button to advance to the next page/screen.
* This script also has an added feature. When you click Next/Continue to advance to the next page, the next page will NOT show the Language Selector Box anymore. How the script works is that the DIV tag at the top, pushes the Language Selector Box out of view. The other code makes it so that only Page/Screen 1 shows the Language Selector Box.

This code worked for our needs, especially since we have page breaks every 1 or 2 questions. We also code the Contact List recipients with a primary language code so that they automatically land on their most likely preferred language. The Langauge Selector Box on Page 1 just gives an option if they want to change the language, otherwise they go straight into the survey.

If your survey goes much longer without Page Breaks, you will need to test to see if the DIV spacing needs to be increased or if everything works as you need.

Also, if you expect respondents to choose their language first or would like to allow them to change it later, this script would not suit your needs as the Langauge Selector Box disappears after Page 1 and never returns even if you press the Back button to return to Page 1.

NOTE: You can also move the Language Selector Box down and place it ABOVE the next/continue button by changing line 5 of the script code. Replace the word "after" with "before"

else jQuery("#Buttons").after(jQuery(".LanguageSelectorContainer"));

So now it becomes:
else jQuery("#Buttons").before(jQuery(".LanguageSelectorContainer"));

To use, copy tom's script from Dec.19. Open your survey project. Go to Look & Feel. Go to the General tab. Find the Header section and click edit. Now, click the <> page icon to the left of the Underline button. This takes you into the source code page. Paste tom's script here. If you want the Language Selector Box above the next/continue button, change .after to .before. Click Save. Save and Exit Look & Feel. Preview your survey to check/test.

Big thanks to Tom for his help!
S
Badge +1

HI Team,
The solution to move the language container works fine. But is there a way we can move this container to the centre of a page after the welcome text?

TomG
Rank
Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/28313#Comment_28313You'll have to be more specific about where you want it and what else is on the page.

S
Badge +1

Tom, i want to display this in the centre of the first page of the survey. I found the below code. But where should i include this code? Does this code will work?
.LanguageSelectorContainer {
display: block;
max-width: 500px;
margin: auto;
}

S
Badge +1

I found the solution. Thank you. We need to place the above code in custom css.

Leave a Reply


Terms & Conditions