separate sound controls for correct and incorrect inputs

ranelpadon / ngram-type

Touch typing trainer using N-grams as data source, with options to customize the auto-generated lessons and specify the minimum typing performance needed. There are sound/color effects as well.

208 stars 39 forks source link

separate sound controls for correct and incorrect inputs #14

Closed thatsweetdoja closed 2 years ago

thatsweetdoja commented 2 years ago

The delay on the typewriter noise makes it hard to keep a consistent rhythm, but I would still like to be able to tell when I miss a letter without looking at the screen

ranelpadon commented 2 years ago

@thatsweetdoja Thanks for your feedback. It has 4 sounds actually:

Typing sounds:

correct letter
incorrect letter

Result sounds (if within the WPM/Accuracy threshold)

passed
failed

So, there are various combinations:

have individual controls for these 4 sounds (i.e. 4 controls)
have controls for the Typing and Result sounds only (i.e. 2 controls)
have controls for the correct letter/passed result and incorrect letter/failed result only (i.e. 2 controls)

What do you suggest? The 4 controls are more flexible I think. Not sure though the impact on UI/UX.

ranelpadon commented 2 years ago

@thatsweetdoja I implemented the 4 granular sound controls, plus other style improvements. Working as intended in my preliminary testing. Let me know what you think:

Thanks

thatsweetdoja commented 2 years ago

This is awesome, exactly what I had in mind! I don't think it's too bad in terms of UI impact, but one thing that might clean it up a little is moving the switches into a collapsible card. I did a real quick and dirty mockup based on the bootstrap docs as an example. https://pastebin.com/sSH0XVWW card closed card open

ranelpadon commented 2 years ago

Right, that's a good idea to reduce clutter! I'll add it asap. At least it's functional now and just needs some UI enhancements. Thanks!

thatsweetdoja commented 2 years ago

Happy to help, this is a super helpful tool!

ranelpadon commented 2 years ago

@thatsweetdoja I implemented the collapsible sounds section now. Didn't know that Bootstrap has an easy mechanism for collapsing, which is kinda similar to modal windows. So, the Sounds text/button is now the trigger for collapsing the section below it. I decided to use color to convey that it's clickable for simplicity and consistency with the Custom text/link which acts as a toggle also for a modal window:

Please check once you have the chance. Thanks :)

thatsweetdoja commented 2 years ago

Looks great!

ranelpadon commented 2 years ago

Closing this issue/suggestion since it's working as intended now. Thanks again for your feedback. :)