start save response

src/App.css

   padding-bottom:35px;
   margin-bottom:35px;
 }
+.nextquestion_btn{
+  margin-left:5px !important;
+}
 .nextquestion_btn:hover{
   background-color: var(--main) !important;
 }

src/Components/Test/Cleaver/Question.jsx

 
 function CheckboxesGroup(props) {
 
-  const [checkA, setCheckA] = React.useState(0);
-  const [checkB, setCheckB] = React.useState(0);
+  let { quiz, save, responses : resp, id:index} = props;
 
+  const [checkA, setCheckA] = React.useState( 0);
+  const [checkB, setCheckB] = React.useState(0);
 
   const changeA = (event) => {
-    let { id } = event.target
-    if(parseInt( checkB ) !== parseInt(id) ){
+    let { id, checked } = event.target
+    if(parseInt( checkB ) !== parseInt(id) && checked ){
       setCheckA(parseInt( id ))
+      let temp = {
+        [index]: {
+          A:id,
+          B: resp[id]?.B ? resp[id].B : 0
+        }
+      }
+      save(Object.assign(resp,temp))
     }
   };
   
   const changeB = (event) => {
-    let { id } = event.target
-    if(parseInt( checkA ) !== parseInt( id )){
+    let { id, checked } = event.target
+    if(parseInt( checkA ) !== parseInt( id ) && checked){
       setCheckB(parseInt( id ))
+      let temp = {
+        [index]: {
+          B:id,
+          A: resp[id]?.A ? resp[id].A : 0
+        }
+      }
+      save(Object.assign(resp,temp))
     }
   };
 
   return (
     <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
 
-      {props.quiz.map((value) => {
-
+      {quiz.map((value) => {
+        // console.log("QUIZ VALUE: ", value)
         const labelId = `checkbox-list-label-${value.id}`;
 
         return (
   );
 }
 
-export function Question({quiz, index, current}) {
-  let { instrucciondepregunta, respuestas,id} = quiz
+export function Question({quiz, index, current, save, responses}) {
+  let { instrucciondepregunta, respuestas,id } = quiz
   let checked = index === current;
-  // console.log("QUESTION INDEX: ",index)
-  // console.log("Checked: ",checked)
   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 quiz={respuestas} />
+            <CheckboxesGroup 
+              id={id}
+              quiz={respuestas} 
+              save={save}
+              responses={responses}
+              />
           </div>
         </CardContent>
       </Card>

src/Pages/Pruebas/Cleaver.jsx

   const [totalRespondidas, setRespondidas] = React.useState([]);
   const [totalPreguntas, setPreguntas] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
-  const [response, setRespones] = React.useState([]);
+  const [responses, setRespones] = React.useState({});
 
 
   React.useEffect(() => {
+    // TODO:
+    // agregar el id correcto apartir del path
     let rest = new Service(`/prueba/findid/1`)
     rest.get(token.toString())
       .then(({ data }) => {
 
   const handleRemoveQuestion = () => {
     let ultimaRespondida = totalRespondidas[totalRespondidas.length - 1];
-    console.log(ultimaRespondida)
     setPreguntas([ultimaRespondida,...totalPreguntas]);
     let current_without_last = totalRespondidas.filter(({id}) => id !== ultimaRespondida.id);
     setRespondidas([...current_without_last]);
     setCurrent(current - 1 )
   }
 
-  console.log('total respondidas: ', totalRespondidas)
-  console.log('total respondidas total: ', totalRespondidas.length)
+  console.log(responses)
 
   return (
     <div  className="content-section question">
       <Box className="question_body">
         {totalRespondidas.map((item,i) => (
-          <Question key={item.id} id={item.id} quiz={item} index={i} current={current} /> )
+          <Question 
+            save={setRespones}
+            responses={responses}
+            key={item.id} 
+            id={item.id} 
+            quiz={item} 
+            index={i} 
+            current={current} 
+            />)
         )}
       </Box>