From 3c87d78f280b91e2201ce792580fc0ac28c5949b Mon Sep 17 00:00:00 2001
From: LukePng <lukefang29@gmail.com>
Date: Fri, 16 Aug 2024 11:58:10 +0800
Subject: [PATCH] Improved UI and improved code readability

---
 src/game/game.js    |   4 +-
 src/game/main.css   | 228 +++++++++++++++++++++++---------------------
 src/game/main.html  |   9 +-
 test/game/game.js   |   4 +-
 test/game/main.css  | 228 +++++++++++++++++++++++---------------------
 test/game/main.html |   5 +-
 6 files changed, 246 insertions(+), 232 deletions(-)

diff --git a/src/game/game.js b/src/game/game.js
index fadfa56..97cc3ad 100644
--- a/src/game/game.js
+++ b/src/game/game.js
@@ -219,9 +219,9 @@ function endQuiz() {
     let starRating = '';
     if (score < 500) {
         starRating = '☆☆☆';
-    } else if (score <= 1000) {
+    } else if (score < 1000) {
         starRating = '★☆☆';
-    } else if (score <= 1500) {
+    } else if (score < 1500) {
         starRating = '★★☆';
     } else {
         starRating = '★★★';
diff --git a/src/game/main.css b/src/game/main.css
index 5a48876..9095c5e 100644
--- a/src/game/main.css
+++ b/src/game/main.css
@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
+
+/* Miscellanous */
 body {
     font-family: 'Raleway', Arial, sans-serif;
     margin: 0;
@@ -12,93 +14,30 @@ body {
 }
 
 .quiz-container {
-    background-color: #fff;
+    position: relative;
     padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: 80%;
-    max-width: 800px;
-    text-align: center;
-}
-
-
-#score-combo {
-    display: flex;
-    justify-content: center; /* Center items horizontally */
-    margin: 5px 0px 10px 0px;
-    font-size: 18px;
-    width: 100%; /* Ensure it takes up full width */
-}
-#score-combo > div {
-    margin: 0 20px; /* Add some space between score and combo */
-}
-
-#timer-container {
-    display: flex;
-    flex-direction: column; 
-    align-items: center; 
-    width: 100%;
-}
-
-#timer-top-row {
-    display: flex;
-    align-items: center; 
-    width: 100%; 
-    max-width: 600px;
-}
-
-#timer-icon {
-    margin-right: 10px; 
-}
-
-#timer-bar-wrapper {
-    margin-top: 10px;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    background-color: #f9f9f9;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
-    position: relative; 
-    width: 100%; 
-    max-width: 500px;
-}
-
-#timer-bg {
-    height: 20px;
-    background-color: #e0e0e0; 
-    border-radius: 5px;
+    align-items: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     width: 100%;
-    position: relative; 
-    top: 0;
-    left: 0;
-    z-index: 1;
-}
-
-#timer-bar {
-    height: 20px;
-    background-color: #4caf50; 
-    border-radius: 5px;
-    width: 100%; 
-    position: absolute; 
-    top: 0;
-    left: 0;
-    z-index: 2; 
-    transition: width 1.0s linear; 
+    max-width: 800px;
+    text-align: center;
 }
 
-#time-left {
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 5px; 
-    margin-bottom: 2px;
-    text-align: center; 
-    width: 100%; 
-    max-width: 600px; 
+.hidden {
+    display: none;
 }
 
 
+/* For the MCQ and Options */
 .options {
     display: flex;
-    flex-wrap: wrap; /* Allow wrapping to multiple lines if needed */
-    justify-content: center; /* Ensure proper spacing */
+    flex-wrap: wrap;
+    justify-content: center;
     margin: 10px 0;
 }
 
@@ -106,23 +45,23 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 40%; /* Adjust as needed to fit within your layout */
+    width: 300px; /* Adjust as needed to fit within your layout */
     box-sizing: border-box; /* Include padding and border in width */
-    margin: 0 1%; /* Add margin for spacing between options */
+    margin: 0 20px; /* Add margin for spacing between options */
     border:solid;
 
 }
 
 .option-image {
-    width: 100%; /* Make image take full width of container */
-    height: 140px; /* Fixed height for images */
-    object-fit: cover; /* Ensure image covers the area without distortion */
+    width: 100%;
+    height: 140px; 
+    object-fit: cover; 
     margin-bottom: 10px;
 }
 
 .option {
-    width: 100%; /* Make the option button take the full width of its container */
-    height: 40px; /* Fixed height for buttons */
+    width: 100%;
+    height: 40px;
     padding: 10px;
     font-size: 16px;
     background-color: #e0e0e0;
@@ -130,18 +69,42 @@ body {
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
-    box-sizing: border-box; /* Include padding in width calculation */
+    box-sizing: border-box;
 }
 
 .option:hover {
     background-color: #d0d0d0;
 }
 
+
+/* For displaying of score and combo */
+#score-combo {
+    display: flex;
+    justify-content: center; /* Center items horizontally */
+    margin: 5px 0px 10px 0px;
+    font-size: 18px;
+    width: 100%; /* Ensure it takes up full width */
+}
+
+#score-combo > div {
+    margin: 0 20px; /* Add some space between score and combo */
+}
+
+
+/* For displaying of points bar */
 #progress-container {
     width: 100%;
     max-width: 600px;
     margin: 20px auto;
     position: relative;
