From 165f5ade4d480db191b0340623d00b4e4a3e14b5 Mon Sep 17 00:00:00 2001 From: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com> Date: Mon, 11 Jan 2021 20:15:46 +0100 Subject: [PATCH 1/5] Add fillResultsModal.js, add event listener to results modal button --- index.html | 7 +------ src/app/fillResultsModal.js | 25 +++++++++++++++++++++++++ src/app/quizPage.js | 10 +++++++--- styles/App.css | 36 +++--------------------------------- 4 files changed, 36 insertions(+), 42 deletions(-) create mode 100644 src/app/fillResultsModal.js diff --git a/index.html b/index.html index 7fea5b3..6266df2 100644 --- a/index.html +++ b/index.html @@ -145,7 +145,7 @@

GAME OVER

-

During 2 minutes you answered 20 questions.

+

Congratulations Wiesiu! During 2 minutes you answered 20 questions and scored 60 points!

@@ -164,11 +164,6 @@

GAME OVER

- -
- - -
diff --git a/src/app/fillResultsModal.js b/src/app/fillResultsModal.js new file mode 100644 index 0000000..33dddc3 --- /dev/null +++ b/src/app/fillResultsModal.js @@ -0,0 +1,25 @@ +export const fillResultsModal = (gameHandlerResults) => { + + const resultsDescription = document.querySelector('#resultsDescription'); + resultsDescription.textContent = `Congratulations ${gameHandlerResults.name}! During ${gameHandlerResults.time} seconds you answered ${gameHandlerResults.answers.length} questions and scored ${gameHandlerResults.score} points!` + + const resultsTable = document.querySelector('#tableWithResults'); + + for (let question of gameHandlerResults.answers) { + + const tableCell = document.createElement('tr'); + tableCell.className = 'tableWithResultsQA'; + tableCell.innerHTML = + `Pokemon + ${question.correctAnswer} + ${question.answer}` + + if (question.isCorrect === true) { + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'green'; + } else { + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'red'; + } + + resultsTable.appendChild(tableCell); + } +} \ No newline at end of file diff --git a/src/app/quizPage.js b/src/app/quizPage.js index da05baa..37f9551 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -34,9 +34,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", @@ -46,6 +43,13 @@ export function renderQuizPage(mode, name, totalTime) { //GENERATOR = new QuestionService.Generator() //TODO setupTimer() -- here or directly in App renderNextQuestion(CURRENT_MODE); + + // TODO later - the end of the quiz should activate the function below: + showAPopUpScreen(document.getElementById('resultsScreen'), 'flex'); + // add event listener to the results screen button + document.querySelector('#backToStartingPageButton').addEventListener('click', () => { + location.reload(); + }); } diff --git a/styles/App.css b/styles/App.css index e74c0fa..2529738 100644 --- a/styles/App.css +++ b/styles/App.css @@ -394,10 +394,10 @@ 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%; } @@ -405,10 +405,7 @@ li.quiz-answer>*{ text-align: center; color: black; font-size: 3vh; -} - -#resultsDescription span { - color: black; + padding: 0vh 1vh 3vh 1vh; } #tableWithResultsArea { @@ -454,33 +451,6 @@ li.quiz-answer>*{ 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; From 68031e624ba3e5486c3a04660a11581e42d6449f Mon Sep 17 00:00:00 2001 From: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com> Date: Wed, 13 Jan 2021 19:49:13 +0100 Subject: [PATCH 2/5] Implement fillResultsModal --- index.html | 2 +- src/app/quizPage.js | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 6266df2..4ce66d1 100644 --- a/index.html +++ b/index.html @@ -145,7 +145,7 @@

GAME OVER

-

Congratulations Wiesiu! During 2 minutes you answered 20 questions and scored 60 points!

+

diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 37f9551..69ac97b 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -16,6 +16,10 @@ import { showAPopUpScreen } from './showAPopUpScreen' +import { + fillResultsModal +} from './fillResultsModal' + // will be filledi with mode object during page rendering let CURRENT_MODE = null; let GENERATOR = null; @@ -43,9 +47,7 @@ export function renderQuizPage(mode, name, totalTime) { //GENERATOR = new QuestionService.Generator() //TODO setupTimer() -- here or directly in App renderNextQuestion(CURRENT_MODE); - - // TODO later - the end of the quiz should activate the function below: - showAPopUpScreen(document.getElementById('resultsScreen'), 'flex'); + // add event listener to the results screen button document.querySelector('#backToStartingPageButton').addEventListener('click', () => { location.reload(); @@ -79,7 +81,8 @@ export function renderNextQuestion(mode) { }) } } else { // no more questions left - console.log("You WON!, but sorry, we still don't have any summary page"); // TODO create summary page redirection + fillResultsModal(GAME_HANDLER) + showAPopUpScreen(document.getElementById('resultsScreen'), 'flex'); } } From ae828eaf519cbf24c399a88aa52da1978994cda8 Mon Sep 17 00:00:00 2001 From: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com> Date: Wed, 13 Jan 2021 21:47:36 +0100 Subject: [PATCH 3/5] Works with both modes --- index.html | 5 ----- src/app/fillResultsModal.js | 32 ++++++++++++++++++++++---------- styles/App.css | 6 +++--- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 4ce66d1..5d184d3 100644 --- a/index.html +++ b/index.html @@ -156,11 +156,6 @@

GAME OVER

