How to randomly assign users a font in a qualtrics survey - qualtrics

Question

I am conducting an experiment on Qualtrics. The font used in the survey is one of the variables I am testing.
I would like to use "MS Serif" to 50% of my participants, and "MS Sans Serif" to the other 50% of participants. These fonts are part of the fonts you can pick in the "look and feel" UI of Qualtrics.
I would also have to record which font each participant saw.
How do I do this?
My first idea was to create two surveys, and just have Mechanical Turk pick one of them randomly. However, my account will only let me have one active survey at a time.

Answer 1

It may depend your theme, but you can try the following.
First, at the top of the Survey Flow, add a randomizer to pick one of two embedded data blocks evenly to give you a 50/50 split. Inside the embedded data blocks assign a font-family to an embedded data variable:
Randomizer
Block 1
fontFamily = 'MS Serif'
Block 2
fontFamily = 'MS Sans Serif'
Then under Look&Feel Advanced, add the following to the Header using Source editing:
<style>
#RestoredResponseBar, .Skin, .Skin .yui-skin-sam .yui-calcontainer,
.Skin button, .Skin input, .Skin select, .Skin textarea {
font-family: ${e://Field/fontFamily};
}
</style>
EDIT:
If the style tag in the header doesn't work for you, you can try adding a custom style using JavaScript in the Header instead:
<script type="text/javascript">
Qualtrics.SurveyEngine.addOnload(function() {
var fontFamily = "${e://Field/fontFamily}";
$('customStyles').update("#RestoredResponseBar, .Skin, "
+ ".Skin .yui-skin-sam .yui-calcontainer, .Skin button, .Skin input, "
+ ".Skin select, .Skin textarea { font-family: " + fontFamily + " }");
});
</script>
Note the change from double to single quotes in the embedded data assignments above.