Forgetful Hints
I spent a chunk of my week working on a tooltip for providing hints in our capstone. The capstone is a web app to help memorize speeches. The primary gimmick is we reduce letters in steps to make the text hard to read so you use more cognitive load and focus. Eventually, you end up with just the first letter of the word.
Word with all letters removed. The first iterations were a normal CSS tooltip. We are using REACT, so a static tooltip is easy enough. Unfortunately the feature we settled on was a progressive tooltip. We wanted to provide the previous version of the word. Then after a specific interval, we would show the version before that.
This turns out to be difficult in REACT while using CSS. It was made doubly hard by trying to maintain as many dumb components as possible. Eventually, we talked it over and decided on changing the word.
I built a dumb component that would take a string, and the current level of decimation through props. That component removed the levels and fed an array for each word into another small stateful component. That component checked for hover using state. Below is how that looked.
On mouse in we set an interval and run a hint function on each tick. Each tick returns a previous version of the word and add a shadow to the word. The shadow is there to draw attention to the change. The current hint is stored on state. When we mouse out of the component the level for the hint is reset to the current word level.
In the end, we had a reusable component that could take any string we wanted to feed it and provide this functionality. I even added some options to feed a hover color and shadow color for some basic customization. That’s the biggest part of my day! Now on to visualizations with react-vis, courtesy of Uber.