My elementary school daughter recently came home after competing in her schools spelling bee. In the excitement of the moment of having faired so much better than last year she said "next year I want to win!"
That inspired me to see if I could design a tool to help her prepare.
This app makes use of React-Speech-Kit in combination with a speech recognition polyfill to help it function on most modern browsers, desktop computers, Android and IOS devices.
- Grade level based study mode
- Grade level based Spelling Bee mode with voice recognition
- Admin mode to add/update words, definitions and grade levels
- "Lexend" font to help remove cognitive noise in character recognition
- Visual and audio aid in study mode
- Use of default speech synthesis
- Use of Speech recognition
- Parent/Teacher/Student roles
- Parent and Teachers can create Student/Child Profiles
- Parent and Teachers can create QrCode cards for student/children
- QrCode Login to help students/children login without adult assistance
- Parents/Teachers can see students progress in an overview
- All users can see spelling results in profile view
- Speech Synthesis operates differently on different devices (to include different speeds) which creates a challenge synchronizing the flash cards in study mode as well as the timeOut's needed to turn off the mic while the computer is speaking.
- QrCode login works when running the frontend on a local server. When deployed to Netlify it causes an error.
- Layout of elements is not ideal
- ability to reveal the word after trying to spell it first
- enlarge vocabulary to practice as student progresses
- setting for practicing 'older' already learned words for review
- setting for learning just new words
- grade level appropriate word lists to practice
- word definitions in style of spelling bee
- create wireframe
- create data models
- determine MVP goal
- have app speak words to student
- study mode
- spelling bee mode
- admin panel to add words
- have app listen (and recognise) spelling
- graphical display of progress
- create way of tracking how well a word has been learned
- teacher/parent/child roles
- qr-code generation
- qr-code login
you can contact me at: jan-horak@gmx.de
or connect with me on Linked.in: https://www.linkedin.com/in/jan-horak/
Bee Favicon from : https://favicon.io/emoji-favicons/honeybee/
Dyslexic friendly font: Lexend https://fonts.google.com/specimen/Lexend?query=Lexend for more information on this open source font project please go to: https://www.lexend.com/
I struggled to figure out how to animate the letters on the flashcard in study mode. I thought it would be a great bonus if the letters would be emphasized as they are spelled my the computer. I found these helpful links from Sarah L. Fossheim. I adapted them to make it work for the study mode:
https://fossheim.io/writing/posts/react-text-splitting/
https://fossheim.io/writing/posts/react-text-splitting-animations/
Grade level words were found through google searches for Scripps Spelling Bee word lists all over the internet.
Word definitions have been pulled in using the WordsAPI in the Admin wordsearch function. I have free usage with a 500 word a day limit.
Speech recognition is implemented using react-speech-recognition in combination with a speech recognition polyfill usinging Speechly's free tier.
The voice selection option in the profile view is adapted from the react-speech-kit Github repository from MikeyParten
React-qr-code and react-qr-reader NPM libraries were used to assist in the qr-code generation and login.
I use crypto-js to encrypt and decrypt the user login information for the Qr code.
Avatars: All individually downloaded for free from flaticon. The entire pack can be found at: Icon Pack: Animals | Flat
- Octopus icons created by Freepik - Flaticon
- Dog icons created by Freepik - Flaticon
- Parrot icons created by Freepik - Flaticon
- Crow icons created by Freepik - Flaticon
- Cat icons created by Freepik - Flaticon
- Buffalo icons created by Freepik - Flaticon
- Donkey icons created by Freepik - Flaticon
- Elephant icons created by Freepik - Flaticon
- Dog icons created by Freepik - Flaticon
- Snake icons created by Freepik - Flaticon
- Seagull icons created by Freepik - Flaticon
- Penguin icons created by Freepik - Flaticon
- Bear icons created by Freepik - Flaticon
- Panda icons created by Freepik - Flaticon
- Pig icons created by Freepik - Flaticon
- Cow icons created by Freepik - Flaticon
- Racoon icons created by Freepik - Flaticon
- Polar bear icons created by Freepik - Flaticon
- Leopard icons created by Freepik - Flaticon
- Owl icons created by Freepik - Flaticon
- Cock icons created by Freepik - Flaticon
- Buffalo icons created by Freepik - Flaticon
- Whale icons created by Freepik - Flaticon
- Octopus icons created by Freepik - Flaticon
- Anteater icons created by Freepik - Flaticon
- Chicken icons created by Freepik - Flaticon