+    display: flex;
+    align-items: center;
+}
+
+#point-icon {
+    font-size: 24px;
+    color: #9c920a; /* Match the progress bar color */
+    margin-right: 10px; /* Space between the icon and the progress bar */
 }
 
 #progress-bar-wrapper {
@@ -151,6 +114,7 @@ body {
     height: 30px;
     border-radius: 5px;
     overflow: hidden;
+    position: relative;
 }
 
 #progress-bar {
@@ -208,7 +172,6 @@ body {
     left: 75%;
 }
 
-
 #star1, #star2, #star3 {
     position: absolute;
 }
@@ -222,44 +185,80 @@ body {
 }
 
 #star3 {
-    left: calc(1500/2000 * 100% - 1/40 * 100%);
+    left: calc(1500/2000 * 100% - 1/34 * 100%);
 }
 
 
-
-.hidden {
-    display: none;
+/* For displaying of timer */
+#timer-container {
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    width: 100%;
 }
 
-#star-rating {
-    font-size: 50px;
-    color: gold;
-    margin-top: 20px;
+#timer-top-row {
+    display: flex;
+    align-items: center; 
+    width: 100%; 
+    max-width: 600px;
 }
 
-.quiz-container {
-    position: relative;
-    padding: 20px;
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    background-color: #f9f9f9;
+#timer-icon {
+    margin-right: 10px; 
 }
 
-/* Add this to main.css */
-
-/* Ensure the quiz container has relative positioning */
-.quiz-container {
-    position: relative;
-    padding: 20px;
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    background-color: #f9f9f9;
+#timer-bar-wrapper {
+    margin-top: 10px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    flex-grow: 1;
+    position: relative; 
+    width: 100%; 
+    max-width: 500px;
+}
+
+#timer-bg {
+    height: 20px;
+    background-color: #e0e0e0; 
+    border-radius: 5px;
+    width: 100%;
+    position: relative; 
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+#timer-bar {
+    height: 20px;
+    background-color: #4caf50; 
+    border-radius: 5px;
+    width: 100%; 
+    position: absolute; 
+    top: 0;
+    left: 0;
+    z-index: 2; 
+    transition: width 1.0s linear; 
 }
 
-/* Style for the wrong questions review box inline with other elements */
+#time-left {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 5px; 
+    margin-bottom: 2px;
+    text-align: center; 
+    width: 100%; 
+    max-width: 600px; 
+}
+
+#star-rating {
+    font-size: 50px;
+    color: gold;
+    margin-top: 20px;
+}
+
+
+/* For displaying of the wrong options at the end */
 #wrong-questions-container {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -282,7 +281,8 @@ body {
     margin-bottom: 10px;
 }
 
-/* Specific button styling */
+
+/* For buttons */
 #prev-wrong-button,
 #next-wrong-button,
 #next-button,
@@ -301,3 +301,9 @@ button:hover {
     background-color: #0056b3;
 }
 
+
+
+
+
+
+
diff --git a/src/game/main.html b/src/game/main.html
index 62962a8..ddcb0ec 100644
--- a/src/game/main.html
+++ b/src/game/main.html
@@ -9,7 +9,6 @@
 </head>
 <body>
     <div class="quiz-container">
-
         <div id="question-container">
             <h2 id="question-number"></h2><h2 id="question"></h2>
             <div class="options">
@@ -67,6 +66,7 @@ <h3>Wrong Answers Review</h3>
         <div id="star-rating" class="hidden"></div>
 
         <div id="progress-container">
+            <i id="point-icon" class="fa fa-trophy" style="font-size:24px"></i>
             <div id="progress-bar-wrapper">
                 <div id="progress-bar"></div>
                 <div id="quarter-markers">
@@ -85,11 +85,12 @@ <h3>Wrong Answers Review</h3>
         <p id="explanation" class="hidden"></p>
 
         <button id="next-button" class="hidden" onclick="nextQuestion()">Next Question</button>
