键盘答题

src/features/OnlineExam/Examing/ArrowNavView.vue

@@ -44,11 +44,20 @@ export default {
   methods: {
     keyup(e) {
       // console.log(e);
-      if (e.code === "ArrowRight" && this.nextExamQuestion) {
-        this.goToNextQuestion();
-      }
-      if (e.code === "ArrowLeft" && this.previousExamQuestion) {
-        this.goToPreviousQuestion();
+      // console.log(document.activeElement.type);
+      if (
+        ["BODY", "A", "BUTTON", "DIV"].includes(
+          document.activeElement.tagName
+        ) ||
+        (["INPUT"].includes(document.activeElement.tagName) &&
+          ["checkbox", "radio"].includes(document.activeElement.type))
+      ) {
+        if (e.code === "ArrowRight" && this.nextExamQuestion) {
+          this.goToNextQuestion();
+        }
+        if (e.code === "ArrowLeft" && this.previousExamQuestion) {
+          this.goToPreviousQuestion();
+        }
       }
     },
     goToNextQuestion() {

src/features/OnlineExam/Examing/BooleanQuestionView.vue

@@ -31,7 +31,32 @@ export default {
     question: Object,
     examQuestion: Object
   },
+  created: function() {
+    window.addEventListener("keyup", this.keyup);
+  },
+  destroyed() {
+    window.removeEventListener("keyup", this.keyup);
+  },
   methods: {
+    keyup(e) {
+      // console.log(e);
+      // console.log(document.activeElement.type);
+      if (
+        ["BODY", "A", "BUTTON", "DIV"].includes(
+          document.activeElement.tagName
+        ) ||
+        (["INPUT"].includes(document.activeElement.tagName) &&
+          ["checkbox", "radio"].includes(document.activeElement.type))
+      ) {
+        if ("KeyY" === e.code) {
+          this.stuAnswer = "正确";
+        }
+        if ("KeyN" === e.code) {
+          this.stuAnswer = "错误";
+        }
+        this.answerQuestion(this.examQuestion.id, this.stuAnswer);
+      }
+    },
     answerQuestion: function(examQuestionId, stuAnswer) {
       this.stuAnswer = stuAnswer;
       this.$http.put("/api/exam_question/" + examQuestionId, { stuAnswer });
@@ -67,6 +92,7 @@ export default {
   width: 100px;
   border-bottom: 1px solid black;
   text-align: center;
+  height: 20px;
 }
 
 .option {

src/features/OnlineExam/Examing/MultipleQuestionView.vue

@@ -30,7 +30,40 @@ export default {
     question: Object,
     examQuestion: Object
   },
+  created: function() {
+    window.addEventListener("keyup", this.keyup);
+  },
+  destroyed() {
+    window.removeEventListener("keyup", this.keyup);
+  },
   methods: {
+    keyup(e) {
+      // console.log(e);
+      // console.log(document.activeElement.type);
+      if (
+        ["BODY", "A", "BUTTON", "DIV"].includes(
+          document.activeElement.tagName
+        ) ||
+        (["INPUT"].includes(document.activeElement.tagName) &&
+          ["checkbox", "radio"].includes(document.activeElement.type))
+      ) {
+        if (
+          ["KeyA", "KeyB", "KeyC", "KeyD", "KeyE", "KeyF", "KeyG"]
+            .slice(0, this.question.options.length)
+            .includes(e.code)
+        ) {
+          if (this.stuAnswer.includes(e.code[3])) {
+            this.stuAnswer = this.stuAnswer.replace(e.code[3], "");
+          } else {
+            this.stuAnswer = this.stuAnswer
+              .concat(e.code[3])
+              .split("")
+              .sort()
+              .join("");
+          }
+        }
+      }
+    },
     toggleAnswer: function(index) {
       if (this.stuAnswer.includes(optionName[index])) {
         this.stuAnswer = this.stuAnswer.replace(optionName[index], "");
@@ -83,6 +116,7 @@ export default {
   width: 100px;
   border-bottom: 1px solid black;
   text-align: center;
+  height: 20px;
 }
 
 .option {

src/features/OnlineExam/Examing/SingleQuestionView.vue

@@ -2,7 +2,7 @@
   <div class="question-view">
     <div class="question-body" v-html="question.body"></div>
     <div class="ops">
-      <div class="stu-answer"> {{stuAnswer}}</div>
+      <div class="stu-answer">{{stuAnswer}}</div>
       <div class="score">({{question.questionScore}}分)</div>
     </div>
     <div v-for="(option, index) in question.options" :key="option.id" class="option" @click="answerQuestion(examQuestion.id, optionName[index])">
@@ -30,7 +30,33 @@ export default {
     question: Object,
     examQuestion: Object
   },
+  created: function() {
+    window.addEventListener("keyup", this.keyup);
+  },
+  destroyed() {
+    window.removeEventListener("keyup", this.keyup);
+  },
   methods: {
+    keyup(e) {
+      // console.log(e);
+      // console.log(document.activeElement.type);
+      if (
+        ["BODY", "A", "BUTTON", "DIV"].includes(
+          document.activeElement.tagName
+        ) ||
+        (["INPUT"].includes(document.activeElement.tagName) &&
+          ["checkbox", "radio"].includes(document.activeElement.type))
+      ) {
+        if (
+          ["KeyA", "KeyB", "KeyC", "KeyD", "KeyE", "KeyF", "KeyG"]
+            .slice(0, this.question.options.length)
+            .includes(e.code)
+        ) {
+          this.stuAnswer = e.code[3];
+          this.answerQuestion(this.examQuestion.id, this.stuAnswer);
+        }
+      }
+    },
     answerQuestion: function(examQuestionId, stuAnswer) {
       this.stuAnswer = stuAnswer;
       this.$http.put("/api/exam_question/" + examQuestionId, { stuAnswer });
@@ -70,6 +96,7 @@ export default {
   width: 100px;
   border-bottom: 1px solid black;
   text-align: center;
+  height: 20px;
 }
 
 .option {