|
@@ -1,7 +1,7 @@
|
1
|
1
|
import React from 'react'
|
2
|
2
|
import { Service } from '../../Utils/HTTP'
|
3
|
3
|
import { Question } from '../../Components/Test/Cleaver/Question.jsx'
|
4
|
|
-import { Box,Button, LinearProgress, Backdrop, CircularProgress, } from '@mui/material'
|
|
4
|
+import { Box, Button, LinearProgress, Backdrop, CircularProgress, } from '@mui/material'
|
5
|
5
|
import { useSelector } from 'react-redux';
|
6
|
6
|
import { useParams, useNavigate } from 'react-router-dom'
|
7
|
7
|
import toast, { Toaster } from 'react-hot-toast';
|
|
@@ -27,7 +27,7 @@ const theme = createTheme({
|
27
|
27
|
main: '#fd4b4b',
|
28
|
28
|
darker: '#053e85',
|
29
|
29
|
},
|
30
|
|
- secondary : {
|
|
30
|
+ secondary: {
|
31
|
31
|
main: '#2ec5d3',
|
32
|
32
|
darker: '#053e85',
|
33
|
33
|
},
|
|
@@ -52,11 +52,11 @@ export function Cleaver() {
|
52
|
52
|
const [progress, setProgress] = React.useState(0);
|
53
|
53
|
const [open, setOpen] = React.useState(false);
|
54
|
54
|
|
55
|
|
- const BadQuestion = () => toast.error("Escoge una respuesta en cada columna")
|
|
55
|
+ const BadQuestion = () => toast.error("Escoge una respuesta en cada columna")
|
56
|
56
|
//toast("Escoge una respuesta en cada columna",{ icon : '⚠️' });
|
57
|
57
|
const CalculateProgress = () => {
|
58
|
58
|
let total_preguntas = totalPreguntas.length + totalRespondidas.length
|
59
|
|
- let x = totalRespondidas.length *100 / (total_preguntas)
|
|
59
|
+ let x = totalRespondidas.length * 100 / (total_preguntas)
|
60
|
60
|
setProgress(x.toFixed(2))
|
61
|
61
|
}
|
62
|
62
|
|
|
@@ -66,26 +66,26 @@ export function Cleaver() {
|
66
|
66
|
.then(({ data }) => {
|
67
|
67
|
console.log(data.questions)
|
68
|
68
|
setPreguntas(data.questions)
|
69
|
|
- setRespondidas(data.questions.slice(0,1))
|
|
69
|
+ setRespondidas(data.questions.slice(0, 1))
|
70
|
70
|
setCurrent(0)
|
71
|
71
|
}).catch(console.log)
|
72
|
|
- }, [id,auth]);
|
|
72
|
+ }, [id, auth]);
|
73
|
73
|
|
74
|
74
|
const saveRespones = () => {
|
75
|
75
|
|
76
|
76
|
setOpen(true)
|
77
|
77
|
|
78
|
78
|
let { responses: userResp } = cleaver;
|
79
|
|
- let mapResponses = totalRespondidas.map( resp => {
|
80
|
|
- let { respuestas : posibles, id } = resp;
|
81
|
|
- console.log(resp.id,posibles)
|
82
|
|
- let opciones_multiples = posibles.map( quiz => {
|
|
79
|
+ let mapResponses = totalRespondidas.map(resp => {
|
|
80
|
+ let { respuestas: posibles, id } = resp;
|
|
81
|
+ console.log(resp.id, posibles)
|
|
82
|
+ let opciones_multiples = posibles.map(quiz => {
|
83
|
83
|
let body = {
|
84
|
84
|
"respuestaid": resp.id,
|
85
|
|
- "asignacionid":role.assingid,
|
86
|
|
- "anotacion1": parseInt( userResp[id].A ) === parseInt(quiz.id) ? 1: 0, // + = A
|
87
|
|
- "anotacion2":parseInt( userResp[id].B ) === parseInt(quiz.id) ? 1: 0, // - = B
|
88
|
|
- "anotacion3":0
|
|
85
|
+ "asignacionid": role.assingid,
|
|
86
|
+ "anotacion1": parseInt(userResp[id].A) === parseInt(quiz.id) ? 1 : 0, // + = A
|
|
87
|
+ "anotacion2": parseInt(userResp[id].B) === parseInt(quiz.id) ? 1 : 0, // - = B
|
|
88
|
+ "anotacion3": 0
|
89
|
89
|
}
|
90
|
90
|
return body;
|
91
|
91
|
})
|
|
@@ -93,7 +93,7 @@ export function Cleaver() {
|
93
|
93
|
})
|
94
|
94
|
|
95
|
95
|
let body = []
|
96
|
|
- mapResponses.forEach( arr => arr.forEach(r => body.push(r)));
|
|
96
|
+ mapResponses.forEach(arr => arr.forEach(r => body.push(r)));
|
97
|
97
|
|
98
|
98
|
let rest = new Service('/prueba/addrespuestas/opcionmultiple')
|
99
|
99
|
rest.postQuery(body, auth.token)
|
|
@@ -112,31 +112,31 @@ export function Cleaver() {
|
112
|
112
|
}
|
113
|
113
|
|
114
|
114
|
const handleAddQuestion = () => {
|
115
|
|
- let currentAnswer = totalRespondidas[totalRespondidas.length - 1];
|
|
115
|
+ let currentAnswer = totalRespondidas[totalRespondidas.length - 1];
|
116
|
116
|
let current_resp = cleaver.responses[currentAnswer.id];
|
117
|
117
|
|
118
|
|
- if(!current_resp){
|
|
118
|
+ if (!current_resp) {
|
119
|
119
|
return BadQuestion();
|
120
|
120
|
}
|
121
|
|
- if(parseInt( current_resp.A ) ===0 || parseInt( current_resp.B ) === 0){
|
|
121
|
+ if (parseInt(current_resp.A) === 0 || parseInt(current_resp.B) === 0) {
|
122
|
122
|
return BadQuestion();
|
123
|
123
|
}
|
124
|
|
- const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
|
|
124
|
+ const nextHiddenItem = totalPreguntas.filter(({ id }) => id !== currentAnswer.id);
|
125
|
125
|
if (nextHiddenItem) {
|
126
|
126
|
setPreguntas(nextHiddenItem);
|
127
|
|
- setCurrent(current+1);
|
|
127
|
+ setCurrent(current + 1);
|
128
|
128
|
let temp = nextHiddenItem.shift()
|
129
|
|
- setRespondidas([...totalRespondidas,temp]);
|
|
129
|
+ setRespondidas([...totalRespondidas, temp]);
|
130
|
130
|
}
|
131
|
131
|
CalculateProgress()
|
132
|
132
|
};
|
133
|
133
|
|
134
|
134
|
const handleRemoveQuestion = () => {
|
135
|
135
|
let ultimaRespondida = totalRespondidas[totalRespondidas.length - 1];
|
136
|
|
- setPreguntas([ultimaRespondida,...totalPreguntas]);
|
137
|
|
- let current_without_last = totalRespondidas.filter(({id}) => id !== ultimaRespondida.id);
|
|
136
|
+ setPreguntas([ultimaRespondida, ...totalPreguntas]);
|
|
137
|
+ let current_without_last = totalRespondidas.filter(({ id }) => id !== ultimaRespondida.id);
|
138
|
138
|
setRespondidas([...current_without_last]);
|
139
|
|
- setCurrent(current - 1 )
|
|
139
|
+ setCurrent(current - 1)
|
140
|
140
|
CalculateProgress()
|
141
|
141
|
}
|
142
|
142
|
|
|
@@ -145,64 +145,64 @@ export function Cleaver() {
|
145
|
145
|
return (
|
146
|
146
|
<ThemeProvider theme={theme}>
|
147
|
147
|
<div className="content-section question">
|
148
|
|
- <div style={{marginTop : 35}}>
|
149
|
|
- <LinearProgressWithLabel value={progress ? parseInt(progress) : 0 } />
|
|
148
|
+ <div style={{ marginTop: 35 }}>
|
|
149
|
+ <LinearProgressWithLabel value={progress ? parseInt(progress) : 0} />
|
150
|
150
|
</div>
|
151
|
151
|
<Box className="question_body">
|
152
|
|
- {totalRespondidas.map((item,i) => (
|
153
|
|
- <Question
|
154
|
|
- key={item.id}
|
155
|
|
- id={item.id}
|
156
|
|
- quiz={item}
|
157
|
|
- index={i}
|
158
|
|
- current={current}
|
159
|
|
- />)
|
|
152
|
+ {totalRespondidas.map((item, i) => (
|
|
153
|
+ <Question
|
|
154
|
+ key={item.id}
|
|
155
|
+ id={item.id}
|
|
156
|
+ quiz={item}
|
|
157
|
+ index={i}
|
|
158
|
+ current={current}
|
|
159
|
+ />)
|
160
|
160
|
)}
|
161
|
161
|
</Box>
|
162
|
162
|
|
163
|
163
|
{
|
164
|
|
- totalPreguntas.length > 0 ?
|
165
|
|
- (
|
166
|
|
- <div className="question_btn">
|
167
|
|
- <Button
|
168
|
|
- className="nextquestion_btn"
|
169
|
|
- sx={{ backgroundColor: 'var(--main)' }}
|
170
|
|
- variant="contained"
|
171
|
|
- disabled={totalRespondidas.length <= 1}
|
172
|
|
- onClick={handleRemoveQuestion}
|
173
|
|
- >
|
174
|
|
- Anterior
|
175
|
|
- </Button>
|
176
|
|
- <Button
|
177
|
|
- className="nextquestion_btn"
|
178
|
|
- sx={{ backgroundColor: 'var(--main)' }}
|
179
|
|
- variant="contained"
|
180
|
|
- disabled={totalPreguntas.length <= 0}
|
181
|
|
- onClick={handleAddQuestion}
|
182
|
|
- >
|
183
|
|
- Siguiente
|
184
|
|
- </Button>
|
185
|
|
- </div>
|
186
|
|
- ) : (
|
187
|
|
-
|
188
|
|
- <div className="question_btn">
|
189
|
|
- <Button
|
190
|
|
- className="nextquestion_btn"
|
191
|
|
- sx={{ backgroundColor: 'var(--main)' }}
|
192
|
|
- variant="contained"
|
193
|
|
- onClick={saveRespones}
|
194
|
|
- >
|
195
|
|
- Guardar
|
196
|
|
- </Button>
|
197
|
|
- </div>
|
198
|
|
- )
|
199
|
|
-
|
200
|
|
- }
|
|
164
|
+ totalPreguntas.length > 0 ?
|
|
165
|
+ (
|
|
166
|
+ <div className="question_btn">
|
|
167
|
+ <Button
|
|
168
|
+ className="nextquestion_btn"
|
|
169
|
+ sx={{ backgroundColor: 'var(--main)' }}
|
|
170
|
+ variant="contained"
|
|
171
|
+ disabled={totalRespondidas.length <= 1}
|
|
172
|
+ onClick={handleRemoveQuestion}
|
|
173
|
+ >
|
|
174
|
+ Anterior
|
|
175
|
+ </Button>
|
|
176
|
+ <Button
|
|
177
|
+ className="nextquestion_btn"
|
|
178
|
+ sx={{ backgroundColor: 'var(--main)' }}
|
|
179
|
+ variant="contained"
|
|
180
|
+ disabled={totalPreguntas.length <= 0}
|
|
181
|
+ onClick={handleAddQuestion}
|
|
182
|
+ >
|
|
183
|
+ Siguiente
|
|
184
|
+ </Button>
|
|
185
|
+ </div>
|
|
186
|
+ ) : (
|
|
187
|
+
|
|
188
|
+ <div className="question_btn">
|
|
189
|
+ <Button
|
|
190
|
+ className="nextquestion_btn"
|
|
191
|
+ sx={{ backgroundColor: 'var(--main)' }}
|
|
192
|
+ variant="contained"
|
|
193
|
+ onClick={saveRespones}
|
|
194
|
+ >
|
|
195
|
+ Guardar
|
|
196
|
+ </Button>
|
|
197
|
+ </div>
|
|
198
|
+ )
|
|
199
|
+
|
|
200
|
+ }
|
201
|
201
|
<Toaster position="bottom-right" />
|
202
|
202
|
<Backdrop
|
203
|
203
|
sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
204
|
204
|
open={open}
|
205
|
|
- // onClick={()}
|
|
205
|
+ // onClick={()}
|
206
|
206
|
>
|
207
|
207
|
<CircularProgress color="inherit" />
|
208
|
208
|
</Backdrop>
|