From 2012f97cf2c68541101a1a0160da8df538dde7d1 Mon Sep 17 00:00:00 2001 From: Alex Costa Date: Tue, 19 Mar 2024 18:57:48 -0700 Subject: [PATCH] Added quiz page. Basic functionality added. Not everything is 100% though. --- app/src/App.js | 5 +- app/src/pages/quiz/QuizPage.js | 105 +++++++++++++++++++++++++ app/src/pages/quiz/QuizPage.module.css | 65 +++++++++++++++ 3 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 app/src/pages/quiz/QuizPage.js create mode 100644 app/src/pages/quiz/QuizPage.module.css diff --git a/app/src/App.js b/app/src/App.js index 0103b45d..abd1ac5d 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -9,7 +9,7 @@ import Skeleton from "./pages/Skeleton"; import Login from "./pages/Login"; import Home from "./pages/home/Home"; import SettingsPage from './pages/SettingsPage'; - +import QuizPage from "./pages/quiz/QuizPage"; function App() { const action = useNavigationType(); @@ -53,7 +53,8 @@ function App() { } /> } /> } /> + } /> ); } -export default App; +export default App; \ No newline at end of file diff --git a/app/src/pages/quiz/QuizPage.js b/app/src/pages/quiz/QuizPage.js new file mode 100644 index 00000000..d9e272d6 --- /dev/null +++ b/app/src/pages/quiz/QuizPage.js @@ -0,0 +1,105 @@ +import React, { useState } from "react"; +import NavigationPanel from "../../components/NavigationPanel"; +import Frame from "../../components/TopPanel"; +import PageContent from "../../components/PageContent"; +import styles from "./QuizPage.module.css"; +import questionsData from "./quiz_questions.json"; + +const QuizPage = () => { + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); + const [userAnswers, setUserAnswers] = useState({}); + const [quizCompleted, setQuizCompleted] = useState(false); + const [answerSelected, setAnswerSelected] = useState(false); + const totalQuestions = questionsData.length; + + // Defining seperate scores for the questions here + const [healthScore, setHealthScore] = useState(0); + const [professionalScore, setProfessionalScore] = useState(0); + const [relationshipsScore, setRelationshipsScore] = useState(0); + + const handleAnswerSelection = (answer, type) => { + const currentQuestion = questionsData[currentQuestionIndex]; + setUserAnswers({ + ...userAnswers, + [currentQuestionIndex]: { answer, type }, + }); + + // Update the user scores, based on the category of question + // Note: This does not work for some reason!!!! Will be fixed at a later date. + switch (type) { + case "health": + setHealthScore((prevScore) => prevScore + answer); + break; + case "professional": + setProfessionalScore((prevScore) => prevScore + answer); + break; + case "relationships": + setRelationshipsScore((prevScore) => prevScore + answer); + break; + default: + break; + } + + setAnswerSelected(true); // Set answerSelected to true when an answer is selected + }; + + const handleNextButtonClick = () => { + if (currentQuestionIndex < totalQuestions - 1) { + setCurrentQuestionIndex(currentQuestionIndex + 1); + setAnswerSelected(false); // Reset answerSelected when moving to the next question + } else { + setQuizCompleted(true); + } + }; + + // Calculate the total possible points for each category + // This is not a good solution for determining total possible points, but added as a temporary means + const totalPossiblePoints = (totalQuestions/3) * 5; // Assuming each question has a max score of 5 + + // Calculate the percentages for each category + const healthPercentage = (healthScore / totalPossiblePoints) * 100; + const professionalPercentage = (professionalScore / totalPossiblePoints) * 100; + const relationshipsPercentage = (relationshipsScore / totalPossiblePoints) * 100; + + return ( +
+ + + +
+ {currentQuestionIndex < totalQuestions && !quizCompleted && ( +
+ {questionsData[currentQuestionIndex].question} +
+ )} + {!quizCompleted && ( +
+ + + + + +
+ )} + {!quizCompleted ? ( + + ) : ( +
+
Health Score: {healthPercentage.toFixed(2)}%
+
Professional Score: {professionalPercentage.toFixed(2)}%
+
Relationships Score: {relationshipsPercentage.toFixed(2)}%
+
+ )} +
+
+ ); +}; + +export default QuizPage; diff --git a/app/src/pages/quiz/QuizPage.module.css b/app/src/pages/quiz/QuizPage.module.css new file mode 100644 index 00000000..16cef71a --- /dev/null +++ b/app/src/pages/quiz/QuizPage.module.css @@ -0,0 +1,65 @@ +.quizPage { + width: 100%; + height: 852px; + position: relative; + border: 2px solid var(--color-black); + box-sizing: border-box; + overflow: hidden; + min-width: 393px; + max-width: 393px; + min-height: 852px; + max-height: 852px; + text-align: center; + font-size: 32px; + color: var(--color-black); + font-family: var(--font-roboto); +} + +.pageLabel { + cursor: pointer; + position: absolute; + top: 128px; + left: 17px; + width: 366px; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.questionContainer { + margin-top: 80px; + position: relative; +} + +.question { + margin-bottom: 20px; +} + +.answerOptions { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.button { + background-color: #007bff; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 18px; + margin-top: 20px; + position: absolute; + bottom: -50px; + left: 50%; + transform: translateX(-50%); + z-index: 1; +} + +.selected { + background-color: green; + color: white; +}