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 @@
-
During 2 minutes you answered 20 questions.
+
Congratulations Wiesiu! During 2 minutes you answered 20 questions and scored 60 points!
@@ -164,11 +164,6 @@
-
-
-
-
-
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 =
+ `
|
+
${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 @@
-
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 @@
Correct |
You |
-
- |
- 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 =
- ` |
- ${question.correctAnswer} |
- ${question.answer} | `
+ if ((questionItem.question).substring(0, 3) !== 'http') {
+ tableCell.innerHTML =
+ `${questionItem.question} |
+ |
+ | `
- 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 =
+ ` |
+ ${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} |
|
| `
- 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 =
` |
${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} |
|
@@ -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 =
` |
${questionItem.correctAnswer} |