Creating a button to change font of the survey | Experience Community
Skip to main content
Solved

Creating a button to change font of the survey

  • July 2, 2023
  • 5 replies
  • 178 views
N
Level 2 ●●
Forum|alt.badge.img+4

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!

Best 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>

 

    5 replies

    Tom_1842
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+28
    • Tom_1842
    • Level 8 ●●●●●●●●
    • Answer
    • July 2, 2023

    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>

     

      N
      Level 2 ●●
      Forum|alt.badge.img+4
      • norinski
      • Author
      • Level 2 ●●
      • July 2, 2023

      You sir are a genius! Works amazingly, thank you so much!

      N
      Level 2 ●●
      Forum|alt.badge.img+4
      • norinski
      • Author
      • Level 2 ●●
      • July 3, 2023

      @Tom_1842 I have a follow up question. This code only works for computer but unfortunately doesn’t work on mobile. Is there some way to modify it so it works on both devices?

      Tom_1842
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+28
      • Tom_1842
      • Level 8 ●●●●●●●●
      • July 3, 2023

      I 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>

       

        N
        Level 2 ●●
        Forum|alt.badge.img+4
        • norinski
        • Author
        • Level 2 ●●
        • July 3, 2023

        @Tom_1842 works like a charm, thank you so much!

          Terms & ConditionsAccessibility statement