From 78b5c7c20a475d44a1441c261d7314d4f42a20a8 Mon Sep 17 00:00:00 2001 From: GRosza Date: Thu, 23 Dec 2021 00:10:32 +0100 Subject: [PATCH 1/4] new circles feature --- src/views/QuizView/quizView.css | 12 +++++++++++- src/views/QuizView/quizView.js | 17 ++++++++++++++++- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/views/QuizView/quizView.css b/src/views/QuizView/quizView.css index 1ebabba..37f497f 100644 --- a/src/views/QuizView/quizView.css +++ b/src/views/QuizView/quizView.css @@ -39,8 +39,18 @@ text-align: center; font-weight: bold; } - #quizView #question-numbers #current-question { + line-height: 5vmin; + width: 5vmin; + border-radius: 50%; + padding: 2vmin; + border: 0.3vmin solid #000; + color: white; + text-align: center; + background-color: #000; +} + +#quizView #question-numbers #answered { line-height: 4vmin; width: 4vmin; border-radius: 50%; diff --git a/src/views/QuizView/quizView.js b/src/views/QuizView/quizView.js index 121c705..2193917 100644 --- a/src/views/QuizView/quizView.js +++ b/src/views/QuizView/quizView.js @@ -23,6 +23,9 @@ export async function renderQuizView() { function createQuestionNumbers() { const circles = document.createElement('div'); circles.setAttribute('id', 'question-numbers'); + circles.onclick = function () { + selectQuestion(); + }; for (let i = 0; i < QuizSettings.questionsNum; i++) { const number = document.createElement('div'); number.innerText = i + 1; @@ -122,7 +125,7 @@ function nextQuestion(e) { saveAnswer(buttonValue); const currentQuestionNumber = document.getElementById('current-question'); - currentQuestionNumber.setAttribute('id', ''); + currentQuestionNumber.setAttribute('id', 'answered'); const answersContainer = document.getElementById('answers'); answersContainer.innerHTML = ''; @@ -141,3 +144,15 @@ function previousQuestion() { current--; renderQuizData(); } + +function selectQuestion() { + const currentQuestionNumber = document.getElementById('current-question'); + currentQuestionNumber.setAttribute('id', ''); + + const answersContainer = document.getElementById('answers'); + answersContainer.innerHTML = ''; + + const numbers = document.getElementById('question-numbers'); + + renderQuizData(); +} From 7c116afeb1ad350a3d3169064e00a304d2f3d256 Mon Sep 17 00:00:00 2001 From: GRosza Date: Tue, 28 Dec 2021 22:19:11 +0100 Subject: [PATCH 2/4] added requested features --- src/components/Answer/Answer.js | 3 +- src/views/QuizView/quizView.css | 2 +- src/views/QuizView/quizView.js | 61 +++++++++++++++++++++------------ 3 files changed, 42 insertions(+), 24 deletions(-) diff --git a/src/components/Answer/Answer.js b/src/components/Answer/Answer.js index 4bcf535..fbfad49 100644 --- a/src/components/Answer/Answer.js +++ b/src/components/Answer/Answer.js @@ -1,10 +1,11 @@ export default class Answer { - constructor(timeOfAnswer, Question, answer, lifelineUsed, changed) { + constructor(index, timeOfAnswer, Question, answer, lifelineUsed, changed) { this.timeOfAnswer = timeOfAnswer; this.Question = Question; this.lifelineUsed = lifelineUsed; this.answer = answer; this.changed = changed; + this.index = index; } checkIfCorrect() { diff --git a/src/views/QuizView/quizView.css b/src/views/QuizView/quizView.css index 83708bf..0aecb82 100644 --- a/src/views/QuizView/quizView.css +++ b/src/views/QuizView/quizView.css @@ -61,7 +61,7 @@ background-color: #000; } -#quizView #question-numbers #answered { +#quizView #question-numbers .answered { line-height: 4vmin; width: 4vmin; border-radius: 50%; diff --git a/src/views/QuizView/quizView.js b/src/views/QuizView/quizView.js index 343d1b5..d3d9385 100644 --- a/src/views/QuizView/quizView.js +++ b/src/views/QuizView/quizView.js @@ -19,6 +19,8 @@ export async function renderQuizView() { current = 0; userAnswers = []; document.querySelector('#app').append(createLayout()); + questions.forEach((q, idx) => userAnswers.push(new Answer(idx, 0, q, '', false, false))); + console.log(userAnswers); startTimer(); renderQuizData(); } @@ -26,8 +28,10 @@ export async function renderQuizView() { function createQuestionNumbers() { const circles = document.createElement('div'); circles.setAttribute('id', 'question-numbers'); - circles.onclick = function () { - selectQuestion(); + circles.onclick = function (e) { + console.log('click'); + console.log(e.target.innerText); + selectQuestion(parseInt(e.target.innerText)); }; for (let i = 0; i < QuizSettings.questionsNum; i++) { const number = document.createElement('div'); @@ -128,28 +132,30 @@ function getTime() { } function saveAnswer(answer) { - let change = false; endTime = getTime(); const relativeTime = endTime - startTime; - if (userAnswers[current] != undefined && userAnswers[current].answer != '') { - if (answer === '') { - return; - } - change = true; - } - const ans = new Answer(relativeTime, questions[current], answer, false, change); - userAnswers[current] = ans; + + const currentAnswer = userAnswers.find((ans) => current === ans.index); + currentAnswer.timeOfAnswer = relativeTime; + currentAnswer.changed = currentAnswer.answer && currentAnswer.answer != answer; + currentAnswer.answer = answer; +} + +function addAnsweredClass() { + const currentQuestionNumber = document.getElementById('current-question'); + currentQuestionNumber.setAttribute('class', 'answered'); } function nextQuestion(e) { let buttonValue = e.target.innerText; saveAnswer(buttonValue); - const currentQuestionNumber = document.getElementById('current-question'); - currentQuestionNumber.setAttribute('id', 'answered'); + if (userAnswers[current].answer) { + addAnsweredClass(); + } - const answersContainer = document.getElementById('answers'); - answersContainer.innerHTML = ''; + clearCurrentQuestionId(); + clearAnswerContainer(); current++; lifeline = false; @@ -157,25 +163,36 @@ function nextQuestion(e) { } function previousQuestion() { - const currentQuestionNumber = document.getElementById('current-question'); - currentQuestionNumber.setAttribute('id', ''); + if (userAnswers[current].answer) { + addAnsweredClass(); + } - const answersContainer = document.getElementById('answers'); - answersContainer.innerHTML = ''; + clearCurrentQuestionId(); + clearAnswerContainer(); current--; renderQuizData(); } -function selectQuestion() { +function clearCurrentQuestionId() { const currentQuestionNumber = document.getElementById('current-question'); - currentQuestionNumber.setAttribute('id', ''); + currentQuestionNumber.removeAttribute('id'); +} +function clearAnswerContainer() { const answersContainer = document.getElementById('answers'); answersContainer.innerHTML = ''; +} + +function selectQuestion(selectedNumber) { + if (userAnswers[current].answer) { + addAnsweredClass(); + } - const numbers = document.getElementById('question-numbers'); + clearCurrentQuestionId(); + clearAnswerContainer(); + current = selectedNumber - 1; renderQuizData(); } From 82488686ac25f622f8b1145634091e255fba79f8 Mon Sep 17 00:00:00 2001 From: GRosza Date: Wed, 29 Dec 2021 00:06:00 +0100 Subject: [PATCH 3/4] resolved eslint problems --- src/views/QuizView/quizView.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/views/QuizView/quizView.js b/src/views/QuizView/quizView.js index d3d9385..ec04a98 100644 --- a/src/views/QuizView/quizView.js +++ b/src/views/QuizView/quizView.js @@ -1,6 +1,10 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable import/named */ +/* eslint radix: ["error", "as-needed"] */ + import { QuizSettings } from '../quiz-settings/quiz-settings'; import { createTimer, startTimer, stopTimer } from '../../components/timer/quiz-timer'; -import { getRandomQuizQuestions } from '../../model/randomizer.js'; +import { getRandomQuizQuestions } from '../../model/randomizer'; import { renderChoiceModal } from '../confirmChoiceModal/confirmChoiceModal'; import Button from '../../components/Button/Button'; import Answer from '../../components/Answer/Answer'; @@ -12,6 +16,7 @@ let endTime; let timerMinutes; let timerSeconds; let lifeline = false; +// eslint-disable-next-line import/no-mutable-exports export let userAnswers = []; export async function renderQuizView() { @@ -20,7 +25,6 @@ export async function renderQuizView() { userAnswers = []; document.querySelector('#app').append(createLayout()); questions.forEach((q, idx) => userAnswers.push(new Answer(idx, 0, q, '', false, false))); - console.log(userAnswers); startTimer(); renderQuizData(); } @@ -28,9 +32,7 @@ export async function renderQuizView() { function createQuestionNumbers() { const circles = document.createElement('div'); circles.setAttribute('id', 'question-numbers'); - circles.onclick = function (e) { - console.log('click'); - console.log(e.target.innerText); + circles.onclick = function click(e) { selectQuestion(parseInt(e.target.innerText)); }; for (let i = 0; i < QuizSettings.questionsNum; i++) { @@ -137,7 +139,7 @@ function saveAnswer(answer) { const currentAnswer = userAnswers.find((ans) => current === ans.index); currentAnswer.timeOfAnswer = relativeTime; - currentAnswer.changed = currentAnswer.answer && currentAnswer.answer != answer; + currentAnswer.changed = currentAnswer.answer && currentAnswer.answer !== answer; currentAnswer.answer = answer; } @@ -147,7 +149,7 @@ function addAnsweredClass() { } function nextQuestion(e) { - let buttonValue = e.target.innerText; + const buttonValue = e.target.innerText; saveAnswer(buttonValue); if (userAnswers[current].answer) { @@ -207,8 +209,8 @@ function useLifeline() { let n; while (removed < 2) { n = Math.floor(Math.random() * answers.length); - if (questions[current].correct.toUpperCase() != answers[n].children[0].innerText) { - let index = questions[current].incorrectAnswers + if (questions[current].correct.toUpperCase() !== answers[n].children[0].innerText) { + const index = questions[current].incorrectAnswers .map((ans) => ans.toUpperCase()) .indexOf(answers[n].children[0].innerText); questions[current].incorrectAnswers.splice(index, 1); From b00a0c34e06487c92535e844cd5c476efd5cf409 Mon Sep 17 00:00:00 2001 From: GRosza Date: Mon, 3 Jan 2022 21:26:05 +0100 Subject: [PATCH 4/4] added selected answer feature --- src/components/Answer/Answer.js | 8 ++++---- src/views/QuizView/quizView.css | 5 +++++ src/views/QuizView/quizView.js | 23 +++++++++++------------ 3 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/components/Answer/Answer.js b/src/components/Answer/Answer.js index fbfad49..7eda1dd 100644 --- a/src/components/Answer/Answer.js +++ b/src/components/Answer/Answer.js @@ -1,7 +1,7 @@ export default class Answer { - constructor(index, timeOfAnswer, Question, answer, lifelineUsed, changed) { + constructor(index, timeOfAnswer, question, answer, lifelineUsed, changed) { this.timeOfAnswer = timeOfAnswer; - this.Question = Question; + this.question = question; this.lifelineUsed = lifelineUsed; this.answer = answer; this.changed = changed; @@ -9,7 +9,7 @@ export default class Answer { } checkIfCorrect() { - return this.answer.toUpperCase() === this.Question.correct.toUpperCase(); + return this.answer.toUpperCase() === this.question.correct.toUpperCase(); } getScore() { @@ -17,7 +17,7 @@ export default class Answer { if (this.checkIfCorrect()) { score = 1; if (this.changed) { - score = score / 2; + score /= 2; } } return score; diff --git a/src/views/QuizView/quizView.css b/src/views/QuizView/quizView.css index 2bf1e90..37c6ef4 100644 --- a/src/views/QuizView/quizView.css +++ b/src/views/QuizView/quizView.css @@ -134,6 +134,11 @@ left: 2%; } +.wrapper.selected .answer { + background-color: #3e505b; + color: white; +} + @media only screen and (min-device-width: 280px) and (max-device-width: 660px) { .quizViewMenuButton { width: min-content; diff --git a/src/views/QuizView/quizView.js b/src/views/QuizView/quizView.js index 2042488..df5deca 100644 --- a/src/views/QuizView/quizView.js +++ b/src/views/QuizView/quizView.js @@ -1,9 +1,5 @@ -/* eslint-disable no-unused-vars */ -/* eslint-disable import/named */ -/* eslint radix: ["error", "as-needed"] */ - import { QuizSettings } from '../quiz-settings/quiz-settings'; -import { createTimer, startTimer, stopTimer } from '../../components/timer/quiz-timer'; +import { createTimer, startTimer } from '../../components/timer/quiz-timer'; import { getRandomQuizQuestions } from '../../model/randomizer'; import { renderChoiceModal } from '../confirmChoiceModal/confirmChoiceModal'; import Button from '../../components/Button/Button'; @@ -16,7 +12,6 @@ let endTime; let timerMinutes; let timerSeconds; let lifeline = false; -// eslint-disable-next-line import/no-mutable-exports export let userAnswers = []; export async function renderQuizView() { @@ -33,7 +28,7 @@ function createQuestionNumbers() { const circles = document.createElement('div'); circles.setAttribute('id', 'question-numbers'); circles.onclick = function click(e) { - selectQuestion(parseInt(e.target.innerText)); + selectQuestion(parseFloat(e.target.innerText)); }; for (let i = 0; i < QuizSettings.questionsNum; i++) { const number = document.createElement('div'); @@ -121,17 +116,21 @@ function renderQuizData() { current = current === QuizSettings.questionsNum ? current - 1 : current; const numbers = document.getElementById('question-numbers').children; numbers.item(current).setAttribute('id', 'current-question'); - const image = document.querySelector('#quizView > img'); - image.src = questions[current].imageUrl; + image.src = userAnswers[current].question.imageUrl; const question = document.getElementById('question-text'); - question.innerText = questions[current].question.toUpperCase(); + question.innerText = userAnswers[current].question.question.toUpperCase(); const answersContainer = document.getElementById('answers'); - const answers = questions[current].getAnswers(); + const answers = userAnswers[current].question.getAnswers(); + for (let i = 0; i < answers.length; i++) { - answersContainer.appendChild(Button(answers[i], 'answer', false, 'click', nextQuestion)); + const answerBtn = Button(answers[i], 'answer', false, 'click', nextQuestion); + if (answers[i].toUpperCase() === userAnswers[current].answer) { + answerBtn.classList.add('selected'); + } + answersContainer.appendChild(answerBtn); } startTime = getTime(); }