diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index ac6c6b1964129ed27612d169b56e29a74c5dc003..685c1cb421108cc4dc774a66ef706ad4ba6a05ab 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -1,29 +1,38 @@ 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> </> ) } diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx index 083f74801ecf871ee13fc7deacb0b02c368a5b00..710aac8d534840cf93e1315415e27a48a032c1cf 100644 --- a/src/components/Quiz/QuizView.tsx +++ b/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: