javascript - 我怎样才能让我的测验只能通过键盘使用？

问题描述

我正在做一个测验，需要做一个测验，这样如果有人试图在只使用键盘的情况下进行测验，他们将能够做到。我的测验基本上完成了，我知道为了让它工作，我需要使用 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>

标签： javascriptjqueryhtmlcss

javascript - 我怎样才能让我的测验只能通过键盘使用？

问题描述

解决方案

推荐阅读