diff --git a/src/components/Quiz/QuizBegin.tsx b/src/components/Quiz/QuizBegin.tsx
index 8f5ebbaf30b6f33d4df0f84abaa34521f6b203cc..1a7cdbb06cc8dba7ad550d3c51f361bc605addcb 100644
--- a/src/components/Quiz/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin.tsx
@@ -37,8 +37,8 @@ const QuizBegin: React.FC<QuizBeginProps> = ({
return (
<div className="quiz-begin-container">
- <StyledIcon className="quiz-icon" icon={quizIcon} size={219} />
- <StyledIcon className="quiz-icon" icon={quizStars} size={219} />
+ <StyledIcon className="quiz-icon" icon={quizIcon} size={200} />
+ <StyledIcon className="quiz-icon-stars" icon={quizStars} size={150} />
<div className="quiz-explanation">{t('quiz.explanation')}</div>
<div className="button-start">
<StyledStopButton color="secondary" onClick={launchQuiz}>
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index fe85c2b7ccd73e844af9137adad00b4daf279f9e..a10131f0bea72ed0328e29015c7ec53812ca3181 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import './quizExplanationModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallenge } from 'models'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
@@ -8,6 +9,7 @@ interface QuizExplanationModalProps {
open: boolean
userChallenge: UserChallenge
answerIndex: number
+ questionIndex: number
goNextQuestion: () => void
handleCloseClick: () => void
}
@@ -16,32 +18,38 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
open,
userChallenge,
answerIndex,
+ questionIndex,
goNextQuestion,
handleCloseClick,
}: QuizExplanationModalProps) => {
+ const { t } = useI18n()
return (
<Modal open={open} border={true} handleCloseClick={handleCloseClick}>
<div className="em-root modal-congrats">
<div className="em-content">
<div
className={
- userChallenge.quiz.questions[0].answers[answerIndex].isTrue
+ userChallenge.quiz.questions[questionIndex].answers[answerIndex]
+ .isTrue
? 'icon-check'
: 'icon-cross'
}
></div>
<div className="text-22-bold answer-label">
- {userChallenge.quiz.questions[0].answers[answerIndex].answerLabel}
+ {
+ userChallenge.quiz.questions[questionIndex].answers[answerIndex]
+ .answerLabel
+ }
</div>
<div className="text-16-bold">
- {userChallenge.quiz.questions[0].explanation}
+ {userChallenge.quiz.questions[questionIndex].explanation}
</div>
<StyledStopButton
color="secondary"
className="btn-next"
onClick={goNextQuestion}
>
- Suivant
+ {t('quiz.next')}
</StyledStopButton>
</div>
</div>
diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx
index bf4749cd3ac58943ec9e3fe0cace4d535afe9d8c..9625215525168c3e042080a93418045750d71321 100644
--- a/src/components/Quiz/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion.tsx
@@ -2,12 +2,14 @@ import React, { useEffect, useState } from 'react'
import './quizQuestion.scss'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallenge } from 'models'
import ChallengeService from 'services/challenge.service'
+import QuizService from 'services/quiz.service'
import { Client, useClient } from 'cozy-client'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
import { AppStore } from 'store'
interface QuizQuestion {
@@ -17,22 +19,43 @@ interface QuizQuestion {
const QuizQuestion: React.FC<QuizQuestion> = ({
userChallenge,
}: QuizQuestion) => {
+ const { t } = useI18n()
const [userChoice, setUserChoice] = useState<string>('')
const [openModal, setOpenModal] = useState<boolean>(false)
const [answerIndex, setAnswerIndex] = useState<number>(0)
+ const [questionIndex, setQuestionIndex] = useState<number>(0)
+ const [enableNextQuest, setEnableNextQuest] = useState<boolean>(false)
- const { currentChallenge } = useSelector(
- (state: AppStore) => state.ecolyo.challenge
- )
const client: Client = useClient()
const dispatch = useDispatch()
const validateQuestion = async () => {
- const result = userChallenge.quiz.questions[0].answers.findIndex(
+ const resultIndex = userChallenge.quiz.questions[
+ questionIndex
+ ].answers.findIndex(answer => answer.answerLabel === userChoice)
+ const result = userChallenge.quiz.questions[questionIndex].answers.filter(
answer => answer.answerLabel === userChoice
)
- setAnswerIndex(result)
+ setAnswerIndex(resultIndex)
setOpenModal(true)
+ console.log(result[0].isTrue)
+
+ const quizzService = new QuizService(client)
+ const quizUpdated = await quizzService.updateUserQuiz(
+ userChallenge.quiz,
+ questionIndex,
+ result[0].isTrue
+ )
+
+ // console.log(quizUpdated)
+
+ const challengeService = new ChallengeService(client)
+ const userChallengeUpdated = await challengeService.updateUserChallenge(
+ userChallenge,
+ UserChallengeUpdateFlag.QUIZ_UPDATE,
+ quizUpdated
+ )
+ dispatch(updateUserChallengeList(userChallengeUpdated))
// if last question
// const challengeService = new ChallengeService(client)
@@ -48,36 +71,45 @@ const QuizQuestion: React.FC<QuizQuestion> = ({
}
const goNextQuestion = () => {
+ setEnableNextQuest(true)
+ setOpenModal(false)
console.log('Next question')
}
useEffect(() => {
- console.log(currentChallenge)
console.log(userChallenge.quiz)
- }, [])
+ if (enableNextQuest) {
+ if (questionIndex !== userChallenge.quiz.questions.length - 1) {
+ setQuestionIndex(questionIndex + 1)
+ }
+ setEnableNextQuest(false)
+ }
+ }, [enableNextQuest, questionIndex])
return (
<div className="quiz-container">
<div className="question-container">
- <p>1/5</p>
+ <p>{questionIndex + 1}/5</p>
<p className="question text-18-bold">
- {userChallenge.quiz.questions[0].questionLabel}
+ {userChallenge.quiz.questions[questionIndex].questionLabel}
</p>
- {userChallenge.quiz.questions[0].answers.map((answer, index) => {
- return (
- <div className="answer" key={index}>
- <input
- type="radio"
- id={`answer${index}`}
- value={answer.answerLabel}
- onChange={handleChange}
- checked={userChoice === answer.answerLabel}
- />
- <label htmlFor={`answer${index}`} className="text-16-bold">
- {answer.answerLabel}
- </label>
- </div>
- )
- })}
+ {userChallenge.quiz.questions[questionIndex].answers.map(
+ (answer, index) => {
+ return (
+ <div className="answer" key={index}>
+ <input
+ type="radio"
+ id={`answer${index}`}
+ value={answer.answerLabel}
+ onChange={handleChange}
+ checked={userChoice === answer.answerLabel}
+ />
+ <label htmlFor={`answer${index}`} className="text-16-bold">
+ {answer.answerLabel}
+ </label>
+ </div>
+ )
+ }
+ )}
</div>
{userChoice && (
<StyledStopButton
@@ -85,13 +117,14 @@ const QuizQuestion: React.FC<QuizQuestion> = ({
className="btn-valid"
onClick={validateQuestion}
>
- Valider
+ {t('quiz.confirm')}
</StyledStopButton>
)}
<QuizExplanationModal
open={openModal}
userChallenge={userChallenge}
answerIndex={answerIndex}
+ questionIndex={questionIndex}
goNextQuestion={goNextQuestion}
handleCloseClick={() => setOpenModal(false)}
/>
diff --git a/src/components/Quiz/quizBegin.scss b/src/components/Quiz/quizBegin.scss
index 1fac0ab1b5aab2e0d1ac168778d3524ee6d832e9..d87fb79de1254b0c7cd50be3367d072fdbfc3539 100644
--- a/src/components/Quiz/quizBegin.scss
+++ b/src/components/Quiz/quizBegin.scss
@@ -4,12 +4,14 @@
display: flex;
flex-direction: column;
align-items: center;
- margin: 1rem 2rem;
+ margin: 2rem 1rem;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
- margin-right: 1rem;
transition: all 300ms ease;
color: $white;
background: linear-gradient(180deg, #323339 0%, #25262b 100%);
height: 100%;
}
+.quiz-icon-stars{
+ margin-top: -4rem;
+}
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
index f7943f6d42f033892c886689e951331f458e73ba..2a7bc483a2426381adff0dc438b9e4ed2a71548b 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -397,6 +397,8 @@
"score_final" : "SCORE FINAL",
"earn" : "Vous remportez",
"go_back" : "Retour",
- "try_again" : "Rééssayer"
+ "try_again" : "Rééssayer",
+ "confirm": "Valider",
+ "next": "Suivant"
}
}
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index ef4689575db41a8059e74ad1a6c97b0a35fd8cf0..55f6a375cfa2f3cea0a408fb3de88aa81b1ff213 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -194,13 +194,14 @@ export default class QuizService {
? UserQuestionState.CORRECT
: UserQuestionState.UNCORRECT,
}
- const updatedQuestions: UserQuestion[] = [
- ...userQuiz.questions,
- updatedQuestion,
- ]
+ // const updatedQuestions: UserQuestion[] = [
+ // ...userQuiz.questions,
+ // updatedQuestion,
+ // ]
+ userQuiz.questions[questionIndex] = updatedQuestion
const updatedUserQuiz: UserQuiz = {
...userQuiz,
- questions: updatedQuestions,
+ questions: userQuiz.questions,
result: questionResult ? userQuiz.result + 1 : userQuiz.result,
}
return updatedUserQuiz