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.
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.