[英]Javascript quiz answers with key input not mouse click
对于一个项目,我用HTML和Javascript进行测验。 问题是我必须用鼠标选择答案ABC。 我想通过将其链接到按键来选择这些辅助工具。 我使用的是makey makey,因为它需要是交互式的。 一个有钱的人有一些关键输入,例如WASDFG
简短摘要:链接到WA或S(或其他键输入)的答案AB或C。
这样,我不必使用鼠标,而只需一个简单的按键。
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
编辑:问题二。
您可以按获取按键的相同方法进行操作。
// 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;
}
}
如果要以灵活的计数(低于或高于的点)显示消息,则可以采用另一种解决方案
// 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.
}
}
我现在唯一要添加的是(我猜)if / else语句。 这就是测验中的得分。 以80分为例:恭喜! U得分最高 20分:嘘! 你不好 这是我现在拥有的代码:
// 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>
我是一名使用JavaScript的业余爱好者。 但是,如果我能完成这项工作,我将非常满意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.