Highlight parts of info upon click

[nicebread]

This is just a rough idea: In the info box, we will sometimes add information that clarifies when to check a box (or not) - e.g.: When is it appropriate to select the "not applicable" option. It would be nice to alert users to this information.

For example, whenever I click the "not applicable" option, the respective part of the info box (pin the right side bar) flashes up with a yellow background.

Can you imagine an easy mechanism how such highlighting could be implemented? This sometimes would refer to single checkboxes within an indicator.

[alpkaanaksu]

Implementing the highlighting part should be easy: we just need some tags in our HTML.

But we need a way to specify the highlighted parts. I thought of something like this:

info: "This is a text a text a text {:0}oh, highlight!{.} a text a text a text"

That part would be highlighted, if the first value (0) of the radio item is selected.

We can also have conditions instead of values (if we need some information from previous items to select the highlighted part)

info: "This is a text a text a text {$Px === 5}oh, highlight!{.} a text a text a text"

We can have multiple highlights in the text.

[nicebread]

Looks good! Let's try it on P17: Whenever a users clicks one of the two "Yes" options, that part of the infobox should be highlighted:

"Only choose 'Yes' if the material substantially exceeds the open reproducible scripts."

Can the highlight be a sort of flash (to get user's attention), which then stays as a yellowish background?

[alpkaanaksu]

Can the highlight be a sort of flash (to get user's attention)

What do you mean by 'flash'?

[nicebread]

e.g., https://codepen.io/alvarotrigo/pen/WNdeKQJ (as soon as you click on the option)

[alpkaanaksu]

I implemented this feature here: c20f359688af8b3c3828bffa7257b3bd98a19892

Conditional highlighting works well:

"info": "{:2, 3}Only choose 'Yes' if the material substantially exceeds the open reproducible scripts.{.}<br><br>{:0}When to choose 'Not applicable': If no material has been used in the publication, or the entire material is contained in the open reproducible scripts.{.}",

I tried to create an animation like the one on codepen but it is really hard to achieve a similar effect on multiline text with natural text wrapping based on container width. It only worked for the first line. So I created 'blink' effect instead, it is not that fancy or beautiful but it works and there is enough change on the screen to guide attention.

[alpkaanaksu]

@nicebread Do you like this one better?

{:2, 3 | Only choose 'Yes' if the material substantially exceeds the open reproducible scripts.}

I find the first solution with {cond}text{.} a bit ugly, I think {cond | text} looks better.

[nicebread]

Looks great! Exactly as I imagined. The second syntax is indeed more intuitive.