This app is a tool for kids to learn about the keyboard. It visually and verbally prompts them to select various keys and celebrates there success when the correct key is chosen.
The most difficult part of designing a keyboard lesson is that keyboard layout can vary from one computer to another. In an attempt to cater to the widest possible audience the keyboard in this app has been design to replicate the US Mac keyboard. If you would be interested in designing alternative layouts take a look at this open issue.
The next most challenging part is the verbal voice prompt. Not all computers come equipped with the same synth voices and settings. If your not happy with the way the voice sounds on your computer you can edit the voices.js file to select a different voice or modify the volume, pitch and rate. Take a look at this CodePen repo if you want to experiment with all the different voices available to your browser. There may even be a way to adjust the voice settings through the UI in the future.
- Thanks goes to Raj Suhail for his CodePen repository that provided the original keyboard design for this app!
- Thanks goes to Matt West for his Speech Synthesis Demo that helped me get the voice prompt working!
- Thanks goes to Kiril Vatev for his confetti gun tool!