SethClydesdale/genki-study-resources

Create keybindings to answer multiple choice questions

Closed this issue · 7 comments

yangmillstheory commented

Hey Seth, on multiple choice questions, like the ones here, the answers are denoted by A, B, C, D. How hard would it be to create keybindings so that pressing corresponding keys submits the corresponding answer?

SethClydesdale commented

Hey!

Hmm.. it should be possible to implement utilizing the accesskey attribute. Then all you need to do is press ALT(+SHIFT for Firefox)+(A/B/C/D) to select the answer. I'll perform some tests when I get the chance to see how well it works with our current setup.

SethClydesdale commented

I did a quick test and while it does seem to work, it appears to be finnicky. I noted a few problems:

  1. ALT+KEY doesn't always work due to existing browser shortcuts, forcing the user to sometimes alternate to ALT+SHIFT.
  2. An odd anomaly occurs when submitting answers this way; an answer is marked wrong despite inputting the correct accesskey.

We'll probably have to rig up our own way of doing this through JavaScript to avoid the issues above. In the meantime, you can still use TAB or SHIFT+TAB to select answers and ENTER to submit them.

  • 👍1
yangmillstheory commented

Thanks for your time!

Laurens256 commented

I think this anomaly you mentioned could be prevented by letting the browser handle answer selection, i.e. using html radio inputs. This would also prevent the need to manually set user focus and make the whole page more accessible in general.

Might be way too much work for this relatively simple feature though, much respect and thanks for putting this huge website together :)

RGHANILOO commented

Hey Seth, came here to thank you for the amazing work but then got sucked down the rabbit hole.

sorry to just jump in, i think there maybe a work around for this issue as there is already an existing data attribute for both the answer being true or false and data option for the option that is provided with the letter
in the given code snippet from app interface:

<div tabindex="0" class="quiz-multi-answer" data-answer="false" data-option="A" onclick="Genki.progressQuiz(this);" onkeypress="event.key == 'Enter' &amp;&amp; Genki.progressQuiz(this);">
	<div class="quiz-answer-inner-text">to keep; to protect</div>
</div>

I suggest implementing a solution that captures the user's keypress events and updates the data-option attribute accordingly. By modifying the existing code, user's keyboard input can be dynamically tracked

<div tabindex="0" class="quiz-multi-answer selected-answer" data-answer="true" data-option="" onclick="Genki.progressQuiz(this);" onkeypress="handleKeyPress(event, this);">  
	<div class="quiz-answer-inner-text">to keep; to protect</div>  
</div>

similar logic to this maybe:

function handleKeyPress(event, element) {
    // Get the key pressed by the user
    var keyPressed = event.key.toUpperCase();

    // Check if the key pressed is A, B, C, or D
    if (keyPressed === 'A' || keyPressed === 'B' || keyPressed === 'C' || keyPressed === 'D') {
        // Update the data-option attribute with the key pressed
        element.setAttribute('data-option', keyPressed);
    }
}

basically, what I'm suggesting is to listen which key is pressed during the quiz. This could be handy for what the original poster (OP) mentioned about setting up keybindings. Plus the data from these key presses can be stored/used to show users which answers they got right or wrong once they finish the quiz. BTW this is an untested theory as i haven't explored the codebase.

SethClydesdale commented

Hey! That's most likely the implementation I'll be going with since we have a keyhandler for shortcuts already. We'll just need to set a variant of it up exclusively for multiple choice exercises that selects and submits the currently visible set of options. We can probably do this by simply searching for the options within the currently visible question container and clicking them like this:

document.querySelector('#quiz-q' + Genki.stats.solved + ' div[data-option="' + PRESSED_KEY + '"]').click();

The idea of radio elements isn't a bad solution either, but the shortcut implementation via an event listener definitely seems like the best course.

In any case, I'll look into rigging this up sometime this week since I've been feeling somewhat better.

Thanks for all the suggestions!

  • 🚀1
SethClydesdale commented

Hello again! I went ahead and implemented the new shortcuts for multiple choice exercises. Please see the table below for the key combinations.

Shortcut Description
ALT+A Selects option A
ALT+B Selects option B
ALT+C Selects option C
ALT+D Selects option D

If there are any issues, do let me know!

  • 🎉1