Skip to content Search or jump to… Pull requests Issues Marketplace Explore
@vchav019 vchav019 / Baby_Feed_Project Public Code Issues Pull requests Actions
Projects Wiki Security Insights Settings
Baby_Feed_Project/ffq-questionnaire-web/src/app/pages/participant_questionnaire-page/questionnaire-page.component.html
@IsmelMendez IsmelMendez Modified the questionnaire-page.component for the
instructions. It ne… … Latest commit 1ff0c86 8 days ago History 2 contributors
@vchav019@IsmelMendez 60 lines (57 sloc) 2.97 KB

<div
  class="questionnaire-container"
  style="background-color: #f9f6ee"
  *ngIf="dataLoaded | async"
>
  <div align="center">
    <i> <img src="assets/images/logo.png" alt="" height="80" width="80" /> </i>
  </div>
  <h2 matDialogTitle>{{ TITLE }}</h2>
  <br />
  <text-card
    mainMessage="{{ MAIN_MESSAGE }}"
    [bulletedMessages]="BULLETED_INSTRUCTIONS"
    [instructionsTitle]="INSTRUCTIONS_TITLE"
  ></text-card>
  <br />
  <!--Question block per food item before button-->

  <div class="qb-container">
    <mat-card class="qb-card">
      <mat-label style="text-align: center" class="qb-row-item"
        ><strong>Infant age</strong></mat-label
      >
      <mat-form-field>
        <input
          matInput
          value="infantage"
          class="qb-row-item"
          [(ngModel)]="infantage"
          type="number"
          min="1"
          max="24"
          placeholder=" In months "
          autocomplete="off"
          required
        />
      </mat-form-field>
      <mat-error *ngIf="!infantage">
        Age (in months) of the infant is required.
      </mat-error>
    </mat-card>
  </div>
  <div class="qb-container">
    <mat-card class="qb-card">
      <mat-label style="text-align: center" class="qb-row-item"
        ><strong>Infant gender</strong></mat-label
      >

      <label class="radio-inline">
        <input
          type="radio"
          value="male"
          [(ngModel)]="gender"
          name="gender"
          required
        />
        Male
        <input
          type="radio"
          value="female"
          [(ngModel)]="gender"
          name="gender"
          required
        />
        Female
      </label>
      <mat-error *ngIf=""> Gender is required. </mat-error>
    </mat-card>
  </div>
  <div *ngFor="let item of foodItems">
    <question-block *ngIf="item.isPrimary" [foodItem]="item"></question-block>
  </div>
  <!--Hide foods button-->
  <div *ngIf="!hideSecondaryItems" class="skip-foods-div">
    <mat-label
      >If your baby did not eat any additional foods, click to skip.</mat-label
    >
    <button
      mat-raised-button
      class="skip-foods-button"
      (click)="toggleHideSecondaryItems()"
      color="primary"
    >
      Skip Additional Foods
    </button>
  </div>
  <div *ngIf="hideSecondaryItems" class="skip-foods-div">
    <button class="reenable-foods-button" (click)="toggleHideSecondaryItems()">
      View additional food items
    </button>
  </div>
  <!--Question block per food item after button-->
  <div *ngFor="let item of foodItems">
    <question-block
      *ngIf="!item.isPrimary && !hideSecondaryItems"
      [foodItem]="item"
    ></question-block>
  </div>
  <!--Submit button-->
  <div class="questionnaire-footer" *ngIf="foodItems.length > 0">
    <button
      mat-raised-button
      (click)="submitQuestionnaire()"
      color="primary"
      [disabled]="submitting"
    >
      Submit
    </button>
  </div>
  <div class="questionnaire-footer" *ngIf="foodItems.length < 1">
    <mat-label style="color: red"
      >Server returned 0 food items. Please contact administrator.</mat-label
    >
  </div>
  <div class="fixed-bottom">
    <mat-progress-bar
      mode="indeterminate"
      *ngIf="submitting"
    ></mat-progress-bar>
  </div>
</div>
Footer © 2022 GitHub, Inc. Footer navigation Terms Privacy Security Status Docs
Contact GitHub Pricing API Training Blog About