Allow creation and use of CSS classes in Designer

Use case: Currently, text formatting is a powerful but painful tool to use. The power comes from being able to style text in a certain way to draw interviewers’ attention to it. The pain is having to write <font color="maroon">text to highlight</font> every time that text styling is desired–and the greater pain of changing the styling globally (e.g., maroon is not as visible as #F99E09. For most surveys, there are 2-3 types of text to be styled:

  • Key words. Example: What is the highest class that you have reached?
  • Recall period. Example: How much did you pay for electricity in the past 30 days?
  • Changing parts. Example: How old was [NAME] at their last birthday?

What’s desired is the ability to create CSS classes in a resource file, and use them. This makes it easier to tweak the class globally, and–importantly–easier to use them with fewer keystrokes. Examples:

  • Key words. Example: What is the .key[highest class] that you have reached?
  • Recall period. Example: How much did you pay for electricity in .recall[the past 30 days]?
  • Changing parts. Example: How old was .row-name[@rowcode] at their last birthday?

The class names would be user-defined–for example, the .key, .recall, and row-name above. The definitions of the classes would be done in Designer’s advanced panel.

Changes:

  • Add place in advanced panel to create classes
  • Add to compiler checks on validity of CSS classes (optional)

Alternatively (additionally)

  • Create convenience classes for users
  • Pre-populate every questionnaire with these classes

See the R’s xaringan package for inspiration (in slides here and here)

Work-arounds:

  • Agree on classes outside of SuSo
  • Apply them systematically using existing <font> tag tools
  • (Hope no one changes their mind about style)
1 Like