cleaning css

quiz/index.html

@@ -33,55 +33,29 @@
       <div id="mainFrame">
         <h2 id="question-number">Loading...</h2>
         <div class="questionBox"><p id="question-text"></p></div>
-        <div class="navButtons">
-          <button
-            class="buttonQuestion"
-            onclick="next_question(1)"
-            style="background-color: #1b5e20;"
-          >
+        <div class="navButtons questionButtons">
+          <button onclick="next_question(1)" class="strong-agree">
             Absolutely agree
           </button>
-          <button
-            class="buttonQuestion"
-            onclick="next_question(2/3)"
-            style="background-color: #4caf50;"
-          >
+          <button onclick="next_question(2/3)" class="agree">
             Somewhat agree
           </button>
-          <button
-            class="buttonQuestion"
-            onclick="next_question(0)"
-            style="background-color: #bbbbbb;"
-          >
+          <button onclick="next_question(0)" class="neutral">
             Neutral or hesitant
           </button>
-          <button
-            class="buttonQuestion"
-            onclick="next_question(-2/3)"
-            style="background-color: #f44336;"
-          >
+          <button onclick="next_question(-2/3)" class="disagree">
             Rather disagree
           </button>
-          <button
-            class="buttonQuestion"
-            onclick="next_question(-1)"
-            style="background-color: #b71c1c;"
-          >
+          <button onclick="next_question(-1)" class="strong-disagree">
             Absolutely disagree
           </button>
-        </div>
 
-        <div class="navButtons">
-          <button class="button" onclick="prev_question()" id="back_button">
+          <a href="#" class="button" onclick="prev_question()" id="back_button">
             Return to the previous question
-          </button>
-          <button
-            class="button"
-            onclick="location.href='/';"
-            id="back_button_off"
-          >
+          </a>
+          <a class="button" href="/" id="back_button_off">
             Go back to home page
-          </button>
+          </a>
         </div>
       </div>
     </div>

results/index.html

@@ -50,7 +50,7 @@
         </div>
         <div class="navButtons">
           <button
-            class="button buttonLink"
+            class="button"
             onclick="shareLink();"
             id="buttonLink"
           >
@@ -70,7 +70,7 @@
           <button
             id="download"
             target="_blank"
-            class="button buttonLink"
+            class="button"
             onclick="download_image();"
           >
             <svg

style.css

@@ -208,7 +208,7 @@ h4 {
   text-align: center;
   max-width: 400px;
 }
-.buttonQuestion,
+button,
 .button {
   text-align: center;
   margin: 0.5em 0;
@@ -218,29 +218,33 @@ h4 {
   border-radius: 3px;
   text-decoration: none;
   font-size: 18px;
-}
-.button {
   background-color: #500076;
   color: white;
   cursor: pointer;
 }
-.buttonQuestion,
-#back_button,
-#back_button_off {
-  color: white;
-  width: 100%;
+button.strong-agree {
+  background-color: #1b5e20;
 }
-.button:hover,
-#back_button:hover,
-#back_button_off:hover {
-  background-color: white;
-  color: #500076;
+button.agree {
+  background-color: #4caf50;
 }
-.buttonLink {
-  background-color: #500076;
+button.neutral {
+  background-color: #bbbbbb;
+}
+button.disagree {
+  background-color: #f44336;
+}
+button.strong-disagree {
+  background-color: #b71c1c;
+}
+
+.questionButtons button {
   color: white;
+  width: 100%;
+  padding: 0.5em 0;
 }
-.buttonLink:hover {
+.button:hover {
+  background-color: white;
   color: #500076;
 }
 .button svg {
@@ -262,6 +266,20 @@ h4 {
 .buttonLinkGood:hover svg {
   fill: white;
 }
+.urlToCopyContainer {
+  width: 100%;
+  text-align: center;
+}
+.urlToCopy {
+  max-width: 400px;
+  background-color: white;
+  display: inline-block;
+  padding: 0.5em;
+  margin: 1em 0 0;
+  z-index: 6;
+  border-radius: 3px;
+  word-break: break-all;
+}
 
 .flagDecoration {
   text-align: center;
@@ -282,20 +300,6 @@ h4 {
   margin: 1em 0;
   font-size: calc(14px + 2vw);
 }
-.urlToCopyContainer {
-  width: 100%;
-  text-align: center;
-}
-.urlToCopy {
-  max-width: 400px;
-  background-color: white;
-  display: inline-block;
-  padding: 0.5em;
-  margin: 1em 0 0;
-  z-index: 6;
-  border-radius: 3px;
-  word-break: break-all;
-}
 
 .scale {
   display: flex;