I'm developing a quiz app have 4 options for a given question. I have already written a func to verify if the clicked option is correct answer or wrong.I'm having problem in knowing which option was selected by user and I want to style it using CSS as - If the wrong option is selected, the clicked option would turn red and the correct option would turn green in color and vice versa.

HTML :

<div *ngFor="let actiVar of activeArray ;let j = index" >

        {{actiVar.QuestionID}}.{{actiVar.Question}}
        <br>
        <br>
        <button type="button"  name="s" id="one" (click)="filterAnswer(actiVar.OP[j+0]) ; getColor(actiVar.OP[j+0])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>
        <br>
        <br>
        <button type="button"  name="s" id="two" (click)="filterAnswer(actiVar.OP[j+1]) ; getColor(actiVar.OP[j+1])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+1]}}</button>        <br>
        <br>
        <button type="button"  name="s" id="three" (click)="filterAnswer(actiVar.OP[j+2]) ; getColor(actiVar.OP[j+2])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+2]}}</button>        <br>
        <br>
        <button type="button"  name="s" id="four" (click)="filterAnswer(actiVar.OP[j+3]) ; getColor(actiVar.OP[j+3])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+3]}}</button>
        <br>
      </div>

I have set a getColor func onclick of the option selected but what it does is,if a wrong option is selected by the user,it turns all the 4 options to red and vice versa.It doesn't specifically turn the clicked option to red.

getColor(j: any) { 
    if (j == this.activeArray[0].isRight) {

      this.buttonColor = 'green';
    }
    else {
      this.buttonColor = 'red';
    }
  }

this.activeArray[0].isRight is the correct answer retrieved from JSON. I understand that I will have to make use of individual id tag on button to know which option-button was clicked but I had no luck finding the correct logic on stackoverflow.

I'm developing a quiz app have 4 options for a given question. I have already written a func to verify if the clicked option is correct answer or wrong.I'm having problem in knowing which option was selected by user and I want to style it using CSS as - If the wrong option is selected, the clicked option would turn red and the correct option would turn green in color and vice versa.

HTML :

<div *ngFor="let actiVar of activeArray ;let j = index" >

        {{actiVar.QuestionID}}.{{actiVar.Question}}
        <br>
        <br>
        <button type="button"  name="s" id="one" (click)="filterAnswer(actiVar.OP[j+0]) ; getColor(actiVar.OP[j+0])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>
        <br>
        <br>
        <button type="button"  name="s" id="two" (click)="filterAnswer(actiVar.OP[j+1]) ; getColor(actiVar.OP[j+1])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+1]}}</button>        <br>
        <br>
        <button type="button"  name="s" id="three" (click)="filterAnswer(actiVar.OP[j+2]) ; getColor(actiVar.OP[j+2])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+2]}}</button>        <br>
        <br>
        <button type="button"  name="s" id="four" (click)="filterAnswer(actiVar.OP[j+3]) ; getColor(actiVar.OP[j+3])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+3]}}</button>
        <br>
      </div>

I have set a getColor func onclick of the option selected but what it does is,if a wrong option is selected by the user,it turns all the 4 options to red and vice versa.It doesn't specifically turn the clicked option to red.

getColor(j: any) { 
    if (j == this.activeArray[0].isRight) {

      this.buttonColor = 'green';
    }
    else {
      this.buttonColor = 'red';
    }
  }

this.activeArray[0].isRight is the correct answer retrieved from JSON. I understand that I will have to make use of individual id tag on button to know which option-button was clicked but I had no luck finding the correct logic on stackoverflow.

• javascript
• css
• angular

3 Answers 3

You can use a Template reference variables -> https://angular.io/guide/template-syntax#ref-vars

<button #buttonRef1 type="button" (click)="filterAnswer(actiVar.OP[j+0], buttonRef1)" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>
<button #buttonRef2 type="button" (click)="filterAnswer(actiVar.OP[j+1], buttonRef2)" [disabled]="permissionoptions">{{actiVar.OP[j+1]}}</button>
<button #buttonRef3 type="button" (click)="filterAnswer(actiVar.OP[j+2], buttonRef3)" [disabled]="permissionoptions">{{actiVar.OP[j+2]}}</button>
<button #buttonRef4 type="button" (click)="filterAnswer(actiVar.OP[j+3], buttonRef4)" [disabled]="permissionoptions">{{actiVar.OP[j+3]}}</button>

filterAnswer:

filterAnswer(answer: string, button: HTMLButtonElement) {
    // Do logic here
    button.style.backgroundColor = desiredColor; // example: "#f00"
}

You can use the own filterAnswer method for passing the name of the button. This aprroach its the easier way to make it.

 <button type="button"  name="s" id="one" (click)="filterAnswer(actiVar.OP[j+0], 'one') ; getColor(actiVar.OP[j+0])" [ngStyle]="{backgroundColor: buttonColor}" [disabled]="permissionoptions">{{actiVar.OP[j+0]}}</button>

You have to pass $event as another argument and get id from that object

check this solution

Angular2 get clicked element id