mokup to show question at slide in center

package.json

@@ -30,10 +30,12 @@
         "react-dom": "^17.0.2",
         "react-hot-toast": "^2.2.0",
         "react-query": "^3.34.12",
+        "react-redux": "^8.0.4",
         "react-router": "6.2.1",
         "react-router-dom": "6.2.1",
         "react-scripts": "^5.0.0",
         "react-scroll": "^1.8.7",
+        "redux": "^4.2.0",
         "web-vitals": "^1.0.1",
         "yup": "^0.32.11"
     },

src/Actions/types.js

@@ -0,0 +1 @@
+export const SET_TOKEN = 'SET_TOKEN';

src/App.css

@@ -2,6 +2,10 @@
   --main: #fd4b4b;
   --second: #2ec5d3;
 }
+
+.main{
+    margin-top : 90px !important;
+}
 .App {
     text-align: center;
 }
@@ -68,7 +72,7 @@
 }
 
 .MuiContainer-root{
-    margin-top : 90px !important;
+    /* margin-top : 90px !important; */
     max-width : 1777px !important;
     padding : 0px;
 }
@@ -315,9 +319,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  align-content: stretch;
-  justify-content: flex-start;
-  align-items: stretch;
+  justify-content: center;
+  align-items: center;
 }
 
 .question_btn{
@@ -330,3 +333,15 @@
 .nextquestion_btn:hover{
   background-color: var(--main) !important;
 }
+
+.card_cleaver_btn{
+  margin-right:20px;
+  padding-right:20px
+}
+.question_body{
+  display: grid;
+}
+.question_form{
+  grid-column: 1;
+  grid-row: 1;
+}

src/Components/Test/Cleaver/Question.jsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
 import {
   Card,CardContent,Avatar,Checkbox,List,Tooltip,
-  ListItem,ListItemButton,ListItemIcon,ListItemText
+  ListItem,ListItemButton,ListItemIcon,ListItemText,
+  CardActions,Button,Fade,Slide
 } from '@mui/material'
 import { deepPurple } from '@mui/material/colors';
 
@@ -100,19 +101,21 @@ function CheckboxesGroup(props) {
   );
 }
 
-export function Question({quiz}) {
+export function Question({quiz, index, current}) {
   let { instrucciondepregunta, respuestas,id } = quiz
+  let checked = index ===current;
   return (
-    <Card sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>
+    <Fade in={checked} unmountOnExit>
+    <Card className="question_form" sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>
       <CardContent>
-
         <div variant="body2">
           <List>
-            <CheckboxexHeader  group={id} title={instrucciondepregunta}/>
+            <CheckboxexHeader  group={index} title={instrucciondepregunta}/>
           </List>
           <CheckboxesGroup quiz={respuestas} />
         </div>
       </CardContent>
     </Card>
+    </Fade>
   );
 }

src/Pages/Pruebas/Cleaver.jsx

@@ -2,19 +2,20 @@ import React, { useMemo } from 'react'
 import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
-import { Box,Button, Collapse, List } from '@mui/material'
+import { Box,Button, Collapse, List, Slide } from '@mui/material'
 import { TransitionGroup } from 'react-transition-group';
-import * as Scroll from 'react-scroll';
+// import * as Scroll from 'react-scroll';
 
 export function Cleaver() {
 
-var scroll = Scroll.animateScroll;
+// var scroll = Scroll.animateScroll;
 
   let auth = useAuth();
   let token = useMemo(() => auth.getToken(), [auth])
 
   const [totalRespondidas, setRespondidas] = React.useState([]);
   const [totalPreguntas, setPreguntas] = React.useState([]);
+  const [current, setCurrent] = React.useState(0);
 
 
   React.useEffect(() => {
@@ -28,38 +29,27 @@ var scroll = Scroll.animateScroll;
   }, [token]);
 
   const handleAddQuestion = () => {
-    let op = { smooth: true, duration: 200, delay :1, offset :20}
-    scroll.scrollToBottom(op);
+    // 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);
       let temp = nextHiddenItem.shift()
       setRespondidas([...totalRespondidas,temp]);
+      setCurrent(current+1);
     }
-
-    // console.log("RESPONDIDAS: ", totalRespondidas.length)
-    // console.log("RESTANTES: ", totalPreguntas.length)
   };
 
   return (
-
     <div  className="content-section question">
-      <div className="main">
-        <Box sx={{ mt: 1 }}>
-          <List >
-            <TransitionGroup >
-              {totalRespondidas.map((item) => (
-                <Collapse key={item.id} >
-                  <Question key={item.id} id={item.id} quiz={item} />
-                </Collapse>
-              ))
-            }
-            </TransitionGroup>
-          </List>
-        </Box>
+      <Box className="question_body">
+        {totalRespondidas.map((item,i) => (
+          <Question key={item.id} id={item.id} quiz={item} index={i} current={current} /> )
+        )}
+      </Box>
 
-        <div className="question_btn">
+      <div className="question_btn">
         <Button
           className="nextquestion_btn"
           sx={{ backgroundColor: 'var(--main)' }}
@@ -67,12 +57,21 @@ var scroll = Scroll.animateScroll;
           disabled={totalPreguntas.length <= 0}
           onClick={handleAddQuestion}
         >
-            Siguiente Pregunta
+          Anterior
+        </Button>
+        <Button
+          className="nextquestion_btn"
+          sx={{ backgroundColor: 'var(--main)' }}
+          variant="contained"
+          disabled={totalPreguntas.length <= 0}
+          onClick={handleAddQuestion}
+        >
+          Siguiente
         </Button>
-          </div>
-
       </div>
     </div>
   )
 
 }
+
+