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)
2 Likes
After a relatively long break from Designer, I dove into a big questionnaire design project and was immediately struck by how tedious and error prone text formatting is, and how much tags make text difficult to read, both in the sense of being visual clutter and of not being very expressive.
If possible, I think the above features would be strongly valued–by me and all those that are working with long questionnaires and value text styling. Such features would reduce keystrokes and keying errors.
A few additional thoughts:
-
Make accessible by smart built-in classes. To make these features accessible to those with little or no knowledge of CSS, create some default content classes that map to frequent formatting use cases. For example, font colors:
.blue[I am blue text], .green[I am green text], .red[I am red text]. Maybe also bold and underline (e.g., via font-weight: bold; and text-decoration: underline;, respectively).
-
Allow “power” users to create their own content classes. For the UI, consider reusing the nice interface for reusable answer options. For the those classes, users should be able to specify only those attributes allowed by SuSo (see more here), using normal CSS syntax.
-
Keep it simple. For the benefit of both users and developers, let’s keep it simple. By simple, I mean no selectors (e.g.,
h2, #id, etc.). Just in situ application of style (e.g., .green[I am green text], where .green is defined elsewhere). By that, I also mean no need to show result of styling in Designer. As with HTML tags, the text in Designer shows the script, and the script either works or doesn’t in Interviewer/Tester.
1 Like
Small update: it seems like CSPro allows for CSS classes. See more under HTML Question Text around digital page 233 here.
In CSPro, it seems like there is a stylesheet associated with “normal” display, but also an option to create additional style classes.
