Merge pull request #62 from DillonDavidson/main

Fixed dark mode and quiz page calculations
UNLV-CS472-672 · Mar 27, 2024 · 2e9ed18 · 2e9ed18
2 parents 6aa1f11 + 9459a07
commit 2e9ed18
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 22 deletions.
diff --git a/app/src/pages/home/Home.js b/app/src/pages/home/Home.js
@@ -2,10 +2,13 @@ import NavigationPanel from "../../components/NavigationPanel";
 import Frame from "../../components/TopPanel";
 import LifeQuestFormTriangle from "../../components/LifeQuestFormTriangle";
 import styles from "./Home.module.css";
+import { useFontSize } from '../../contexts/FontSizeContext';
 
 const Home = () => {
+  const { fontSize, darkMode} = useFontSize();	
+
   return (
-    <div className={styles.home}>
+    <div className={`${styles.home} ${darkMode ? styles.darkMode : ''}`} style={{ fontSize: `${fontSize}px` }} data-testid="home-page">
       <NavigationPanel />
       <label className={styles.pageLabel} htmlFor="page_label">
         <div className={styles.pagetitle}>LifeQuest</div>

diff --git a/app/src/pages/home/Home.module.css b/app/src/pages/home/Home.module.css
@@ -3,6 +3,7 @@
   position: relative;
   font-weight: 900;
   text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  font-size: var(--title-font-size);
 }
 .pageLabel {
   cursor: pointer;
@@ -40,3 +41,7 @@
     max-height: 852px;
   }
 }
+.darkMode {
+	background-color: var(--background-color-dark); /* Use dark mode background color */
+	color: var(--text-color-dark); /* Use dark mode text color */
+}
diff --git a/app/src/pages/quests/QuestsPage.js b/app/src/pages/quests/QuestsPage.js
@@ -6,6 +6,9 @@ import styles from "./QuestsPage.module.css";
 import { useFontSize } from '../../contexts/FontSizeContext'; 
 
 const QuestsPage = () => {
+  // Darkmode and fontSize
+  const { fontSize, darkMode} = useFontSize();	  
+
   // State to manage available quests
   const [availableQuests, setAvailableQuests] = useState([
     { id: 1, title: "Quest 1", text: "Quest 1 Description" },
@@ -47,7 +50,7 @@ const QuestsPage = () => {
   };
 
   return (
-    <div className={styles.QuestsPage}>
+    <div className={`${styles.QuestsPage} ${darkMode ? styles.darkMode : ''}`} style={{ fontSize: `${fontSize}px` }} data-testid="quests-page">
       {/* Navigation Panel */}
       <NavigationPanel />
       {/* Page Label */}

diff --git a/app/src/pages/quests/QuestsPage.module.css b/app/src/pages/quests/QuestsPage.module.css
@@ -6,6 +6,7 @@
     font-weight: 900;
     text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 	font-size: var(--title-font-size);
+	font-size: var(--title-font-size);
 }
 .pageLabel {
     cursor: pointer;
@@ -118,4 +119,9 @@
     cursor: pointer;
     font-size: var(--button-font-size);
     position: relative; /* Change position to relative */
+}
+
+.darkMode {
+	background-color: var(--background-color-dark); /* Use dark mode background color */
+	color: var(--text-color-dark); /* Use dark mode text color */
 }
diff --git a/app/src/pages/quiz/QuizPage.js b/app/src/pages/quiz/QuizPage.js
@@ -21,23 +21,23 @@ const QuizPage = () => {
   const [professionalScore, setProfessionalScore] = useState(0);
   const [relationshipsScore, setRelationshipsScore] = useState(0);
 
-  const handleAnswerSelection = (answer, type) => {
+  const handleAnswerSelection = (answer, category) => {
     const currentQuestion = questionsData[currentQuestionIndex];
     setUserAnswers({
       ...userAnswers,
-      [currentQuestionIndex]: { answer, type }, 
+      [currentQuestionIndex]: { answer, category }, 
     });
 
     // 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) {
+    switch (category) {
       case "health":
         setHealthScore((prevScore) => prevScore + answer);
         break;
       case "professional":
         setProfessionalScore((prevScore) => prevScore + answer);
         break;
-      case "relationships":
+      case "relationship":
         setRelationshipsScore((prevScore) => prevScore + answer);
         break;
       default:
@@ -83,15 +83,15 @@ const QuizPage = () => {
         )}
         {!quizCompleted && (
           <div className={styles.answerOptions}>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].type)}>Strongly Disagree</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 2 ? styles.selected : ""} onClick={() => handleAnswerSelection(2, questionsData[currentQuestionIndex].type)}>Disagree</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 3 ? styles.selected : ""} onClick={() => handleAnswerSelection(3, questionsData[currentQuestionIndex].type)}>Neutral</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 4 ? styles.selected : ""} onClick={() => handleAnswerSelection(4, questionsData[currentQuestionIndex].type)}>Agree</button>
-            <button className={userAnswers[currentQuestionIndex]?.answer === 5 ? styles.selected : ""} onClick={() => handleAnswerSelection(5, questionsData[currentQuestionIndex].type)}>Strongly Agree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 1 ? styles.selected : ""} onClick={() => handleAnswerSelection(1, questionsData[currentQuestionIndex].category)}>Strongly Disagree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 2 ? styles.selected : ""} onClick={() => handleAnswerSelection(2, questionsData[currentQuestionIndex].category)}>Disagree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 3 ? styles.selected : ""} onClick={() => handleAnswerSelection(3, questionsData[currentQuestionIndex].category)}>Neutral</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 4 ? styles.selected : ""} onClick={() => handleAnswerSelection(4, questionsData[currentQuestionIndex].category)}>Agree</button>
+            <button className={userAnswers[currentQuestionIndex]?.answer === 5 ? styles.selected : ""} onClick={() => handleAnswerSelection(5, questionsData[currentQuestionIndex].category)}>Strongly Agree</button>
           </div>
         )}
         {!quizCompleted ? (
-          <button onClick={handleNextButtonClick} className={styles.button} disabled={!answerSelected}>
+          <button onClick={handleNextButtonClick} className={styles.nextButton} disabled={!answerSelected}>
             {currentQuestionIndex < totalQuestions - 1 ? "Next" : "Finish"}
           </button>
         ) : (

diff --git a/app/src/pages/quiz/QuizPage.module.css b/app/src/pages/quiz/QuizPage.module.css
@@ -13,6 +13,7 @@
   font-size: 32px;
   color: var(--color-black);
   font-family: var(--font-roboto);
+  font-size: var(--text-font-size);
 }
 
 .pageLabel {
@@ -30,17 +31,29 @@
 
 .questionContainer {
   margin-top: 80px;
-  position: relative; 
+  left: 45px;
+  position: absolute;
+  height: 75%; 
+  width: 80%;
 }
 
 .question {
   margin-bottom: 20px;
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  width: 80%;
+  transform: translateX(-50%);
 }
 
 .answerOptions {
+  position: absolute;
+  top: 60%; 
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column;
   display: flex;
-  flex-wrap: wrap; 
-  justify-content: space-around;
 }
 
 .button {
@@ -50,16 +63,30 @@
   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; 
+  font-size: var(--button-font-size);
+  margin-top: 10px; 
 }
 
 .selected {
   background-color: green;
   color: white;
 }
+
+.nextButton {
+  position: absolute;
+  bottom: 10%; 
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--button-font-size);
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.darkMode {
+	background-color: var(--background-color-dark); 
+	color: var(--text-color-dark);
+}