JavaScript多项选择题测验
我有以下问题：如果我从一个问题的1至4中选择一个答案，则在其他问题中也会选择我在该问题中选择的相同答案编号。因此，如果我按照示例选择（参见图片）答案A中的一个答案“ 1：Sie haben nicht rechtzeitig geliefert”，那么还会选择一个问题中的另一个答案，依此类推...
Image: Show the correct Selection from the first Multiple Choice Question
一个问题示例：
{
"id": 8,
"type": "multiple",
"situation": "Situation: Als Auszubildende/Auszubildender des Beratungsunternehmens BroCess GmbH sind Sie schon seit einigen Monaten im Bereich der rechnergestützten Prozessoptimierung bei Kunden eingesetzt.",
"description": 'Sie bekommen ein Gespräch eines Außendienstmitarbeiters mit einem Kunden mit. Nach dem Vier-Ohren-Modell, "hört" der Außendienstmitarbeiter die folgenden 1 bis 4 gekennzeichneten Informationen.',
"question": 'Ordnen Sie diese Informationen den daneben stehenden Ebenen ("Ohren") zu.',
"exercise": "Tragen Sie die Ziffer vor der jeweils zutreffenden Information in das Kästchen ein.",
"note": "",
"examples": {
"A": "Selbstoffenbarung",
"B": "Sachverhalt",
"C": "Beziehung",
"D": "Appell"
},
"answers": {
"1": "Sie haben nicht rechtzeitig geliefert.",
"2": "Ich beobachte Ihre Leistung genau.",
"3": "Ich bin von Ihnen enttäuscht.",
"4": "Sie sollen pünktlich liefern!"
},
"rights": {
"A": 2,
"B": 1,
"C": 3,
"D": 4
},
},
// SELECT MULTIPLE ANSWERS
for(var letter = 0; letter < Object.keys(currentQuestion.examples).length;letter++)
{
selectMultipleQuestionAnswer(Object.keys(currentQuestion.examples)[letter]);
}
function selectMultipleQuestionAnswer(letter) {
// If the first answer button is clicked
$("#multiple-answer-" + letter.toLowerCase() + "-1-btn").click(function() {
console.log("Zur Frage " + letter + " wurde eine Anwort angeklickt");
console.log("#multiple-answer-" + letter.toLowerCase() + "-1-btn");
selectAnswer("#multiple-answer-" + letter.toLowerCase() + "-1-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-2-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-3-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-4-btn");
});
// If the second answer button is clicked
$("#multiple-answer-" + letter.toLowerCase() + "-2-btn").click(function() {
console.log("Zur Frage " + letter + " wurde eine Anwort angeklickt");
console.log("#multiple-answer-" + letter.toLowerCase() + "-2-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-1-btn");
selectAnswer("#multiple-answer-" + letter.toLowerCase() + "-2-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-3-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-4-btn");
});
// If the third answer button is clicked
$("#multiple-answer-" + letter.toLowerCase() + "-3-btn").click(function() {
console.log("Zur Frage " + letter + " wurde eine Anwort angeklickt");
console.log("#multiple-answer-" + letter.toLowerCase() + "-3-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-1-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-2-btn");
selectAnswer("#multiple-answer-" + letter.toLowerCase() + "-3-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-4-btn");
});
// If the fourth answer button is clicked
$("#multiple-answer-" + letter.toLowerCase() + "-4-btn").click(function() {
console.log("Zur Frage " + letter + " wurde eine Anwort angeklickt");
console.log("#multiple-answer-" + letter.toLowerCase() + "-4-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-1-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-2-btn");
deselectAnswer("#multiple-answer-" + letter.toLowerCase() + "-3-btn");
selectAnswer("#multiple-answer-" + letter.toLowerCase() + "-4-btn");
});
}<div id="multiple-question" class="question jumbotron" style="display: none;">
<div class="multiple-questions">
<h2>Frage
<span class="multiple-question-number">0</span>
</h2>
<div class="situation p-3 mb-2 bg-info text-white">
<p class="multiple-question-situation">
Situation
</p>
</div>
<p class="multiple-question-description">
Beschreibung
</p>
<p class="multiple-question-text">
Frage
</p>
<p class="multiple-question-exercise">
Aufgabe
</p>
<p class="multiple-question-note">
Hinweis
</p>
<div class="row">
<div class="col-md-12">
<p class="p-3 mb-2 bg-dark text-white">
A:<span id="example-a">Antwort</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<button id="multiple-answer-a-1-btn" class="answer answer-a answer-1-btn btn btn-secondary btn-lg btn-block" >1:
<span class="multiple-answer-1">Antwort</span>
</button>
</p>
</div>
<div class="col-md-6">
<p>
<button id="multiple-answer-a-3-btn" class="answer answer-a answer-3-btn btn btn-secondary btn-lg btn-block" >3:
<span class="multiple-answer-3">Antwort</span>
</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<button id="multiple-answer-a-2-btn" class="answer answer-a answer-2-btn btn btn-secondary btn-lg btn-block" >2:
<span class="multiple-answer-2">Antwort</span>
</button>
</p>
</div>
<div class="col-md-6">
<p>
<button id="multiple-answer-a-4-btn" class="answer answer-a answer-4-btn btn btn-secondary btn-lg btn-block" >4:
<span class="multiple-answer-4">Antwort</span>
</button>
</p>
</div>
</div>
...
<div class="row">
<div class="col-md-12">
<p class="p-3 mb-2 bg-dark text-white">
D:<span id="example-d">Antwort</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<button id="multiple-answer-d-1-btn" class="answer answer-d answer-1-btn btn btn-secondary btn-lg btn-block" >1:
<span class="multiple-answer-1">Antwort</span>
</button>
</p>
</div>
<div class="col-md-6">
<p>
<button id="multiple-answer-d-3-btn" class="answer answer-c answer-3-btn btn btn-secondary btn-lg btn-block" >3:
<span class="multiple-answer-3">Antwort</span>
</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<button id="multiple-answer-d-2-btn" class="answer answer-d answer-2-btn btn btn-secondary btn-lg btn-block" >2:
<span class="multiple-answer-2">Antwort</span>
</button>
</p>
</div>
<div class="col-md-6">
<p>
<button id="multiple-answer-d-4-btn" class="answer answer-d answer-4-btn btn btn-secondary btn-lg btn-block" >4:
<span class="multiple-answer-4">Antwort</span>
</button>
</p>
</div>
</div>
<div id="multiple-question-e" style="display: none;">
<div class="row">
<div class="col-md-12">
<p class="p-3 mb-2 bg-dark text-white">
E:<span id="example-e" >Antwort</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<button id="multiple-answer-e-1-btn" class="answer answer-e answer-1-btn btn btn-secondary btn-lg btn-block" >1:
<span class="multiple-answer-1">Antwort</span>
</button>
</p>
</div>
<div class="col-md-6">
<p>
<button id="multiple-answer-e-3-btn" class="answer answer-e answer-3-btn btn btn-secondary btn-lg btn-block" >3:
<span class="multiple-answer-3">Antwort</span>
</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<button id="multiple-answer-e-2-btn" class="answer answer-e answer-2-btn btn btn-secondary btn-lg btn-block" >2:
<span class="multiple-answer-2">Antwort</span>
</button>
</p>
</div>
<div class="col-md-6">
<p>
<button id="multiple-answer-e-4-btn" class="answer answer-e answer-4-btn btn btn-secondary btn-lg btn-block" >4:
<span class="multiple-answer-4">Antwort</span>
</button>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
</div>
<div class="col-md-2">
<p>
<button id="multiple-answer-commit-btn" class="answer-commit-btn btn btn-primary btn-lg btn-block" >
<span id="commit-text">Antworten</span>
</button>
</p>
<p>
<button id="multiple-continue-btn" class="continue-btn btn btn-primary btn-lg btn-block" style="display: none;">
<span>Weiter</span>
</button>
</p>
</div>
</div>
</div>
</div>
注意：但是一个神秘的事情是，它在第一个多项选择题下工作正常，而在第二个多项选择题下却没问题。
重要提示：我一直在寻找bug几个小时。当我回答第二个多项选择题时，有一件事打动了我。控制台为我提供两次按钮名称，而不是单击一次。
有人可以帮助我发现错误吗？也许只是我的思维错误？