javascript - 如何让我的测验只能通过键盘使用？

Question

我正在做一个测验，我需要做一个，如果有人试图只用键盘来做，他们就能够做到。我的测验基本上已经完成，我知道为了让它工作我需要使用 HTML，但是我怎样才能做到这一点而不必重写我已经拥有的所有内容？那有可能吗？我将不胜感激任何帮助，谢谢!

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

调整非常简单 - 您需要做的就是更改所有 <li> s 至 <button> s，然后可以通过在页面中按 Tab 键选择按钮，并在选择时按空格键“单击”。当然，<button> s 不应该是 <ul> 的 child , 所以改变 <ul>到 <div>也是:

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>