我如何才能仅通过键盘使用测验？

Question

I am working on a quiz and need to make it so that if somebody tries to take it while only using a keyboard, they will be able to. My quiz is essentially finished and I know that in order to make it work I will need to use HTML, but how can I do this without having to rewrite everything that I already have? Is that even a possibility? I would appreciate any help, thanks!

 let score = 0; let currentQuestion = 0; let questions = [{ title: "At what age was Harry Potter when he received his Hogwarts letter?", answers: ['7', '10', '11', '13'], correct: 1 }, { title: "Which is not a Hogwarts house?", answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'], correct: 0 }, { title: "Who teaches Transfiguration at Hogwarts?", answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'], correct: 3 }, { title: "Where is Hogwarts School for Witchcraft and Wizardry located?", answers: ['France', 'USA', 'UK', 'New Zealand'], correct: 2 }, { title: "What form does Harry Potter's patronus charm take?", answers: ['Stag', 'Eagle', 'Bear', 'Dragon'], correct: 0 }, { title: "What type of animal is Harry's pet?", answers: ['Dog', 'Owl', 'Cat', 'Snake'], correct: 1 }, { title: "Who is not a member of the Order of the Phoenix?", answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'], correct: 2 }, { title: "What is not a piece of the Deathly Hallows?", answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'], correct: 3 }, { title: "In which house is Harry sorted into after arriving at Hogwarts?", answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'], correct: 2 }, { title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?", answers: ['Love', 'Anger', 'Friendship', 'Joy'], correct: 0 }, ]; $(document).ready(function() { $('.start a').click(function(e) { e.preventDefault(); $('.start').hide(); $('.quiz').show(); showQuestion(); }); $('.quiz ul').on('click', 'li', function() { $('.selected').removeClass('selected'); $(this).addClass('selected'); }); $('.quiz a.submit').click(function(e) { e.preventDefault(); if ($('li.selected').length) { let guess = parseInt($('li.selected').attr('id')); checkAnswer(guess); } else { alert('Please select an answer'); } }); $('.summary a').click(function(e) { e.preventDefault(); restartQuiz(); }); }); function showQuestion() { let question = questions[currentQuestion]; $('.quiz h2').text(question.title); $('.quiz ul').html(''); for (var i = 0; i < question.answers.length; i++) { $('.quiz ul').append(`<li id="${i}">${question.answers[i]}</li>`); } showProgress(); } function showIncorrectQuestion(guess) { let question = questions[currentQuestion]; $('.quiz h2').text(question.title); $('.quiz ul').html(''); for (var i = 0; i < question.answers.length; i++) { let cls = i === question.correct ? "selected" : guess === i ? "wrong" : "" $('.quiz ul').append(`<li id="${i}" class="${cls}">${question.answers[i]}</li>`); } showProgress(); } function checkAnswer(guess) { let question = questions[currentQuestion]; if (question.correct === guess) { if (!question.alreadyAnswered) { score++; } showIsCorrect(true); } else { showIsCorrect(false); showIncorrectQuestion(guess); } question.alreadyAnswered = true; } function showSummary() { $('.quiz').hide(); $('.summary').show(); $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?") } function restartQuiz() { questions.forEach(q => q.alreadyAnswered = false); $('.summary').hide(); $('.quiz').show(); score = 0; currentQuestion = 0; showQuestion(); } function showProgress() { $('#currentQuestion').html(currentQuestion + " out of " + questions.length); } function showIsCorrect(isCorrect) { var result = "Wrong"; if (isCorrect) { result = "Correct"; } $('#isCorrect').html(result); $('.navigate').show(); $('.submit').hide(); } $('.navigate').click(function() { currentQuestion++; if (currentQuestion >= questions.length) { showSummary(); } else { showQuestion(); } $('.navigate').hide(); $('.submit').show(); $('#isCorrect').html(''); }) 

 * { padding: 0; margin: 0; box-sizing: border-box; text-decoration: none; text-align: center; background-color: #837F73; } h1 { font-family: 'Poor Story', cursive; background-color: #950002; padding: 60px; color: #FFAB0D; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } h2 { font-family: 'Poor Story', cursive; font-size: 30px; padding: 60px; background-color: #950002; color: #FFAB0D; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } p { font-family: 'Poor Story', cursive; background-color: #FFAB0D; font-size: 20px; font-weight: bold; } a { border: 1px solid #222F5B; padding: 10px; background-color: #222F5B; color: silver; border-radius: 5px; margin-top: 50px; display: inline-block; } a:hover { border: 1px solid #000000; background-color: #000000; color: #FCBF2B; } .quiz li { cursor: pointer; border: 1px solid; display: inline-block; width: 200px; margin: 10px; font-family: 'Poor Story', cursive; font-size: 26px; } #currentQuestion { color: #000000; font-size: 18px; font-family: 'Poor Story', cursive; margin-top: 10px; } #isCorrect { color: white; font-family: 'Poor Story', cursive; font-weight: bold; font-size: 18px; } .quiz, .summary { display: none; } .quiz ul { margin-top: 20px; list-style: none; padding: 0; } .selected { background-color: #398C3F; } .wrong { background-color: red; } 

 <html> <head> <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="start"> <h1>How Well Do You Know Harry Potter?</h1> <a href="#">Start Quiz</a> </div> <div class="quiz"> <h2>Question Title</h2> <ul> <li>Choice</li> <li>Choice</li> <li>Choice</li> <li>Choice</li> </ul> <a class="submit" href="#">Submit Answer</a> <a class="navigate" style="display:none;" href="#">Next Question</a> <div id="currentQuestion"></div> <div id="isCorrect"></div> </div> <div class="summary"> <h2>Results</h2> <p>Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?</p> <a href="#">Retake Quiz</a> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </body> </html> 

Answer 1

The tweaks are pretty simple - all you need to do is to change all the <li> s to <button> s, and then the buttons can be selected by tabbing through the page, and "clicked" by pressing space when selected. Of course, <button> s shouldn't be children of a <ul> , so change the <ul> to a <div> too:

 let score = 0; let currentQuestion = 0; let questions = [{ title: "At what age was Harry Potter when he received his Hogwarts letter?", answers: ['7', '10', '11', '13'], correct: 1 }, { title: "Which is not a Hogwarts house?", answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'], correct: 0 }, { title: "Who teaches Transfiguration at Hogwarts?", answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'], correct: 3 }, { title: "Where is Hogwarts School for Witchcraft and Wizardry located?", answers: ['France', 'USA', 'UK', 'New Zealand'], correct: 2 }, { title: "What form does Harry Potter's patronus charm take?", answers: ['Stag', 'Eagle', 'Bear', 'Dragon'], correct: 0 }, { title: "What type of animal is Harry's pet?", answers: ['Dog', 'Owl', 'Cat', 'Snake'], correct: 1 }, { title: "Who is not a member of the Order of the Phoenix?", answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'], correct: 2 }, { title: "What is not a piece of the Deathly Hallows?", answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'], correct: 3 }, { title: "In which house is Harry sorted into after arriving at Hogwarts?", answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'], correct: 2 }, { title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?", answers: ['Love', 'Anger', 'Friendship', 'Joy'], correct: 0 }, ]; $(document).ready(function() { $('.start a').click(function(e) { e.preventDefault(); $('.start').hide(); $('.quiz').show(); showQuestion(); }); $('.quiz').on('click', 'button', function() { $('.selected').removeClass('selected'); $(this).addClass('selected'); }); $('.quiz a.submit').click(function(e) { e.preventDefault(); if ($('button.selected').length) { let guess = parseInt($('button.selected').attr('id')); checkAnswer(guess); } else { alert('Please select an answer'); } }); $('.summary a').click(function(e) { e.preventDefault(); restartQuiz(); }); }); function showQuestion() { let question = questions[currentQuestion]; $('.quiz h2').text(question.title); $('.quiz div:nth-child(2)').html(''); for (var i = 0; i < question.answers.length; i++) { $('.quiz div:nth-child(2)').append(`<button id="${i}">${question.answers[i]}</button>`); } showProgress(); } function showIncorrectQuestion(guess) { let question = questions[currentQuestion]; $('.quiz h2').text(question.title); $('.quiz div:nth-child(2)').html(''); for (var i = 0; i < question.answers.length; i++) { let cls = i === question.correct ? "selected" : guess === i ? "wrong" : "" $('.quiz div:nth-child(2)').append(`<button id="${i}" class="${cls}">${question.answers[i]}</button>`); } showProgress(); } function checkAnswer(guess) { let question = questions[currentQuestion]; if (question.correct === guess) { if (!question.alreadyAnswered) { score++; } showIsCorrect(true); } else { showIsCorrect(false); showIncorrectQuestion(guess); } question.alreadyAnswered = true; } function showSummary() { $('.quiz').hide(); $('.summary').show(); $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?") } function restartQuiz() { questions.forEach(q => q.alreadyAnswered = false); $('.summary').hide(); $('.quiz').show(); score = 0; currentQuestion = 0; showQuestion(); } function showProgress() { $('#currentQuestion').html(currentQuestion + " out of " + questions.length); } function showIsCorrect(isCorrect) { var result = "Wrong"; if (isCorrect) { result = "Correct"; } $('#isCorrect').html(result); $('.navigate').show(); $('.submit').hide(); } $('.navigate').click(function() { currentQuestion++; if (currentQuestion >= questions.length) { showSummary(); } else { showQuestion(); } $('.navigate').hide(); $('.submit').show(); $('#isCorrect').html(''); }) 

 * { padding: 0; margin: 0; box-sizing: border-box; text-decoration: none; text-align: center; background-color: #837F73; } h1 { font-family: 'Poor Story', cursive; background-color: #950002; padding: 60px; color: #FFAB0D; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } h2 { font-family: 'Poor Story', cursive; font-size: 30px; padding: 60px; background-color: #950002; color: #FFAB0D; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } p { font-family: 'Poor Story', cursive; background-color: #FFAB0D; font-size: 20px; font-weight: bold; } a { border: 1px solid #222F5B; padding: 10px; background-color: #222F5B; color: silver; border-radius: 5px; margin-top: 50px; display: inline-block; } a:hover { border: 1px solid #000000; background-color: #000000; color: #FCBF2B; } .quiz button { cursor: pointer; border: 1px solid; display: inline-block; width: 200px; margin: 10px; font-family: 'Poor Story', cursive; font-size: 26px; } #currentQuestion { color: #000000; font-size: 18px; font-family: 'Poor Story', cursive; margin-top: 10px; } #isCorrect { color: white; font-family: 'Poor Story', cursive; font-weight: bold; font-size: 18px; } .quiz, .summary { display: none; } .quiz ul { margin-top: 20px; list-style: none; padding: 0; } .selected { background-color: #398C3F; } .wrong { background-color: red; } 

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="start"> <h1>How Well Do You Know Harry Potter?</h1> <a href="#">Start Quiz</a> </div> <div class="quiz"> <h2>Question Title</h2> <div> <button>Choice</button> <button>Choice</button> <button>Choice</button> <button>Choice</button> </div> <a class="submit" href="#">Submit Answer</a> <a class="navigate" style="display:none;" href="#">Next Question</a> <div id="currentQuestion"></div> <div id="isCorrect"></div> </div> <div class="summary"> <h2>Results</h2> <p>Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?</p> <a href="#">Retake Quiz</a> </div> 

Answer 2

Would it be an option to use an input type radio instead? It's basically what you're are trying to mimic using the LI's.

It's saves you on some .js checks and you can style them the same way.

I'm not sure if you're also targeting blind visitors (hence the no mouse question) but they will love you for using basic stuff, less confusing to screenreader software.