The main parts of the mockup are:
- HTML page with the basic elements. Main elements/containers will be created in advance, but the used content will be dynamically changed. Also the references to external files/scripts will be initially defined in the HTML. The data classes will be defined in the HTML;
- CSS for styling (initial positioning, colors and visibility);
- JavaScript for the interactions and the dynamic changes. Test values will be saved as hardcoded text and later switched with the DB connectivity;
- other files (like audio, texts, etc.)
The mockup is oversimplified realistic looking page. It is currently more “proof of concept” than real mockup. Temporary link and the building process as ZIP file (will be updated later and the audio files folders are not yet ready).
So the ugly page has:
- input for initial text
- processing – split, check state
- navigation over the tree structure – up/down, left/right and the status- curent position
- temporary intermediate output, with background check of current position (navigation is not completely working)
- final output (where the typed in text will appear)
- buttons to show currently expected letter, sylable or word
- audio player for letter, sylable, word (in the test environment it also works for limited number of words)
- event listeners for the keystrokes
On page refresh the page is loaded and several functions are called automatically. If doing it manually it is not quite usefull- first enter text (preferably shorten the predefined), “perform split”, “check state”, “levelDown” (multiple times), “(re)playCurrent” and afterwards the process might work.
All the useless controlls, that were used for the debugging, will be hidden (display:none) and only the content after the last horizontal line will be visible.
Of course their allignment will be changed. Some additional events will be created (like autoplay next word, what happens when completed). Probably also timers. The text will be generated from external server side script and the current state will be saved in cookies.
Still work in progress.
Probably next steps will be to add link to SQL DB to get the dictionary and to generate audio files for the initial batch of words and at the end make the page visually clean and usefull.