Enhance Review2024 quiz functionality: initialize quizPoints to 0, ad…

…d answerStatus state, and update quiz progress display. Improve styling for quiz components and adjust translation for points display.
carrismetropolitana · Jan 10, 2025 · 4e86fe4 · 4e86fe4
1 parent 6995d51
commit 4e86fe4
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 14 deletions.
diff --git 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' && (
 				<Review2024QuizWrapper
+					answerStatus={answerStatus}
 					points={quizPoints}
 					progress={quizProgress}
+					setAnswerStatus={setAnswerStatus}
 					setPoints={setQuizPoints}
 					setProgress={setQuizProgress}
 				/>

diff --git 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
@@ -52,7 +52,7 @@ export function Review2024QuizQuestion({ answerStatus, onAnswer, onClickNext, pr
 		>
 
 			<div className={styles.header}>
-				<p className={styles.headerTitle}>{t('progress', { current: progress, total: allQuizData.length })}</p>
+				<p className={styles.headerTitle}>{t('progress', { current: progress + 1, total: allQuizData.length })}</p>
 				<p className={styles.headerPoints}>{t('points', { points: quizData._points })}</p>
 			</div>
 

diff --git 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
@@ -10,39 +10,38 @@ 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) {
 	//
 
 	//
 	// A. Setup variables
 
 	const t = useTranslations('review-2024.Review2024QuizWrapper');
 
-	const [answerStatus, setAnswerStatus] = useState<'correct' | 'wrong' | null>(null);
-
 	//
 	// B. Handle actions
 
 	const handleClickAnswerOption = (answerData: Review2024QuizAnswerSchema) => {
 		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 (
-			<div className={styles.container}>
-				<Review2024QuizFinalResult points={points} />
-			</div>
+			<Surface variant="persistent" forceOverflow>
+				<Section withPadding="desktop" withGap>
+					<Review2024QuizFinalResult points={points} />
+				</Section>
+			</Surface>
 		);
 	}
 

diff --git 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 ›",