Change mode of selecting survey language using CSS? | XM Community
Solved

Change mode of selecting survey language using CSS?

  • 15 October 2018
  • 7 replies
  • 249 views

I have a survey that is in both English and Spanish. Rather than having respondents use the default drop down menu to switch between languages, is it possible to use a custom CSS to have an option at the top of the English survey that reads "For Spanish survey, please click here" (in Spanish, obviously), and vice-versa to get back to English?

Thank you!
icon

Best answer by QubieDK 10 January 2019, 00:08

View original

7 replies

Userlevel 7
Badge +27
No, you can't do it with CSS. You would have to use JavaScript.
Gotcha, thanks @TomG . I am a completely newbie when it comes to JS. Is there a resource that might be able to point me in the right direction with the matter?

Thanks again!
Userlevel 7
Badge +27
You can start here:
https://www.qualtrics.com/support/survey-platform/survey-module/question-options/add-javascript/
Userlevel 1
Hi,

OPTION 1: USING SURVEY FLOW TO CREATE A BRANCH
This might work? THe respondent will click a Spanish Survey choice which will direct him to the Spanish survey.

1. Create a spanish translation version of your survey. (Tools > Translate Survey > Add a Translation > Choose 1) Spanish EU or 2) Spanish Latam. THen translate.)
2. In the Project, create a new block above your main survey block. Name the "Spanish Selection" or something like that.
3. In the Spanish block, create a Multiple Choice question.
4. Set it to only ONE answer choice.
5. For the question, enter "For the Spanish survey, please click below:"
6. For the single answer choice, you can use something like "Spanish Survey"
7. In the Project tab still, in the top-left, click Distribution.
8. Click Anonymous link on the right side. You will then see the link for this survey.
9. Open Notepad (or Word but Notepad is cleaner since no formatting)
10. Copy that survey link and paste it into Notepad (or Word).
11. Now in the top-left again, click Survey to go back to the survey.
12. Now click Survey Flow at the top. You should see the Spanish Choice block at the top, then your main survey block under it.
13. In the Spanish Choice block, to the right, click Add Below.
14. Click Branch to add a Branch. A light blue section will appear below your Spanish Choice block.
15. Below the new Branch, click Add a New Element Here (in green).
16. Choose End of Survey. A red box appears below Branch.
17. In End of Survey (red box), click Customize.
18. Click Override Survey Options.
19. Click Redirect to a URL. Leave this open as is.
20. Now, go to Notepad and copy the survey link.
21. Paste it into the URL field.
22. At the end of the link add: ?Q_Language=ES. So the link should look something like this: "https://siresearch.ca1.qualtrics.com/jfe/form/SV_1a2b3c4dilikech33se?Q_Language=ES" NOTE: you need to know which Spanish translation you added because the language code will be different. Spanish EU = ES but Spanish Latam = ES-ES.
23. Now in the Spanish Choice Block at the top, click Add a Condition.
24. In the first drop-down box, choose Question.
25. In the second drop-down box, select the question that says "FOr the Spanish survey, click below:"
26. In the third drop-down box, click the single answer choice: "Spanish Survey"
27. In the fourth drop-down, click Is Selected.
28. Click OK to save.
29. Save the Survey Flow to exit.
30. Preview and test


OPTION 2: ADDING TEXT BEFORE THE LANGUAGE SELECTION BOX
TomG actually posted this code in July 2018. THis would just add text before the Language Selector Box - a simpler solution in case you can't figure out the other one. Scroll to the bottom:
https://www.qualtrics.com/community/discussion/1338/is-there-a-way-to-add-a-label-above-the-language-selection-drop-down

So what you need to do is this:
1. Open your survey project.
2. Click Look & Feel in the top-right.
3. If you are using the New Editor (default), click the General tab. Click Edit in the Header section. If you are using the Old Editor, click Advanced tab. Click Edit in the Header section.
4. Copy the code from Tom below WITHOUT THE double asterisks at the beginning and end and paste it in. Save the Header. Then Save a gain to exit Look & Feel.
5. Preview to check.

CODE:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("div.LanguageSelectorContainer").prepend("For the Spanish survey, please choose from the drop-down list: ");
});**

Good luck!
Userlevel 7
Badge +23
Is it possible, btw, to replace language names with flags?
Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/10357#Comment_10357Hy, has this question been answered yet? I would like to implement the same in a survey I'm doing, but can't find the answer.

Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/51458#Comment_51458It isn't possible to put html elements (i.e., images) inside a select option.

Leave a Reply