Implemented score page

src/views/mainpage/PlayView.vue

@@ -9,6 +9,7 @@ const currentQuestionIndex = ref(0);
 const selectedAnswer = ref(null)
 const isAnswerChosen = ref(false);
 const score = ref(0)
+const quizDone = ref(false);
 
 const currentQuestion = computed(() => {
   if (trivio.value && trivio.value.questionList && trivio.value.questionList.length > 0) {
@@ -47,6 +48,7 @@ const goToNextQuestion = () => {
 
   if (currentQuestionIndex.value + 1 >= trivio.value.questionList.length) {
     console.log('End of quiz');
+    quizDone.value = true;
     return
   }
 
@@ -76,19 +78,25 @@ onMounted(async () => {
 
 <template>
   <div class="container">
+    <div class="quiz-container" v-if="!quizDone">
+      <!-- Top container with question number, title, and score -->
       <div class="top-container">
         <div class="question-nr">{{ currentQuestionIndex + 1 }}/{{ trivio.questionList?.length }}</div>
         <h1>{{ trivio.title }}</h1>
         <div class="question-nr">Score: {{ score }}</div>
-          <!-- Go back button can be removed -->
-<!--            <div class="back-btn">&lt;</div>-->
-
+        <button class="next-button" @click="goToNextQuestion" v-if="isAnswerChosen && !quizDone">
+          <span class="arrow-icon">&rarr;</span>
+        </button>
       </div>
+
+      <!-- Content container with question and answers -->
       <div class="content-container">
         <div class="center-container">
           <div class="question-text">{{ currentQuestion }}</div>
           <img src="../../assets/trivio.svg" @click="abcdef" alt="Question Image">
         </div>
+
+        <!-- Answer grid -->
         <div class="answer-grid">
           <div v-for="(answer, index) in currentAnswers" :key="index"
             :class="{ 'answer-box': true, 'correct-answer': answer.correct && selectedAnswer, 'incorrect-answer': !answer.correct && selectedAnswer, 'no-hover': selectedAnswer === answer }"
@@ -101,11 +109,16 @@ onMounted(async () => {
           </div>
         </div>
       </div>
-      <div class="bottom-container">
-        <button class="next-button" @click="goToNextQuestion" v-if="isAnswerChosen">
-          Next
-          <span class="arrow-icon">&rarr;</span>
-        </button>
+    </div>
+
+    <div class="score-section" v-if="quizDone">
+      <h2>Quiz Completed</h2>
+      <div class="score-text">Your final score is</div>
+      <div class="score-circle">{{ score }}/{{ trivio.questionList?.length }}</div>
+      <div class="button-section">
+        <button class="button-style">TRY AGAIN</button>
+        <button class="button-style">DISCOVER OTHER TRIVIOS</button>
+      </div>
     </div>
   </div>
 </template>
@@ -120,7 +133,7 @@ onMounted(async () => {
 .top-container {
   display: flex;
   padding: 20px;
-    width: 100%;
+  width: 80%;
   margin: auto;
 }
 
@@ -165,6 +178,7 @@ h1 {
   align-content: end;
   place-content: end;
 }
+
 .center-container {
   display: flex;
   flex-direction: column;
@@ -209,8 +223,10 @@ h1 {
 }
 
 .answer-box:hover {
-    background-color: #7e63cb; /* Change background color on hover */
+  background-color: #7e63cb;
+  /* Change background color on hover */
 }
+
 .correct-answer {
   background-color: lightgreen;
 }
@@ -224,21 +240,71 @@ h1 {
 }
 
 .next-button {
-  background-color: #9F82F5; /* Button background color */
-  color: white; /* Text color */
+  background-color: #9F82F5;
+  color: white;
   border: none;
-  border-radius: 10%; /* Makes the button circular */
-  padding: 15px 15px; /* Adjust padding as needed */
-  font-size: 13px;
+  border-radius: 10%;
+  font-size: 20px;
+  padding: 0 20px 0 20px;
   cursor: pointer;
-  transition: background-color 0.3s; /* Smooth transition on hover */
+  transition: background-color 0.3s;
 }
 
 .next-button:hover {
-  background-color: #7e63cb; /* Change background color on hover */
+  background-color: #7e63cb;
+}
+
+.score-section {
+  text-align: center;
+  margin-top: 20px;
+}
+
+h2 {
+  padding: 20px;
+  font-size: 50px;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: bold;
+  color: #F5EF62;
+}
+
+.score-text {
+  color: white;
+  font-size: 30px;
+}
+
+.score-circle {
+  width: 100px; 
+  height: 100px;
+  font-family: 'Courier New', Courier, monospace;
+  border-radius: 50%;
+  background-color: #9F82F5; 
+  color: white;
+  font-size: 36px; 
+  line-height: 100px; 
+  text-align: center;
+  margin: 20px auto;
+}
+
+
+.button-section {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.button-style {
+  display: block;
+  margin: 10px auto;
+  padding: 10px 20px;
+  background-color: #F5EF62;
+  color: #636363;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
 }
 
-.arrow-icon {
-  margin-left: 10px; /* Spacing between text and arrow */
+.button-style:hover {
+  background-color: #b9b40f;
 }
 </style>