From 6df997e287b19eefa16424eddbc7c82da3dc1f41 Mon Sep 17 00:00:00 2001
From: s416122 <annmad@st.amu.edu.pl>
Date: Wed, 11 Dec 2019 20:56:24 +0100
Subject: [PATCH] =?UTF-8?q?Wygl=C4=85d=20wszystkich=20typ=C3=B3w=20pyta?=
 =?UTF-8?q?=C5=84=20w=20rozwi=C4=85zywanym=20te=C5=9Bcie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FrontEnd/.angulardoc.json                     |  4 +
 .../main-navigation.component.css             |  2 +-
 .../question-view/gaps/gaps.component.css     | 46 +++++++++--
 .../question-view/gaps/gaps.component.html    |  7 +-
 .../multiple-choice.component.css             | 74 ++++++++++++++++--
 .../multiple-choice.component.html            |  7 +-
 .../question-view/pairs/pairs.component.css   | 53 ++++++++++---
 .../question-view/pairs/pairs.component.html  | 15 ++--
 .../question-view/puzzle/puzzle.component.css | 49 +++++++++---
 .../puzzle/puzzle.component.html              |  7 +-
 .../single-choice/single-choice.component.css |  4 +-
 .../true-false/true-false.component.css       | 77 ++++++++++++++++---
 .../true-false/true-false.component.html      | 20 ++---
 FrontEnd/src/index.html                       |  2 +-
 FrontEnd/src/styles.css                       |  4 +-
 15 files changed, 297 insertions(+), 74 deletions(-)
 create mode 100644 FrontEnd/.angulardoc.json

diff --git a/FrontEnd/.angulardoc.json b/FrontEnd/.angulardoc.json
new file mode 100644
index 0000000..98319e2
--- /dev/null
+++ b/FrontEnd/.angulardoc.json
@@ -0,0 +1,4 @@
+{
+  "repoId": "51789675-24f3-468d-a696-09187b48c708",
+  "lastSync": 0
+}
\ No newline at end of file
diff --git a/FrontEnd/src/app/main-navigation/main-navigation.component.css b/FrontEnd/src/app/main-navigation/main-navigation.component.css
index 74fd3d9..c32506a 100644
--- a/FrontEnd/src/app/main-navigation/main-navigation.component.css
+++ b/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;
 }
diff --git a/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.css b/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.css
index da60678..57d9a7b 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.css
+++ b/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.css
@@ -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;
-}
\ No newline at end of file
+}
+
+.button:focus
+{
+  background-color: orange;
+  border: 2px solid orange;
+}
+
+.button
+{
+  border: 2px solid #000080;
+}
+
+.button:hover
+{
+  border: 2px solid orange;
+}
diff --git a/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.html b/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.html
index c651806..cd8f24e 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.html
+++ b/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>
\ No newline at end of file
+</form>
diff --git a/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.css b/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.css
index 2f54d55..1fb86fa 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.css
+++ b/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.css
@@ -1,6 +1,70 @@
 .answers{
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
\ No newline at end of file
+  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;
+}
+}
diff --git a/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.html b/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.html
index 5c1c327..83c74aa 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.html
+++ b/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>
\ No newline at end of file
+</form>
diff --git a/FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.css b/FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.css
index fe68316..cc1d584 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.css
+++ b/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;
-    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;
+}
+
diff --git a/FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.html b/FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.html
index 3b25b0e..764dda4 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.html
+++ b/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>
-  <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>
\ No newline at end of file
+</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>
+
diff --git a/FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.css b/FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.css
index 8b7a531..9d1eee8 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.css
+++ b/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: 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;
-}
\ No newline at end of file
+}
+
+h3
+{
+  margin-top: 100px;
+}
diff --git a/FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.html b/FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.html
index e9b7b67..30fdf6e 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.html
+++ b/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>
-  <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>
\ No newline at end of file
+</div>
diff --git a/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css b/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css
index e2d36f6..e0840fc 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.css
+++ b/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
diff --git a/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.css b/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.css
index f6338ef..1fb86fa 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.css
+++ b/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.css
@@ -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;
-    }
-}
\ No newline at end of file
+label
+{
+  width: 254px;
+}
+
+.pytanie
+{
+  width: 100%;
+}
+
+.alert-grey
+{
+  background-color: #181616;
+}
+}
diff --git a/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.html b/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.html
index 05e1631..7402a86 100644
--- a/FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.html
+++ b/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>
-
-  <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>
\ No newline at end of file
+<button class="btn btn-study-cave" (click)="nextQuestion()"><i class="fas fa-arrow-right"></i> Dalej</button>
diff --git a/FrontEnd/src/index.html b/FrontEnd/src/index.html
index 0405df1..e29022b 100644
--- a/FrontEnd/src/index.html
+++ b/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>
diff --git a/FrontEnd/src/styles.css b/FrontEnd/src/styles.css
index 8101cbe..02a8ba3 100644
--- a/FrontEnd/src/styles.css
+++ b/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