1+ import React , { Component , Fragment } from 'react' ;
2+ import { InputGroup , InputGroupAddon , InputGroupText , Input , Button } from 'reactstrap' ;
3+ import ReactMarkdown from 'react-markdown' ;
4+ import CodeRenderer from './CodeRenderer' ;
5+
6+ class MultipleChoiceView extends Component {
7+ constructor ( props ) {
8+ super ( props ) ;
9+
10+ this . goBack = this . goBack . bind ( this ) ;
11+ this . goNext = this . goNext . bind ( this ) ;
12+ }
13+
14+ setChecked ( index ) {
15+ const { questions, current, editable } = this . props ;
16+
17+ if ( editable ) {
18+ const updatedQuestions = questions . slice ( ) ;
19+
20+ updatedQuestions [ current ] . answers . forEach ( ( answer , i ) => {
21+ if ( i === index ) {
22+ answer . checked = ! answer . checked ;
23+ }
24+ } ) ;
25+
26+ this . fireOnAnswersChanged ( updatedQuestions ) ;
27+ }
28+ }
29+
30+ goBack ( ) {
31+ const previous = this . props . current - 1 ;
32+
33+ if ( previous >= 0 ) {
34+ this . fireOnCurrentQuestionChanged ( previous ) ;
35+ }
36+ }
37+
38+ goNext ( ) {
39+ const { questions, current } = this . props ;
40+ const next = current + 1 ;
41+
42+ if ( next < questions . length ) {
43+ this . fireOnCurrentQuestionChanged ( next ) ;
44+ } else {
45+ this . fireOnDone ( ) ;
46+ }
47+ }
48+
49+ buildTextNextButton ( ) {
50+ const { questions, current } = this . props ;
51+
52+ if ( current < questions . length - 1 ) {
53+ return (
54+ < Fragment >
55+ Suivant
56+ < i className = "fas fa-arrow-right ml-3" />
57+ </ Fragment >
58+ ) ;
59+ }
60+
61+ return (
62+ < Fragment >
63+ Terminé
64+ < i className = "fas fa-check ml-3" />
65+ </ Fragment >
66+ ) ;
67+ }
68+
69+ buildCurrentQuestion ( ) {
70+ const { questions, current, onDone } = this . props ;
71+
72+ if ( questions . length ) {
73+ const question = questions [ current ] ;
74+ return (
75+ < Fragment >
76+ < ReactMarkdown source = { question . label } renderers = { { code : CodeRenderer } } />
77+ { question . answers . map ( ( answer , index ) => {
78+
79+ const { checked, correct, label } = answer ;
80+ const className = correct ? 'correct' : correct === false && checked ? 'incorrect' : '' ;
81+
82+ return (
83+ < InputGroup className = "mb-3" >
84+ < InputGroupAddon addonType = "prepend" >
85+ < InputGroupText onClick = { ( ) => this . setChecked ( index ) } >
86+ < Input addon type = "checkbox" checked = { answer . checked = ! ! checked } readOnly />
87+ </ InputGroupText >
88+ </ InputGroupAddon >
89+ < div className = { `${ className } } spellCheck = "false" > { label } </ div >
90+ </ InputGroup >
91+ ) ;
92+ } ) }
93+ < div className = "row justify-content-around" >
94+ < Button color = "primary" className = "mt-3 mb-3" onClick = { this . goBack } >
95+ < i className = "fas fa-arrow-left mr-3" />
96+ Précédent
97+ </ Button >
98+
99+ { ( onDone || current < questions . length - 1 ) &&
100+ < Button color = "primary" className = "mt-3 mb-3" onClick = { this . goNext } >
101+ { this . buildTextNextButton ( ) }
102+ </ Button > }
103+ </ div >
104+ </ Fragment >
105+ ) ;
106+ }
107+
108+ return null ;
109+ }
110+
111+ fireOnAnswersChanged ( questions ) {
112+ const { onAnswersChanged } = this . props ;
113+ if ( typeof onAnswersChanged === 'function' ) {
114+ onAnswersChanged ( questions ) ;
115+ }
116+ }
117+
118+ fireOnCurrentQuestionChanged ( current ) {
119+ const { onCurrentQuestionChanged } = this . props ;
120+ if ( typeof onCurrentQuestionChanged === 'function' ) {
121+ onCurrentQuestionChanged ( current ) ;
122+ }
123+ }
124+
125+ fireOnDone ( ) {
126+ const { onDone } = this . props ;
127+ if ( typeof onDone === 'function' ) {
128+ onDone ( ) ;
129+ }
130+ }
131+
132+ render ( ) {
133+ return this . buildCurrentQuestion ( ) ;
134+ }
135+ }
136+
137+ export default MultipleChoiceView ;
0 commit comments