Question

我正在建立一个网站，你可以在那里进行测验并回答它们。我的问题是，当我尝试回答我的测验时，看看答案是正确还是不正确，我得到的结果并不完全是我想要的。

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

HTML：

<table class="pageTable" align="center">
<!-- Quiz title -->
<div *ngFor="let quiz of quizToDisplay"><br/>
    Quiz title: {{quiz.title}} <br/> by {{quiz.owner}}<br/><br/>

    <!-- Quiz questions -->
    <div *ngFor="let quizQuestions of quiz.questions" align="center">
        <div class="Question-panel-title" style="padding: 10px; word-wrap: break-word;">
            Question: {{quizQuestions.questionText}}
        </div>

        <!-- Quiz answers -->
        <div class="Question-panel-content" style="padding: 5px; word-wrap: break-word;">
            <div *ngIf="quizQuestions.types == 'Multiple-choice'" >
                <div *ngFor="let quizAnswers of quizQuestions.answers; let i=index">
                    <input type="radio" id="rawr" name="{{quizQuestions.questionText}}" value="{{quizAnswers.correctAnswer}}" [disabled]="submitted">
                    {{i + 1}}: {{quizAnswers.answerText}}    
                </div>
                <div *ngIf="submitted == true">
                    Your answer is {{correctAnswerMultipleChoice}}
                </div>
            </div>

            <div *ngIf="quizQuestions.types == 'Checkboxes'">
                <div *ngFor="let quizAnswers of quizQuestions.answers; let i=index">
                    <input type="checkbox" name="checkboxGroup" value="{{quizAnswers.correctAnswer}}" [disabled]="submitted" (click)="handleCheckboxAnswer(i, quizAnswers.correctAnswer)">
                    {{i + 1}}: {{quizAnswers.answerText}}    
                </div>
                <div *ngIf="submitted == true">
                    Your answer is {{correctAnswerCheckbox}}
                </div>
            </div>
        </div><br/>
    </div>
    <input type="submit" value="Submit" (click)="submitAnswer()">
    <input type="submit" value="View Statistics">
    <div *ngIf="quiz.owner == currentUser">
        <input type="submit" value="Delete Quiz" (click)="deleteQuiz(quiz.id)">
    </div>
</div>

代码：

export class QuizComponent implements OnInit, OnDestroy {
service: any;
data: any;
quizToDisplay: any;
currentUser: string;
correctAnswerMultipleChoice: string = 'Incorrect';
CheckboxesValues: string[] = [];
correctAnswerCheckbox: string = 'Incorrect';
submitted: boolean = false;
answersArray: any[] = [];

constructor(private router:Router, private quizObserverService:QuizObserverService, private socketService:SocketService, private elementRef:ElementRef){
    this.currentUser = localStorage.getItem('user');
}

ngOnInit() {
    this.service = this.quizObserverService.getQuiz(this.router.url).subscribe(data => { //only gets JSON upon page load
        this.quizToDisplay = data;
    })
}

ngOnDestroy() {
    this.service.unsubscribe();
}

deleteQuiz(id: string){
    this.socketService.socket.emit('deleteQuiz', JSON.stringify(id));
    this.router.navigateByUrl('/home');
}

handleMultiplechoiceAnswer(){
    let rawr = this.elementRef.nativeElement.querySelectorAll('#rawr');



    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]);
            }
        }
    }

    if(this.handleMultiplechoiceAnswerCorrect(rawr)){
        return this.handleMultiplechoiceAnswerCorrect(rawr);
    }
    else
    {
        return this.handleMultiplechoiceAnswerIncorrect(rawr);
    }
}

