@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/section-fields/section-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SectionFieldsComponent } from './section-fields.component';
+
+describe('SectionFieldsComponent', () => {
+  let component: SectionFieldsComponent;
+  let fixture: ComponentFixture<SectionFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SectionFieldsComponent]
+    });
+    fixture = TestBed.createComponent(SectionFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/section-fields/section-fields.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'lib-section-fields',
+  templateUrl: './section-fields.component.html',
+  styleUrls: ['./section-fields.component.scss']
+})
+export class SectionFieldsComponent implements OnChanges {
+  @Input() section: any = {};
+  decodedDescription: string = '';
+
+  // Method to decode HTML entities
+  decodeHtml(html: string): string {
+    const textArea = document.createElement('textarea');
+    textArea.innerHTML = html;    
+    return textArea.value;
+  }
+
+  // Lifecycle hook to handle updates to the input
+  ngOnChanges(): void {
+    if (this.section.description) {
+      this.decodedDescription = this.decodeHtml(this.section.description);
+    }
+  }
+}

package/src/form-fields/selection-matrix-fields/selection-matrix-fields.component.html

@@ -0,0 +1,93 @@
+<div
+  [ngClass]="{ 'mb-4': !inLine }"
+  class="px-3"
+  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
+  [attr.name]="question.testElementName"
+>
+  <div class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="question?.required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+
+  <div [ngClass]="{ 'labelBorder-rtl': acceptedLanguage === 'ara' }">
+    <table class="selectionMatrix">
+      <thead>
+        <tr>
+          <th></th>
+          <th
+            class="text-center table-cell-wrap"
+            *ngFor="let column of selectionMatrixColumn"
+          >
+            {{ column.column }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="table-group-divider">
+        <tr *ngFor="let label of selectionMatrixLabel; let rowIndex = index">
+          <td class="table-cell-wrap">{{ label.label }}</td>
+          <td
+            *ngFor="let column of selectionMatrixColumn; let colIndex = index"
+            class="text-center"
+          >
+            <input
+              type="radio"
+              [attr.id]="'radio-' + rowIndex + '-' + colIndex + '-' + rowId"
+              [name]="'radio-' + rowIndex + '-' + colIndex + '-' + rowId"
+              class="selectionRadio"
+              [style.accent-color]="selectionColor"
+              [value]="label.label + '_' + column.column"
+              [(ngModel)]="selectedOptions[rowIndex]"
+              (ngModelChange)="
+                onSelectionChange(rowIndex, label.label + '_' + column.column)
+              "
+              [disabled]="disableEdit"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+    <div *ngIf="isInvalid && (!inLine || selectedOptions.length == 0)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message mt-2">
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/selection-matrix-fields/selection-matrix-fields.component.scss

@@ -0,0 +1,52 @@
+@import '../../styles/shared-style.scss';
+
+.selectionMatrix {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.selectionMatrix th, .selectionMatrix td {
+    padding: 8px;
+}
+
+.selectionMatrix th {
+    border-bottom: 2px solid black;
+}
+
+.selectionMatrix th:first-child,
+.selectionMatrix td:first-child {
+    border-right: 1px solid 
+    #C9C8C8;
+}
+
+.labelBorder-rtl .selectionMatrix th:first-child,
+.selectionMatrix td:first-child {
+    border-right: 1px solid 
+    #C9C8C8;
+}
+
+.table-group-divider{
+    border-top: 1px solid #000000;
+}
+
+.selectionRadio{
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+}
+
+.table-cell-wrap {
+    word-wrap: break-word; /* Ensures long words are broken to fit the width */
+    white-space: normal; /* Allows text to wrap to a new line */
+    max-width: 200px; /* Adjust as needed for your layout */
+  }
+
+  .invalid-question {
+    border: 2px solid #f44336; /* Material red */
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 4px;
+  }
+  
+
+

package/src/form-fields/selection-matrix-fields/selection-matrix-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectionMatrixFieldsComponent } from './selection-matrix-fields.component';
+
+describe('SelectionMatrixFieldsComponent', () => {
+  let component: SelectionMatrixFieldsComponent;
+  let fixture: ComponentFixture<SelectionMatrixFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SelectionMatrixFieldsComponent]
+    });
+    fixture = TestBed.createComponent(SelectionMatrixFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/selection-matrix-fields/selection-matrix-fields.component.ts

@@ -0,0 +1,155 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { ValidationService } from '../../services/validation.service';
+
+@Component({
+  selector: 'lib-selection-matrix-fields',
+  templateUrl: './selection-matrix-fields.component.html',
+  styleUrls: ['./selection-matrix-fields.component.scss'],
+})
+export class SelectionMatrixFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() acceptedLanguage: string = '';
+  @Input() rowId: number = 0;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  selectionMatrixColumn: any[] = [];
+  selectionMatrixLabel: any[] = [];
+  selectedOptions: string[] = [];
+  validationFailed!: boolean;
+  validationMessage: string = '';
+  minSelectionValue!: number;
+  private elementId: string='';
+  selectionColor : string = '';
+  selectionColorRequired: boolean = false;
+  @Input() disableEdit: boolean = false;
+  
+  constructor(
+    private validationService: ValidationService,
+    private tracker: ElementTrackerService
+  )  { }
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.selectionColorRequired = this.question.formElement.appearance.selectionColorRequired;
+    if(this.selectionColorRequired){
+      this.selectionColor = this.question.formElement.appearance.selectionColor;      
+    }
+    if (
+      this.question?.formElement?.selectionMatrixLabel ||
+      this.question?.element?.formElement?.selectionMatrixColumn
+    ) {
+      this.selectionMatrixLabel = (
+        this.question?.formElement?.selectionMatrixLabel || []
+      )
+        .flatMap((label: any) => {
+          const lab = this.isParsableJSON(label) ? JSON.parse(label) : label;
+          return Array.isArray(lab)
+            ? lab.map((value) => ({ label: value }))
+            : { label: lab };
+        })
+        .filter((labelObj: any) => labelObj.label !== '');
+
+      this.selectionMatrixColumn = (
+        this.question?.formElement?.selectionMatrixColumn || []
+      )
+        .flatMap((column: any) => {
+          const col = this.isParsableJSON(column) ? JSON.parse(column) : column;
+          return Array.isArray(col)
+            ? col.map((value) => ({ column: value }))
+            : { column: col };
+        })
+        .filter((columnObj: any) => columnObj.column !== '');
+    }
+    this.minSelectionValue =
+      this.question?.formElement?.validation?.minSelectionValue;
+    if (this.question.answer) {
+      this.selectedOptions = this.question.answer;
+    }
+  }
+
+  private isParsableJSON(value: any): boolean {
+    if (typeof value !== 'string') return false;
+    try {
+      JSON.parse(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  onSelectionChange(rowIndex: number, value: string) {
+    this.selectedOptions[rowIndex] = value;
+    this.validateInput();
+  }
+
+  validateInput() {
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validationFailed = false;
+    this.validationMessage = '';
+    this.question.answer = this.selectedOptions;
+    if (this.required && this.selectedOptions.length == 0) {
+      this.validationFailed = true;
+      this.validationMessage = 'This is a required question';
+      this.question.validation = false;
+      this.question.validationMessage = 'This is a required question';
+    } else if (this.selectedOptions.length < this.minSelectionValue) {
+      this.validationFailed = true;
+      this.validationMessage = `selected options must be greater than ${this.minSelectionValue}`;
+      this.question.validation = false;
+      this.question.validationMessage = `selected options must be greater than ${this.minSelectionValue}`;
+    } else {
+      this.question.validation = true;
+    }
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+  }
+
+    
+  handleValidation(isValid: boolean, message: string = 'This field is required') {
+    if (isValid) {
+      this.validationService.clearInvalid(this.buildElementId());
+    } else {
+      // this.validationService.setInvalid(this.question.id, message);
+    }
+  }
+
+  private buildElementId(): string {
+    return (this.inLine || this.inCard)
+      ? `${this.submissionIndex}-${this.question.id}`
+      : `${this.question.id}`;
+  }
+
+  get isInvalid(): boolean {
+    return !!this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  get errorMessage(): string | null {
+    return this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  ngAfterViewInit() {
+    if (this.inLine || this.inCard) {
+      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
+    } else {
+      this.elementId = `question-${this.question.id}`;
+    }
+  
+    this.tracker.registerElement(this.elementId);
+  }
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+  }
+}

package/src/form-fields/signature-fields/signature-fields.component.html

@@ -0,0 +1,43 @@
+<div [ngClass]="{ 'mb-4': !inLine }" class="px-3" [attr.name]="question.testElementName">
+  <div  class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+</div>

package/src/form-fields/signature-fields/signature-fields.component.scss

@@ -0,0 +1,10 @@
+@import '../../styles/shared-style.scss';
+.invalid-question {
+    border: 2px solid #f44336; /* Material red */
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 4px;
+  }
+  
+  
+

package/src/form-fields/signature-fields/signature-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignatureFieldsComponent } from './signature-fields.component';
+
+describe('SignatureFieldsComponent', () => {
+  let component: SignatureFieldsComponent;
+  let fixture: ComponentFixture<SignatureFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SignatureFieldsComponent]
+    });
+    fixture = TestBed.createComponent(SignatureFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/signature-fields/signature-fields.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-signature-fields',
+  templateUrl: './signature-fields.component.html',
+  styleUrls: ['./signature-fields.component.scss'],
+})
+export class SignatureFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  maxFileSize: number = 0;
+  minFileSize: number = 0;
+
+  ngOnInit() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.maxFileSize = this.question.formElement.validation.maxFileSize;
+    this.minFileSize = this.question.formElement.validation.minFileSize;
+  }
+}

