Browse Source

maqueta para responder

amenpunk 2 years ago
parent
commit
fff20dd6c9
3 changed files with 30 additions and 15 deletions
  1. 17 0
      src/App.css
  2. 1 1
      src/Components/Test/Cleaver/Question.jsx
  3. 12 14
      src/Pages/Pruebas/Cleaver.jsx

+ 17 - 0
src/App.css

310
 .checkbox_label_question{
310
 .checkbox_label_question{
311
   font-weight:bold !important;
311
   font-weight:bold !important;
312
 }
312
 }
313
+
314
+.question{
315
+  display: flex;
316
+  flex-direction: column;
317
+  flex-wrap: wrap;
318
+  align-content: stretch;
319
+  justify-content: flex-start;
320
+  align-items: stretch;
321
+}
322
+
323
+.question_btn{
324
+  display:flex;
325
+  justify-content: center;
326
+  padding-top:35px;
327
+  padding-bottom:35px;
328
+  margin-bottom:35px;
329
+}

+ 1 - 1
src/Components/Test/Cleaver/Question.jsx

98
   let { instrucciondepregunta, respuestas} = quiz
98
   let { instrucciondepregunta, respuestas} = quiz
99
   return (
99
   return (
100
 
100
 
101
-    <Card sx={{ minWidth: 275, margin: 5 , borderLeft: '5px solid var(--main)'}}>
101
+    <Card sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>
102
       <CardContent>
102
       <CardContent>
103
 
103
 
104
         {/*
104
         {/*

+ 12 - 14
src/Pages/Pruebas/Cleaver.jsx

1
-import React, { useMemo, useRef } from 'react'
1
+import React, { useMemo } from 'react'
2
 
2
 
3
 import { Service } from '../../Utils/HTTP'
3
 import { Service } from '../../Utils/HTTP'
4
 import useAuth from '../../Auth/useAuth.js';
4
 import useAuth from '../../Auth/useAuth.js';
33
   }, [token]);
33
   }, [token]);
34
 
34
 
35
   const handleAddQuestion = () => {
35
   const handleAddQuestion = () => {
36
-    let op = { smooth: true, duration: 200, delay :1, offset :900}
36
+    let op = { smooth: true, duration: 200, delay :1, offset :20}
37
     scroll.scrollToBottom(op);
37
     scroll.scrollToBottom(op);
38
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
38
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
39
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
39
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
43
       setRespondidas([...totalRespondidas,temp]);
43
       setRespondidas([...totalRespondidas,temp]);
44
     }
44
     }
45
   };
45
   };
46
-  
47
-
48
-var scroll = Scroll.animateScroll;
49
-
50
 
46
 
51
   return (
47
   return (
52
 
48
 
53
-    <div  className="content-section">
49
+    <div  className="content-section question">
54
       <div className="main">
50
       <div className="main">
55
         <Box sx={{ mt: 1 }}>
51
         <Box sx={{ mt: 1 }}>
56
           <List >
52
           <List >
65
           </List>
61
           </List>
66
         </Box>
62
         </Box>
67
 
63
 
68
-      <Button
69
-        variant="contained"
70
-        disabled={totalRespondidas.length >= totalPreguntas.length}
71
-        onClick={handleAddQuestion}
72
-      >
73
-        Add Question
74
-      </Button>
64
+        <div class="question_btn">
65
+        <Button
66
+          variant="contained"
67
+          disabled={totalRespondidas.length >= totalPreguntas.length}
68
+          onClick={handleAddQuestion}
69
+        >
70
+            Siguiente Pregunta
71
+        </Button>
72
+          </div>
75
 
73
 
76
       </div>
74
       </div>
77
     </div>
75
     </div>