diff --git a/src/app/components/participant/content-choice-participant/content-choice-participant.component.html b/src/app/components/participant/content-choice-participant/content-choice-participant.component.html
index 6aff16b5772714945403ef4b01158f08f4820e12..a7f41bf36e27cb29b4f70b64d8c116d8dbe5eb12 100644
--- a/src/app/components/participant/content-choice-participant/content-choice-participant.component.html
+++ b/src/app/components/participant/content-choice-participant/content-choice-participant.component.html
@@ -1,5 +1,5 @@
<form (ngSubmit)="submitAnswer()">
- <h1 class="mat-headline">{{ content.subject }}</h1>
+ <h1 class="mat-headline">{{ content.body }}</h1>
<mat-divider></mat-divider>
<mat-list *ngIf="content.multiple">
<mat-list-item *ngFor="let answer of checkedAnswers">
diff --git a/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss b/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss
index 615eaa08f34372a38036c3138ca8ba7e5b3bc5fc..81c1f2bc4cd81f9ee99c59f6ddf3ed2ea76d8165 100644
--- a/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss
+++ b/src/app/components/participant/content-choice-participant/content-choice-participant.component.scss
@@ -8,4 +8,5 @@ form > div > mat-chip-list {
form > h1 {
margin:20px 0;
+ font-size: larger;
}
diff --git a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b0d70ad66bb8f3bd3bfac1113ea7036372b192f6
--- /dev/null
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html
@@ -0,0 +1,24 @@
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-chip-list class="mat-chip-list-stacked">
+ <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+ <mat-chip class="positiveC">
+ Good
+ </mat-chip>
+ <h3> > 85 % </h3>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+ <mat-chip class="okayC">
+ Okay
+ </mat-chip>
+ <h3> > 50 % </h3>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+ <mat-chip class="negativeC">
+ Improvable
+ </mat-chip>
+ <h3> < 50 % </h3>
+ </div>
+ </mat-chip-list>
+ </div>
+</div>
diff --git a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d1a486c7a24567dd38bdcec9c5a25ee66d63cf6d
--- /dev/null
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
@@ -0,0 +1,17 @@
+.positiveC {
+ background-color: #AED581;
+}
+
+.negativeC {
+ background-color: #FF8A65;
+}
+
+.okayC {
+ background-color: #FFD54F;
+}
+
+mat-chip {
+ width: 100px!important;
+ display: flex;
+ justify-content: center;
+}
diff --git a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.spec.ts b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc034c79a1ec54256fb815bacf54425290e8daa0
--- /dev/null
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatisticHelpComponent } from './statistic-help.component';
+
+describe('StatisticHelpComponent', () => {
+ let component: StatisticHelpComponent;
+ let fixture: ComponentFixture<StatisticHelpComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ StatisticHelpComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StatisticHelpComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.ts b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0261ab964bdb65d1d4115340f9760d16b7f24ce3
--- /dev/null
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-statistic-help',
+ templateUrl: './statistic-help.component.html',
+ styleUrls: ['./statistic-help.component.scss']
+})
+export class StatisticHelpComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.html b/src/app/components/shared/list-statistic/list-statistic.component.html
index 6bc7bbb35014313cc4351d488be3f779ef6efd54..e8a0282b2f08807e8c6bc98f57d7c9423146fe44 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.html
+++ b/src/app/components/shared/list-statistic/list-statistic.component.html
@@ -4,7 +4,7 @@
<mat-progress-bar class="progress-theme" mode="determinate" value="{{total}}"
*ngIf="total < status.good && total >= status.okay" color="accent"></mat-progress-bar>
<mat-progress-bar class="progress-theme" mode="determinate" value="{{total}}"
- *ngIf="total < status.okay && total >= status.empty" color="warn"></mat-progress-bar>
+ *ngIf="total < status.okay && total != status.empty" color="warn"></mat-progress-bar>
<mat-toolbar></mat-toolbar>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
@@ -14,7 +14,7 @@
'positiveC' : cp.percent >= status.good,
'okayC' : cp.percent >= status.okay && cp.percent < status.good,
'negativeC' : cp.percent < status.okay,
- 'emptyCC' : cp.percent < status.zero }" routerLink="{{nextLink}}{{cp.contentId}}">{{cp.content.subject}}</mat-cell>
+ 'emptyCC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.content.subject}}</mat-cell>
</ng-container>
<ng-container matColumnDef="percentage">
@@ -23,16 +23,16 @@
'positiveC' : cp.percent >= status.good,
'okayC' : cp.percent >= status.okay && cp.percent < status.good,
'negativeC' : cp.percent < status.okay,
- 'emptyC' : cp.percent < status.zero }" routerLink="{{nextLink}}{{cp.contentId}}">{{cp.percent.toFixed() + ' %'}}</mat-cell>
+ 'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.percent.toFixed() + ' %'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="counts">
- <mat-header-cell *matHeaderCellDef> {{'statistic.total' | translate}} </mat-header-cell>
+ <mat-header-cell *matHeaderCellDef> {{'statistic.answers' | translate}} </mat-header-cell>
<mat-cell *matCellDef="let cp" [ngClass]="{
'positiveC' : cp.percent >= status.good,
'okayC' : cp.percent >= status.okay && cp.percent < status.good,
'negativeC' : cp.percent < status.okay,
- 'emptyC' : cp.percent < status.zero }" routerLink="{{nextLink}}{{cp.contentId}}">{{cp.counts}}</mat-cell>
+ 'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.counts}}</mat-cell>
</ng-container>
<ng-container matColumnDef="abstentions">
@@ -41,7 +41,7 @@
'positiveC' : cp.percent >= status.good,
'okayC' : cp.percent >= status.okay && cp.percent < status.good,
'negativeC' : cp.percent < status.okay,
- 'emptyC' : cp.percent < status.zero }" routerLink="{{nextLink}}{{cp.contentId}}">{{cp.abstentions}}</mat-cell>
+ 'emptyC' : cp.percent < status.zero }" (click)="goToStats(cp.contentId)">{{cp.abstentions}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index 4eb3b9569dc9022b60d757f5b555bf32f2bad35c..fba3ef597b72d78b67351919e6edaf288748d76a 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -2,14 +2,20 @@ table{
width: 100%;
}
+.mat-column-content {
+ min-width: 120px;
+ padding-left: 4%;
+}
+
.mat-column-percentage {
display: flex;
- justify-content: flex-end;
+ justify-content: center;
+ padding-right: 4%;
}
.mat-column-counts {
display: flex;
- justify-content: flex-end;
+ justify-content: center;
}
.mat-column-abstentions {
@@ -58,8 +64,10 @@ mat-toolbar {
.emptyC {
color: #E0E0E0;
background: #E0E0E0;
+ pointer-events: none;
}
.emptyCC {
background: #E0E0E0;
+ pointer-events: none;
}
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.ts b/src/app/components/shared/list-statistic/list-statistic.component.ts
index 50b29f527e3b346f72b5ff359fe60ebc45e2429c..96e86855ed0389800928201fb42048d1665f83c4 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.ts
+++ b/src/app/components/shared/list-statistic/list-statistic.component.ts
@@ -8,7 +8,7 @@ import { ContentChoice } from '../../../models/content-choice';
import { Combination } from '../../../models/round-statistics';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
import { AuthenticationService } from '../../../services/http/authentication.service';
import { UserRole } from '../../../models/user-roles.enum';
@@ -37,7 +37,7 @@ export class ListStatisticComponent implements OnInit {
@Input() contentGroup: ContentGroup;
contents: Content[] = [];
- displayedColumns = ['content', 'counts', 'abstentions', 'percentage'];
+ displayedColumns = ['content', 'counts', 'percentage'];
status = {
good: 85 ,
okay: 50 ,
@@ -45,14 +45,15 @@ export class ListStatisticComponent implements OnInit {
zero: 0
};
dataSource: ContentStatistic[];
- total = 0;
+ total: number;
totalP = 0;
contentCounter = 0;
roomId: number;
- nextLink: string;
+ baseUrl: string;
constructor(private contentService: ContentService,
private translateService: TranslateService,
+ private router: Router,
protected langService: LanguageService,
protected route: ActivatedRoute,
protected authService: AuthenticationService) {
@@ -62,16 +63,24 @@ export class ListStatisticComponent implements OnInit {
ngOnInit() {
this.route.params.subscribe(params => {
this.roomId = params['roomId'];
- if (this.authService.getRole() === UserRole.CREATOR) {
- this.nextLink = `/creator/room/${ this.roomId }/statistics/`;
- } else {
- this.nextLink = `/participant/room/${ this.roomId }/statistics/`;
- }
});
this.translateService.use(localStorage.getItem('currentLang'));
this.contentService.getContentChoiceByIds(this.contentGroup.contentIds).subscribe(contents => {
this.getData(contents);
});
+ this.getBaseUrl();
+ }
+
+ getBaseUrl() {
+ if (this.authService.getRole() === UserRole.CREATOR) {
+ this.baseUrl = `/creator/room/${ this.roomId }/statistics/`;
+ } else {
+ this.baseUrl = `/participant/room/${ this.roomId }/statistics/`;
+ }
+ }
+
+ goToStats(id: string) {
+ this.router.navigate([`${this.baseUrl}${id}`]);
}
getData(contents: ContentChoice[]) {
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index 483b2c167ec0d4784ee533323703e0d76d3d127f..8c6b346aaa2453d90096ed872084ac3b5e970427 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -21,6 +21,7 @@ import { StatisticComponent } from './statistic/statistic.component';
import { RoomJoinComponent } from './room-join/room-join.component';
import { RoomCreateComponent } from './_dialogs/room-create/room-create.component';
import { LoginComponent } from './login/login.component';
+import { StatisticHelpComponent } from './_dialogs/statistic-help/statistic-help.component';
@NgModule({
imports: [
@@ -48,7 +49,8 @@ import { LoginComponent } from './login/login.component';
ListStatisticComponent,
StatisticComponent,
RoomCreateComponent,
- LoginComponent
+ LoginComponent,
+ StatisticHelpComponent
],
exports: [
RoomJoinComponent,
@@ -69,7 +71,8 @@ import { LoginComponent } from './login/login.component';
],
entryComponents: [
RoomCreateComponent,
- LoginComponent
+ LoginComponent,
+ StatisticHelpComponent
]
})
export class SharedModule {
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 85692db5f8208f83765a932ddd975ff1b10eeaa9..29f1c1bef66ce5b7e6938e8b82e1c6445e08e207 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -1,22 +1,30 @@
-<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
- <mat-card>
- <mat-card-header>
- <h3>{{subject}}</h3>
- </mat-card-header>
- <mat-divider></mat-divider>
- <mat-toolbar></mat-toolbar>
- <div>
- <div style="position: relative; height: 60vh">
- <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-card>
+ <mat-card-header>
+ <mat-card-title>
+ <h4>{{subject}}</h4>
+ </mat-card-title>
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button (click)="switchAnswers()" color="primary">
+ <mat-icon>info</mat-icon>
+ </button>
+ </mat-card-header>
+ <mat-divider></mat-divider>
+ <mat-toolbar></mat-toolbar>
+ <div>
+ <div style="position: relative; height: 60vh">
+ <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+ </div>
+ </div>
+ <canvas id="chart"></canvas>
</div>
</div>
- <canvas id="chart"></canvas>
- </div>
+ <mat-list role="list">
+ <mat-list-item role="listitem" *ngFor="let a of answerList">{{a.label}} : {{a.answer}}</mat-list-item>
+ </mat-list>
+ </mat-card>
</div>
- <mat-list role="list">
- <mat-list-item role="listitem" *ngFor="let a of answerList">{{a.label}} : {{a.answer}}</mat-list-item>
- </mat-list>
-</mat-card>
</div>
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index ddfd27aad8ac32d45a79bc4cd4de6d85a7f61d26..3156b31d0798793fa142e1af5cbb837f94116da1 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -8,3 +8,16 @@ mat-toolbar {
height: 15px;
background-color: #fff8e1;
}
+
+.mat-icon-button {
+ width: 50px;
+ height: 50px;
+ margin-bottom: 10px;
+}
+
+mat-icon {
+ font-size: 40px;
+ height: 40px;
+ width: 40px;
+ line-height: 100%!important;
+}
diff --git a/src/app/components/shared/statistic/statistic.component.ts b/src/app/components/shared/statistic/statistic.component.ts
index 1b81eb3f75f91245011206cd2b7594a6873acc56..a41f01f6f4ff54ac335be9afd330cec4eebdc1cd 100644
--- a/src/app/components/shared/statistic/statistic.component.ts
+++ b/src/app/components/shared/statistic/statistic.component.ts
@@ -3,6 +3,8 @@ import { Chart } from 'chart.js';
import { ActivatedRoute } from '@angular/router';
import { ContentService } from '../../../services/http/content.service';
import { ContentChoice } from '../../../models/content-choice';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from '../../../services/util/language.service';
export class AnswerList {
label: string;
@@ -21,9 +23,10 @@ export class AnswerList {
})
export class StatisticComponent implements OnInit {
- chart = [];
- colors: string[] = ['rgba(33,150,243, 0.8)', 'rgba(76,175,80, 0.8)', 'rgba(255,235,59, 0.8)', 'rgba(244,67,54, 0.8)',
- 'rgba(96,125,139, 0.8)', 'rgba(63,81,181, 0.8)', 'rgba(233,30,99, 0.8)', 'rgba(121,85,72, 0.8)'];
+ chart = Chart;
+ colors: string[] = []; /* ['rgba(33,150,243, 0.8)', 'rgba(76,175,80, 0.8)', 'rgba(255,235,59, 0.8)', 'rgba(244,67,54, 0.8)',
+ 'rgba(96,125,139, 0.8)', 'rgba(63,81,181, 0.8)', 'rgba(233,30,99, 0.8)', 'rgba(121,85,72, 0.8)']; */
+ ccolors: string[] = [];
label = 'ABCDEFGH';
labels: string[]; // = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
answers: string[];
@@ -33,11 +36,17 @@ export class StatisticComponent implements OnInit {
subject: string;
maxLength: number;
isLoading = true;
+ showsCorrect = false;
constructor(protected route: ActivatedRoute,
- private contentService: ContentService) { }
+ private contentService: ContentService,
+ private translateService: TranslateService,
+ protected langService: LanguageService) {
+ langService.langEmitter.subscribe(lang => translateService.use(lang));
+ }
ngOnInit() {
+ this.translateService.use(localStorage.getItem('currentLang'));
this.maxLength = innerWidth / 12;
this.answers = new Array<string>();
this.labels = new Array<string>();
@@ -52,6 +61,55 @@ export class StatisticComponent implements OnInit {
});
}
+ createChart(colors: string[]) {
+ this.chart = new Chart('chart', {
+ type: 'bar',
+ data: {
+ labels: this.labels,
+ datasets: [{
+ data: this.data,
+ backgroundColor: colors
+ }]
+ },
+ options: {
+ legend: {
+ display: false
+ },
+ tooltips: {
+ mode: 'index'
+ },
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ precision: 0
+ }
+ }]
+ }
+ }
+ });
+ }
+
+ switchAnswers() {
+ if (this.showsCorrect === false) {
+ this.showCorrect();
+ } else {
+ this.showNormal();
+ }
+ }
+
+ showCorrect() {
+ this.createChart(this.ccolors);
+ this.showsCorrect = true;
+ }
+
+ showNormal() {
+ this.createChart(this.colors);
+ this.showsCorrect = false;
+ }
+
getData(content: ContentChoice) {
this.subject = content.subject;
const length = content.options.length;
@@ -64,34 +122,26 @@ export class StatisticComponent implements OnInit {
} else {
this.answerList[i].answer = content.options[i].label;
}
+ if (i % 2 === 0) {
+ this.colors[i] = 'rgba(255,224,130, 1.0)';
+ } else {
+ this.colors[i] = 'rgba(128,203,196, 1.0)';
+ }
+ if (content.options[i].points <= 0) {
+ this.ccolors[i] = 'rgba(244,67,54, 0.8)';
+ } else {
+ this.ccolors[i] = 'rgba(76,175,80, 0.8)';
+ }
}
+ this.ccolors.push('rgba(189,189,189, 0.8)');
+ this.colors.push('rgba(189,189,189, 0.8)');
+ this.translateService.get('statistic.abstentions').subscribe(label => {
+ this.labels.push(label);
+ });
this.contentService.getAnswer(content.id).subscribe(answer => {
this.data = answer.roundStatistics[0].independentCounts;
- this.chart = new Chart('chart', {
- type: 'bar',
- data: {
- labels: this.labels,
- datasets: [{
- data: this.data,
- backgroundColor: this.colors
- }]
- },
- options: {
- legend: {
- display: false
- },
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- yAxes: [{
- ticks: {
- beginAtZero: true,
- precision: 0
- }
- }]
- }
- }
- });
+ this.data.push(answer.roundStatistics[0].abstentionCount);
+ this.createChart(this.colors);
});
}
}
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.html b/src/app/components/shared/statistics-page/statistics-page.component.html
index 20e010b2df6105ef931bed68d1145f5364f323f7..7bda11622e03fcd706e558b2f3c49ec55ca57a1c 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.html
+++ b/src/app/components/shared/statistics-page/statistics-page.component.html
@@ -1,20 +1,24 @@
-<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
- <mat-card>
- <mat-card-header>
- <h2>{{'statistic.learning-status' | translate}}</h2>
- </mat-card-header>
- <mat-divider></mat-divider>
- <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
- </div>
- </div>
- <mat-tab-group>
- <mat-tab *ngFor="let cg of contentGroups; let i = index" label="{{cg.name}}">
- <div fxLayout="column" fxLayoutAlign="center">
- <app-list-statistic [contentGroup]="cg"></app-list-statistic>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-card>
+ <mat-card-header>
+ <h2>{{'statistic.learning-status' | translate}}</h2>
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button (click)="showHelp()"><mat-icon color="primary">help</mat-icon></button>
+ </mat-card-header>
+ <mat-divider></mat-divider>
+ <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-card>
+ </div>
+ <mat-tab-group>
+ <mat-tab *ngFor="let cg of contentGroups; let i = index" label="{{cg.name}}">
+ <div fxLayout="column" fxLayoutAlign="center">
+ <app-list-statistic [contentGroup]="cg"></app-list-statistic>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card>
+ </div>
</div>
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.ts b/src/app/components/shared/statistics-page/statistics-page.component.ts
index ae3b5bc181d4cfa1e1d01588c7eb7d13f3f5010d..2da2391fe1aba241b2d30926b1b1b503956f9d08 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.ts
+++ b/src/app/components/shared/statistics-page/statistics-page.component.ts
@@ -5,7 +5,8 @@ import { ContentGroup } from '../../../models/content-group';
import { Room } from '../../../models/room';
import { TranslateService } from '@ngx-translate/core';
import { LanguageService } from '../../../services/util/language.service';
-import { MatTabGroup } from '@angular/material';
+import { MatTabGroup, MatDialog } from '@angular/material';
+import { StatisticHelpComponent } from '../_dialogs/statistic-help/statistic-help.component';
@Component({
selector: 'app-statistics',
@@ -22,12 +23,12 @@ export class StatisticsPageComponent implements OnInit {
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
- constructor(
- private route: ActivatedRoute,
- private roomService: RoomService,
- private translateService: TranslateService,
- protected langService: LanguageService) {
- langService.langEmitter.subscribe(lang => translateService.use(lang));
+ constructor(private route: ActivatedRoute,
+ private roomService: RoomService,
+ private translateService: TranslateService,
+ protected langService: LanguageService,
+ public dialog: MatDialog) {
+ langService.langEmitter.subscribe(lang => translateService.use(lang));
}
ngOnInit(): void {
@@ -49,4 +50,10 @@ export class StatisticsPageComponent implements OnInit {
});
}
+ showHelp(): void {
+ this.dialog.open(StatisticHelpComponent, {
+ width: '350px'
+ });
+ }
+
}
diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json
index d068d2e1958b32642a3bffc0bf1a1e96def05fc5..50a38c3293698e6678d1a166839e1b98c5638724 100644
--- a/src/assets/i18n/creator/de.json
+++ b/src/assets/i18n/creator/de.json
@@ -67,7 +67,7 @@
"statistic": {
"content": "Frage",
"learning-status": "Lernstand",
- "total": "Total",
+ "answers": "Antworten",
"percentage": "Prozent",
"abstentions": "Enthaltungen"
}
diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json
index f808c42d83fdc855238855aefe09df95e2486849..aced53b9207ae5744d4d06c641553f1b0418a796 100644
--- a/src/assets/i18n/creator/en.json
+++ b/src/assets/i18n/creator/en.json
@@ -67,7 +67,7 @@
"statistic": {
"content": "Content",
"learning-status": "Learning status",
- "total": "Total",
+ "answers": "Answers",
"percentage": "Percentage",
"abstentions": "Abstentions"
}
diff --git a/src/assets/i18n/participant/de.json b/src/assets/i18n/participant/de.json
index 586747705b5f9b49495791af8eb39b537a4a9ade..51b8e72be48f8b583968af1e693dc50b3a6c9cae 100644
--- a/src/assets/i18n/participant/de.json
+++ b/src/assets/i18n/participant/de.json
@@ -32,7 +32,7 @@
"statistic": {
"content": "Frage",
"learning-status": "Lernstand",
- "total": "Total",
+ "answers": "Antworten",
"percentage": "Prozent",
"abstentions": "Enthaltungen"
}
diff --git a/src/assets/i18n/participant/en.json b/src/assets/i18n/participant/en.json
index fae2f848b46f21129afff61795c0ac1944eb80ef..712c7e5ace1aaaf02f5ae5b895354274734169ff 100644
--- a/src/assets/i18n/participant/en.json
+++ b/src/assets/i18n/participant/en.json
@@ -32,7 +32,7 @@
"statistic": {
"content": "Content",
"learning-status": "Learning status",
- "total": "Total",
+ "answers": "Answers",
"percentage": "Percentage",
"abstentions": "Abstentions"
}
diff --git a/src/theme/_form.scss b/src/theme/_form.scss
index f5f588442e654e3cd2205aeb2b067db3db7bd418..25c4c8d605fcc88327bdcd7bfb355f71f8ee189c 100644
--- a/src/theme/_form.scss
+++ b/src/theme/_form.scss
@@ -9,3 +9,7 @@ mat-form-field.input-block {
.mat-dialog-container {
background-color: #e0f2f1;
}
+
+.mat-tab-header {
+ border-bottom-style: none!important;
+}