fix: quiz enhancements and tests

community/public/css/style.css

@@ -333,7 +333,7 @@ input[type=checkbox] {
 
 .card-divider {
   border: 1px solid #F4F5F6;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 .card-divider-dark {
@@ -487,23 +487,30 @@ input[type=checkbox] {
   --star-fill: #74808B;
 }
 
-div.custom-checkbox>label>input {
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+}
+
+.custom-checkbox>label>input {
   visibility: hidden;
 }
 
-div.custom-checkbox>label>img {
-  height: 20px;
-  width: 20px;
+.custom-checkbox>label>.empty-checkbox {
+  height: 1.5rem;
+  width: 1.5rem;
   border: 1px solid black;
   border-radius: 5px;
 }
 
-div.custom-checkbox>label>input:checked+img {
-  background: url(/assets/community/images/Vector.png);
+.custom-checkbox>label>input:checked+.empty-checkbox {
+  background: url(/assets/community/icons/tick.svg);
   background-repeat: no-repeat;
   background-position: center center;
-  background-size: 15px 15px;
-  object-fit: contain;
+}
+
+.quiz-label {
+  margin-bottom: 0;
 }
 
 .course-card-wide {
@@ -1013,8 +1020,24 @@ div.custom-checkbox>label>input:checked+img {
   color: red;
 }
 
+.quiz-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .question {
   flex-direction: column;
+  width: 688px;
+  margin: auto;
+}
+
+.question p {
+  margin-bottom: 0;
+}
+
+.active-question .card-divider {
+  margin-top: 1rem;
 }
 
 .dark-links {
@@ -1057,7 +1080,7 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-content-parent .course-home-headings {
-  margin: 0px 0px 16px;
+  margin: 0px 0px 1rem;
 }
 
 .lesson-pagination {

community/public/icons/minus-circle-green.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#68D391" stroke="#68D391" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 12H16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

community/public/icons/minus-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>

community/public/icons/tick.svg

@@ -1,3 +1 @@
-<svg class="icon">
-  <use href="#icon-tick"></use>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>

community/public/icons/wrong.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM6.0429 6.04289C6.43342 5.65237 7.06659 5.65237 7.45711 6.04289L10.0011 8.58692L12.5451 6.04294C12.9356 5.65242 13.5688 5.65242 13.9593 6.04294C14.3499 6.43347 14.3499 7.06663 13.9593 7.45716L11.4154 10.0011L13.9593 12.5451C14.3499 12.9356 14.3499 13.5688 13.9593 13.9593C13.5688 14.3499 12.9357 14.3499 12.5451 13.9593L10.0011 11.4154L7.45711 13.9594C7.06659 14.3499 6.43342 14.3499 6.0429 13.9594C5.65237 13.5689 5.65237 12.9357 6.0429 12.5452L8.58693 10.0011L6.0429 7.45711C5.65237 7.06658 5.65237 6.43342 6.0429 6.04289Z" fill="#F56B6B"/>
+</svg>