Browse Source

back and forward in quiz

amenpunk 2 years ago
parent
commit
e924d082ec
2 changed files with 21 additions and 7 deletions
  1. 4 2
      src/Components/Test/Cleaver/Question.jsx
  2. 17 5
      src/Pages/Pruebas/Cleaver.jsx

+ 4 - 2
src/Components/Test/Cleaver/Question.jsx

101
 }
101
 }
102
 
102
 
103
 export function Question({quiz, index, current}) {
103
 export function Question({quiz, index, current}) {
104
-  let { instrucciondepregunta, respuestas} = quiz
104
+  let { instrucciondepregunta, respuestas,id} = quiz
105
   let checked = index === current;
105
   let checked = index === current;
106
+  // console.log("QUESTION INDEX: ",index)
107
+  // console.log("Checked: ",checked)
106
   return (
108
   return (
107
     <Fade in={checked} unmountOnExit>
109
     <Fade in={checked} unmountOnExit>
108
       <Card className="question_form">
110
       <Card className="question_form">
109
         <CardContent>
111
         <CardContent>
110
           <div variant="body2">
112
           <div variant="body2">
111
             <List>
113
             <List>
112
-              <CheckboxexHeader  group={index} title={instrucciondepregunta}/>
114
+              <CheckboxexHeader group={id} title={instrucciondepregunta}/>
113
             </List>
115
             </List>
114
             <CheckboxesGroup quiz={respuestas} />
116
             <CheckboxesGroup quiz={respuestas} />
115
           </div>
117
           </div>

+ 17 - 5
src/Pages/Pruebas/Cleaver.jsx

12
   const [totalRespondidas, setRespondidas] = React.useState([]);
12
   const [totalRespondidas, setRespondidas] = React.useState([]);
13
   const [totalPreguntas, setPreguntas] = React.useState([]);
13
   const [totalPreguntas, setPreguntas] = React.useState([]);
14
   const [current, setCurrent] = React.useState(0);
14
   const [current, setCurrent] = React.useState(0);
15
+  const [response, setRespones] = React.useState([]);
15
 
16
 
16
 
17
 
17
   React.useEffect(() => {
18
   React.useEffect(() => {
21
         console.log(data.questions)
22
         console.log(data.questions)
22
         setPreguntas(data.questions)
23
         setPreguntas(data.questions)
23
         setRespondidas(data.questions.slice(0,1))
24
         setRespondidas(data.questions.slice(0,1))
25
+        setCurrent(0)
24
       }).catch(console.log)
26
       }).catch(console.log)
25
   }, [token]);
27
   }, [token]);
26
 
28
 
27
   const handleAddQuestion = () => {
29
   const handleAddQuestion = () => {
28
-    // let op = { smooth: true, duration: 200, delay :1, offset :20}
29
-    // scroll.scrollToBottom(op);
30
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
30
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
31
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
31
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
32
     if (nextHiddenItem) {
32
     if (nextHiddenItem) {
33
       setPreguntas(nextHiddenItem);
33
       setPreguntas(nextHiddenItem);
34
+      setCurrent(current+1);
34
       let temp = nextHiddenItem.shift()
35
       let temp = nextHiddenItem.shift()
35
       setRespondidas([...totalRespondidas,temp]);
36
       setRespondidas([...totalRespondidas,temp]);
36
-      setCurrent(current+1);
37
     }
37
     }
38
   };
38
   };
39
 
39
 
40
+  const handleRemoveQuestion = () => {
41
+    let ultimaRespondida = totalRespondidas[totalRespondidas.length - 1];
42
+    console.log(ultimaRespondida)
43
+    setPreguntas([ultimaRespondida,...totalPreguntas]);
44
+    let current_without_last = totalRespondidas.filter(({id}) => id !== ultimaRespondida.id);
45
+    setRespondidas([...current_without_last]);
46
+    setCurrent(current - 1 )
47
+  }
48
+
49
+  console.log('total respondidas: ', totalRespondidas)
50
+  console.log('total respondidas total: ', totalRespondidas.length)
51
+
40
   return (
52
   return (
41
     <div  className="content-section question">
53
     <div  className="content-section question">
42
       <Box className="question_body">
54
       <Box className="question_body">
50
           className="nextquestion_btn"
62
           className="nextquestion_btn"
51
           sx={{ backgroundColor: 'var(--main)' }}
63
           sx={{ backgroundColor: 'var(--main)' }}
52
           variant="contained"
64
           variant="contained"
53
-          disabled={totalPreguntas.length <= 0}
54
-          onClick={handleAddQuestion}
65
+          disabled={totalRespondidas.length <= 1}
66
+          onClick={handleRemoveQuestion}
55
         >
67
         >
56
           Anterior
68
           Anterior
57
         </Button>
69
         </Button>