Skip to content
Snippets Groups Projects
Verified Commit 8fde32e7 authored by Lukas Maximilian Kimpel's avatar Lukas Maximilian Kimpel
Browse files

Refactor CreatorChoiceContent

parent 06d4ca99
1 merge request!89Resolve "content types (HTML)"
Pipeline #13543 passed with stage
in 33 seconds
Hide whitespace changes
Inline Side-by-side
src/app/app.module.ts
+ 3
− 1
View file @ 8fde32e7
......@@ -80,6 +80,7 @@ import { CreatorChoiceContentComponent } from './creator-choice-content/creator-
import { AddContentComponent } from './add-content/add-content.component';
import { ParticipantContentCarouselPageComponent } from './participant-content-carousel-page/participant-content-carousel-page.component';
import { ParticipantTextContentComponent } from './participant-text-content/participant-text-content.component';
import { CreatorTextContentComponent } from './creator-text-content/creator-text-content.component';
@NgModule({
declarations: [
......@@ -113,7 +114,8 @@ import { ParticipantTextContentComponent } from './participant-text-content/part
AddContentComponent,
ParticipantContentCarouselPageComponent,
ParticipantTextContentComponent,
AnswerStatisticsComponent
AnswerStatisticsComponent,
CreatorTextContentComponent
],
entryComponents: [
RegisterComponent,
......
src/app/creator-choice-content/creator-choice-content.component.html
+ 48
− 47
View file @ 8fde32e7
<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
<mat-card class="input-form" fxLayoutGap="20px">
<mat-card-header>
<mat-card-title>
<h3 class="subheading-2">
<mat-form-field>
<input [(ngModel)]="subject" matInput placeholder="Subject" name="newSubject">
</mat-form-field>
</h3>
<h4>
<div>
<mat-form-field>
<input [(ngModel)]="body" matInput placeholder="Body" name="newBody">
</mat-form-field>
</div>
</h4>
</mat-card-title>
</mat-card-header>
<mat-divider></mat-divider>
<mat-card-content>
<mat-list *ngFor="let answer of options; let i = index" [attr.data-index]="i">
<!-- <mat-checkbox color="primary">{{answer.label}}</mat-checkbox> -->
<div fxLayout="row" fxLayoutGap="20px">
<mat-checkbox color="primary" value="checked"></mat-checkbox>
<input matInput placeholder="Label" value="{{answer.label}}">
<input matInput placeholder="Points" value="{{answer.points}}">
</div>
</mat-list>
<mat-divider class="underListDivider"></mat-divider>
<h4>Add new answer:</h4>
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field>
<input [(ngModel)]="newLabel" matInput placeholder="Label" name="newLabel">
</mat-form-field>
<mat-form-field>
<input [(ngModel)]="newPoints" matInput placeholder="Points" name="newPoints">
</mat-form-field>
<mat-checkbox color="primary">Correct answer</mat-checkbox>
</div>
</mat-card-content>
<mat-card-actions fxLayoutAlign="center">
<button mat-raised-button color="primary" (click)="addAnswer()">Add answer</button>
<button mat-raised-button color="primary">Save content</button>
</mat-card-actions>
</mat-card>
<form (ngSubmit)="submitContent()">
<mat-form-field>
<input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
</mat-form-field>
<mat-form-field>
<textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea>
</mat-form-field>
<mat-divider></mat-divider>
<mat-table #table [dataSource]="content.options">
<ng-container matColumnDef="label">
<mat-header-cell *matHeaderCellDef>Answer</mat-header-cell>
<mat-cell *matCellDef="let answer">
<mat-checkbox color="primary">{{ answer.label }}</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="points">
<mat-header-cell *matHeaderCellDef>Points</mat-header-cell>
<mat-cell *matCellDef="let answer">{{ answer.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-divider></mat-divider>
<div fxLayout="row" fxLayoutGap="5px">
<div fxLayout="column" fxLayoutAlign="center">
<mat-checkbox #answerIsCorrect color="primary"></mat-checkbox>
</div>
<mat-form-field>
<input matInput #answerLabel placeholder="Answer" name="answer">
</mat-form-field>
<mat-form-field>
<input matInput #answerPoints placeholder="Points" name="points">
</mat-form-field>
<div fxLayout="column" fxLayoutAlign="center">
<button mat-button type="button"
(click)="addAnswer(answerIsCorrect.value, answerLabel.value, answerPoints.value)">
Add Answer
</button>
</div>
</div>
</div>
<button mat-button type="submit">Submit</button>
</form>
src/app/creator-choice-content/creator-choice-content.component.scss
+ 2
− 2
View file @ 8fde32e7
.underListDivider{
margin-top: 10px;
mat-form-field {
display: block;
}
src/app/creator-choice-content/creator-choice-content.component.ts
+ 24
− 14
View file @ 8fde32e7
import { Component, OnInit } from '@angular/core';
import { AnswerOption } from '../answer-option';
import { ChoiceContent } from '../choice-content';
@Component({
selector: 'app-creator-choice-content',
......@@ -7,24 +8,33 @@ import { AnswerOption } from '../answer-option';
styleUrls: ['./creator-choice-content.component.scss']
})
export class CreatorChoiceContentComponent implements OnInit {
subject: string;
body: string;
newLabel: string;
newPoints: string;
options = [
new AnswerOption('A - Giraffe', '0'),
new AnswerOption('B - Bär', '0'),
new AnswerOption('C - bra', '10')
];
constructor() { }
content: ChoiceContent = new ChoiceContent('2',
'1',
'1',
'Choice Content 1',
'This is the body of Choice Content 1',
1,
[
new AnswerOption('Option 1', '0'),
new AnswerOption('Option 2', '10'),
new AnswerOption('Option 3', '20'),
new AnswerOption('Option 4', '30')
],
[1, 2, 3],
true);
displayedColumns = ['label', 'points'];
constructor() {
}
ngOnInit() {
}
addAnswer() {
this.options.push(new AnswerOption(this.newLabel, this.newPoints));
this.newLabel = '';
this.newPoints = '';
submitContent() {
}
addAnswer(isCorrect: boolean, label: string, points: number) {
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment