Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3481 | Rev 3563 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3481 Rev 3520
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react';
2 
import { connect } from 'react-redux'
 - 
 
Línea 3... Línea 2...
3 
 
 2 
 
4 
import { startQuiz } from '@app/services/micro-learning'
 3 
import { startQuiz } from '@app/services/micro-learning';
Línea 5... Línea 4...
5 
import { addNotification } from '@app/redux/notification/notification.actions'
 4 
import { addNotification } from '@app/redux/notification/notification.actions';
6 
 
 5 
 
7 
import Widget from '@app/components/UI/Widget'
 6 
import Widget from '@app/components/UI/Widget';
8 
import QuizSimpleQuestion from './quiz-simple-question'
 7 
import QuizSimpleQuestion from './quiz-simple-question';
9 
import QuizMultipleQuestion from './quiz-multiple-question'
 8 
import QuizMultipleQuestion from './quiz-multiple-question';
10 
import SlideProgress from './slide-progress'
 9 
import SlideProgress from './slide-progress';
11 
import SlideSuccessFeedback from './slide-success-feedback'
 10 
import SlideSuccessFeedback from './slide-success-feedback';
12 
import SlideQuizStart from './slide-quiz-start'
 11 
import SlideQuizStart from './slide-quiz-start';
13 
import QuizFailureFeedback from './quiz-failure-feedback'
 12 
import QuizFailureFeedback from './quiz-failure-feedback';
14 
 
 - 
 
15 
function SlideQuiz({
 - 
 
16 
  quiz,
 - 
 
17 
  slide,
 - 
 
18 
  onSync,
 - 
 
19 
  startUrl,
 - 
 
20 
  completed,
 - 
 
21 
  addNotification
 13 
 
22 
}) {
 14 
export function SlideQuiz({ quiz, slide, onSync, startUrl, completed }) {
23 
  const [currentQuestion, setCurrentQuestion] = useState(0)
 15 
  const [currentQuestion, setCurrentQuestion] = useState(0);
24 
  const [showQuestions, setShowQuestions] = useState(false)
 16 
  const [showQuestions, setShowQuestions] = useState(false);
25 
  const [completedQuiz, setCompletedQuiz] = useState(false)
 17 
  const [completedQuiz, setCompletedQuiz] = useState(false);
26 
  const [failureQuiz, setFailureQuiz] = useState(false)
 18 
  const [failureQuiz, setFailureQuiz] = useState(false);
Línea 27... Línea 19...
27 
  const [totalPoints, setTotalPoints] = useState(0)
 19 
  const [totalPoints, setTotalPoints] = useState(0);
Línea 28... Línea 20...
28 
  const [answer, setAnswers] = useState([])
 20 
  const [answer, setAnswers] = useState([]);
29 
 
 21 
 
30 
  const { name, questions, minimum_points_required } = quiz
 22 
  const { name, questions, minimum_points_required } = quiz;
31 
 
 23 
 
32 
  const handleStart = async () => {
 24 
  const handleStart = async () => {
33 
    try {
 25 
    try {
34 
      const start = await startQuiz(startUrl)
 26 
      const start = await startQuiz(startUrl);
35 
      if (start) setShowQuestions(true)
 27 
      if (start) setShowQuestions(true);
Línea 36... Línea 28...
36 
    } catch (error) {
 28 
    } catch (error) {
37 
      addNotification({ style: 'danger', msg: error.message })
 29 
      addNotification({ style: 'danger', msg: error.message });
38 
    }
 30 
    }
Línea 39... Línea 31...
39 
  }
 31 
  };
40 
 
 32 
 
41 
  const onError = () => {
 33 
  const onError = () => {
42 
    setFailureQuiz(true)
 34 
    setFailureQuiz(true);
43 
  }
 35 
  };
44 
 
 36 
 
45 
  const restartQuiz = () => {
 37 
  const restartQuiz = () => {
Línea 46... Línea 38...
46 
    setCurrentQuestion(0)
 38 
    setCurrentQuestion(0);
47 
    setTotalPoints(0)
 39 
    setTotalPoints(0);
48 
    setFailureQuiz(false)
 40 
    setFailureQuiz(false);
49 
    setCompletedQuiz(false)
 41 
    setCompletedQuiz(false);
50 
    setShowQuestions(false)
 42 
    setShowQuestions(false);
51 
  }
 43 
  };
52 
 
 44 
 
Línea 53... Línea 45...
53 
  const onSimpleConfirm = (question, answerId) => {
 45 
  const onSimpleConfirm = (question, answerId) => {
54 
    const answer = question.answers.find((q) => q.uuid === answerId)
 46 
    const answer = question.answers.find((q) => q.uuid === answerId);
Línea 55... Línea 47...
55 
    const newAnswer = {
 47 
    const newAnswer = {
56 
      question: question.uuid,
 48 
      question: question.uuid,
57 
      answers: [answer]
 49 
      answers: [answer]
58 
    }
 50 
    };
Línea 59... Línea 51...
59 
    setAnswers((prevAnswers) => [...prevAnswers, newAnswer])
 51 
    setAnswers((prevAnswers) => [...prevAnswers, newAnswer]);
60 
 
 52 
 
61 
    const isCorrect = answer.correct === 'y'
 53 
    const isCorrect = answer.correct === 'y';
62 
    isCorrect && setTotalPoints(totalPoints + parseInt(question.points))
 54 
    isCorrect && setTotalPoints(totalPoints + parseInt(question.points));
63 
 
 55 
 
64 
    if (currentQuestion !== questions.length - 1) {
 56 
    if (currentQuestion !== questions.length - 1) {
Línea 65... Línea 57...
65 
      setCurrentQuestion(currentQuestion + 1)
 57 
      setCurrentQuestion(currentQuestion + 1);
66 
      return
 58 
      return;
67 
    }
 - 
 
68 
 
 - 
 
69 
    if (totalPoints >= parseInt(minimum_points_required)) {
 59 
    }
70 
      setCompletedQuiz(true)
 60 
 
71 
    } else {
 61 
    if (totalPoints >= parseInt(minimum_points_required)) {
72 
      onError()
 62 
      setCompletedQuiz(true);
73 
    }
 63 
    } else {
Línea 74... Línea -...
74 
  }
 - 
 
75 
 
 64 
      onError();
76 
  const onMultipleConfirm = (question, answersIds) => {
 - 
 
77 
    const answers = question.answers.filter((answer) =>
 - 
 
Línea 78... Línea 65...
78 
      answersIds.includes(answer.uuid)
 65 
    }
Línea 79... Línea 66...
79 
    )
 66 
  };
80 
    const newAnswer = {
 67 
 
81 
      question: question.uuid,
 68 
  const onMultipleConfirm = (question, answersIds) => {
82 
      answers
 69 
    const answers = question.answers.filter((answer) => answersIds.includes(answer.uuid));
Línea 83... Línea 70...
83 
    }
 70 
    const newAnswer = {
84 
    setAnswers((prevAnswers) => [...prevAnswers, newAnswer])
 71 
      question: question.uuid,
85 
 
 72 
      answers
86 
    const points = answers.reduce(
 73 
    };
87 
      (acc, answer) => acc + parseInt(answer.points),
 74 
    setAnswers((prevAnswers) => [...prevAnswers, newAnswer]);
88 
      0
 75 
 
Línea 89... Línea 76...
89 
    )
 76 
    const points = answers.reduce((acc, answer) => acc + parseInt(answer.points), 0);
90 
 
 77 
 
91 
    setTotalPoints(totalPoints + points)
 78 
    setTotalPoints(totalPoints + points);
Línea 92... Línea 79...
92 
 
 79 
 
93 
    if (currentQuestion !== questions.length - 1) {
 80 
    if (currentQuestion !== questions.length - 1) {
94 
      setCurrentQuestion(currentQuestion + 1)
 81 
      setCurrentQuestion(currentQuestion + 1);
Línea 95... Línea 82...
95 
      return
 82 
      return;
96 
    }
 - 
 
97 
 
 - 
 
98 
    if (totalPoints >= parseInt(minimum_points_required)) {
 - 
 
99 
      setCompletedQuiz(true)
 83 
    }
100 
    } else {
 - 
 
101 
      onError()
 - 
 
102 
    }
 - 
 
103 
  }
 84 
 
Línea 104... Línea 85...
104 
 
 85 
    if (totalPoints >= parseInt(minimum_points_required)) {
105 
  if (completedQuiz) {
 86 
      setCompletedQuiz(true);
106 
    return <SlideSuccessFeedback onConfirm={onSync} />
 87 
    } else {
Línea 132... Línea 113...
132 
 
 113 
 
Línea 133... Línea 114...
133 
      <Widget.Header title={`Cuestionario sobre: ${name}`} />
 114 
      <Widget.Header title={`Cuestionario sobre: ${name}`} />
134 
 
 115 
 
135 
      <Widget.Body>
 116 
      <Widget.Body>
136 
        {questions.map((question, index) => {
 117 
        {questions.map((question, index) => {
Línea 137... Línea 118...
137 
          const isLastQuestion = index === questions.length - 1
 118 
          const isLastQuestion = index === questions.length - 1;
138 
          const buttonLabel = isLastQuestion ? 'Finalizar' : 'Siguiente'
 119 
          const buttonLabel = isLastQuestion ? 'Finalizar' : 'Siguiente';
139 
 
 120 
 
140 
          if (question.type === 's') {
 121 
          if (question.type === 's') {
141 
            return (
 122 
            return (
142 
              <QuizSimpleQuestion
 123 
              <QuizSimpleQuestion
143 
                key={question.uuid}
 124 
                key={question.uuid}
144 
                question={question}
 125 
                question={question}
145 
                onConfirm={(answer) => onSimpleConfirm(question, answer)}
 126 
                onConfirm={(answer) => onSimpleConfirm(question, answer)}
146 
                buttonLabel={buttonLabel}
 127 
                buttonLabel={buttonLabel}
147 
                isCurrent={currentQuestion === index}
 128 
                isCurrent={currentQuestion === index}
Línea 148... Línea 129...
148 
              />
 129 
              />
149 
            )
 130 
            );
150 
          }
 131 
          }
Línea 156... Línea 137...
156 
                question={question}
 137 
                question={question}
157 
                onConfirm={(answers) => onMultipleConfirm(question, answers)}
 138 
                onConfirm={(answers) => onMultipleConfirm(question, answers)}
158 
                buttonLabel={buttonLabel}
 139 
                buttonLabel={buttonLabel}
159 
                isCurrent={currentQuestion === index}
 140 
                isCurrent={currentQuestion === index}
160 
              />
 141 
              />
161 
            )
 142 
            );
162 
          }
 143 
          }
Línea 163... Línea 144...
163 
 
 144 
 
164 
          return null
 145 
          return null;
165 
        })}
 146 
        })}
166 
      </Widget.Body>
 147 
      </Widget.Body>
167 
    </Widget>
 148 
    </Widget>
168 
  )
 149 
  );
169 
}
 - 
 
170 
 
 - 
 
171 
const mapDispatchToProps = {
 - 
 
172 
  addNotification: (notification) => addNotification(notification)
 - 
 
173 
}
 - 
 
174 
 
 -