Kinda working BioTrivia v2
This commit is contained in:
Kaloian Venkov
parent
a5fd7f49c7
commit
3f6b6a10ef
@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
|
||||
import {
|
||||
IgxButtonModule,
|
||||
IgxIconModule,
|
||||
IgxProgressBarModule,
|
||||
IgxRadioModule,
|
||||
IgxRippleModule,
|
||||
} from 'igniteui-angular';
|
||||
@ -18,6 +19,7 @@ import { DashboardMinigamesComponent } from './dashboard-minigames/dashboard-min
|
||||
import { MinigameCardComponent } from './minigame-card/minigame-card.component';
|
||||
import { MinigameConveyorRecyclingComponent } from './minigame-conveyor-recycling/minigame-conveyor-recycling.component';
|
||||
import { MinigameBiotriviaComponent } from './minigame-biotrivia/minigame-biotrivia.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -40,6 +42,7 @@ import { MinigameBiotriviaComponent } from './minigame-biotrivia/minigame-biotri
|
||||
IgxRippleModule,
|
||||
IgxIconModule,
|
||||
IgxRadioModule,
|
||||
IgxProgressBarModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
||||
@ -131,7 +131,7 @@ export class DbService {
|
||||
imageUrl: '/assets/images/cards/sinkit2.jpg',
|
||||
info: [
|
||||
{
|
||||
content: 'Езикът на кита тежи около 4,7 тона. (почти колкото митко и майка му)',
|
||||
content: 'Езикът на кита тежи около 4,7 тона',
|
||||
heading: 'Интересно'
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,21 +1,39 @@
|
||||
<div class="container">
|
||||
<div class="start-dialog dialog" *ngIf="stage === 'starting' || stage === 'starting-ongoing'" #startDialog>
|
||||
<h4>Пробвай познанията си за екология</h4>
|
||||
<h4>Пробвай познанията си по екология</h4>
|
||||
<p>
|
||||
В тази викторина ще има 5 въпроса, които ще тестват вашите познания по екология.
|
||||
Накрая, в зависимост от познатите отговори, ще получите по-рядка карта или
|
||||
по-обикновена карта</p>
|
||||
<button igxButton igxRipple (click)="startGame()">Продължи към играта</button>
|
||||
<div class="separator"></div>
|
||||
<button igxButton igxRipple routerLink="" >Върни се в началния екран</button>
|
||||
<button igxButton igxRipple routerLink="">Върни се в началния екран</button>
|
||||
</div>
|
||||
<div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing'" #ongoingDialog style="opacity: 0;">
|
||||
<div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing' || stage === 'ongoing-ended'" #ongoingDialog
|
||||
style="opacity: 0;">
|
||||
<igx-linear-bar [max]="questions.length" [value]="currQuestionN - 1" class="progress"></igx-linear-bar>
|
||||
<h6>{{currQuestion.question}}</h6>
|
||||
|
||||
<igx-radio-group #choise>
|
||||
<igx-radio [(ngModel)]="selected" *ngFor="let choise of currAnswers" name="choise">{{choise}}</igx-radio>
|
||||
</igx-radio-group>
|
||||
<div style="color: red;" *ngIf="displayError">Нужен е отговор, за да продължите</div>
|
||||
|
||||
<button igxButton igxRipple ></button>
|
||||
|
||||
<igx-radio *ngFor="let choise of currAnswers" name="choise" value="{{choise}}"
|
||||
[checked]="selectedAnswer === choise" (change)="selectedAnswer = choise" [required]="true">{{choise}}
|
||||
</igx-radio>
|
||||
<button igxButton igxRipple (click)=" submitAnswer()">Следващ въпрос</button>
|
||||
</div>
|
||||
<div class="question dialog" style="opacity: 0;" *ngIf="stage === 'ended' || stage === 'ongoing-ended'" #endDialog>
|
||||
<h4>Завършихте викторината</h4>
|
||||
Верни отговори:
|
||||
<igx-linear-bar [max]="questions.length" [value]="guessedQuestions"></igx-linear-bar>
|
||||
<div *ngIf="guessedQuestions < questions.length">
|
||||
<h6>Грешни отговори</h6>
|
||||
<div *ngFor="let answer of getIncorrectAnswers()">
|
||||
<b>{{answer.question.question}}</b><br>
|
||||
Вашият отговор: {{answer.answer}}
|
||||
Правилен отговор: {{answer.question.answer.correctChoise}}
|
||||
</div>
|
||||
</div>
|
||||
<button igxButton igxRipple routerLink="">Върни се в началния екран</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -11,6 +11,7 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
.dialog {
|
||||
overflow: hidden;
|
||||
width: 600px;
|
||||
padding: 2em;
|
||||
box-sizing: border-box;
|
||||
@ -21,7 +22,7 @@
|
||||
}
|
||||
h4 {
|
||||
text-align: center;
|
||||
margin: 0 2em;
|
||||
margin: 0 1em;
|
||||
}
|
||||
h6 {
|
||||
text-align: center;
|
||||
@ -40,4 +41,10 @@
|
||||
margin: .25em;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,7 @@ export class MinigameBiotriviaComponent implements OnInit {
|
||||
currQuestion: Question;
|
||||
currAnswers: string[];
|
||||
|
||||
previousAnswers: Array<{ question: Question, answer: string }> = [];
|
||||
answers: Array<{ question: Question, answer: string }> = [];
|
||||
|
||||
selectedAnswer = '';
|
||||
isAnswered(): boolean {
|
||||
@ -48,9 +48,10 @@ export class MinigameBiotriviaComponent implements OnInit {
|
||||
|
||||
if (this.selectedAnswer === this.currQuestion.answer.correctChoise) this.guessedQuestions++;
|
||||
|
||||
this.previousAnswers.push({
|
||||
answer: ''
|
||||
})
|
||||
this.answers.push({
|
||||
answer: this.selectedAnswer,
|
||||
question: this.currQuestion,
|
||||
});
|
||||
|
||||
if (this.currQuestionN >= this.questions.length) {
|
||||
this.stage = 'ongoing-ended';
|
||||
@ -158,4 +159,8 @@ export class MinigameBiotriviaComponent implements OnInit {
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
getIncorrectAnswers(): { question: Question, answer: string }[] {
|
||||
return this.answers.filter(v => v.answer === v.question.answer.correctChoise);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user