handleMultiplechoiceAnswerCorrect(rawr: any){
    for(let k = 0; k < rawr.length; k++){

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

handleMultiplechoiceAnswerIncorrect(rawr: any){
    return "Incorrect";
}

handleCheckboxAnswer(index: number, correct: string) {
    this.CheckboxesValues[index] = correct;
}

submitAnswer(){
    this.submitted = true;
    this.correctAnswerMultipleChoice = this.handleMultiplechoiceAnswer();
}

当我尝试回答我的测验时，结果如下：
Image

正如您所看到的，即使第二个问题的回答是错误的，它仍然说它是正确的，因为第一个问题得到了正确回答。我用来确定测验是正确还是错误的方法是handleMultiplechoiceAnswer()方法，所以我觉得这个方法有问题，但我不能指责它。谢谢你的帮助。

修改很抱歉，我忘了举一个json结构的例子。这是：

{
  "id": "32bec4d6-b5fd-4360-bede-9c902abd95de",
  "title": "random quiz",
  "owner": "mohemohe",
  "questions": [
    {
      "questionText": "Choose numbers above 10",
      "answers": [
        {
          "answerText": "9",
          "correctAnswer": "Incorrect"
        },
        {
          "answerText": "11",
          "correctAnswer": "Correct"
        }
      ],
      "types": "Multiple-choice"
    },
    {
      "questionText": "Which website is this?",
      "answers": [
        {
          "answerText": "stackoverflow",
          "correctAnswer": "Correct"
        },
        {
          "answerText": "google",
          "correctAnswer": "Incorrect"
        }
      ],
      "types": "Multiple-choice"
    }
  ],
  "access": "Public"
}

编辑2： 管理以制作一个更好的例子：https://plnkr.co/edit/CoV1AQtVtbbS2kNYK7FR

Answer 1

解决方案：

我认为这总是返回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].value == "Correct"
rawr[k].checked == true

您可以立即看到期望rawr[k].value与correctAnswer 和 'Correct'相等。因为结果总是返回true，这意味着this.answersArray[k].correctAnswer == 'Correct'。

所以这基本上否定了你的if语句中的前两个条件 - 所以基本上你的if语句变成了...... if(rawr[k].checked == true)。

仅供参考，如果您将rawr[k].checked == true交换为querySelectorAll('#rawr');

querySelectorAll('#rawr:checked');

以下只是一般性反馈：

我认为你真的需要考虑重新编写整个脚本。这是非常难以阅读，高度无视，需要重构为更强大的方法。

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

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

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

去看看es6数组方法。

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]);
            }
        }
    }

可以转换为以下更容易阅读的内容：

this.quizToDisplay[0].questions.forEach((questionGroup, i)=>{
   if(questionGroup.types == "Multiple-choice"){
      questionGroup.forEach((question, ii)=>{
           this.answersArray.push(question.answers[ii]);
      });
   }
});

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

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

我认为命名约定需要改进。例如：quizQuestions.answers应为quizQuestions.options。

不要忘记，当您使用对象时，您可以动态分配新的对象属性＆＃34;＆＃34; 。例如，您可以这样做：

this.quizToDisplay[0]['answeredCorrectly'] = true;

我强烈建议您在<input>上创建点击事件，以便更有效地捕获所选选项。使用上述方法，你可以......

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

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

如果您希望将来进行代码审核，请尝试codereview.stackexchange.com

Answer 2

{
  "id": "32bec4d6-b5fd-4360-bede-9c902abd95de",
  "title": "random quiz",
  "owner": "mohemohe",
  "questions": [
    {
      "questionText": "Choose numbers above 10",
      "answers": [
        {
          "answerText": "9",
          "correctAnswer": "Incorrect"
        },
        {
          "answerText": "11",
          "correctAnswer": "Correct"
        }
      ],
      "types": "Multiple-choice"
    },
    {
      "questionText": "Which website is this?",
      "answers": [
        {
          "answerText": "stackoverflow",
          "correctAnswer": "Correct"
        },
        {
          "answerText": "google",
          "correctAnswer": "Incorrect"
        }
      ],
      "types": "Multiple-choice"
    }
  ],
  "access": "Public"
}

多项选择测验的单选按钮问题

2 个答案: