We have an extension which downloads dictionary from back end and translate words in the content, user can hover the word and see popup with original word, he can mark this word like "I know this" and it will not appear again, also user can type "audio" button and listen how it's spelled. We need to add new features, like different versions on this popup, we want also to reorder controls in the extension settings and small redesign, also we need to show static onboarding.
This is how popup about word looks like now and settings for the extension
Popup when you hove the word
Settings for the extension
Here you can see the onboarding flow https://miro.com/app/board/o9J_lKPFiZU=/ it will be static html pages, login/signup are already implemented, you can just create new html view for it(we are on php, laravel)
On the steps 2-3-4 we want to show different versions of the hover popup for the word(design in progress but you can check features below)
we need to track words that user hover with a mouse and saw original of the word, it will be counted like "Learning words"
we need to track how much time user hovered on the word , for example, if I see word "apple" and hovered with a mouse, it counted like 1 unique showing for the unique article, if I saw this word on another article, it counted like 2 shows and etc. If I hover the words on the same article couple times it counted like 1 unique showing
in the word popup we need to have progress bar which shows the progress for the word, it should be divided in 30 segments, once user hover it for the first time it make with a color 1/30. We will show simple translation and for 5-15-25 will be game with select translation and for 10-20-30 will be type translation, progress bar can move up to 90% if user passed all 30 views, the rest 10% will be filled if he press "I know this".
For words, when we show games we need highlight them differently, add the dot at the beginning of the word.
For example, if you have translated word "actor" , possible combinations:
activist, activity, actor
activity, actor, actress
actor, actress, actual
First letter should be the same for the words.
We need to show game until user will select an answer or type it, we don't count all next game shows until user pass the game, for example, I hover the word and see game, it's my 5th hover on the word, until I pass the game we don't increase counter for word views.
If user selected correct word we show success state, if user selected wrong word, we need to highlight it in red and refresh answers so user can select again.
Words that participate in the games should be highlighted with underline and dot at the beginning of the word.
On 10-20-30 count we need to show the input for translation, it should have autocomplete based on input, user can enter full word and press enter, or select from autocomplete, or enter the word and press button [v] at the end on input. If word is incorrect we shouldn't accept the answer, if user answered correctly we will show regular popup with progress bar
We will divide settings popup in 2 tabs, first tab will be with statistics, second tab with settings. On the first tab we need to show Daily progress bar(we already have it), and 2 blocks with "Practicing" and "Learned", all texts should be added to locale files, so we can write correct text in RU/PT.
