SKE-64 solve competition component

SystemKonkursow/4.2.1/angular/src/app/competition-detail/competition-detail.component.css

@@ -17,3 +17,30 @@ hr {
 .section-color{
     color: #771111;
 }
+
+.badge {
+    border-radius: 10px;
+    background-color: #359088;
+}
+
+.option {
+    background-color: #cadaee;
+    font-size: 20px;
+    padding: 10px;
+    margin: 3px;
+}
+
+.option-size {
+    font-size: 18px;
+}
+
+.btn {
+    border-radius: 0;
+    margin: 6px;
+}
+
+.result-question {
+    background-color: #eee;
+    margin: 4px;
+    padding: 6px;
+}

SystemKonkursow/4.2.1/angular/src/app/competition-detail/competition-detail.component.html

@@ -11,5 +11,52 @@
             {{l("Start")}}
         </button>
         <hr />
+
+        <div *ngIf="mode==='quiz'">
+            <div *ngFor="let question of filteredQuestions">
+                <div class="badge">Pytanie {{pager.index + 1}}/{{pager.count}}</div>
+                <h3 class="font-weight-normal">{{pager.index + 1}}.
+                    <span [innerHTML]="question.name"></span>
+                </h3>
+                <div class="row">
+                    <div *ngFor="let option of question.questionOptions">
+                        <div class="option">
+                            <input type="checkbox" [(ngModel)]="option.selected" id="{{option.id}}" (change)="onSelect(question, option)" class="filled-in chk-col-blue">
+                            <label class="option-size" for="{{option.id}}">{{option.name}}</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <hr />
+
+            <div class="text-center">
+                <button class="btn btn-default" (click)="goTo(0);">Pierwsza</button>
+                <button class="btn btn-default" (click)="goTo(pager.index - 1);">Poprzednia</button>
+                <button class="btn btn-primary" (click)="goTo(pager.index + 1);">Następna</button>
+                <button class="btn btn-default" (click)="goTo(pager.count - 1);">Ostatnia</button>
+            </div>
+
+            <div>
+                <button class="btn btn-primary" (click)="onSubmit()">Zatwierdź rozwiązanie</button>
+            </div>
+        </div>
+
+        <div *ngIf="mode==='result'">
+            <h2>Twoje odpowiedzi</h2>
+            <div *ngFor="let question of competition.questions; let index = index">
+                <div class="result-question">
+                    <h5>{{index + 1}}. {{question.name}}</h5>
+                    <div class="row">
+                        <div *ngFor="let option of question.questionOptions">
+                            <input type="checkbox" [(ngModel)]="option.selected" id="{{option.id}}" disabled="true">
+                            <label class="option-size" for="{{option.id}}">{{option.name}}</label>
+                        </div>
+                    </div>
+                    <div class="p-1 m-2 alert {{ isCorrect(question) === 'poprawna' ? 'alert-success' : 'alert-danger'}}">Twoja odpowiedź jest {{isCorrect(question)}}.</div>
+                </div>
+            </div>
+        </div>
+
     </div>
 </div>

SystemKonkursow/4.2.1/angular/src/app/competition-detail/competition-detail.component.ts

@@ -5,7 +5,10 @@ import { Subscription } from 'rxjs/Rx';
 import { ActivatedRoute } from '@angular/router';
 import { mergeMap } from 'rxjs/operators';
 import { finalize } from 'rxjs/operators';
-import { CompetitionServiceProxy, CompetitionDto } from '@shared/service-proxies/service-proxies';
+import { CompetitionServiceProxy, 
+    CompetitionDto, 
+    QuestionDto, 
+    QuestionOptionDto } from '@shared/service-proxies/service-proxies';
 
 @Component({
     templateUrl: './competition-detail.component.html',
@@ -22,6 +25,12 @@ export class CompetitionDetailComponent extends AppComponentBase implements OnIn
 
     public mode = 'detail';
 
+    public pager = {
+        index: 0,
+        size: 1,
+        count: 1
+    };
+
     constructor(
         injector: Injector,
         private route: ActivatedRoute,
@@ -47,15 +56,66 @@ export class CompetitionDetailComponent extends AppComponentBase implements OnIn
                 return competitionDetailStream
             })).subscribe((result: CompetitionDto) => {
                 this.competition = result;
+                this.competition.questions.forEach((x) => this.shuffleOptions(x.questionOptions));
+                this.pager.count = this.competition.questions.length;
                 console.log(this.competition);
             });
     }
 