-        <button id="restart-button" class="hidden" onclick="restartQuiz()">Restart Quiz</button>`
+        <button id="restart-button" class="hidden" onclick="restartQuiz()">Restart Quiz</button>
+
 
     </div>
-    <!-- <audio id="bgm" src="assets/audio/bgm.mpeg" autoplay loop></audio>
-    <audio id="bgm_end" src="assets/audio/end_bgm.mp3"></audio>  -->
+    <audio id="bgm" src="assets/audio/bgm.mpeg" autoplay loop></audio>
+    <audio id="bgm_end" src="assets/audio/end_bgm.mp3"></audio>
     <script src="game.js"></script>
 </body>
 </html>
diff --git a/test/game/game.js b/test/game/game.js
index fadfa56..97cc3ad 100644
--- a/test/game/game.js
+++ b/test/game/game.js
@@ -219,9 +219,9 @@ function endQuiz() {
     let starRating = '';
     if (score < 500) {
         starRating = '☆☆☆';
-    } else if (score <= 1000) {
+    } else if (score < 1000) {
         starRating = '★☆☆';
-    } else if (score <= 1500) {
+    } else if (score < 1500) {
         starRating = '★★☆';
     } else {
         starRating = '★★★';
diff --git a/test/game/main.css b/test/game/main.css
index 5a48876..9095c5e 100644
--- a/test/game/main.css
+++ b/test/game/main.css
@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
+
+/* Miscellanous */
 body {
     font-family: 'Raleway', Arial, sans-serif;
     margin: 0;
@@ -12,93 +14,30 @@ body {
 }
 
 .quiz-container {
-    background-color: #fff;
+    position: relative;
     padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: 80%;
-    max-width: 800px;
-    text-align: center;
-}
-
-
-#score-combo {
-    display: flex;
-    justify-content: center; /* Center items horizontally */
-    margin: 5px 0px 10px 0px;
-    font-size: 18px;
-    width: 100%; /* Ensure it takes up full width */
-}
-#score-combo > div {
-    margin: 0 20px; /* Add some space between score and combo */
-}
-
-#timer-container {
-    display: flex;
-    flex-direction: column; 
-    align-items: center; 
-    width: 100%;
-}
-
-#timer-top-row {
-    display: flex;
-    align-items: center; 
-    width: 100%; 
-    max-width: 600px;
-}
-
-#timer-icon {
-    margin-right: 10px; 
-}
-
-#timer-bar-wrapper {
-    margin-top: 10px;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    background-color: #f9f9f9;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
-    position: relative; 
-    width: 100%; 
-    max-width: 500px;
-}
-
-#timer-bg {
-    height: 20px;
-    background-color: #e0e0e0; 
-    border-radius: 5px;
+    align-items: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     width: 100%;
-    position: relative; 
-    top: 0;
-    left: 0;
-    z-index: 1;
-}
-
-#timer-bar {
-    height: 20px;
-    background-color: #4caf50; 
-    border-radius: 5px;
-    width: 100%; 
-    position: absolute; 
-    top: 0;
-    left: 0;
-    z-index: 2; 
-    transition: width 1.0s linear; 
+    max-width: 800px;
+    text-align: center;
 }
 
-#time-left {
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 5px; 
-    margin-bottom: 2px;
-    text-align: center; 
-    width: 100%; 
-    max-width: 600px; 
+.hidden {
+    display: none;
 }
 
 
+/* For the MCQ and Options */
 .options {
     display: flex;
-    flex-wrap: wrap; /* Allow wrapping to multiple lines if needed */
-    justify-content: center; /* Ensure proper spacing */
+    flex-wrap: wrap;
+    justify-content: center;
     margin: 10px 0;
 }
 
@@ -106,23 +45,23 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 40%; /* Adjust as needed to fit within your layout */
+    width: 300px; /* Adjust as needed to fit within your layout */
     box-sizing: border-box; /* Include padding and border in width */
-    margin: 0 1%; /* Add margin for spacing between options */
+    margin: 0 20px; /* Add margin for spacing between options */
     border:solid;
 
 }
 
 .option-image {
-    width: 100%; /* Make image take full width of container */
-    height: 140px; /* Fixed height for images */
-    object-fit: cover; /* Ensure image covers the area without distortion */
+    width: 100%;
+    height: 140px; 
+    object-fit: cover; 
     margin-bottom: 10px;
 }
 
 .option {
-    width: 100%; /* Make the option button take the full width of its container */
-    height: 40px; /* Fixed height for buttons */
+    width: 100%;
+    height: 40px;
     padding: 10px;
     font-size: 16px;
     background-color: #e0e0e0;
@@ -130,18 +69,42 @@ body {
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
-    box-sizing: border-box; /* Include padding in width calculation */
+    box-sizing: border-box;
 }
 
 .option:hover {
     background-color: #d0d0d0;
 }
 
+
+/* For displaying of score and combo */
+#score-combo {
+    display: flex;
+    justify-content: center; /* Center items horizontally */
+    margin: 5px 0px 10px 0px;
+    font-size: 18px;
+    width: 100%; /* Ensure it takes up full width */
+}
+
+#score-combo > div {
+    margin: 0 20px; /* Add some space between score and combo */
+}
+
+
+/* For displaying of points bar */
 #progress-container {
     width: 100%;
     max-width: 600px;
     margin: 20px auto;
     position: relative;
+    display: flex;
+    align-items: center;
+}
+
+#point-icon {
+    font-size: 24px;
+    color: #9c920a; /* Match the progress bar color */
+    margin-right: 10px; /* Space between the icon and the progress bar */
 }
 
 #progress-bar-wrapper {
@@ -151,6 +114,7 @@ body {
     height: 30px;
     border-radius: 5px;
     overflow: hidden;
+    position: relative;
 }
 
 #progress-bar {
@@ -208,7 +172,6 @@ body {
     left: 75%;
 }
 
-
 #star1, #star2, #star3 {
     position: absolute;
 }
@@ -222,44 +185,80 @@ body {
 }
 
 #star3 {
-    left: calc(1500/2000 * 100% - 1/40 * 100%);
+    left: calc(1500/2000 * 100% - 1/34 * 100%);
 }
 
 
-
-.hidden {
-    display: none;
+/* For displaying of timer */
+#timer-container {
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    width: 100%;
 }
 
-#star-rating {
-    font-size: 50px;
-    color: gold;
-    margin-top: 20px;
+#timer-top-row {
+    display: flex;
+    align-items: center; 
+    width: 100%; 
+    max-width: 600px;
 }
 
-.quiz-container {
-    position: relative;
-    padding: 20px;
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    background-color: #f9f9f9;
+#timer-icon {
+    margin-right: 10px; 
 }
 
-/* Add this to main.css */
-
-/* Ensure the quiz container has relative positioning */
-.quiz-container {
-    position: relative;
-    padding: 20px;
-    border: 2px solid #ddd;
-    border-radius: 10px;
-    background-color: #f9f9f9;
+#timer-bar-wrapper {
+    margin-top: 10px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    flex-grow: 1;
+    position: relative; 
+    width: 100%; 
+    max-width: 500px;
+}
+
+#timer-bg {
+    height: 20px;
+    background-color: #e0e0e0; 
+    border-radius: 5px;
+    width: 100%;
+    position: relative; 
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+#timer-bar {
+    height: 20px;
+    background-color: #4caf50; 
+    border-radius: 5px;
+    width: 100%; 
+    position: absolute; 
+    top: 0;
+    left: 0;
+    z-index: 2; 
+    transition: width 1.0s linear; 
 }
 
-/* Style for the wrong questions review box inline with other elements */
+#time-left {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 5px; 
+    margin-bottom: 2px;
+    text-align: center; 
+    width: 100%; 
+    max-width: 600px; 
+}
+
+#star-rating {
+    font-size: 50px;
+    color: gold;
+    margin-top: 20px;
+}
+
+
+/* For displaying of the wrong options at the end */
 #wrong-questions-container {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -282,7 +281,8 @@ body {
     margin-bottom: 10px;
 }
 
-/* Specific button styling */
+
+/* For buttons */
 #prev-wrong-button,
 #next-wrong-button,
 #next-button,
@@ -301,3 +301,9 @@ button:hover {
     background-color: #0056b3;
 }
 
+
+
+
+
+
+
diff --git a/test/game/main.html b/test/game/main.html
index 62962a8..8e756b1 100644
--- a/test/game/main.html
+++ b/test/game/main.html
@@ -9,7 +9,6 @@
 </head>
 <body>
     <div class="quiz-container">
-
         <div id="question-container">
             <h2 id="question-number"></h2><h2 id="question"></h2>
             <div class="options">
@@ -67,6 +66,7 @@ <h3>Wrong Answers Review</h3>
         <div id="star-rating" class="hidden"></div>
 
         <div id="progress-container">
+            <i id="point-icon" class="fa fa-trophy" style="font-size:24px"></i>
             <div id="progress-bar-wrapper">
                 <div id="progress-bar"></div>
                 <div id="quarter-markers">
@@ -85,7 +85,8 @@ <h3>Wrong Answers Review</h3>
         <p id="explanation" class="hidden"></p>
 
         <button id="next-button" class="hidden" onclick="nextQuestion()">Next Question</button>
-        <button id="restart-button" class="hidden" onclick="restartQuiz()">Restart Quiz</button>`
+        <button id="restart-button" class="hidden" onclick="restartQuiz()">Restart Quiz</button>
+
 
     </div>
     <!-- <audio id="bgm" src="assets/audio/bgm.mpeg" autoplay loop></audio>