package/src/form-fields/slider-fields/slider-fields.component.html

@@ -0,0 +1,67 @@
+<div [ngClass]="{ 'mb-4': !inLine }" class="px-3" [attr.name]="question.testElementName">
+  <div  class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="question?.required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+  <div class="sliderRow">
+    <div class="sliderLeft">
+      <mat-slider
+        [min]="minValue"
+        [max]="maxValue"
+        [step]="stepValue"
+        [ngStyle]="{
+          '--mdc-slider-active-track-color': changeSliderColor
+            ? sliderColor
+            : ''
+        }"
+      >
+        <input
+          matSliderThumb
+          [(ngModel)]="selectedValue"
+          (input)="validateInput($event)"
+          [disabled]="disableEdit"
+        />
+      </mat-slider>
+    </div>
+    <div class="sliderRight">
+      <label class="selected-count font-weight-bold">{{ selectedValue }}</label>
+    </div>
+  </div>
+</div>

package/src/form-fields/slider-fields/slider-fields.component.scss

@@ -0,0 +1,55 @@
+@import '../../styles/shared-style.scss';
+.selected-count {
+  font-size: 0.8rem;
+  color: black;
+}
+
+mat-slider {
+  width: 100%;
+}
+
+.mat-mdc-slider.mat-primary {
+  --mdc-slider-handle-color: #fcfcfc;
+  --mdc-slider-handle-width: 15px;
+  --mdc-slider-handle-height: 15px;
+  --mat-mdc-slider-focus-ripple-color: none;
+  --mat-mdc-slider-hover-ripple-color: none;
+  --mdc-slider-focus-handle-color: #fcfcfc;
+  --mdc-slider-inactive-track-color: #9e9d9d;
+}
+
+.mat-mdc-slider .mdc-slider__thumb-knob {
+  outline: 1px solid #ff0000 !important; /* Set the border color */
+}
+
+.mat-slider-thumb {
+  background-color: none !important;
+  border: none !important;
+  box-shadow: none;
+  outline: none;
+}
+
+.sliderRow{
+  display:flex;
+  align-items: center;
+  gap: 32px;
+  width: 100%;
+}
+
+.sliderLeft{
+  flex: 1;
+}
+
+.sliderRight{
+  label{
+    margin-bottom: 0;
+  }
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+

package/src/form-fields/slider-fields/slider-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SliderFieldsComponent } from './slider-fields.component';
+
+describe('SliderFieldsComponent', () => {
+  let component: SliderFieldsComponent;
+  let fixture: ComponentFixture<SliderFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SliderFieldsComponent]
+    });
+    fixture = TestBed.createComponent(SliderFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/slider-fields/slider-fields.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input, Renderer2, ElementRef, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'lib-slider-fields',
+  templateUrl: './slider-fields.component.html',
+  styleUrls: ['./slider-fields.component.scss'],
+})
+export class SliderFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  minValue: number = 0;
+  maxValue: number = 0;
+  stepValue: number = 0;
+  changeSliderColor: boolean = false;
+  sliderColor: string = '';
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  selectedValue: number = 0;
+  @Input() disableEdit: boolean = false;
+
+  constructor(private renderer: Renderer2, private el: ElementRef) { }
+
+  ngOnInit() {
+
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.minValue = this.question.formElement.appearance.minValue;
+    this.maxValue = this.question.formElement.appearance.maxValue;
+    this.stepValue = this.question.formElement.appearance.stepValue;
+    this.changeSliderColor =
+      this.question.formElement.appearance.changeSliderColor;
+
+    if (this.changeSliderColor) {
+      this.sliderColor = this.question.formElement.appearance.sliderColor;
+    }
+
+    if (this.question.answer && Object.keys(this.question.answer).length>0) {
+      this.selectedValue = this.question?.answer;
+    } else {
+      this.selectedValue = this.minValue;
+    }
+  }
+
+
+  validateInput(event: any) {
+    this.question.answer = String(this.selectedValue);
+    this.question.validation = true;
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+  }
+
+}