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

FrontEnd/.angulardoc.json

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

FrontEnd/src/app/main-navigation/main-navigation.component.css

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

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

@@ -1,11 +1,45 @@
 .answers{
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    align-items: center;
+  align-items: center;
-    justify-content: flex-start;
+  justify-content: center;
-    flex-wrap: wrap;
+  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;
+}

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

@@ -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>

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

@@ -1,6 +1,70 @@
 .answers{
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: flex-start;
+  align-items: center;
-    justify-content: flex-start;
+  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;
+}
+}

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

@@ -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>

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

@@ -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;
+    width: 300px;
-    background-color: rgb(202, 144, 17);
+    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;
+}
+

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

@@ -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>
+  Pytanie za {{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="pytanie">{{question.question}} </div>
-  <div class="puzzles-container">
+  <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" style="margin-left: 300px;">
-  <div class="puzzles-container">
     <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>
+

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

@@ -1,26 +1,51 @@
 .puzzle{
     display: flex;
     min-height: 50px;
-    min-width: 100px;
+    color: white;
-    color: black;
-    background-color: rgb(206, 168, 86);
     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{
+.puzzle:hover
-    border: 3px solid gray;
+{
+  background-color: orange;
+  border: 2px solid orange;
 }
 
-.active{
+span
-    border: 3px solid white;
+{
+  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;
+}

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

@@ -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>
+   Pytanie za {{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>
+   <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>

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

@@ -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

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

@@ -1,17 +1,70 @@
-.question{
+.answers{
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: column;
-    flex-wrap: wrap;
+  align-items: center;
-    justify-content: space-between;
+  justify-content: flex-start;
-    align-items: center;
+
 }
 
-label{
+.pytanie
-    margin: 0;
+{
+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{
+label
-        display: block;
+{
-    }
+  width: 254px;
-}
+}
+
+.pytanie
+{
+  width: 100%;
+}
+
+.alert-grey
+{
+  background-color: #181616;
+}
+}

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

@@ -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>
+  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="btn-group btn-group-toggle" data-toggle="buttons">
+  <div class="answers" >
-    <label class="btn btn-study-cave mr-2" (click)="chooseAnswer('Prawda')">
+    <div (click)="chooseAnswer('Prawda')">
-      <input type="radio" name="options" id="option1" autocomplete="off"> Prawda
+      <input type="radio" name="options" id="option1" class="radio-answer" autocomplete="off"><label for="option1">Prawda</label>
-    </label>
+    </div>
-    <label class="btn btn-study-cave" (click)="chooseAnswer('Fałsz')">
+    <div (click)="chooseAnswer('Fałsz')">
-      <input type="radio" name="options" id="option2" autocomplete="off"> Fałsz
+      <input type="radio" name="options" id="option2" class="radio-answer" autocomplete="off"> <label for="option2">Fałsz</label>
-    </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>

FrontEnd/src/index.html

@@ -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>

FrontEnd/src/styles.css

@@ -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