versie 1.3.0 - the 'feel' update
This commit is contained in:
Mel M. van Veen
31
src/app/current-score/current-score.component.css
Normal file
31
src/app/current-score/current-score.component.css
Normal file
@@ -0,0 +1,31 @@
|
||||
/* Algemene stijl voor de game-container */
|
||||
.game-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* Verticaal centreren */
|
||||
align-items: center; /* Horizontaal centreren */
|
||||
height: 100vh; /* Volledige hoogte van het scherm */
|
||||
padding: 20px;
|
||||
max-width: 600px; /* Maximaliseer de breedte van de container */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button{
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
background-color: #ff561e;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-weight: bold;
|
||||
}
|
||||
6
src/app/current-score/current-score.component.html
Normal file
6
src/app/current-score/current-score.component.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="game-container ">
|
||||
<h2>Ronde {{round}}</h2>
|
||||
|
||||
<h4>Tussenstand: {{localStorage.getItem('score')}}/{{round}}0</h4>
|
||||
<button><a href="#/start">Volgende ronde</a></button>
|
||||
</div>
|
||||
23
src/app/current-score/current-score.component.spec.ts
Normal file
23
src/app/current-score/current-score.component.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CurrentScoreComponent } from './current-score.component';
|
||||
|
||||
describe('CurrentScoreComponent', () => {
|
||||
let component: CurrentScoreComponent;
|
||||
let fixture: ComponentFixture<CurrentScoreComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CurrentScoreComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CurrentScoreComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
17
src/app/current-score/current-score.component.ts
Normal file
17
src/app/current-score/current-score.component.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-current-score',
|
||||
imports: [],
|
||||
templateUrl: './current-score.component.html',
|
||||
styleUrl: './current-score.component.css'
|
||||
})
|
||||
export class CurrentScoreComponent implements OnInit{
|
||||
round: string;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.round = localStorage.getItem('question')[0]
|
||||
}
|
||||
|
||||
protected readonly localStorage = localStorage;
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
<h2 (click)="easterEgg()">Je cijfer is: {{ calculatedScore }}</h2>
|
||||
<h4>{{scoreMessage}}</h4>
|
||||
<br>
|
||||
<h4>Aantal vragen goed: {{localStorage.getItem('score')}}/50</h4>
|
||||
<h5>Aantal vragen goed: {{localStorage.getItem('score')}}/50</h5>
|
||||
</div>
|
||||
|
||||
<a href="#" (click)="resetGame()"><button>Spel opnieuw spelen</button></a>
|
||||
|
||||
@@ -75,7 +75,6 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.left-column, .right-column {
|
||||
|
||||
@@ -1,160 +1,158 @@
|
||||
<app-menu></app-menu>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 0 && !confirmed">
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Kies de soort vraag:</p>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button (click)="setQuestionType(1)">Meerkeuze</button>
|
||||
<button (click)="setQuestionType(2)">Volgorde</button>
|
||||
<button (click)="setQuestionType(3)">Waar / Niet Waar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 1 && !confirmed">
|
||||
<div class="backButton">
|
||||
<a (click)="currentQuestion.type = 0">← Vorige</a>
|
||||
</div>
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Kies het antwoord: </p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button *ngFor="let item of multipleChoices"
|
||||
[class.selected]="item.selected"
|
||||
(click)="toggleChoice(item.choice)">
|
||||
{{ item.choice }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons-confirm">
|
||||
<button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 2 && !confirmed">
|
||||
<div class="backButton">
|
||||
<a (click)="currentQuestion.type = 0">← Vorige</a>
|
||||
</div>
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="drag-and-drop-container">
|
||||
<div id="left" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of leftButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 0 && !confirmed">
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div id="right" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of rightButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons-confirm">
|
||||
<button (click)="confirmAnswer()">Bevestigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 3 && !confirmed">
|
||||
<div class="backButton">
|
||||
<a (click)="currentQuestion.type = 0">← Vorige</a>
|
||||
</div>
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Kies het antwoord: </p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button *ngFor="let item of trueFalseChoices"
|
||||
[class.selected]="item.selected"
|
||||
(click)="toggleChoiceTrueOrFalse(item.choice)">
|
||||
{{ item.choice }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons-confirm">
|
||||
<button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="(currentQuestion.type == 1 || currentQuestion.type == 3) && confirmed">
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Gekozen antwoord: {{ answer.toString() }} </p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Klopt het antwoord?</p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button (click)="isAnswerCorrect(true)">Ja</button>
|
||||
<button (click)="isAnswerCorrect(false)">Nee</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 2 && confirmed">
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Gekozen antwoord:</p>
|
||||
</div>
|
||||
|
||||
<div class="drag-and-drop-container">
|
||||
<div id="leftConfirmed" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of leftButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div class="question-type">
|
||||
<p>Kies de soort vraag:</p>
|
||||
</div>
|
||||
|
||||
<div id="rightConfirmed" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of rightButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button (click)="setQuestionType(1)">Meerkeuze</button>
|
||||
<button (click)="setQuestionType(2)">Volgorde</button>
|
||||
<button (click)="setQuestionType(3)">Waar / Niet Waar</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-type">
|
||||
<p>Klopt het antwoord?</p>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 1 && !confirmed">
|
||||
<div class="backButton">
|
||||
<a (click)="currentQuestion.type = 0">← Vorige</a>
|
||||
</div>
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Kies het antwoord: </p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button *ngFor="let item of multipleChoices"
|
||||
[class.selected]="item.selected"
|
||||
(click)="toggleChoice(item.choice)">
|
||||
{{ item.choice }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons-confirm">
|
||||
<button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button (click)="isAnswerCorrect(true)">Ja</button>
|
||||
<button (click)="isAnswerCorrect(false)">Nee</button>
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 2 && !confirmed">
|
||||
<div class="backButton">
|
||||
<a (click)="currentQuestion.type = 0">← Vorige</a>
|
||||
</div>
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="drag-and-drop-container">
|
||||
<div id="left" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of leftButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="right" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of rightButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons-confirm">
|
||||
<button (click)="confirmAnswer()">Bevestigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 3 && !confirmed">
|
||||
<div class="backButton">
|
||||
<a (click)="currentQuestion.type = 0">← Vorige</a>
|
||||
</div>
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Kies het antwoord: </p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button *ngFor="let item of trueFalseChoices"
|
||||
[class.selected]="item.selected"
|
||||
(click)="toggleChoiceTrueOrFalse(item.choice)">
|
||||
{{ item.choice }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons-confirm">
|
||||
<button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="(currentQuestion.type == 1 || currentQuestion.type == 3) && confirmed">
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Gekozen antwoord: {{ answer.toString() }} </p>
|
||||
</div>
|
||||
|
||||
<div class="question-type">
|
||||
<p>Klopt het antwoord?</p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button (click)="isAnswerCorrect(true)">Ja</button>
|
||||
<button (click)="isAnswerCorrect(false)">Nee</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-container" *ngIf="currentQuestion.type == 2 && confirmed">
|
||||
<div class="question">
|
||||
<p>Vraag {{ localStorage.getItem('question') }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Gekozen antwoord:</p>
|
||||
</div>
|
||||
|
||||
<div class="drag-and-drop-container">
|
||||
<div id="leftConfirmed" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of leftButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rightConfirmed" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
|
||||
<div *ngFor="let item of rightButtons; let i = index"
|
||||
cdkDrag
|
||||
[cdkDragData]="item"
|
||||
class="draggable-button">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-type">
|
||||
<p>Klopt het antwoord?</p>
|
||||
</div>
|
||||
|
||||
<div class="buttons-questions">
|
||||
<button (click)="isAnswerCorrect(true)">Ja</button>
|
||||
<button (click)="isAnswerCorrect(false)">Nee</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -95,6 +95,9 @@ export class GameComponent implements OnInit {
|
||||
|
||||
let question = +localStorage.getItem('question')
|
||||
if (question < 50){
|
||||
if (question % 10 == 0){
|
||||
this.router.navigate(['currentScore'])
|
||||
}
|
||||
this.confirmed = false
|
||||
this.setNewQuestion()
|
||||
this.resetAnswer()
|
||||
|
||||
@@ -25,6 +25,7 @@ body, html {
|
||||
|
||||
.form {
|
||||
text-align: right;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.form p {
|
||||
@@ -53,10 +54,64 @@ button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
background-color: #cccccc;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #ff561e;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.input-container input[type="text"] {
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 2px solid #ccc;
|
||||
padding: 5px 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-container .label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #ccc;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-container input[type="text"]:focus ~ .label,
|
||||
.input-container input[type="text"]:valid ~ .label {
|
||||
top: -20px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-container .underline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
transform: scaleX(0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-container input[type="text"]:focus ~ .underline,
|
||||
.input-container input[type="text"]:valid ~ .underline {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
|
||||
@@ -2,10 +2,15 @@
|
||||
<div class="logo">
|
||||
<img src="Logo.png" alt="Logo">
|
||||
</div>
|
||||
<h2>Weet ik Veel</h2>
|
||||
<div class="form" [formGroup]="form">
|
||||
<p>Voer hier je naam in om te beginnen</p>
|
||||
<input type="text" placeholder="Naam" formControlName="naam">
|
||||
<button (click)="start()">Beginnen</button>
|
||||
<div class="input-container">
|
||||
<input type="text" id="naam" formControlName="naam" required="">
|
||||
<label for="naam" class="label">Naam</label>
|
||||
<div class="underline"></div>
|
||||
</div>
|
||||
<button (click)="start()" [disabled]="form.get('naam').value == '' ">Beginnen</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="localStorage.getItem('name') != undefined">
|
||||
|
||||
Reference in New Issue
Block a user