Html 单选题问答题

我正在制作一个网站，在那里你可以做测验并回答他们。我的问题是，当我试图回答我的测验，看看答案是正确的还是错误的，我得到的结果并不完全是我想要的

我通过加载一个json并为每个答案分配一个单选按钮来创建我的html页面。其结构是一个测验可以有很多问题，而问题可以有很多答案

HTML:

---

解决方案：

我认为这总是返回

true

/

'Correct'

的原因是

if

语句对其进行了评估：

if(this.answersArray[k].correctAnswer == rawr[k].value && rawr[k].value == "Correct" && rawr[k].checked == true){...}

如果我们把它拆开

this.answersArray[k]。correctAnswer==rawr[k]。value

rawr[k]。值==“正确”

rawr[k]。选中==true

您可以立即看到您希望

rawr[k].value

同时等于

correctAnswer

和

。因为结果总是返回true，这意味着

this.answersArray[k].correctAnswer==“Correct”

这基本上否定了if语句中的前两个条件-因此基本上if语句变成<代码>如果（rawr[k]。选中==true）

仅供参考，完全不需要检查

rawr[k]。如果您交换
querySelectorAll（'#rawr'），则检查==true

to

querySelectorAll（'rawr:checked'）






以下只是一般性反馈：

我认为你真的需要重新考虑整个剧本。它很难阅读，高度非视觉化，需要重构成一种更健壮的方法

首先，我建议创建一个变量来存储
currentQuestion
，这样您就不必每次都执行
quizToDisplay[0]

var currentQuestion: any;
ngOnInit(){
  ....
  this.quizToDisplay = data;
  this.currentQuestion = this.quizToDisplay[0];
}

或者至少
this.quizToDisplay=data[0]


去看看数组方法

for(let i = 0; i < this.quizToDisplay[0].questions.length; i++){
        if(this.quizToDisplay[0].questions[i].types == "Multiple-choice"){
            for(let j = 0; j < this.quizToDisplay[0].questions[i].answers.length; j++){
                this.answersArray.push(this.quizToDisplay[0].questions[i].answers[j]);
            }
        }
    }


为什么不在每个问题的json中包含反馈字符串呢？通过这种方式，您可以执行以下操作，并缓解反馈字符串对于特定问题是唯一的任何未来需求：

<div *ngIf="submitted == true">
    <p *ngIf="correct" class="correct-colour">{{quizAnswers.correctFeedback}}</p>
    <p *ngIf="!correct" class="incorrect-colour">{{quizAnswers.incorrectFeedback}}</p>
 </div>


我强烈建议您在
上创建一个单击事件，以便您可以更有效地捕获所选选项。使用上述方法，您可以

// .html
<input ... (click)="optionClicked(option)">

// .ts
optionClicked(_option: Object){
    quizQuestions['clicked'] = !quizQuestions['clicked'] || true;
}

/.html
//.ts
optionClicked（_option:Object）{
quizQuestions['clicked']=！quizQuestions['clicked']| | true；
}


如果您想在将来查看代码，请尝试解决方法：

我认为这总是返回
true
/
'Correct'
的原因是
if
语句对其进行了评估：

if(this.answersArray[k].correctAnswer == rawr[k].value && rawr[k].value == "Correct" && rawr[k].checked == true){...}

如果我们把它拆开

this.answersArray[k]。correctAnswer==rawr[k]。value
rawr[k]。值==“正确”
rawr[k]。选中==true
您可以立即看到您希望
rawr[k].value
同时等于
correctAnswer
和
。因为结果总是返回true，这意味着
this.answersArray[k].correctAnswer==“Correct”

这基本上否定了if语句中的前两个条件-因此基本上if语句变成<代码>如果（rawr[k]。选中==true）

仅供参考，完全不需要检查

rawr[k]。如果您交换
querySelectorAll（'#rawr'），则检查==true

to

querySelectorAll（'rawr:checked'）






以下只是一般性反馈：

我认为你真的需要重新考虑整个剧本。它很难阅读，高度非视觉化，需要重构成一种更健壮的方法

首先，我建议创建一个变量来存储
currentQuestion
，这样您就不必每次都执行
quizToDisplay[0]

var currentQuestion: any;
ngOnInit(){
  ....
  this.quizToDisplay = data;
  this.currentQuestion = this.quizToDisplay[0];
}

或者至少
this.quizToDisplay=data[0]


去看看数组方法

for(let i = 0; i < this.quizToDisplay[0].questions.length; i++){
        if(this.quizToDisplay[0].questions[i].types == "Multiple-choice"){
            for(let j = 0; j < this.quizToDisplay[0].questions[i].answers.length; j++){
                this.answersArray.push(this.quizToDisplay[0].questions[i].answers[j]);
            }
        }
    }


为什么不在每个问题的json中包含反馈字符串呢？通过这种方式，您可以执行以下操作，并缓解反馈字符串对于特定问题是唯一的任何未来需求：

<div *ngIf="submitted == true">
    <p *ngIf="correct" class="correct-colour">{{quizAnswers.correctFeedback}}</p>
    <p *ngIf="!correct" class="incorrect-colour">{{quizAnswers.incorrectFeedback}}</p>
 </div>


我强烈建议您在
上创建一个单击事件，以便您可以更有效地捕获所选选项。使用上述方法，您可以

// .html
<input ... (click)="optionClicked(option)">

// .ts
optionClicked(_option: Object){
    quizQuestions['clicked'] = !quizQuestions['clicked'] || true;
}

/.html
//.ts
optionClicked（_option:Object）{
quizQuestions['clicked']=！quizQuestions['clicked']| | true；
}


如果您想在将来查看代码，请尝试
{
“id”：“32bec4d6-b5fd-4360-bede-9c902abd95de”，
“标题”：“随机测验”，
“所有者”：“莫霍河”，
“问题”：[
{
“问题文本”：“选择10以上的数字”，
“答案”：[
{
“答复文本”：“9”，
“正确答案”：“不正确”
},
{
“答复文本”：“11”，
“正确答案”：“正确”
}
],
“类型”：“多选”
},
{
“问题文本”：“这是哪个网站？”，
“答案”：[
{
“answerText”：“stackoverflow”，
“正确答案”：“正确”
},
{
“answerText”：“谷歌”，
“正确答案”：“不正确”
}
],
“类型”：“多选”
}
],
“访问”：“公共”
}
{
“id”：“32bec4d6-b5fd-4360-bede-9c902abd95de”，
“标题”：“随机测验”，
“所有者”：“莫霍河”，
“问题”：[
{
“问题文本”：“选择10以上的数字”，
“答案”：[
{
“答复文本”：“9”，
“正确答案”：“不正确”
},
{
“答复文本”：“11”，
“corr