Using html for choices in select_one list

[ChuckS]

A couple of years ago, I read this great post from @IsmaelChivite: Survey123 Tricks of the Trade: Quick guide to modernize HTML formatting tags in your survey. It explains how to use html in Survey123 including how to change the font color of choices in a list. I've done this quite a bit but, I just discovered that the html code is written to the label for each choice in the feature layer. I don't want this. I'm now considering no longer using html for choices in a list.

I've attached an XLSForm for a simple survey that demonstrates what I'm talking about. Here are some screenshots. The survey looks good:

The displayed labels are not ideal:

I suppose that I could modify the label, but this isn't a solution. I think I have 15+ choices in multiple lists that use html. And I'd have to remember to do this every time I publish the XLSForm for the first time.

The comments in this html formating select one list post from Nov. 2021 mention the same issue. The post is marked as Solved, but no action was taken on the comments.

If html is going to be recommended for choice lists then I think that issues like this should be fixed or at least disclosed. I was also hoping to use html in constraint messages as well but that doesn't appear to be fully supported.

I'm using Survey123 Connect 3.18.124. 

Thanks, Chuck

[DougBrowning · Accepted solution]

You can change the domains after the fact if you want in AGOL.  123 does not use them.  Be careful with updates.  Not a great solution but it could work.

But I agree that is why I do not do this with HTML.

Other idea is use the media::image in choices list and give it a icon or emoji to make it stand out.

Could use description images that look good small like these for example for Danger.

Hope that helps

[ChuckS]

Thanks for your response. I think that I need to avoid using html for items in my choice list. Adding html code to the label almost seems like a bug.

I threw this together pretty quickly and it looks okay. The Safety Level survey for for demonstration only. I'll need to find an icon for my specific topics. Thanks!

[ChuckS]

@DougBrowning I really like displaying an icon in the next to the answer (using media::image) in choices list. Thanks for that suggestion.

I discovered that clicking on the icon shows a full screen view of the image. This is not ideal. Users could accidentally click on the icon when trying to select the answer. Do you know if this can be turned off?

Thanks, Chuck

[DougBrowning]

Not that I know of.  I like that feature and use it for our projects so never wanted to turn it off.  Most things like that you cannot customize in 123.  If you have a required on it then they have to fill it out anyway.

[ChuckS]

When you say that you like that feature, are you talking about clicking on the icon and displaying the icon so it fills the entire screen? I don't see how that is useful. For my survey, it's a problem because users could accidentally click on the icon when trying to select the answer. This would be a distraction and cause a slight delay in completing the survey. My survey is used by first responders.

I can how seeing a large image could be useful if the image is something like a plant or animal, rather than an icon. A better interface for that would be to somehow toggle the list to show larger images for all items in the list rather clicking them one at a time. On a mobile devices having two clickable regions next to each other leads to user errors, especially one of the items is an icon and not meant to be clickable.