css quiz

Project/php/css/quiz.css

@@ -14,39 +14,49 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
     width: 800px;
-    height: 400px;
+    text-align: center;
+}
+
+form {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
-    justify-content: center;
+    flex-wrap: wrap;
-    align-items: center;
+    box-sizing: border-box;
 }
 
 h1 {
-    text-align: center;
+    font-size: 80px;
     color: #333;
-    padding-bottom: 50px;
+    margin-bottom: 10px;
 }
 
-.question {
+h2 {
-    display: none;
+    font-size: 30px;
+    color: #333;
+    margin-bottom: 10px;
+    font-style: italic;
 }
 
-.answers {
+.question {
-    margin-top: 10px;
+    font-size: 30px;
+    display: none;
+    margin-bottom: 10px;
 }
 
-button {
+input {
-    display: block;
+    display: inline-block;
-    width: 100%;
+    padding: 15px;
     margin-top: 10px;
-    background-color: #3498db;
+    background-color: #d6a7ff;
-    color: #fff;
+    color: #000;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s;
+    font-size: 16px;
+    width: 48%;
 }
 
-button:hover {
+input:hover {
-    background-color: #2980b9;
+    background-color: #8833d2;
 }

Project/php/templates/quizView.html

@@ -31,9 +31,9 @@
     <form id="quizForm{{ i }}" method="post">
      {% for answer in answers[i] %}
      {% if answer == goodAnswers[i] %}
-     <input type="button" value={{ answer }} onclick="validateAndNext(true)">
+     <input type="button" value="{{ answer }}" onclick="validateAndNext(true)">
      {% else %}
-     <input type="button" value={{ answer }} onclick="validateAndNext(false)">
+     <input type="button" value="{{ answer }}" onclick="validateAndNext(false)">
      {% endif %}
      {% endfor %}
     </form>