Allow certain text in survey question to be boldface, italic, etc

[ryantanaka]

@carlosparadis,

I've got a feature request from Eileen. Right now survey questions display on the screen like this:

She would like the ability to make specific text stand out more so that users don't miss key words in the questions. Reason being is that we've been testing survey_display on the tablet in the office (collecting data then running through the workflow on tableau). One day I changed the question, but we had gotten so used to the same question, Eileen didn't realize the question had been changed.

So, the above survey might look like this instead:

I like the idea, and coding it up was fairly straightforward. In Elm, we create h2 html elements for questions. By changing this:

survey_display/survey_display/elm/Components.elm

Lines 35 to 40 in da71b26

	-- generate question text.
	question_text : Txt -> Html Msg
	question_text text =
	Html.h2
	[ Ha.classList [ ( "question-text", True ) ] ]
	[ Html.text text ]

to this:

-- generate question text.
question_text : Txt -> Html Msg 
question_text text =
  Html.h2
    [ Ha.classList [("question-text", True)], (Ha.property  "innerHTML" <| string text)  ] []

we get the desired result.

In the database, the question text was changed from:

How acceptable is the air movement in the room?

to:

How acceptable is the <u>air movement</u> in the room?

The change in elm code basically means that it will "notice" html in the text and make an html element out of it. The only issue here is making a mistake when trying to underline or italicize something. For example, forgetting to close a <u> tag with </u> will mess things up. The good thing is that whoever makes this mistake will immediately see the question appear not as intended. Also Eileen is fine with writing those simple html elements.

Let me know what you think.

[carlosparadis]

@ryantanaka I see, I like the idea too! Just keep a close eye if it is only allowing html interpretation or it can allow other things to be rendered. That would be my only concern.

I think you should also take the chance and point this on README.md, even if this is put on the wiki, it will likely be forgotten. Just create some section on it saying "What you can do" and highlight this on it :)

[ryantanaka]

@carlosparadis,

Just keep a close eye if it is only allowing html interpretation or it can allow other things to be rendered. That would be my only concern.

Right, this was definitely a concern of mines too. As long as the database is kept secure then this won't be a problem. IF someone gets into the database then we have cross site scripting problem lol. For example, we have problem if someone enters questions into the database like this:

How acceptable is the <u>air movment</u> in the room? <img src="/" onerror="console.log("hi");">

According to some forums, what happens here is that an image tries to get loaded that doesn't exist. Then, an error happens and the code in onerror gets executed... I tried it out and it works. So this isn't a full proof solution. But then again, if someone gets into the database that shouldn't be there then this is the least of our concerns.

I think you should also take the chance and point this on README.md, even if this is put on the wiki,

i'll find a place and document it