Highlighter test in prototype


#1

I’d like to run a text highlighter test in a prototype. This would require the participant reviewing a piece of text and then highlighting words they don’t understand in red.

Right now I figure the easiest way to do this is to make each individual word its own dynamic panel with a red text state which, on click, the word switches to.

Other than that, is there a way to do dynamic highlighting with a ‘pen’ tool in a live prototype?


#2

I was able to take a crack at mocking up a highlighter tool and created a prototype that might do something similar. However, it’s not like a pen tool as it’s not able to identify what text is being highlighted because it just uses overlays.

Since it’ll be quite a long write up, I will summarize the meat and potatoes of the logic and then post another topic fully explaining how to set it up. Keep an eye out for that :slight_smile:

In short, I created a number of “highlight strips” using a repeater and then hid this widget for when it needs to be called. I used a draggable dynamic panel to call a single highlight strip and then resize it according to its drag. On the dynamic panel are listener interactions like “Rotate > Target by 0,0” and “Move > Target by 0,0” to trigger actions on specific rows of the repeater.

There are also a number of complications that I created workarounds using some of the global variables and some redundancy events. One of the more complex item which is very delicate is getting the highlight strips to perfectly snap to each line of text.

In any case, feel free to test it out by clicking on the prototype link below or trying to tinker with it by opening the .rp file.

https://kg8648.axshare.com/

Highlight Example.rp (73.1 KB)

In the meantime, I’ll let our product team know about this feature request. Something like a text highlighter ability sounds very useful and I’m sure a lot of other users would appreciate something like this as well.


#3

@BenHoang_Axure beat me to the punch… (And Wow–pretty sophisticated!)

I had the same basic idea of moving and resizing a dynamic panel for the highlighting, but ran out of time yesterday to finish my explorations and tests. I’m posting them here because it might be easier to grasp the basic concept.

Highlighter.rp (136.8 KB)

My basic approach is…

  • Make a dynamic panel (dp) for the highlight, style it with partial opacity fill, hide by default.
  • Create a text block. I sized to somewhat random 400x400 px and right-clicked to “Fill with lorem ipsum”.
  • Make a dp from this text block.
    • Assign a Drag Started event to:
      • Set the size of the highlight dp to minimal starting size
      • Move it to cursor position
      • Show it with “bring to front”
    • Assign a Dragged event to:
      • Test if cursor is over area of This (text dp) …to keep highlight constrained.
      • Set width of highlight dp to [[Cursor.x - Target.left]] so it tracks with the cursor.

I modified this to allow dragging in either left-to-right or right-to-left direction. Another modification provides multiple highlights.

I also made a stab at identifying which words are highlighted–albeit with the “brute force” approach suggested by @forge13, with a unique text block for each word (…and wished for an AI plugin that could just do this from any text string! …or a repeater option to size widgets and rows to fit datasheet text–hint, hint Ben!) When a word is highlighted it adds itself to a list–I show two ways of doing this, with a repeater list and with a text string (or global variable).

Then I added an option to right-click a word to define it by just opening a link in a popup window that Googles the word with “define: [[This.text]]” search term.


#4

Heard! Of course, the AI industry and integrations are moving fast and being able to utilize these tools in prototyping could be game changing. I’m sure our product team is aware of this but I will be sure to add this to the feature request. As well as making text more interactive and dissectable would be something very useful.

I also appreciate the many different examples of text highlighting you included, that’s awesome! Glad to see our curiosity got the best of us with this topic. I might have gone a little overboard, though…


#5

I’m working on a prototype that involves testing text comprehension. I’m looking to create an interactive scenario where participants can highlight words they find unfamiliar using a virtual ‘pen’ tool. While the approach of using dynamic panels for individual words with a red text state seems effective, I’m curious if there’s a way to achieve this dynamic highlighting using an actual ‘pen’ tool interaction in Axure RP.