search

SethClydesdale / genki-study-resources

A collection of exercises for practicing what is taught in Genki: An Integrated Course in Elementary Japanese.
https://sethclydesdale.github.io/genki-study-resources/lessons-3rd/
MIT License
822 stars 280 forks source link

Add Keyboard Only Support to Multiple Choice / Drag & Drop Quizzes / Quick Dictionary #76

Closed Tetramputechture closed 4 years ago

Tetramputechture commented 4 years ago

Multiple Choice

The Multiple Choice quiz was not keyboard accessible (you could not tab to the answers and select them). To fix this, I changed the choice elements from a <div> to a <button>. I also added CSS to highlight their borders on :focus, so the user can see where they are tabbing and we retain the orange border styling.

Multiple Choice example: https://streamable.com/a09qq7

Drag & Drop

The Drag & Drop quiz was not keyboard accessible (you could not interact with the elements). To fix this, I added a tabindex to the drop zones, and made the draggable items <button> elements. I also added the keypress event listener to the document, and when the Enter key is pressed, it will act like the user clicked the drop zone. When the correct answer is placed in the drop zone, the answer will no longer be tabbable to (so the user does not have to keep tabbing through correct answers near the end of the quiz).

Drag & Drop example: https://streamable.com/fbbfte

Quick Dictionary

The 'Look Up' button is now keyboard accessible, and the tab order will be right after the selected element (so the user can tab straight to the button, press 'enter', and then the dictionary will appear) The Quick Dictionary is also now keyboard accessible. You can tab to the input, type some text, and tab through the results.

SethClydesdale commented 4 years ago

Hello @Tetramputechture,

Thank you for taking the time to add in keyboard support. It looks and works nicely from what I've tested! The only issue I have noticed is that the change to a button element in multiple choice prevents the user from copying text when text selection mode is enabled. This function is usually used for looking up words in the dictionary, so I'd definitely like to preserve that, especially for newer students.

Regardless, I think this is a wonderful addition and I will merge it tomorrow when I have more time to work on and test things.

Thanks again, and have a good weekend. 👍

Tetramputechture commented 4 years ago

@SethClydesdale

Glad to help out! I made some changes in response to your comment:

SethClydesdale commented 4 years ago

Nicely done! I've merged it now and will test a few things to make sure everything is in working order.

Thanks once again! 👍