Skip to content

Commit

Permalink
Improved UI and improved code readability
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukePng
LukePng committed Aug 16, 2024
1 parent 9d8f4d8 commit 3c87d78
Show file tree
Hide file tree
Showing 6 changed files with 246 additions and 232 deletions.
4 changes: 2 additions & 2 deletions src/game/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '★★★';
Expand Down
228 changes: 117 additions & 111 deletions src/game/main.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -12,136 +14,97 @@ 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;
}

.option-container {
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;
border: none;
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 {
Expand All @@ -151,6 +114,7 @@ body {
height: 30px;
border-radius: 5px;
overflow: hidden;
position: relative;
}

#progress-bar {
Expand Down Expand Up @@ -208,7 +172,6 @@ body {
left: 75%;
}


#star1, #star2, #star3 {
position: absolute;
}
Expand All @@ -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;
Expand All @@ -282,7 +281,8 @@ body {
margin-bottom: 10px;
}

/* Specific button styling */

/* For buttons */
#prev-wrong-button,
#next-wrong-button,
#next-button,
Expand All @@ -301,3 +301,9 @@ button:hover {
background-color: #0056b3;
}







9 changes: 5 additions & 4 deletions src/game/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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>
4 changes: 2 additions & 2 deletions test/game/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '★★★';
Expand Down
Loading

0 comments on commit 3c87d78

Please sign in to comment.