✨ It's now possible to play a quizz

Author: francois_lannoy

front/src/components/Play.js

@@ -68,12 +68,10 @@ export default function Play(){
             setAnswered(true);
 
             /* Checking if the quizz is over */
-            if (currentidx<questions.length-1){
-                $('#next-button').css('visibility', 'visible');
-            }else{
-                $('#finish-button').css('visibility', 'visible');
-                    
-            }
+            if (currentidx<questions.length-1)
+                {$('#next-button').css('visibility', 'visible');}
+            else
+                {$('#finish-button').css('visibility', 'visible');}
         }else{
 
         }    

front/src/components/css/play.css

@@ -1,12 +1,20 @@
 #play-container {
     text-align: center;
+    position: relative;
 }
 
 #quizz-title>h2{
     font-size: 3em;
 }
 
-#question>h2{
+#score{
+    position: absolute;
+    top: 0;
+    right: 5%;
+}
+
+
+#question>h2, #score>h2{
     font-size: 2em;
 }
 
@@ -17,6 +25,7 @@
 }
 
 .answer{
+    position: relative;
     border-radius: 10px;
     height: 100%;
     width: 80%;
@@ -26,22 +35,29 @@
     padding-top: 12%;
     margin: 0 auto;
     margin-bottom: 10%;
+    cursor: pointer;
 }
 .answer:hover{
     filter: brightness(1.13)
 }
 
+.answer:active{
+    filter: brightness(1);
+}
+
 .answer>h2{
     font-size: 2em;   
     padding: unset;
     margin: unset;
 }
 
 .answer>i{
-    position: static;
-    bottom: 0;
-    right: 0;
-    /* visibility: hidden; */
+    position: absolute;
+    bottom: 16%;
+    right: 5%;
+    height: 2%;
+    width: 2%;   
+    visibility: hidden;
 }
 
 #answer0{background-color: #3BDB32;}