src/app/vocabulary-builder/vocabulary-builder.component.html

<div class="imgbgcontainter">
  <div class="vocabulary-builder-container">

    <app-header [title]="'Vocabulary Builder'"></app-header>

    <!-- Background Image -->
    <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />

    <!-- Step 1: Get Word -->
    <div *ngIf="step === 1" class="card1">
      <div class="content-container">
        <div class="image-container">
          <img src="assets/images/vocabulary/4.png" alt="Vocabulary Builder" class="quiz-image" />
        </div>
        <div class="description-container">
          <h2>How Strong is Your Vocabulary?</h2>
          <p>
            Vocabulary Builder is an interactive learning tool designed to help users strengthen their vocabulary in an engaging and structured manner.
            It presents a series of word-based exercises that allow users to learn the meaning and usage of words through intelligent suggestions, related word selections, and sentence formation tasks.
          </p>
          <app-button [disabled]="isButtonDisabled || isLoaderVisible"
                      [ngClass]="{ loading: isLoaderVisible }"
                      (click)="getWords()">
            <span>Let's Build</span>
          </app-button>
          <div *ngIf="isLoaderVisible" class="loader-overlay">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Step 2: Word Options -->
    <div *ngIf="step === 2" class="card2">
      <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />

      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>



      <div class="content-container">
        <div class="word-container">
          <h2>Which word is related to <b class="text-green-500">{{ vocabulary.word }}</b>?</h2>
          <div class="image-container" *ngIf="generatedImageUrl">
            <img [src]="generatedImageUrl" alt="AI image for {{ vocabulary.word }}" class="quiz-image" />
          </div>
        </div>
        <div class="options-container">
          <p class="instruction">Choose the related words (select only three):</p>
          <div class="option-container">
            <button *ngFor="let option of vocabulary.options"
                    class="option-btn"
                    [ngClass]="{
          'selected': selectedOptions.includes(option) && !optionStates[option],
          'correct': optionStates[option] === 'correct',
          'incorrect': optionStates[option] === 'incorrect',
          'picked': isChecked && pickedAtCheck.has(option)
        }"
                    [disabled]="(selectedOptions.length === 3 && !selectedOptions.includes(option) && buttonState === 'validate') || buttonState !== 'validate'"
                    (click)="handleOptionClick(option)">
              <span class="label">{{ option }}</span>
              <span *ngIf="isChecked && pickedAtCheck?.has(option)" class="picked-chip"></span>
            </button>
          </div>

          <app-button *ngIf="buttonState === 'validate'"
                      [disabled]="!isCheckButtonEnabled || isLoaderVisible"
                      (click)="checkSelections()">
            <span>Validate</span>
          </app-button>

          <app-button *ngIf="buttonState === 'next'" (click)="goNext()">
            <span>Next</span>
          </app-button>

          <app-button *ngIf="buttonState === 'formSentence'" (click)="startSentenceFormation()">
            <span>Form a Sentence</span>
          </app-button>

          <div *ngIf="isLoaderVisible" class="loader-overlay">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Step 3: Feedback -->
    <div *ngIf="step === 3" class="card3">
      <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
      <!-- Top-right close button (NOT on intro/page 1) -->
      <!--<button class="icon-btn1" (click)="closeToMain()" aria-label="Close">✖</button>-->
      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>

      <h2>Feedback</h2>
      <ul class="feedback-list">
        <ng-container *ngFor="let point of formattedFeedback">
          <li *ngIf="point.includes('❌')">{{ point }}</li>
        </ng-container>
      </ul>
      <app-button class="submit-button" (click)="startSentenceFormation()">Form a Sentence</app-button>
    </div>

    <!-- Step 4: Sentence Formation -->
    <div *ngIf="step === 4" class="card4">
      <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
      <!-- Top-right close button (NOT on intro/page 1) -->
      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>

      <h2>Form a Sentence</h2>
      <p class="correct-answer">Using the words: <strong class="text-green-500">{{ correctOptions.join(', ') }}</strong></p>
      <div class="sentence-formation">
        <div *ngFor="let word of correctOptions; let i = index" class="sentence-input-group">
          <label for="sentenceInput{{ i }}"><strong>{{ word }}</strong>:</label>
          <div class="input-group">
            <textarea id="sentenceInput{{ i }}"
                      [(ngModel)]="sentenceInputs[i]"
                      (keydown)="onKeyDown($event, i)"
                      placeholder="Type your sentence here...">
            </textarea>
          </div>
        </div>
      </div>
      <app-button class="submit-button"
                  [disabled]="!allFieldsFilled() || isLoaderVisible"
                  (click)="checkSentence()">
        <span>Check Sentence</span>
      </app-button>
      <div *ngIf="isLoaderVisible" class="loader-overlay">
        <div class="loader"></div>
      </div>
    </div>

    <!-- Step 5: Sentence Feedback -->
    <div *ngIf="step === 5" class="card5">
      <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
      <!-- Top-right close button (NOT on intro/page 1) -->
      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>

      <h2 class="feedback-header">Sentence Feedback</h2>
      <ul class="feedback-list1">
        <li *ngFor="let point of formattedSentenceFeedback">
          <span *ngIf="point.includes('correct answer')" class="text-green-500">
            <strong>{{ point }}</strong>
          </span>
          <span *ngIf="!point.includes('correct answer')">{{ point }}</span>
        </li>
      </ul>
      <app-button class="submit-button" (click)="resetQuiz()"> Reset </app-button>
    </div>

  </div>
</div>