I was wondering if there is a way in Qualtrics to create a button in the corner of the survey so that participants can change a font that is used in the survey that will suit them more (for instance to Comic Sans). I will be working with participants who may have dyslexia and although I am using a dyslexia-friendly font in the survey, people may have a preference for a different font, so I want to give them a chance to choose one. Thank you!
Solved
Creating a button to change font of the survey
+4Best answer by Tom_1842
Hi, I was able to put something like this in place by adding a dropdown of fonts to the survey's header that will udpate the font of everything on the page when a selection is made, saving the font to an embedded data field to set the font for the rest of the survey.
To give it a try, first create an Embedded Data field called "font" and put it at the top of the Survey Flow. Set its value to a font family that will exist in the selectable dropdown so that something is selected on the first page. Try setting the value to "Helvetica Neue".
Then over in the Look & Feel General section, update the Header of the survey by clicking "edit" and then the HTML/Source view "<>" to insert the below. I found some of the code here. A list of font families that might be included are here.
<script> Qualtrics.SurveyEngine.addOnload(function() {var values = ["Helvetica Neue", "Arial", "Comic Sans MS", "Montserrat", "Verdana", "Tahoma", "Trebuchet MS"];
var select = document.createElement("select");
select.name = "font";
select.id = "font"
for (const val of values)
{
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0) + val.slice(1);
select.appendChild(option);
}
var label = document.createElement("label");
label.innerHTML = "Choose your font: "
label.htmlFor = "font";
document.getElementById("HeaderContainer").appendChild(label).appendChild(select);
//set fonts
var font = Qualtrics.SurveyEngine.getEmbeddedData('font');
jQuery("#font").val(font);
jQuery("*").css({"font-family":font});
select.onchange = function(){
selected = select.options[select.selectedIndex].text;
jQuery("*").css({"font-family":selected});
Qualtrics.SurveyEngine.setEmbeddedData("font",selected);
} }); </script>
+28Hi, I was able to put something like this in place by adding a dropdown of fonts to the survey's header that will udpate the font of everything on the page when a selection is made, saving the font to an embedded data field to set the font for the rest of the survey.
To give it a try, first create an Embedded Data field called "font" and put it at the top of the Survey Flow. Set its value to a font family that will exist in the selectable dropdown so that something is selected on the first page. Try setting the value to "Helvetica Neue".
Then over in the Look & Feel General section, update the Header of the survey by clicking "edit" and then the HTML/Source view "<>" to insert the below. I found some of the code here. A list of font families that might be included are here.
<script> Qualtrics.SurveyEngine.addOnload(function() {var values = ["Helvetica Neue", "Arial", "Comic Sans MS", "Montserrat", "Verdana", "Tahoma", "Trebuchet MS"];
var select = document.createElement("select");
select.name = "font";
select.id = "font"
for (const val of values)
{
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0) + val.slice(1);
select.appendChild(option);
}
var label = document.createElement("label");
label.innerHTML = "Choose your font: "
label.htmlFor = "font";
document.getElementById("HeaderContainer").appendChild(label).appendChild(select);
//set fonts
var font = Qualtrics.SurveyEngine.getEmbeddedData('font');
jQuery("#font").val(font);
jQuery("*").css({"font-family":font});
select.onchange = function(){
selected = select.options[select.selectedIndex].text;
jQuery("*").css({"font-family":selected});
Qualtrics.SurveyEngine.setEmbeddedData("font",selected);
} }); </script>
+4+28I see what you mean. In looking around a bit, it looks like in order to use a font, the device must have the font installed. Mobile devices don’t have Comic Sans pre-installed and so use the device’s default font instead. I think that was the case for all of the font families I used above.
Instead, font families can be loaded in the survey’s Header for use throughout the survey. Google has a lot of options available here, though Comic Sans is not available. Pick some fonts, add them to the survey’s Header, and then update the choices in the dropdown to include the chosen fonts. I also updated the below to add an input event listener instead of onchange to update the fonts.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Comic+Neue">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif">
<script> Qualtrics.SurveyEngine.addOnload(function() {var values = ["Roboto", "Comic Neue", "Open Sans", "Montserrat", "Noto Serif"];
var select = document.createElement("select");
select.name = "font";
select.id = "font"
for (const val of values)
{
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0) + val.slice(1);
select.appendChild(option);
}
var label = document.createElement("label");
label.innerHTML = "Choose your font: "
label.htmlFor = "font";
document.getElementById("HeaderContainer").appendChild(label).appendChild(select);
//set fonts
var font = Qualtrics.SurveyEngine.getEmbeddedData('font');
jQuery("#font").val(font);
jQuery("*").css({"font-family":font});
select.addEventListener('input', function (event) {
selected = select.options[select.selectedIndex].text;
jQuery("*").css({"font-family":selected});
Qualtrics.SurveyEngine.setEmbeddedData("font",selected);
}, false); }); </script>
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.