title: Radio button issues with multiple-choice quiz
body: <p>I'm making a website where you can make quizzes and answer them. My issue is that when I try to answer my quiz, to see whether the answer is correct or incorrect, the result I get is not exactly what I want.</p>
  <p>I'm creating my html page by loading a json and assigning a radio button to every answer. The structure is that a quiz can have many questions, and questions can have many answers.</p>
  <p>HTML:</p>
  <pre><code>&lt;table class=&quot;pageTable&quot; align=&quot;center&quot;&gt;
  &lt;!-- Quiz title --&gt;
  &lt;div *ngFor=&quot;let quiz of quizToDisplay&quot;&gt;&lt;br/&gt;
      Quiz title: {{quiz.title}} &lt;br/&gt; by {{quiz.owner}}&lt;br/&gt;&lt;br/&gt;
      
      &lt;!-- Quiz questions --&gt;
      &lt;div *ngFor=&quot;let quizQuestions of quiz.questions&quot; align=&quot;center&quot;&gt;
          &lt;div class=&quot;Question-panel-title&quot; style=&quot;padding: 10px; word-wrap: break-word;&quot;&gt;
              Question: {{quizQuestions.questionText}}
          &lt;/div&gt;
  
          &lt;!-- Quiz answers --&gt;
          &lt;div class=&quot;Question-panel-content&quot; style=&quot;padding: 5px; word-wrap: break-word;&quot;&gt;
              &lt;div *ngIf=&quot;quizQuestions.types == 'Multiple-choice'&quot; &gt;
                  &lt;div *ngFor=&quot;let quizAnswers of quizQuestions.answers; let i=index&quot;&gt;
                      &lt;input type=&quot;radio&quot; id=&quot;rawr&quot; name=&quot;{{quizQuestions.questionText}}&quot; value=&quot;{{quizAnswers.correctAnswer}}&quot; [disabled]=&quot;submitted&quot;&gt;
                      {{i + 1}}: {{quizAnswers.answerText}}    
                  &lt;/div&gt;
                  &lt;div *ngIf=&quot;submitted == true&quot;&gt;
                      Your answer is {{correctAnswerMultipleChoice}}
                  &lt;/div&gt;
              &lt;/div&gt;
          
              &lt;div *ngIf=&quot;quizQuestions.types == 'Checkboxes'&quot;&gt;
                  &lt;div *ngFor=&quot;let quizAnswers of quizQuestions.answers; let i=index&quot;&gt;
                      &lt;input type=&quot;checkbox&quot; name=&quot;checkboxGroup&quot; value=&quot;{{quizAnswers.correctAnswer}}&quot; [disabled]=&quot;submitted&quot; (click)=&quot;handleCheckboxAnswer(i, quizAnswers.correctAnswer)&quot;&gt;
                      {{i + 1}}: {{quizAnswers.answerText}}    
                  &lt;/div&gt;
                  &lt;div *ngIf=&quot;submitted == true&quot;&gt;
                      Your answer is {{correctAnswerCheckbox}}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;br/&gt;
      &lt;/div&gt;
      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; (click)=&quot;submitAnswer()&quot;&gt;
      &lt;input type=&quot;submit&quot; value=&quot;View Statistics&quot;&gt;
      &lt;div *ngIf=&quot;quiz.owner == currentUser&quot;&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Delete Quiz&quot; (click)=&quot;deleteQuiz(quiz.id)&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Code:</p>
  <pre><code>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 =&gt; { //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 &lt; this.quizToDisplay[0].questions.length; i++){
          if(this.quizToDisplay[0].questions[i].types == &quot;Multiple-choice&quot;){
              for(let j = 0; j &lt; 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 &lt; rawr.length; k++){
  
          if(this.answersArray[k].correctAnswer == rawr[k].value &amp;&amp; rawr[k].value == &quot;Correct&quot; &amp;&amp; rawr[k].checked == true){ 
              return &quot;Correct&quot;;
          }
      }
  }
  
  handleMultiplechoiceAnswerIncorrect(rawr: any){
      return &quot;Incorrect&quot;;
  }
  
  handleCheckboxAnswer(index: number, correct: string) {
      this.CheckboxesValues[index] = correct;
  }
  
  submitAnswer(){
      this.submitted = true;
      this.correctAnswerMultipleChoice = this.handleMultiplechoiceAnswer();
  }
  </code></pre>
  <p>When I try to answer my quiz, this is what the result looks like:<br />
  <a href="https://i.stack.imgur.com/k1MWW.png" rel="nofollow noreferrer">Image</a></p>
  <p>As you can see, even though the second question is answered wrong, it still says that it is correct, because the first question is answered correctly. The method I'm using to determine whether the quiz is correct or false is the <code>handleMultiplechoiceAnswer()</code> method, so I think something is wrong in that method, however I can't pick my finger on it. Thanks for the help.</p>
  <p><strong>EDIT:</strong>
  Very sorry, I forgot to put an example of my json structure. Here it is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "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"
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>EDIT 2:</strong>
  Managed to make a plunker example: <a href="https://plnkr.co/edit/CoV1AQtVtbbS2kNYK7FR" rel="nofollow noreferrer">https://plnkr.co/edit/CoV1AQtVtbbS2kNYK7FR</a></p>