Merge branch 'features/quiz-presentation' of...

Merge branch 'features/quiz-presentation' of https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo into features/quiz-presentation

src/components/Quiz/QuizQuestion.tsx

 import React, { useEffect } from 'react'
 import './quizQuestion.scss'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import { UserChallenge } from 'models'
 
-const QuizQuestion: React.FC = ({}) => {
+interface QuizQuestion {
+  userChallenge: UserChallenge
+}
+
+const QuizQuestion: React.FC<QuizQuestion> = ({
+  userChallenge,
+}: QuizQuestion) => {
+  const validateQuestion = () => {
+    console.log('open modal')
+  }
+
+  useEffect(() => {
+    console.log(userChallenge.quiz.questions[0])
+  }, [])
   return (
     <>
-      <StyledCard>
-        <p>{question}/5</p>
-        <p>{question}</p>
-        <div className="answers">
-          {answers.map((answer, index) => {
-            ;<StyledStopButton
-              key={index}
-              color="secondary"
-              onClick={handleValidate}
-            >
-              {answer}
-            </StyledStopButton>
-          })}
-        </div>
-      </StyledCard>
-      <StyledStopButton color="secondary" onClick={handleValidate}>
+      <div>
+        <p>1/5</p>
+        <p>{userChallenge.quiz.questions[0].questionLabel}</p>
+        {userChallenge.quiz.questions[0].answers.map((answer, index) => {
+          return (
+            <React.Fragment key={index}>
+              <input type="radio" id={`answer${index}`} name={'answer'} />
+              <label htmlFor={`answer${index}`}>{answer.answerLabel}</label>
+            </React.Fragment>
+          )
+        })}
+      </div>
+      <button className="secondary" onClick={validateQuestion}>
         valider
-      </StyledStopButton>
+      </button>
     </>
   )
 }

src/components/Quiz/QuizView.tsx

@@ -27,7 +27,7 @@ const QuizView: React.FC = () => {
       case QuizState.LOCKED:
         return <QuizBegin userChallenge={challenge} />
       case QuizState.ONGOING:
-        return <QuizQuestion />
+        return <QuizQuestion userChallenge={challenge} />
       case QuizState.DONE:
         return <QuizFinish userChallenge={challenge} />
       default: