Quiz

html=>
<div class="mobile">
  <div class="full-section">
    <div class="count-down">
      <div class="icon"></div>
      <div class="received-marks">120</div>
      <div>/</div>
      <div class="full-marks">200</div>
    </div>

    <img
      class="bottom-img"
      src="{{ questions[currentQuestionIndex].image }}"
      alt=""
    />
    <img
      class="up-img"
      src="{{ questions[currentQuestionIndex].image }}"
      alt=""
    />
    <div
      class="ques-ans-set"
      [class.fade-out]="isAnimating"

      >
      <div class="ques">
        <h3><span>Q.</span>{{ questions[currentQuestionIndex].question }}</h3>
      </div>
      <div class="ans-set">
        <div
          class="ans ans1"
          [class.correct]="
            questions[currentQuestionIndex].correctAnswer === 'ans1' &&
            isAnswered
          "
          [class.wrong]="
            selectedAnswer === 'ans1' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans1'
          "
          [class.hidden]="
            isAnswered &&
            selectedAnswer !== 'ans1' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans1'
          "
          (click)="selectAnswer('ans1')"
        >
          <h4 class="test1">
            <span>1.</span>{{ questions[currentQuestionIndex].answers[0].text }}
          </h4>
        </div>

        <div
          class="ans ans2"
          [class.correct]="
            questions[currentQuestionIndex].correctAnswer === 'ans2' &&
            isAnswered
          "
          [class.wrong]="
            selectedAnswer === 'ans2' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans2'
          "
          [class.hidden]="
            isAnswered &&
            selectedAnswer !== 'ans2' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans2'
          "
          (click)="selectAnswer('ans2')"
        >
          <h4>
            <span>2.</span>{{ questions[currentQuestionIndex].answers[1].text }}
          </h4>
        </div>

        <div
          class="ans ans3"
          [class.correct]="
            questions[currentQuestionIndex].correctAnswer === 'ans3' &&
            isAnswered
          "
          [class.wrong]="
            selectedAnswer === 'ans3' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans3'
          "
          [class.hidden]="
            isAnswered &&
            selectedAnswer !== 'ans3' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans3'
          "
          (click)="selectAnswer('ans3')"
        >
          <h4>
            <span>3.</span>{{ questions[currentQuestionIndex].answers[2].text }}
          </h4>
        </div>

        <div
          class="ans ans4"
          [class.correct]="
            questions[currentQuestionIndex].correctAnswer === 'ans4' &&
            isAnswered
          "
          [class.wrong]="
            selectedAnswer === 'ans4' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans4'
          "
          [class.hidden]="
            isAnswered &&
            selectedAnswer !== 'ans4' &&
            questions[currentQuestionIndex].correctAnswer !== 'ans4'
          "
          (click)="selectAnswer('ans4')"
        >
          <h4>
            <span>4.</span>{{ questions[currentQuestionIndex].answers[3].text }}
          </h4>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS=>
.mobile {
  max-width: 599px;
}

.full-section {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  position: relative;
  .count-down {
    top: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    // background: white;
    color: white;
    border: 1px solid white;
    border-radius: 20px;
    z-index: 2;
    margin-top: 40px;
    padding: 10px 20px;
    gap: 5px;
  }
  .bottom-img {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 0;
  }
  .up-img {
    width: 350px;
    top: 110px;
    height: 200px;
    position: absolute;
    z-index: 2;
  }

  // Add a transparent black overlay
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.644);
    backdrop-filter: blur(10px);
    z-index: 1;
  }
}

span {
  font-size: 20px;
  font-weight: 900;
}
@keyframes fadeInUp {
  0% {
    opacity: 1;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50px);
  }
}
.ques-ans-set {
  // background: yellow;
  width: 95%;
  color: white;
  position: absolute;
  bottom: 40px;
  z-index: 2;
  // Add the slide-in animation
  animation: fadeInUp 0.5s ease;
  transition: opacity 0.5s ease;
  &.fade-out {
    animation: fadeOutDown 0.5s ease; // Exit animation
  }
}

.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 white;
    border-radius: 10px;
    display: flex;
    background: #00000071;
    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.836);
      color: white;
      border: 1px solid white;
    }

    &.wrong {
      background-color: rgba(255, 0, 0, 0.747);
      color: white;
      border: 1px solid white;
    }
    // &.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 = '';
  isAnswered: boolean = false;
  currentQuestionIndex: number = 0; // Track the current question
  isAnimating: boolean = false;

  questions = [
    {
      question: 'What is the name of the capital of BD?',
      image: '/images/app-bg-1.jpg',
      answers: [
        { text: 'Sylhet' },
        { text: 'Mymensingh' },
        { text: 'Dhaka' },
        { text: 'Chittagong' }
      ],
      correctAnswer: 'ans3',
    },
    {
      question: 'What is the national fruit of BD?',
      image: '/images/client-authentication-certificate-feature.jpg',
      answers: [
        { text: 'Mango' },
        { text: 'Jackfruit' },
        { text: 'Banana' },
        { text: 'Guava' }
      ],
      correctAnswer: 'ans2',
    },
    {
      question: 'What is the national flower of BD?',
      image: '/images/laptop-5673901_1280.jpg',
      answers: [
        { text: 'Rose' },
        { text: 'Tulip' },
        { text: 'Chrysanthemum' },
        { text: 'Water Lily' }
      ],
      correctAnswer: 'ans4',
    },
  ];

  selectAnswer(answer: string) {
    if (this.isAnswered === false) {
      this.selectedAnswer = answer;
      this.isAnswered = true; // Set the flag to true after the first click
      this.isAnimating = true;
      // Move to the next question after a short delay
      setTimeout(() => {
        this.nextQuestion();
      }, 2000); // 1-second delay before moving to the next question
    }
  }

  nextQuestion() {
    // Reset the answered flag and selected answer
    this.isAnswered = false;
    this.selectedAnswer = '';
    this.isAnimating = false;
    // Check if we have more questions
    if (this.currentQuestionIndex < this.questions.length - 1) {
      this.currentQuestionIndex++;
    } 
    else {
      alert('Quiz Completed!');
    }
  }
}