使用键盘输入而非鼠标单击进行Java知识问答

Question

For a project Im making a quiz with HTML and Javascript. Problem is that I have to choose the answers ABC with my mouse. I want to choose these anwsers by linking it to a key press. I am using a makey makey, because it needs to be interactive. A makey makey has key inputs like WASDFG

So Short summary: anwser AB or C linked to WA or S (or a other key input).

This way I dont have to use my mouse, but only a simple key button.

Answer 1

document.body.onkeyup = function(event){
    var tKey = (event.which) ? event.which : event.keyCode;
    if (tKey === 87) console.log('w')
    if (tKey === 65) console.log('a')
    if (tKey === 83) console.log('s')
}

https://jsfiddle.net/2379ju80/

http://www.mediaevent.de/javascript/Extras-Javascript-Keycodes.html

Edit: Question two.

You can do it the same way in which you are getting the pressed key.

// Wat een click / button-press doet
function answer(classe){
    //..
    //..
    //At the end of the function..
    if(currentQuestion === 10) //10 = max amount of questions = end of quiz (fill in your number instead)
        switch(points){
            case 0: //We reached 0 points
                alert('Do U even quiz bro???') //Display the message in the way you want. alert() is a quick try for that.
                break;
            case 20: //We reached 20 points in the quiz
                alert('Boo! U are bad') //Display the message in the way you want. alert() is a quick try for that.
                break;
            case 80: //We reached 80 points in the quiz
                alert('Congrats! U scored max.') //Display the message in the way you want. alert() is a quick try for that.
                break;
        }
}

Another solution if you want to display messages on flexible counts (points lower or bigger than)

// Wat een click / button-press doet
function answer(classe){
    //..
    //..
    //At the end of the function..
    if(currentQuestion === 10) //10 = max amount of questions = end of quiz (fill in your number instead){
        if (points >= 80) //We reached more than 79 points
            alert('Congrats! U scored max.') //Display the message in the way you want. alert() is a quick try for that.
        else if (points >= 20) //We reached more than 19 points
            alert('Boo! U are bad') //Display the message in the way you want. alert() is a quick try for that.
        else if (points < 20) //We reached less than 20 points
            alert('Do U even quiz bro???') //Display the message in the way you want. alert() is a quick try for that.
    }
}

Answer 2

The only thing I want to add now is an (I guess) if/else statement. That looks at the scored points from the quiz. At 80 points (for example): Congrats! U scored max. At 20 points: Boo! U are bad. This is the code I have now:

 // Hou de punten bij var points = 0; // Huidige vraag var currentQuestion = 0; // Bij klik ------------------------------------------------------------------- var answers = document.getElementsByTagName('input'); // Voeg een event handler click toe aan elke input (= knop) for(i=0; i< answers.length; i++){ answers[i].addEventListener('click', function() { // Roep de answer-functie aan met de class van de knop als parameter var classe = this.className; answer(classe); }); } // Bij toetsenbord ------------------------------------------------------------ // Luister naar toetsenbord-invoer document.addEventListener('keydown', keyDown); function keyDown(key) { var keyCode = key.keyCode; switch(keyCode){ case 65: // 65 = A // Roep de answer functie aan met de class van de knop die ook class first heeft (of second/third bij de volgende twee) answer(document.getElementsByClassName('show')[0].getElementsByClassName('first')[0].className); break; case 83: // 83 = S answer(document.getElementsByClassName('show')[0].getElementsByClassName('second')[0].className); break; case 68: // 68 = D answer(document.getElementsByClassName('show')[0].getElementsByClassName('third')[0].className); break; default: // voor als je per ongeluk de verkeerde knop indrukt console.log('je verklooit het hard'); } } // Wat een click / button-press doet function answer(classe){ // Haal het stukje first/second/third uit de className (die worden gebruikt om onderscheid te maken tussen de knoppen bij toetsenbord invoer) var className = classe.substr(classe.indexOf(' ')+1); // Geef aantal punten als de class van de input one, two of threePoints is switch(className){ case 'onePoint': points += 5; break; case 'twoPoints': points += 10; break; case 'threePoints': points += 20; break; } // Verberg de huidige vraag + toon de volgende document.getElementsByTagName('section')[currentQuestion].className = 'hide'; document.getElementsByTagName('section')[currentQuestion + 1].className = 'show'; currentQuestion++; // Als de laatste vraag is geweest, toon het eind scherm if(currentQuestion == document.getElementsByTagName('section').length - 1){ document.getElementById('points').innerHTML += points; document.getElementById('end').className = 'show'; } } 

 <section id="end" class="hide"> <h1>Your choices are good for</h1> <p id="points">Punten: <p> </section> 

I am an amateur with javascript. But If I could get this working I would be really greatfull.