back and forward in quiz

src/Components/Test/Cleaver/Question.jsx

@@ -101,15 +101,17 @@ function CheckboxesGroup(props) {
 }
 
 export function Question({quiz, index, current}) {
-  let { instrucciondepregunta, respuestas} = quiz
+  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={index} title={instrucciondepregunta}/>
+              <CheckboxexHeader group={id} title={instrucciondepregunta}/>
             </List>
             <CheckboxesGroup quiz={respuestas} />
           </div>

src/Pages/Pruebas/Cleaver.jsx

@@ -12,6 +12,7 @@ export function Cleaver() {
   const [totalRespondidas, setRespondidas] = React.useState([]);
   const [totalPreguntas, setPreguntas] = React.useState([]);
   const [current, setCurrent] = React.useState(0);
+  const [response, setRespones] = React.useState([]);
 
 
   React.useEffect(() => {
@@ -21,22 +22,33 @@ export function Cleaver() {
         console.log(data.questions)
         setPreguntas(data.questions)
         setRespondidas(data.questions.slice(0,1))
+        setCurrent(0)
       }).catch(console.log)
   }, [token]);
 
   const handleAddQuestion = () => {
-    // let op = { smooth: true, duration: 200, delay :1, offset :20}
-    // scroll.scrollToBottom(op);
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
     if (nextHiddenItem) {
       setPreguntas(nextHiddenItem);
+      setCurrent(current+1);
       let temp = nextHiddenItem.shift()
       setRespondidas([...totalRespondidas,temp]);
-      setCurrent(current+1);
     }
   };
 
+  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)
+
   return (
     <div  className="content-section question">
       <Box className="question_body">
@@ -50,8 +62,8 @@ export function Cleaver() {
           className="nextquestion_btn"
           sx={{ backgroundColor: 'var(--main)' }}
           variant="contained"
-          disabled={totalPreguntas.length <= 0}
-          onClick={handleAddQuestion}
+          disabled={totalRespondidas.length <= 1}
+          onClick={handleRemoveQuestion}
         >
           Anterior
         </Button>