progress and store response

src/App.css

   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

 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' }}>
         }
       }
       let final = Object.assign(resp,temp);
-      console.log('Change A:',final)
+      // console.log('Change A:',final)
       save(final)
     }
   };
         }
       }
       let final = Object.assign(resp,temp)
-      console.log('Change B: ', final);
+      // console.log('Change B: ', final);
       save(final)
     }
   };
   );
 }
 
-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}
               />
           </div>
         </CardContent>
+        <LinearProgressWithLabel value={progress} />
       </Card>
     </Fade>
   );

src/Pages/Pruebas/Cleaver.jsx

   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:
   }, [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();
     }
       let temp = nextHiddenItem.shift()
       setRespondidas([...totalRespondidas,temp]);
     }
+    CalculateProgress()
   };
 
   const handleRemoveQuestion = () => {
     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">
             quiz={item} 
             index={i} 
             current={current} 
+            progress={progress} 
             />)
         )}
       </Box>
         </Button>
       </div>
       <Toaster
-        position="top-center"
+        position="bottom-right"
         />
     </div>
   )