CODEWITHSUNDEEP
javascriptjquerykeyboardkeyboard-shortcuts
Ryan
Ryan

Reputation: 15270

How can I trigger different button events with keyboard shortcuts in JavaScript or jQuery?

I have a list of multiple choice questions:

<div class="question active">
    <p>The first counting tool was the _____.</p>
    <button class="btn-a">A) Stepped Reckoned</button>
    <button class="btn-b">B) Abacus</button>
    <button class="btn-c">C) Aba Zaba</button>
    <button class="btn-d">D) Punch Card</button>
</div>
<div class="question">
    <p>Who founded IBM and was responsible for tabulating the US Census with a punch card tabulator in only six weeks?</p>
    <button class="btn-a">A) Jacquard</button>
    <button class="btn-b">B) Hollerith</button>
    <button class="btn-c">C) Mark I</button>
    <button class="btn-d">D) Babbage</button>
</div>

How can I trigger each of these buttons to submit with the corresponding letter on the keyboard?

The keyboard should only work with the .active question.

Bonus:

Is it possible to allow two keys to trigger the question? For example, since ABCD are spaced around the keyboard it may also be helpful to allow QWER or JKL; to correspond to ABCD to make it easy for one hand keyboard entry.

Upvotes: 2

Views: 968

Answers (1)

Ian
Ian

Reputation: 50933

Using the keyup event, you can listen for the user releasing a key. You can then translate it to a letter (or an arrow key, in my example), and access the appropriate question/button. You can try something like this:

$(document).ready(function () {
    var $questions = $("div.question"),
        $activeQuestion = function () {
            return $questions.filter(".active");
        },
        $prevQuestion = function (setActive) {
            var $prev;
            $prev = $activeQuestion().prevAll(".question").first();
            if ($prev.length === 0) {
                $prev = $questions.last();
            }
            return $prev;
        },
        $nextQuestion = function () {
            var $next;
            $next = $activeQuestion().nextAll(".question").first();
            if ($next.length === 0) {
                $next = $questions.first();
            }
            return $next;
        };

    $(document).on("keyup", function (e) {
        var key, character, $active, $next, $prev;
        key = e.which;
        switch (key) {
            case 37:
            case 38:
                $prev = $prevQuestion();
                $questions.removeClass("active");
                $prev.addClass("active");
                break;
            case 39:
            case 40:
                $next = $nextQuestion();
                $questions.removeClass("active");
                $next.addClass("active");
                break;
            default:
                character = String.fromCharCode(key).toLowerCase();
                $active = $activeQuestion();
                $active.find("button").removeClass("selected").filter(".btn-" + character).addClass("selected");
                break;
        }
    });
});

DEMO: http://jsfiddle.net/wdXkB/1/

I took it a little far, but I added the ability to use arrow keys to move to the next question (down and right arrows) or previous question (up and left arrows).

Upvotes: 1

Related Questions