diff --git a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html index 6f3cee20c23a9be85ca7835d0e23e33c0fe5cc9b..a5bf55611222a80810d1523fdc716d3c943aecb5 100644 --- a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html +++ b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.html @@ -1,52 +1,60 @@ <form (ngSubmit)="submitContent()"> - <mat-form-field class="input-block"> - <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject"> - </mat-form-field> - <mat-form-field class="input-block"> - <textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea> - </mat-form-field> - <mat-divider></mat-divider> + <section class="choice-section" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px"> + <mat-checkbox color="primary" [(ngModel)]="singleChoice" name="singleChoice">Single choice</mat-checkbox> + <mat-checkbox color="primary" [(ngModel)]="multiChoice" name="multiChoice">Multi choice</mat-checkbox> + </section> + <div *ngIf="singleChoice || multiChoice"> + <mat-form-field class="input-block"> + <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject"> + </mat-form-field> + <mat-form-field class="input-block"> + <textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea> + </mat-form-field> + <mat-divider></mat-divider> - <mat-table #table [dataSource]="displayAnswers"> + <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.answerOption.label }}">{{ answer.answerOption.label }} is {{ answer.correct }} - </mat-checkbox> - </mat-cell> - </ng-container> + <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.answerOption.label }}">{{ answer.answerOption.label }} is {{ answer.correct }} + </mat-checkbox> + </mat-cell> + </ng-container> - <ng-container matColumnDef="points"> - <mat-header-cell *matHeaderCellDef>Points</mat-header-cell> - <mat-cell *matCellDef="let answer">{{ answer.answerOption.points }}</mat-cell> - </ng-container> + <ng-container matColumnDef="points"> + <mat-header-cell *matHeaderCellDef>Points</mat-header-cell> + <mat-cell *matCellDef="let answer">{{ answer.answerOption.points }}</mat-cell> + </ng-container> - <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> - <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> - </mat-table> + <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> + <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> + </mat-table> - <mat-divider></mat-divider> + <mat-divider></mat-divider> - <div fxLayout="row" fxLayoutGap="15px"> - <div fxLayout="column" fxLayoutAlign="center"> - <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 [(ngModel)]="newAnswerOptionLabel" placeholder="Answer" name="answer"> - </mat-form-field> - <mat-form-field class="input-block"> - <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 = false; answerLabel.value = ''; answerPoints.value = ''"> - Add Answer - </button> + <div fxLayout="row" fxLayoutGap="15px"> + <div fxLayout="column" fxLayoutAlign="center"> + <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 [(ngModel)]="newAnswerOptionLabel" placeholder="Answer" name="answer"> + </mat-form-field> + <mat-form-field class="input-block"> + <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 = false; answerLabel.value = ''; answerPoints.value = ''"> + Add Answer + </button> + </div> </div> - </div> - <button mat-raised-button type="submit" color="primary">Submit</button> + <button mat-raised-button type="submit" color="primary">Submit</button> + </div> </form> diff --git a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts index 48b8a0b08b0c0eaa16cd013e7aa549800352ef39..2987d9410d91443962bd32295148dcf2b8087dd1 100644 --- a/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts +++ b/src/app/components/fragments/content-choice-creator/content-choice-creator.component.ts @@ -19,7 +19,8 @@ export class DisplayAnswer { styleUrls: ['./content-choice-creator.component.scss'] }) export class ContentChoiceCreatorComponent implements OnInit { - + singleChoice = false; + multiChoice = false; content: ContentChoice = new ContentChoice('0', '1', '',