Wellness Quiz Score bugfix

src/components/SelfAssessment/ScoreModal.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Dialog, DialogTitle, DialogContent, Typography, Button, Box } from "@mui/material";
+
+function ScoreModal({ open, score, handleClose }) {
+  function getMoodMessage(score) {
+    if (score >= 0 && score <= 10) {
+      return "You should seek support!";
+    } else if (score >= 11 && score <= 20) {
+      return "You might need some help!";
+    } else if (score >= 21 && score <= 30) {
+      return "You're doing well!";
+    } else if (score >= 31 && score <= 40) {
+      return "You're feeling great!";
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm">
+      <DialogTitle>
+        <Typography variant="h6" align="center">
+          Your Score
+        </Typography>
+      </DialogTitle>
+      <DialogContent>
+        <Typography variant="h4" align="center">
+          {score / 4} / 10
+        </Typography>
+        <Typography variant="h6" align="center" gutterBottom>
+          {getMoodMessage(score)}
+        </Typography>
+        <Box display="flex" justifyContent="center" mt={2}>
+          <Button variant="contained" color="primary" onClick={handleClose}>
+            Close
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default ScoreModal;

src/components/SelfAssessment/index.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import questions from "./questions.json";
 import { Typography, Button, Box, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
 import { styled } from "@mui/material/styles";
-
+import ScoreModal from "./ScoreModal";
 const StyledLabel = styled("label")({
   display: "block",
 });
@@ -11,11 +11,21 @@ function SelfAssessment() {
   const initialSelectedAnswers = questions.reduce((acc, question) => ({ ...acc, [question.id]: null }), {});
   const [score, setScore] = useState(0);
   const [selectedAnswers, setSelectedAnswers] = useState(initialSelectedAnswers);
+  const [modalOpen, setModalOpen] = useState(false);
 
   function handleOptionSelect(questionId, optionValue) {
     setSelectedAnswers({ ...selectedAnswers, [questionId]: Number(optionValue) });
   }
 
+  function openModal() {
+    calculateScore();
+    setModalOpen(true);
+  }
+
+  function closeModal() {
+    setModalOpen(false);
+  }
+
   function calculateScore() {
     let newScore = 0;
     for (let i = 0; i < questions.length; i++) {
@@ -52,12 +62,13 @@ function SelfAssessment() {
           </RadioGroup>
         </FormControl>
       ))}
-      <Button variant="contained" onClick={calculateScore} sx={{ mt: 2, maxWidth: "200px", alignSelf: "center" }}>
+      <Button variant="contained" onClick={openModal} sx={{ mt: 2, maxWidth: "200px", alignSelf: "center" }}>
         Calculate Score
       </Button>
       <Typography variant="body1" sx={{ mt: 2, alignSelf: "center" }}>
-        Your score: {score}
+        Your score: {score / 4}
       </Typography>
+      <ScoreModal open={modalOpen} score={score} handleClose={closeModal} />
     </Box>
   );
 }