s416178
/
Punktonerzy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Wygląd wszystkich typów pytań w rozwiązywanym teście

This commit is contained in:
s416122 2019-12-11 20:56:24 +01:00
parent a4eef5628d
commit 6df997e287
15 changed files with 297 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
FrontEnd/.angulardoc.json Normal file
View File

@ -0,0 +1,4 @@
{
"repoId": "51789675-24f3-468d-a696-09187b48c708",
"lastSync": 0
}

2
FrontEnd/src/app/main-navigation/main-navigation.component.css
View File

@ -49,7 +49,7 @@
a {
color: white;
font-size: 1.25rem;
font-size: x-large;
padding: 0px 10px;
cursor: pointer;
}

46
FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.css
View File

@ -1,11 +1,45 @@
.answers{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.pytanie
{
background-color: white;
color: black;
width: 50%;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
font-size: larger;
margin-bottom: 70px;;
}
span
{
font-size: x-large;
}
.answers > div{
margin: 5px;
}
}
.button:focus
{
background-color: orange;
border: 2px solid orange;
}
.button
{
border: 2px solid #000080;
}
.button:hover
{
border: 2px solid orange;
}

7
FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.html
View File

@ -1,13 +1,14 @@
<form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
<div class="alert alert-grey question">
{{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<div class="pytanie">{{question.question}} </div>
<div class="answers">
<div *ngFor="let item of question.answers">
<span *ngIf="!item.is_gap">{{item.content}}</span>
<input *ngIf="item.is_gap" class="form-control" type="text" [name]="item.id" ngModel />
<input *ngIf="item.is_gap" class="button" type="text" [name]="item.id" ngModel />
</div>
</div>
</div>
<button class="btn btn-study-cave" type="submit"><i class="fas fa-arrow-right"></i> Dalej</button>
</form>
</form>

74
FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.css
View File

@ -1,6 +1,70 @@
.answers{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.pytanie
{
background-color: white;
color: black;
width: 50%;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
font-size: larger;
margin-bottom: 70px;
}
.radio-answer
{
display: none;
}
label
{
clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
background-color: #000080;
width: 300px;
text-align: center;
border: 3px solid #000080;
border-bottom: #000080;
color: white;
cursor: pointer;
margin-top:10px;
font-size: x-large;
}
label:hover
{
background-color: orange;
border-color: orange;
}
.radio-answer:checked + label
{
background-color: orange;
border-color: orange;
}
@media screen and (max-width: 800px) {
label
{
width: 254px;
}
.pytanie
{
width: 100%;
}
.alert-grey
{
background-color: #181616;
}
}

7
FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.html
View File

@ -1,12 +1,13 @@
<form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
<div class="alert alert-grey question">
{{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<div class="pytanie">{{question.question}} </div>
<div class="answers">
<div *ngFor="let item of question.answers">
<input type="checkbox" [name]="item.id" [value]="item" ngModel /> {{item.content}}
<input type="checkbox" [name]="item.id" id="{{item.content}}" class="radio-answer" [value]="item" ngModel /> <label for="{{item.content}}"> {{item.content}} </label>
</div>
</div>
</div>
<button class="btn btn-study-cave" type="submit"><i class="fas fa-arrow-right"></i> Dalej</button>
</form>
</form>

53
FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.css
View File

@ -1,49 +1,80 @@
.puzzle{
display: flex;
min-height: 50px;
min-width: 100px;
background-color: rgb(206, 168, 86);
align-items: center;
justify-content: center;
margin: 5px 0 5px 5px;
color: black;
color: white;
cursor: pointer;
clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
background-color: #000080;
width: 300px;
text-align: center;
border: 3px solid #000080;
}
.puzzle:hover
{
background-color: orange;
border: 2px solid orange;
}
.puzzle-right{
display: flex;
min-height: 50px;
min-width: 100px;
background-color: rgb(202, 144, 17);
width: 300px;
background-color: orange;
color: black;
align-items: center;
justify-content: center;
margin: 5px 5px 5px 0;
clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
border: 2px solid orange;
}
.both-sides{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
text-align: right;
}
.puzzle:hover{
border: 3px solid gray;
}
.active{
border: 3px solid white;
border: 3px solid orange;
background-color: orange;
}
.puzzles-container{
display: flex;
flex-direction: row;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
float: left;
}
span
{
font-size: x-large;
}
.empty{
background-color: gray;
cursor: not-allowed;
border: 2px solid gray;
}
.pytanie
{
background-color: white;
color: black;
width: 50%;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
font-size: larger;
margin-bottom: 70px;
}

15
FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.html
View File

@ -1,13 +1,12 @@
<div>
{{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<h3>Dostępne lewe strony:</h3>
<div class="puzzles-container">
Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<div class="pytanie">{{question.question}} </div>
<div class="puzzles-container" style="width: 30%;">
<div class='puzzle' *ngFor="let item of leftSides; let i = index" (click)="leftSideClick(item,i)" [ngClass]="{'active': (selectedLeftSide.leftSideText === item && selectedLeftSide.indexOfLeftSide === i && selectedLeftSide.from === 'leftSides'), 'empty': (item === undefined || item === '')}">
<span>{{item}}</span>
</div>
</div>
<h3>Twoja odpowiedź:</h3>
<div class="puzzles-container">
<div class="puzzles-container" style="margin-left: 300px;">
<div *ngFor="let item of leftSidesToSend; let i = index" class="both-sides">
<div class='puzzle' (click)="leftSideToSendClick(item,i)" [ngClass]="{'active': (selectedLeftSide.leftSideText === item && selectedLeftSide.indexOfLeftSide === i && selectedLeftSide.from === 'leftSidesToSend')}">
<span>{{item}}</span>
@ -19,5 +18,7 @@
</div>
<br />
<button class="btn btn-study-cave" (click)="nextQuestion()"><i class="fas fa-arrow-right"></i> Dalej</button>
</div>
</div>
<div style="clear: both; margin-bottom: 100px;"></div>
<button class="btn btn-study-cave" (click)="nextQuestion()" s><i class="fas fa-arrow-right"></i> Dalej</button>

49
FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.css
View File

@ -1,26 +1,51 @@
.puzzle{
display: flex;
min-height: 50px;
min-width: 100px;
color: black;
background-color: rgb(206, 168, 86);
color: white;
align-items: center;
justify-content: center;
margin: 5px;
cursor: pointer;
clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
background-color: #000080;
width: 300px;
text-align: center;
border: 3px solid #000080;
}
.puzzle:hover{
border: 3px solid gray;
.puzzle:hover
{
background-color: orange;
border: 2px solid orange;
}
.active{
border: 3px solid white;
span
{
font-size: x-large;
}
.pytanie
{
background-color: white;
color: black;
width: 50%;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
font-size: larger;
margin-bottom: 70px;
}
.active
{
background-color: orange;
border-color: orange;
}
.puzzles-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@ -28,5 +53,11 @@
.empty{
background-color: gray;
border-color: gray;
cursor: not-allowed;
}
}
h3
{
margin-top: 100px;
}

7
FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.html
View File

@ -1,6 +1,7 @@
<div>
{{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<h3>Dostępne elementy rozsypanki:</h3>
Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<div class="pytanie">{{question.question}} </div>
<h3>Dostępne elementy rozsypanki:</h3>
<div class="puzzles-container">
<div class='puzzle' *ngFor="let item of puzzles; let i = index" (click)="puzzleClick(item,i)" [ngClass]="{'active': (selectedPuzzle.puzzleText === item && selectedPuzzle.indexOfPuzzle === i && selectedPuzzle.from === 'puzzles'), 'empty': (item === undefined || item === '')}">
<span>{{item}}</span>
@ -14,4 +15,4 @@
</div>
<br />
<button class="btn btn-study-cave" (click)="nextQuestion()"><i class="fas fa-arrow-right"></i> Dalej</button>
</div>
</div>

4
FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css
View File

@ -15,7 +15,7 @@
margin-right: auto;
border: 10px solid white;
font-size: larger;
margin-bottom: 70px;
}
@ -37,7 +37,7 @@ label
color: white;
cursor: pointer;
margin-top:10px;
font-size: large;
font-size: x-large;
}
label:hover

77
FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.css
View File

@ -1,17 +1,70 @@
.question{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.answers{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
label{
margin: 0;
.pytanie
{
background-color: white;
color: black;
width: 50%;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
font-size: larger;
margin-bottom: 70px;
}
.radio-answer
{
display: none;
}
label
{
clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
background-color: #000080;
width: 300px;
text-align: center;
border: 3px solid #000080;
border-bottom: #000080;
color: white;
cursor: pointer;
margin-top:10px;
font-size: x-large;
}
label:hover
{
background-color: orange;
border-color: orange;
}
.radio-answer:checked + label
{
background-color: orange;
border-color: orange;
}
@media screen and (max-width: 800px) {
.question{
display: block;
}
}
label
{
width: 254px;
}
.pytanie
{
width: 100%;
}
.alert-grey
{
background-color: #181616;
}
}

20
FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.html
View File

@ -1,14 +1,14 @@
<div class="alert alert-grey question">
{{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-study-cave mr-2" (click)="chooseAnswer('Prawda')">
<input type="radio" name="options" id="option1" autocomplete="off"> Prawda
</label>
<label class="btn btn-study-cave" (click)="chooseAnswer('Fałsz')">
<input type="radio" name="options" id="option2" autocomplete="off"> Fałsz
</label>
Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
<div class="pytanie">{{question.question}} </div>
<div class="answers" >
<div (click)="chooseAnswer('Prawda')">
<input type="radio" name="options" id="option1" class="radio-answer" autocomplete="off"><label for="option1">Prawda</label>
</div>
<div (click)="chooseAnswer('Fałsz')">
<input type="radio" name="options" id="option2" class="radio-answer" autocomplete="off"> <label for="option2">Fałsz</label>
</div>
</div>
</div>
<button class="btn btn-study-cave" (click)="nextQuestion()"><i class="fas fa-arrow-right"></i> Dalej</button>
<button class="btn btn-study-cave" (click)="nextQuestion()"><i class="fas fa-arrow-right"></i> Dalej</button>

2
FrontEnd/src/index.html
View File

@ -7,7 +7,7 @@
<!-- <script>document.write('<base href="' + document.location + '" />');</script> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/x-icon" href="assets/logo-punktonerzy.PNG">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<script language="javascript" type="text/javascript" src="./assets/js/jspdf.min.js"></script>

4
FrontEnd/src/styles.css
View File

@ -150,11 +150,13 @@ a:hover{
{
clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
background-color: #000080;
width: 180px;
width: auto;
min-width: 300px;
text-align: center;
border-color: #000080;
border-bottom: #000080;
color: white;
font-size: x-large;
}
.button:hover