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!

Answer 1

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.