à thằng nào rành giúp tao xem thêm code kiểu gì để mình gắn cho 4 đáp án dưới đây là 4 nút trên bàn phím để bấm cho tiện chứ di chuột hơi bất tiện

Code mặt trước:
<div class="box">
<div class="question">{{Question}}</div>
<div class="question">{{Pinyin Từ}}</div>
<div class="optionList">
<div class="option" onclick="optionSelected(this)">{{Option1}}</div>
<div class="option" onclick="optionSelected(this)">{{Option2}}</div>
{{#Option3}} <div class="option" onclick="optionSelected(this)">{{Option3}}</div> {{/Option3}}
{{#Option4}} <div class="option" onclick="optionSelected(this)">{{Option4}}</div> {{/Option4}}
</div>
</div>
<script>
// Persistence by Simon Lammer
// This allows us to remember the card order and the selected answers after flipping the card
// Don't modify this
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){void 0==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return void 0==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){void 0==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],i=!1;"object"==typeof t&&(i=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,i){void 0==i&&(i=e,e=_defaultKey),t[_persistenceKey][e]=i},this.getItem=function(e){return void 0==e&&(e=_defaultKey),void 0==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){void 0==e&&(e=_defaultKey),delete t[_persistenceKey][e]},void 0==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return i}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>
<script>
// This is the code to make MCQs
// Store the default user answer as "000000000" so that results are shown even if the user didn't select anything
Persistence.setItem('userAnswer', "000000000");
// Put all the options into the options array
var optionsArray = []; // This array contains all of the options
optionsArray[0] = ""; // Leave the first blank
optionsArray[1] = "{{Option1}}";
optionsArray[2] = "{{Option2}}";
{{#Option3}} optionsArray[3] = "{{Option3}}"; {{/Option3}}
{{#Option4}} optionsArray[4] = "{{Option4}}"; {{/Option4}}
// Transform the answer into an array with an unused 0 at the beginning (like [ 0, 1, 0, 0, 1 ] instead of "1001")
var origAnswer = "{{Answer}}";
var answerString = "";
if (origAnswer.length == 1) { for (i=0; i < optionsArray.length; i++) { if (i.toString() == origAnswer) { answerString += "1"; } else { answerString += "0"; } }
} else { answerString = "0" + origAnswer; }
var answer = answerString.split('');
// Now create the order array, which will first look like this: [ 0, 1, 2, 3, 4 ] depending on the numbers of options (the 0 won't be used)
var order = [];
for(i=0; i < optionsArray.length; i++) { order
= i.toString(); }
// Shuffle around the order (and the answer too so that it fits the new order)
// You could just remove this for loop to make the options appear in order, but the solution that I made in the other note type is easier
for(i=1; i < optionsArray.length; i++) {
var j = Math.floor(Math.random()*(optionsArray.length-1)) + 1;
var temp = order;
order = order[j];
order[j] = temp;
temp = answer;
answer = answer[j];
answer[j] = temp;
}
// Save the correct answer and the order of the questions
// Join transforms the arrays into strings and substring(1) removes the 0 that we had added previously to the beginning of the answer
Persistence.setItem('answer', answer.join('').substring(1));
Persistence.setItem('order', order.join(''));
// Insert the options as buttons into the optionList div and then put them in an array called options, according to the order in the order array
var optionsText = "";
for(i=1; i < order.length; i++) { optionsText += '<div class="option" onclick="optionSelected(this)"><span>'+ optionsArray[parseInt(order)] +'</span></div>'; }
var optionList = document.querySelector(".optionList");
optionList.innerHTML = optionsText;
var options = optionList.querySelectorAll(".option");
// If the user clicks on an option
function optionSelected(choice) {
// Select or unselect the option
if (choice.classList.contains("selected")) { choice.classList.remove("selected"); } else { choice.classList.add("selected"); }
// Find out all the answers of the user
var userAnswer = "";
for(i=0; i < options.length; i++) { if (options.classList.contains("selected") ) { userAnswer += "1"; } else { userAnswer += "0"; } }
// Store the user answer
Persistence.setItem('userAnswer', userAnswer);
// Flip the card if there's only one correct answer
if (origAnswer.length == 1) {
pycmd("ans");
showAnswer();
}
}
document.addEventListener("keydown", function(e) {
let options = document.querySelectorAll(".option");
if (e.key >= "1" && e.key <= "4") {
let index = parseInt(e.key) - 1;
if (options[index]) {
options[index].click();
}
}
});
</script>
Code định kiểu:
.card {
font-family: arial;
font-size: 18px;
text-align: center;
color: black;
background:#FCFAF2 ;
}
.box {
position: relative;
padding: 10px 20px 5px 20px;
background: ;
border-radius: 10px;
color: black;
opacity: 1;
pointer-events: auto;
}
.question{
font-size: 23px;
font-weight: 550;
}
.mobile .question{
font-size: 25px;
}
.optionList{
padding: 20px 0px;
display: block;
}
.optionList .option{
background:#CCFFFF;
border: 1px solid #84c5fe;
border-radius: 5px;
padding: 8px 15px;
font-size: 17px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.1s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.optionList .option:last-child{
margin-bottom: 0px;
}
.optionList .option:hover{
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
}
.optionList .option.selected{
color: #004085;
background: #cce5ff;
border: 1px solid #b8daff;
}
.optionList .option.correct{
color: #155724;
background: #d4edda;
border: 1px solid #155724;
}
.optionList .option.incorrect{
color: #721c24;
background: #f8d7da;
border: 1px solid #721c24;
}
.optionList .option.missed{
color: #997f00;
background: #f9ffc3;
border: 1px solid #997f00;
}