Mng 49 fill results modal

index.html

@@ -145,7 +145,7 @@ <h1 class='popUpTitle' id='popUpTitleResults'>GAME OVER</h1>
             </div>
 
             <div class='resultsDescriptionArea'>
-                <p id='resultsDescription'>During <span id='minutesTaken'>2</span> minutes you answered <span id='answersGiven'>20</span> questions.</p>
+                <p id='resultsDescription'></p>
             </div>
 
             <div id='tableWithResultsArea'>
@@ -156,19 +156,9 @@ <h1 class='popUpTitle' id='popUpTitleResults'>GAME OVER</h1>
                             <th colspan='2'>Correct</th>
                             <th>You</th>
                         </tr>
-                        <tr class='tableWithResultsQA'>
-                            <td><img src='./static/assets/ui/pikach1.png' alt='Pokemon' class='tableWithResultsQuestion'/></td>
-                            <td class='tableWithResultsCorrectAnswer'>Pikachu</td>
-                            <td class='tableWithResultsYourAnswer'>Pikachu</td>
-                        </tr>
                     </table>
                 </div>
             </div>
-
-            <div id='insertYourNameArea'>
-                <input type='text' id='insertYourNameImput'>
-                <label for='insertYourName' id='insertYourNameLabel'>Please fill in your name in order to join the hall of fame!</label>
-            </div>
 
             <div id='backToStartingPageButtonArea'>
                 <input type='button' value="Gotta catch 'em all!" id='backToStartingPageButton'/>

src/app/fillResultsModal.js

@@ -0,0 +1,33 @@
+import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON } from "../service/modes";
+
+export const fillResultsModal = (gameHandlerResults, mode) => {
+
+    const resultsDescription = document.querySelector('#resultsDescription');
+    resultsDescription.textContent = `Congratulations ${gameHandlerResults.name}! During ${gameHandlerResults.time} seconds you answered ${gameHandlerResults.answers.length} questions and scored ${gameHandlerResults.score} point(s)!`
+
+    const resultsTable = document.querySelector('#tableWithResults table');
+
+    for (let questionItem of gameHandlerResults.answers) {
+
+        const tableCell = document.createElement('tr');
+        tableCell.className = 'tableWithResultsQA';
+
+        if (mode === WHAT_DOES_THIS_POKEMON_LOOK_LIKE) {
+            tableCell.innerHTML = 
+            `<td>${questionItem.question}</td>
+            <td><img src='${questionItem.correctAnswer}' alt='pokemon img' class='tableWithResultsCorrectAnswer'/></td>
+            <td><img src='${questionItem.answer}' alt='pokemon img' class='tableWithResultsYourAnswer'/></td>`
+
+            tableCell.querySelector('.tableWithResultsYourAnswer').style.border = questionItem.isCorrect === true ? '2px solid green' : '2px solid red';
+
+        } else if (mode === WHO_IS_THAT_POKEMON) {
+            tableCell.innerHTML = 
+            `<td><img src='${questionItem.question}' alt='pokemon img' class='tableWithResultsQuestion'/></td>
+            <td class='tableWithResultsCorrectAnswer'>${questionItem.correctAnswer}</td>
+            <td class='tableWithResultsYourAnswer'>${questionItem.answer}</td>`
+
+            tableCell.querySelector('.tableWithResultsYourAnswer').style.color = questionItem.isCorrect === true ? 'green' : 'red';
+        }
+        resultsTable.appendChild(tableCell);
+    }
+}

src/app/quizPage.js

@@ -16,6 +16,11 @@ import {
     showAPopUpScreen
 } from './showAPopUpScreen'
 
+import {
+    fillResultsModal
+} from './fillResultsModal'
+
+// will be filledi with mode object during page rendering
 let CURRENT_MODE = null; 
 let GENERATOR = null;
 let GAME_HANDLER = null;
@@ -35,9 +40,6 @@ export function renderQuizPage(mode, name, totalTime) {
     const resultsTemplate = document.getElementById('results-modal-template');
     appScreen.innerHTML += resultsTemplate.innerHTML;
 
-    // TODO later - the end of the quiz should activate the function below: 
-    //showAPopUpScreen(document.getElementById('resultsScreen'), 'flex');
-
     // TODO later  - generate question using questionService - below are temporary dummy variables
     const generatedQuestion = {
         question: "quizQuestion",
@@ -47,6 +49,11 @@ export function renderQuizPage(mode, name, totalTime) {
     //GENERATOR = new QuestionService.Generator()
     //TODO setupTimer() -- here or directly in App
     renderNextQuestion(GENERATOR);
+
+    // add event listener to the results screen button 
+    document.querySelector('#backToStartingPageButton').addEventListener('click', () => {
+        location.reload();
+    });  
 }
 
 
@@ -76,7 +83,9 @@ export async function renderNextQuestion(generator) {
             })
         }
     } else { // no more questions left
-        console.log("You WON!, but sorry, we still don't have any summary page"); // TODO create summary page redirection
+        // TO DO connect to timer
+        fillResultsModal(GAME_HANDLER.getResults(10), CURRENT_MODE)
+        showAPopUpScreen(document.getElementById('resultsScreen'), 'flex');
     }
 }
 

styles/App.css

@@ -402,27 +402,25 @@ li.quiz-answer>*{
     color: black;
     font-size: 6vh; 
     font-weight: 700;
-    padding: 1.2vh 3vh 1.2vh 3vh;
+    padding: 3vh;
 }
 
-#resultsDescriptionArea {
+#resultsDescriptionArea{        
     flex: 1 1 8%;
 }
 
 #resultsDescription {
     text-align: center;
     color: black;
     font-size: 3vh;
-}
-
-#resultsDescription span {
-    color: black;
+    padding: 0vh 1vh 3vh 1vh;
 }
 
 #tableWithResultsArea {
     display: grid; 
     grid-template-columns: auto 3fr;
     flex: 1 1 47%; 
+    height: 47%;
 }
 
 #nextToTableImg {
@@ -436,7 +434,6 @@ li.quiz-answer>*{
 
 #tableWithResults table {
     width: 100%;
-    overflow: scroll;
 }
 
 #tableWithResults th {
@@ -457,38 +454,11 @@ li.quiz-answer>*{
     height: 90%;
 }
 
-.tableWithResultsCorrectAnswer {
-    font-weight: bolder;
+.tableWithResultsQA:first-child {
+    height: 90%;
     text-align: left;
 }
 
-#insertYourNameArea {
-    flex: 1 1 15%;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-around;
-    padding: 1.2vh 2vh 0vh 1.2vh; 
-}
-
-#insertYourNameImput {
-    flex: 0 1 45%;
-    color: black;
-    font-size: 3vh;
-    border-radius: 2vh;
-    padding: 1.5vh;
-    text-align: center;
-    max-width: 100%;
-}
-
-#insertYourNameLabel {
-    flex: 1 1 45%;
-    color: black;
-    text-align: center;
-    padding: 1vh;
-    font-size: 3vh;
-}
-
 #backToStartingPageButtonArea {
     display: flex;
     align-items: center;