diff --git a/frontend/components/review-2024/Review2024Page/index.tsx b/frontend/components/review-2024/Review2024Page/index.tsx index b445ac6e..0b222df0 100644 --- a/frontend/components/review-2024/Review2024Page/index.tsx +++ b/frontend/components/review-2024/Review2024Page/index.tsx @@ -22,8 +22,9 @@ export function Review2024Page() { const [selectedTab, setSelectedTab] = useState('overview'); - const [quizPoints, setQuizPoints] = useState(1); + const [quizPoints, setQuizPoints] = useState(0); const [quizProgress, setQuizProgress] = useState(0); + const [answerStatus, setAnswerStatus] = useState<'correct' | 'wrong' | null>(null); // // B. Render components @@ -50,8 +51,10 @@ export function Review2024Page() { {selectedTab === 'quiz' && ( diff --git a/frontend/components/review-2024/Review2024QuizPoints/styles.module.css b/frontend/components/review-2024/Review2024QuizPoints/styles.module.css index 78e8dabd..9382fdf5 100644 --- a/frontend/components/review-2024/Review2024QuizPoints/styles.module.css +++ b/frontend/components/review-2024/Review2024QuizPoints/styles.module.css @@ -8,7 +8,7 @@ align-items: center; justify-content: center; width: 100%; - padding: 10px 20px; + padding: 30px; font-size: 20px; font-weight: var(--font-weight-bold); line-height: 1; @@ -18,7 +18,7 @@ border-radius: 18px; } -@media (width <= 400px) { +@media (width <= 650px) { .container { border-radius: 0; } diff --git a/frontend/components/review-2024/Review2024QuizQuestion/index.tsx b/frontend/components/review-2024/Review2024QuizQuestion/index.tsx index 10a48009..ae3512a5 100644 --- a/frontend/components/review-2024/Review2024QuizQuestion/index.tsx +++ b/frontend/components/review-2024/Review2024QuizQuestion/index.tsx @@ -52,7 +52,7 @@ export function Review2024QuizQuestion({ answerStatus, onAnswer, onClickNext, pr >
-

{t('progress', { current: progress, total: allQuizData.length })}

+

{t('progress', { current: progress + 1, total: allQuizData.length })}

{t('points', { points: quizData._points })}

diff --git a/frontend/components/review-2024/Review2024QuizQuestion/styles.module.css b/frontend/components/review-2024/Review2024QuizQuestion/styles.module.css index 65d1b6a3..e386149e 100644 --- a/frontend/components/review-2024/Review2024QuizQuestion/styles.module.css +++ b/frontend/components/review-2024/Review2024QuizQuestion/styles.module.css @@ -9,16 +9,19 @@ justify-content: flex-start; width: 100%; overflow: hidden; + background-color: var(--color-system-background-100); border: 2px solid var(--color-border); border-radius: 18px; + box-shadow: 0 0 15px 0 rgb(0 0 0 / 15%); --animation-duration-open: 600ms; --animation-duration-close: 600ms; } -@media (width <= 400px) { +@media (width <= 650px) { .container { border-radius: 0; + box-shadow: unset; } } diff --git a/frontend/components/review-2024/Review2024QuizWrapper/index.tsx b/frontend/components/review-2024/Review2024QuizWrapper/index.tsx index 6dbf36be..57403c00 100644 --- a/frontend/components/review-2024/Review2024QuizWrapper/index.tsx +++ b/frontend/components/review-2024/Review2024QuizWrapper/index.tsx @@ -10,22 +10,23 @@ import { Review2024QuizFinalResult } from '@/components/review-2024/Review2024Qu import { Review2024QuizPoints } from '@/components/review-2024/Review2024QuizPoints'; import { Review2024QuizQuestion } from '@/components/review-2024/Review2024QuizQuestion'; import { useTranslations } from 'next-intl'; -import { useState } from 'react'; import styles from './styles.module.css'; /* * */ interface Props { + answerStatus: 'correct' | 'wrong' | null points: number progress: number + setAnswerStatus: (value: 'correct' | 'wrong' | null) => void setPoints: (value: number) => void setProgress: (value: number) => void } /* * */ -export function Review2024QuizWrapper({ points, progress, setPoints, setProgress }: Props) { +export function Review2024QuizWrapper({ answerStatus, points, progress, setAnswerStatus, setPoints, setProgress }: Props) { // // @@ -33,8 +34,6 @@ export function Review2024QuizWrapper({ points, progress, setPoints, setProgress const t = useTranslations('review-2024.Review2024QuizWrapper'); - const [answerStatus, setAnswerStatus] = useState<'correct' | 'wrong' | null>(null); - // // B. Handle actions @@ -42,7 +41,7 @@ export function Review2024QuizWrapper({ points, progress, setPoints, setProgress if (answerStatus === null) { if (answerData.is_correct) { setAnswerStatus('correct'); - setPoints(points); + setPoints(points + (allQuizData[progress]?._points || 0)); } else { setAnswerStatus('wrong'); @@ -60,9 +59,11 @@ export function Review2024QuizWrapper({ points, progress, setPoints, setProgress if (progress >= allQuizData.length) { return ( -
- -
+ +
+ +
+
); } diff --git a/frontend/i18n/translations/pt.json b/frontend/i18n/translations/pt.json index 2a97c057..7d1eab16 100644 --- a/frontend/i18n/translations/pt.json +++ b/frontend/i18n/translations/pt.json @@ -1206,7 +1206,7 @@ "points": "Já tens {points, plural, =1 {# ponto} other {# pontos}}!" }, "Review2024QuizPoints": { - "points": "Já tens {points, plural, =1 {# ponto} other {# pontos}}" + "points": "{points, plural, =0 {Joga para ganhar pontos!} =1 {Já tens # ponto} other {Já tens # pontos}}" }, "Review2024QuizQuestion": { "next_question": "Próxima Pergunta ›",