How to randomize an element position in Qualtrics?

Question

I would like to place the next button of a Qualtrics survey in three positions (horizontally aligned: left, middle, right). The position must be constant for the same participant (e.g. for participant 1 always on the left), but should be randomized between participants (e.g. participant 2 on the right, and so on).

I have used the following JS code for individual questions (since I can only add JS for each question but not for the entire survey), but if I apply this to all individual questions the next button will appear in different locations for the same participant:

var Button = document.getElementById("NextButton");

var ButtonContainer = Button.parentNode; 

if(Math.random() < 0.333){
    ButtonContainer.style.textAlign = "left"
}else {
    if (Math.random() < 0.5) {
        ButtonContainer.style.textAlign = "center"
    } else {
        ButtonContainer.style.textAlign = "right"
    }
}

Apparently, the only way to add custom code for the entire survey is via CSS (in Look & Feel settings), I'm aware I cannot implement if/else functions in CSS, thus I don't know what to do.

Any hint would be really appreciated! Thanks in advance!

Can't do random with pure css, You'll have to define those positions yourself. — Rainbow, Apr 08 '20 at 10:24
Never used Qualtrics but what I think you need is to randomize the position in the first question, then save it somewhere that doesn't change between the questions. Maybe you can add a class to the form element and then style it using something like `form.custom-left #NextButton {text-align: left}` and so on? If the page reloads between questions then it wouldn't work though. — Bartek Suski, Apr 08 '20 at 13:43

score 0 · Accepted Answer · answered Apr 08 '20 at 18:39

You can run JS on every page in the survey by placing it in the survey header or footer inside a script tag. However, using your script would result in the button being placed in different position on different pages (it would randomize for each page).

Instead, use the survey flow randomizer to set an embedded data variable to "left", "right", or "center". I haven't done it, but you can try piping the embedded variable into your custom CSS to position the button. It that doesn't work you can pipe the embedded data variable into the header/footer JS to position the button.

How to randomize an element position in Qualtrics?

1 Answers1