Correct You - - Pokemon - Pikachu - Pikachu -
diff --git a/src/app/fillResultsModal.js b/src/app/fillResultsModal.js index 33dddc3..174481d 100644 --- a/src/app/fillResultsModal.js +++ b/src/app/fillResultsModal.js @@ -3,23 +3,35 @@ export const fillResultsModal = (gameHandlerResults) => { const resultsDescription = document.querySelector('#resultsDescription'); resultsDescription.textContent = `Congratulations ${gameHandlerResults.name}! During ${gameHandlerResults.time} seconds you answered ${gameHandlerResults.answers.length} questions and scored ${gameHandlerResults.score} points!` - const resultsTable = document.querySelector('#tableWithResults'); + const resultsTable = document.querySelector('#tableWithResults table'); - for (let question of gameHandlerResults.answers) { + for (let questionItem of gameHandlerResults.answers) { const tableCell = document.createElement('tr'); tableCell.className = 'tableWithResultsQA'; - tableCell.innerHTML = - `Pokemon - ${question.correctAnswer} - ${question.answer}` + if ((questionItem.question).substring(0, 3) !== 'http') { + tableCell.innerHTML = + `${questionItem.question} + pokemon img + pokemon img` - if (question.isCorrect === true) { - tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'green'; + if (questionItem.isCorrect === true) { + tableCell.querySelector('.tableWithResultsYourAnswer').style.border = '2px solid green'; + } else { + tableCell.querySelector('.tableWithResultsYourAnswer').style.border = '2px solid red'; + } } else { - tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'red'; + tableCell.innerHTML = + `pokemon img + ${questionItem.correctAnswer} + ${questionItem.answer}` + + if (questionItem.isCorrect === true) { + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'green'; + } else { + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'red'; + } } - resultsTable.appendChild(tableCell); } } \ No newline at end of file diff --git a/styles/App.css b/styles/App.css index 2529738..285a514 100644 --- a/styles/App.css +++ b/styles/App.css @@ -412,6 +412,7 @@ li.quiz-answer>*{ display: grid; grid-template-columns: auto 3fr; flex: 1 1 47%; + height: 47%; } #nextToTableImg { @@ -425,7 +426,6 @@ li.quiz-answer>*{ #tableWithResults table { width: 100%; - overflow: scroll; } #tableWithResults th { @@ -446,8 +446,8 @@ li.quiz-answer>*{ height: 90%; } -.tableWithResultsCorrectAnswer { - font-weight: bolder; +.tableWithResultsQA:first-child { + height: 90%; text-align: left; } From 1d6e744df1f520b1d33c5b3b13c89a3b5cfb116c Mon Sep 17 00:00:00 2001 From: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com> Date: Wed, 13 Jan 2021 22:41:04 +0100 Subject: [PATCH 4/5] Fix mode selection, time left, simplify if statements --- src/app/fillResultsModal.js | 24 +++++++++--------------- src/app/quizPage.js | 3 ++- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/app/fillResultsModal.js b/src/app/fillResultsModal.js index 174481d..17d57a6 100644 --- a/src/app/fillResultsModal.js +++ b/src/app/fillResultsModal.js @@ -1,7 +1,7 @@ -export const fillResultsModal = (gameHandlerResults) => { +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} points!` + 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'); @@ -9,28 +9,22 @@ export const fillResultsModal = (gameHandlerResults) => { const tableCell = document.createElement('tr'); tableCell.className = 'tableWithResultsQA'; - if ((questionItem.question).substring(0, 3) !== 'http') { + + if (mode.name === 'WHAT_DOES_THIS_POKEMON_LOOK_LIKE') { tableCell.innerHTML = `${questionItem.question} pokemon img pokemon img` - if (questionItem.isCorrect === true) { - tableCell.querySelector('.tableWithResultsYourAnswer').style.border = '2px solid green'; - } else { - tableCell.querySelector('.tableWithResultsYourAnswer').style.border = '2px solid red'; - } - } else { + tableCell.querySelector('.tableWithResultsYourAnswer').style.border = questionItem.isCorrect === true ? '2px solid green' : '2px solid red'; + + } else if (mode.name === 'WHO_IS_THAT_POKEMON') { tableCell.innerHTML = `pokemon img ${questionItem.correctAnswer} ${questionItem.answer}` - - if (questionItem.isCorrect === true) { - tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'green'; - } else { - tableCell.querySelector('.tableWithResultsYourAnswer').style.color = 'red'; - } + + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = questionItem.isCorrect === true ? 'green' : 'red'; } resultsTable.appendChild(tableCell); } diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 547c447..00950a8 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -83,7 +83,8 @@ export async function renderNextQuestion(generator) { }) } } else { // no more questions left - fillResultsModal(GAME_HANDLER) + // TO DO connect to timer + fillResultsModal(GAME_HANDLER.getResults(10), CURRENT_MODE) showAPopUpScreen(document.getElementById('resultsScreen'), 'flex'); } } From 120966f4651dc93dc5e9dd7ee1617b00bb938c7c Mon Sep 17 00:00:00 2001 From: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com> Date: Thu, 14 Jan 2021 11:34:49 +0100 Subject: [PATCH 5/5] Change the way the mode is chosen --- src/app/fillResultsModal.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/fillResultsModal.js b/src/app/fillResultsModal.js index 17d57a6..e303fe5 100644 --- a/src/app/fillResultsModal.js +++ b/src/app/fillResultsModal.js @@ -1,3 +1,5 @@ +import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON } from "../service/modes"; + export const fillResultsModal = (gameHandlerResults, mode) => { const resultsDescription = document.querySelector('#resultsDescription'); @@ -10,7 +12,7 @@ export const fillResultsModal = (gameHandlerResults, mode) => { const tableCell = document.createElement('tr'); tableCell.className = 'tableWithResultsQA'; - if (mode.name === 'WHAT_DOES_THIS_POKEMON_LOOK_LIKE') { + if (mode === WHAT_DOES_THIS_POKEMON_LOOK_LIKE) { tableCell.innerHTML = `${questionItem.question} pokemon img @@ -18,7 +20,7 @@ export const fillResultsModal = (gameHandlerResults, mode) => { tableCell.querySelector('.tableWithResultsYourAnswer').style.border = questionItem.isCorrect === true ? '2px solid green' : '2px solid red'; - } else if (mode.name === 'WHO_IS_THAT_POKEMON') { + } else if (mode === WHO_IS_THAT_POKEMON) { tableCell.innerHTML = `pokemon img ${questionItem.correctAnswer}