diff --git a/src/app/creator-choice-content/creator-choice-content.component.html b/src/app/creator-choice-content/creator-choice-content.component.html index bf9cc712e2abe095fe6369f2964efa6c6f415212..6f3cee20c23a9be85ca7835d0e23e33c0fe5cc9b 100644 --- a/src/app/creator-choice-content/creator-choice-content.component.html +++ b/src/app/creator-choice-content/creator-choice-content.component.html @@ -7,13 +7,15 @@ </mat-form-field> <mat-divider></mat-divider> - <mat-table #table [dataSource]="correctAnswers"> + <mat-table #table [dataSource]="displayAnswers"> <ng-container matColumnDef="label"> <mat-header-cell *matHeaderCellDef>Answer</mat-header-cell> <mat-cell *matCellDef="let answer"> <!-- ToDo: Check ngModel --> - <mat-checkbox color="primary" [(ngModel)]="answer.correct" [checked]="answer.correct" name="answer">{{ answer.answerOption.label }} is {{ answer.correct }}</mat-checkbox> + <mat-checkbox color="primary" [(ngModel)]="answer.correct" [checked]="answer.correct" + name="{{ answer.answerOption.label }}">{{ answer.answerOption.label }} is {{ answer.correct }} + </mat-checkbox> </mat-cell> </ng-container> @@ -30,18 +32,17 @@ <div fxLayout="row" fxLayoutGap="15px"> <div fxLayout="column" fxLayoutAlign="center"> - <mat-checkbox #answerIsCorrect color="primary">Is correct</mat-checkbox> + <mat-checkbox #answerIsCorrect [(ngModel)]="newAnswerOptionChecked" [checked]="newAnswerOptionChecked" color="primary" name="ischecked">Is correct</mat-checkbox> </div> <mat-form-field class="input-block"> - <input matInput #answerLabel placeholder="Answer" name="answer"> + <input matInput #answerLabel [(ngModel)]="newAnswerOptionLabel" placeholder="Answer" name="answer"> </mat-form-field> <mat-form-field class="input-block"> - <input matInput #answerPoints placeholder="Points" name="points"> + <input matInput #answerPoints [(ngModel)]="newAnswerOptionPoints" placeholder="Points" name="points"> </mat-form-field> <div fxLayout="column" fxLayoutAlign="center"> <button mat-button type="button" - (click)="addAnswer(answerIsCorrect.checked, answerLabel.value, answerPoints.value); - answerIsCorrect.checked = false; answerLabel.value = ''; answerPoints.value = ''"> + (click)="addAnswer(); answerIsCorrect.checked = false; answerLabel.value = ''; answerPoints.value = ''"> Add Answer </button> </div> diff --git a/src/app/creator-choice-content/creator-choice-content.component.ts b/src/app/creator-choice-content/creator-choice-content.component.ts index 9368977587d8def173c4d5607d096c1f25c814ea..a92b613f7b13f4bed9f3804ee057b981922170b2 100644 --- a/src/app/creator-choice-content/creator-choice-content.component.ts +++ b/src/app/creator-choice-content/creator-choice-content.component.ts @@ -3,7 +3,7 @@ import { AnswerOption } from '../answer-option'; import { ChoiceContent } from '../choice-content'; import { ContentService } from '../content.service'; -export class CorrectAnswer { +export class DisplayAnswer { answerOption: AnswerOption; correct: boolean; @@ -26,13 +26,21 @@ export class CreatorChoiceContentComponent implements OnInit { '', '', 1, - [], - [], + [ + new AnswerOption('Option 1', '10'), + new AnswerOption('Option 2', '10'), + new AnswerOption('Option 3', '10') + ], + [0, 2], true); displayedColumns = ['label', 'points']; - correctAnswers: CorrectAnswer[] = []; + displayAnswers: DisplayAnswer[] = []; + + newAnswerOptionChecked = false; + newAnswerOptionLabel = ''; + newAnswerOptionPoints = ''; constructor(private contentService: ContentService) { } @@ -42,9 +50,9 @@ export class CreatorChoiceContentComponent implements OnInit { } fillCorrectAnswers() { - this.correctAnswers = []; + this.displayAnswers = []; for (let i = 0; i < this.content.options.length; i++) { - this.correctAnswers.push(new CorrectAnswer(this.content.options[i], this.content.correctOptionIndexes.includes(i))); + this.displayAnswers.push(new DisplayAnswer(this.content.options[i], this.content.correctOptionIndexes.includes(i))); } } @@ -57,11 +65,14 @@ export class CreatorChoiceContentComponent implements OnInit { } } - addAnswer(isCorrect: boolean, label: string, points: string) { - this.content.options.push(new AnswerOption(label, points)); - if (isCorrect) { - this.content.correctOptionIndexes.push(this.content.options.length); + addAnswer() { + this.content.options.push(new AnswerOption(this.newAnswerOptionLabel, this.newAnswerOptionPoints)); + if (this.newAnswerOptionChecked) { + this.content.correctOptionIndexes.push(this.content.options.length - 1); } + this.newAnswerOptionChecked = false; + this.newAnswerOptionLabel = ''; + this.newAnswerOptionPoints = ''; this.fillCorrectAnswers(); this.submitContent(); }