+    private shuffleOptions(array) {
+        let currentIndex = array.length, temp, randomIndex;
+    
+        while (0 !== currentIndex) {
+            randomIndex = Math.floor(Math.random() * currentIndex);
+            currentIndex -= 1;
+    
+            temp = array[currentIndex];
+            array[currentIndex] = array[randomIndex];
+            array[randomIndex] = temp;
+        }
+
+        return array;
+    }
+
     public solveCompetition(): void {
         console.log('Solve Competition');
         this.mode = 'quiz';
     }
 
+    get filteredQuestions() {
+        return (this.competition.questions) ?
+            this.competition.questions.slice(this.pager.index, this.pager.index + this.pager.size) : [];
+    }
+
+    public onSelect(question: QuestionDto, option: QuestionOptionDto) {
+        question.questionOptions.forEach((x) => { if (x.id !== option.id) x.selected = false; });
+        console.log(question);
+    }
+
+    public goTo(index: number) {
+        if (index >= 0 && index < this.pager.count) {
+            this.pager.index = index;
+            this.mode = 'quiz';
+        }
+    }
+
+    public isCorrect(question: QuestionDto) {
+        return question.questionOptions.every(x => x.selected === x.isAnswer) ? 'poprawna' : 'niepoprawna';
+    }
+
+    public onSubmit() {
+        let points: number = 0;
+        this.competition.questions.forEach(
+            (x) => { 
+                if (x.questionOptions.every(
+            (y) => y.selected === y.isAnswer)
+            ) points += 1; 
+        });
+
+        console.log('Punkty: ' + points);
+        this.mode = 'result';
+    }
+
     public ngOnDestroy() {
         if (this.paramSubscription) {
             this.paramSubscription.unsubscribe();

SystemKonkursow/4.2.1/angular/src/shared/service-proxies/service-proxies.ts

@@ -2398,6 +2398,7 @@ export class QuestionOptionDto implements IQuestionOptionDto {
     name: string | undefined;
     questionId: number | undefined;
     isAnswer: boolean | undefined;
+    selected: boolean | undefined;
     id: number | undefined;
 
     constructor(data?: IQuestionOptionDto) {
@@ -2414,6 +2415,7 @@ export class QuestionOptionDto implements IQuestionOptionDto {
             this.name = data["name"];
             this.questionId = data["questionId"];
             this.isAnswer = data["isAnswer"];
+            this.selected = data["selected"];
             this.id = data["id"];
         }
     }
@@ -2430,6 +2432,7 @@ export class QuestionOptionDto implements IQuestionOptionDto {
         data["name"] = this.name;
         data["questionId"] = this.questionId;
         data["isAnswer"] = this.isAnswer;
+        data["selected"] = this.selected;
         data["id"] = this.id;
         return data; 
     }
@@ -2446,6 +2449,7 @@ export interface IQuestionOptionDto {
     name: string | undefined;
     questionId: number | undefined;
     isAnswer: boolean | undefined;
+    selected: boolean | undefined;
     id: number | undefined;
 }
 

SystemKonkursow/4.2.1/aspnet-core/src/SystemKonkursow.Application/Competition/CompetitionCategory/CompetitionAppService.cs

@@ -105,6 +105,14 @@ namespace SystemKonkursow.Competition.CompetitionCategory
 
             var mappedObject = ObjectMapper.Map<CompetitionDto>(competition);
 
+            foreach (var question in mappedObject.Questions)
+            {
+                foreach (var option in question.QuestionOptions)
+                {
+                    option.Selected = false;
+                }
+            }
+
             return mappedObject;
         }
 

SystemKonkursow/4.2.1/aspnet-core/src/SystemKonkursow.Application/Competition/CompetitionCategory/Dto/QuestionOptionDto.cs

@@ -9,5 +9,7 @@ namespace SystemKonkursow.Competition.CompetitionCategory.Dto
         public int QuestionId { get; set; }
 
         public bool IsAnswer { get; set; }
+
+        public bool Selected { get; set; }
     }
 }