progress and store response

src/App.css

@@ -349,5 +349,5 @@
   grid-row: 1;
   min-width: 275;
   margin: 10px !important; 
-  border-left: 5px solid var(--main);
+  /* border-left: 5px solid var(--main); */
 }

src/Components/Test/Cleaver/Question.jsx

@@ -4,9 +4,21 @@ import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import {
   Card,CardContent,Avatar,Checkbox,List,Tooltip,Fade,
   ListItem,ListItemButton,ListItemIcon,ListItemText,
+  Box,LinearProgress,
 } from '@mui/material'
+
 import { deepPurple } from '@mui/material/colors';
 
+function LinearProgressWithLabel(props) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 0 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+    </Box>
+  );
+}
+
 function CheckboxexHeader(prop) {
   return (
     <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
@@ -44,7 +56,7 @@ function CheckboxesGroup(props) {
         }
       }
       let final = Object.assign(resp,temp);
-      console.log('Change A:',final)
+      // console.log('Change A:',final)
       save(final)
     }
   };
@@ -60,7 +72,7 @@ function CheckboxesGroup(props) {
         }
       }
       let final = Object.assign(resp,temp)
-      console.log('Change B: ', final);
+      // console.log('Change B: ', final);
       save(final)
     }
   };
@@ -119,16 +131,17 @@ function CheckboxesGroup(props) {
   );
 }
 
-export function Question({quiz, index, current, save, responses}) {
+export function Question({quiz, index, current, save, responses, progress}) {
   let { instrucciondepregunta, respuestas,id } = quiz
   let checked = index === current;
+
   return (
     <Fade in={checked} unmountOnExit>
       <Card className="question_form">
         <CardContent>
           <div variant="body2">
             <List>
-              <CheckboxexHeader group={id} title={instrucciondepregunta}/>
+              <CheckboxexHeader group={index + 1} title={instrucciondepregunta}/>
             </List>
             <CheckboxesGroup 
               id={id}
@@ -138,6 +151,7 @@ export function Question({quiz, index, current, save, responses}) {
               />
           </div>
         </CardContent>
+        <LinearProgressWithLabel value={progress} />
       </Card>
     </Fade>
   );

src/Pages/Pruebas/Cleaver.jsx

@@ -14,10 +14,14 @@ export function Cleaver() {
   const [totalPreguntas, setPreguntas] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
   const [responses, setRespones] = React.useState({});
+  const [progress, setProgress] = React.useState(0);
 
-  const BadQuestion = () => toast("Escoge una respuesta en cada columna",{
-      icon : '⚠️'
-  });
+  const BadQuestion = () => toast("Escoge una respuesta en cada columna",{ icon : '⚠️' });
+  const CalculateProgress = () => {
+    let total_preguntas = totalPreguntas.length + totalRespondidas.length
+    let x = totalRespondidas.length *100 / (total_preguntas)
+    setProgress(x.toFixed(2))
+  }
 
   React.useEffect(() => {
     // TODO:
@@ -33,14 +37,12 @@ export function Cleaver() {
   }, [token]);
 
   const handleAddQuestion = () => {
-
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
     let current_resp = responses[currentAnswer.id];
 
     if(!current_resp){
       return BadQuestion();
     }
-    console.log(current_resp)
     if(parseInt( current_resp.A ) ===0 || parseInt( current_resp.B ) === 0){
       return BadQuestion();
     }
@@ -51,6 +53,7 @@ export function Cleaver() {
       let temp = nextHiddenItem.shift()
       setRespondidas([...totalRespondidas,temp]);
     }
+    CalculateProgress()
   };
 
   const handleRemoveQuestion = () => {
@@ -59,10 +62,9 @@ export function Cleaver() {
     let current_without_last = totalRespondidas.filter(({id}) => id !== ultimaRespondida.id);
     setRespondidas([...current_without_last]);
     setCurrent(current - 1 )
+    CalculateProgress()
   }
 
-  console.log(responses)
-
   return (
     <div  className="content-section question">
       <Box className="question_body">
@@ -75,6 +77,7 @@ export function Cleaver() {
             quiz={item} 
             index={i} 
             current={current} 
+            progress={progress} 
             />)
         )}
       </Box>
@@ -100,7 +103,7 @@ export function Cleaver() {
         </Button>
       </div>
       <Toaster
-        position="top-center"
+        position="bottom-right"
         />
     </div>
   )