click event

html=>

<div class="mobile">
    <div class="full-section">
    <div class="ques">
      <h3><span>Q.</span>What is the name of the capital of BD?</h3>
    </div>
    <div class="ans-set">
      <div class="ans ans1"
           [class.correct]="correctAnswer === 'ans1' && isAnswered"  
           [class.wrong]="selectedAnswer === 'ans1' && correctAnswer !== 'ans1'" 
           [class.hidden]="isAnswered && selectedAnswer !== 'ans1' && correctAnswer !== 'ans1'"
           (click)="selectAnswer('ans1')">
        <h4><span>1.</span>Sylhet</h4>
      </div>

      <div class="ans ans2"
           [class.correct]="correctAnswer === 'ans2' && isAnswered"
           [class.wrong]="selectedAnswer === 'ans2' && correctAnswer !== 'ans2'"
           [class.hidden]="
          isAnswered && selectedAnswer !== 'ans2' && correctAnswer !== 'ans2'
        "
           (click)="selectAnswer('ans2')">
        <h4><span>2.</span>Mymensingh</h4>
      </div>

      <div class="ans ans3"
           [class.correct]="correctAnswer === 'ans3' && isAnswered" 
           [class.wrong]="selectedAnswer === 'ans3' && correctAnswer !== 'ans3'"
           [class.hidden]="
          isAnswered && selectedAnswer !== 'ans3' && correctAnswer !== 'ans3'
        "
           (click)="selectAnswer('ans3')">
        <h4><span>3.</span>Dhaka</h4>
      </div>

      <div class="ans ans4"
           [class.correct]="correctAnswer === 'ans4' && isAnswered"
           [class.wrong]="selectedAnswer === 'ans4' && correctAnswer !== 'ans4'"
           [class.hidden]="
          isAnswered && selectedAnswer !== 'ans4' && correctAnswer !== 'ans4'
        "
           (click)="selectAnswer('ans4')">
        <h4><span>4.</span>Chittagong</h4>
      </div>
    </div>
  </div>
</div>


scss=>
.mobile {
  max-width: 599px;
  width: 95%;
  margin: 0 auto;
}
.full-section{
    margin-top: 50%;
}
span {
  font-size: 20px;
  font-weight: 900;
}

.ans-set {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

  .ans {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    border-radius: 10px;
    display: flex;
    background: #00000025;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.5s ease,
      transform 0.5s ease;

    &.correct {
      background-color: rgba(0, 128, 0, 0.281);
      color: green;
      border: 2px solid green;
    }

    &.wrong {
      background-color: rgba(255, 0, 0, 0.322);
      color: red;
      border: 2px solid red;
    }
    // &.disabled {
    //   pointer-events: none;
    // }
    &.hidden {
      opacity: 0;
      display: none;
      transition: 0.9s all ease;
    }
  }
}


ts=>
import { Component } from '@angular/core';

@Component({
  selector: 'app-new-quiz-app',
  templateUrl: './new-quiz-app.component.html',
  styleUrls: ['./new-quiz-app.component.scss'],
})
export class NewQuizAppComponent {
  selectedAnswer: string = '';
  correctAnswer: string = 'ans3';
  isAnswered: boolean = false; // Flag to disable multiple clicks

  selectAnswer(answer: string) {
    if (this.isAnswered === false) {
      // Check if an answer has already been selected
      this.selectedAnswer = answer;
      this.isAnswered = true; // Set the flag to true after the first click
    }
  }
}