gustafl / lexeme

A new take on language learning.
1 stars 0 forks source link

Redesign the form with arrow keys #115

Open gustafl opened 8 years ago

gustafl commented 8 years ago

We need to make some changes to the form to allow for disambiguous words (#101) and alternative forms (#114). I imagine putting two buttons with arrows left and right of the form, and another pair of buttons in the header of the form, like so:

Form with arrow buttons

The larger arrows are used to change lexeme. The smaller arrows in the header are used to change lemma. They are always present in a low-contrast color but light up (and turn into links) when clickable.

When the user clicks a <span> in the document, the form searches through the database for every matching lexeme or inflection (consider adding compounds and expressions to this list too). If there's just one match (the common case), it's displayed in the form. If there are multiple matches (a.k.a. disambiguity), a tooltip appears near the word in the text, where the user can select the right match of the <span> he/she clicked. After selecting one, that match this is loaded into the form.

If the user wants to move between the selected match and other matches of the same word, he/she can use the large arrow keys. Clicking the right arrow key brings the user to the next match. Note that matches can be of various forms, such as lexemes and inflections.

Try to animate the transition between one match an another when clicking the arrow buttons.