← All changes
|
assets/src/apps/js/frontend/quiz/components/questions/question.js
+93
-44
4.1.7
→
4.4.10
View file →
| @@ -22,13 +22,9 @@ | ||
| 22 | 22 | this.$wrap = null; |
| 23 | 23 | } |
| 24 | 24 | |
| 25 | 25 | componentDidMount( a ) { |
| 26 | - const { | |
| 27 | - question, | |
| 28 | - isCurrent, | |
| 29 | - markQuestionRendered, | |
| 30 | - } = this.props; | |
| 26 | + const { question, isCurrent, markQuestionRendered } = this.props; | |
| 31 | 27 | |
| 32 | 28 | if ( isCurrent ) { |
| 33 | 29 | markQuestionRendered( question.id ); |
| 34 | 30 | } |
| @@ -40,9 +36,12 @@ | ||
| 40 | 36 | } |
| 41 | 37 | |
| 42 | 38 | LP.Hook.doAction( 'lp-question-compatible-builder' ); |
| 43 | 39 | |
| 44 | - if ( typeof MathJax !== 'undefined' ) { | |
| 40 | + if ( | |
| 41 | + typeof MathJax !== 'undefined' && | |
| 42 | + typeof MathJax.Hub !== 'undefined' | |
| 43 | + ) { | |
| 45 | 44 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] ); |
| 46 | 45 | } |
| 47 | 46 | |
| 48 | 47 | return a; |
| @@ -53,9 +52,15 @@ | ||
| 53 | 52 | }; |
| 54 | 53 | |
| 55 | 54 | parseOptions = ( options ) => { |
| 56 | 55 | if ( options ) { |
| 57 | - options = ! isArray( options ) ? JSON.parse( CryptoJS.AES.decrypt( options.data, options.key, { format: CryptoJSAesJson } ).toString( CryptoJS.enc.Utf8 ) ) : options; | |
| 56 | + options = ! isArray( options ) | |
| 57 | + ? JSON.parse( | |
| 58 | + CryptoJS.AES.decrypt( options.data, options.key, { | |
| 59 | + format: CryptoJSAesJson, | |
| 60 | + } ).toString( CryptoJS.enc.Utf8 ) | |
| 61 | + ) | |
| 62 | + : options; | |
| 58 | 63 | options = ! isArray( options ) ? JSON.parse( options ) : options; |
| 59 | 64 | } |
| 60 | 65 | |
| 61 | 66 | return options || []; |
| @@ -74,43 +79,63 @@ | ||
| 74 | 79 | return classes; |
| 75 | 80 | }; |
| 76 | 81 | |
| 77 | 82 | getEditLink = () => { |
| 78 | - const { | |
| 79 | - question, | |
| 80 | - editPermalink, | |
| 81 | - } = this.props; | |
| 83 | + const { question, editPermalink } = this.props; | |
| 82 | 84 | |
| 83 | - return editPermalink ? editPermalink.replace( /post=(.*[0-9])/, `post=${ question.id }` ) : ''; | |
| 85 | + return editPermalink | |
| 86 | + ? editPermalink.replace( /post=(.*[0-9])/, `post=${ question.id }` ) | |
| 87 | + : ''; | |
| 84 | 88 | }; |
| 85 | 89 | |
| 86 | 90 | editPermalink = ( editPermalink ) => { |
| 87 | - return sprintf( '<a href="%s">%s</a>', editPermalink, __( 'Edit', 'learnpress' ) ); | |
| 91 | + return sprintf( | |
| 92 | + '<a href="%s">%s</a>', | |
| 93 | + editPermalink, | |
| 94 | + __( 'Edit', 'learnpress' ) | |
| 95 | + ); | |
| 88 | 96 | }; |
| 89 | 97 | |
| 90 | 98 | render() { |
| 91 | - const { | |
| 92 | - question, | |
| 93 | - isShow, | |
| 94 | - isShowIndex, | |
| 95 | - isShowHint, | |
| 96 | - status, | |
| 97 | - } = this.props; | |
| 99 | + const { question, isShow, isShowIndex, isShowHint, status, results } = | |
| 100 | + this.props; | |
| 98 | 101 | |
| 102 | + if ( | |
| 103 | + results && | |
| 104 | + results.questions && | |
| 105 | + results.questions[ question.id ] | |
| 106 | + ) { | |
| 107 | + if ( | |
| 108 | + typeof results.questions[ question.id ].correct !== 'undefined' | |
| 109 | + ) { | |
| 110 | + question.correct = results.questions[ question.id ].correct; | |
| 111 | + } | |
| 112 | + } | |
| 113 | + | |
| 99 | 114 | const QuestionTypes = LP.questionTypes.default; |
| 100 | 115 | const editPermalink = this.getEditLink(); |
| 101 | 116 | |
| 102 | 117 | if ( editPermalink ) { |
| 103 | - jQuery( '#wp-admin-bar-edit-lp_question' ).find( '.ab-item' ).attr( 'href', editPermalink ); | |
| 118 | + jQuery( '#wp-admin-bar-edit-lp_question' ) | |
| 119 | + .find( '.ab-item' ) | |
| 120 | + .attr( 'href', editPermalink ); | |
| 104 | 121 | } |
| 105 | 122 | |
| 106 | 123 | const titleParts = { |
| 107 | 124 | index: () => { |
| 108 | - return ( isShowIndex ? <span className="question-index">{ isShowIndex }.</span> : '' ); | |
| 125 | + return isShowIndex ? ( | |
| 126 | + <span className="question-index">{ isShowIndex }.</span> | |
| 127 | + ) : ( | |
| 128 | + '' | |
| 129 | + ); | |
| 109 | 130 | }, |
| 110 | 131 | |
| 111 | 132 | title: () => { |
| 112 | - return ( <span dangerouslySetInnerHTML={ { __html: question.title } } /> ); | |
| 133 | + return ( | |
| 134 | + <span | |
| 135 | + dangerouslySetInnerHTML={ { __html: question.title } } | |
| 136 | + /> | |
| 137 | + ); | |
| 113 | 138 | }, |
| 114 | 139 | |
| 115 | 140 | hint: () => { |
| 116 | 141 | return <ButtonHint question={ question }></ButtonHint>; |
| @@ -119,11 +144,13 @@ | ||
| 119 | 144 | 'edit-permalink': () => { |
| 120 | 145 | return ( |
| 121 | 146 | editPermalink && ( |
| 122 | 147 | <span |
| 123 | - dangerouslySetInnerHTML={ { __html: this.editPermalink( editPermalink ) } } | |
| 124 | - className="edit-link"> | |
| 125 | - </span> | |
| 148 | + dangerouslySetInnerHTML={ { | |
| 149 | + __html: this.editPermalink( editPermalink ), | |
| 150 | + } } | |
| 151 | + className="edit-link" | |
| 152 | + ></span> | |
| 126 | 153 | ) |
| 127 | 154 | ); |
| 128 | 155 | }, |
| 129 | 156 | }; |
| @@ -134,9 +161,10 @@ | ||
| 134 | 161 | <h4 className="question-title"> |
| 135 | 162 | { LP.config.questionTitleParts().map( ( name ) => { |
| 136 | 163 | return ( |
| 137 | 164 | <Fragment key={ `title-part-${ name }` }> |
| 138 | - { titleParts[ name ] && titleParts[ name ]() } | |
| 165 | + { titleParts[ name ] && | |
| 166 | + titleParts[ name ]() } | |
| 139 | 167 | </Fragment> |
| 140 | 168 | ); |
| 141 | 169 | } ) } |
| 142 | 170 | </h4> |
| @@ -144,15 +172,22 @@ | ||
| 144 | 172 | }, |
| 145 | 173 | |
| 146 | 174 | content: () => { |
| 147 | 175 | return ( |
| 148 | - <div className="question-content" dangerouslySetInnerHTML={ { __html: question.content } } /> | |
| 176 | + <div | |
| 177 | + className="question-content" | |
| 178 | + dangerouslySetInnerHTML={ { __html: question.content } } | |
| 179 | + /> | |
| 149 | 180 | ); |
| 150 | 181 | }, |
| 151 | 182 | |
| 152 | 183 | 'answer-options': () => { |
| 153 | 184 | return ( |
| 154 | - this.$wrap && <QuestionTypes { ...{ ...this.props, $wrap: this.$wrap } } /> | |
| 185 | + this.$wrap && ( | |
| 186 | + <QuestionTypes | |
| 187 | + { ...{ ...this.props, $wrap: this.$wrap } } | |
| 188 | + /> | |
| 189 | + ) | |
| 155 | 190 | ); |
| 156 | 191 | }, |
| 157 | 192 | |
| 158 | 193 | explanation: () => { |
| @@ -159,11 +194,16 @@ | ||
| 159 | 194 | return ( |
| 160 | 195 | question.explanation && ( |
| 161 | 196 | <> |
| 162 | 197 | <div className="question-explanation-content"> |
| 163 | - <strong className="explanation-title">{ __( 'Explanation', 'learnpress' ) }:</strong> | |
| 164 | - <div dangerouslySetInnerHTML={ { __html: question.explanation } }> | |
| 165 | - </div> | |
| 198 | + <strong className="explanation-title"> | |
| 199 | + { __( 'Explanation', 'learnpress' ) }: | |
| 200 | + </strong> | |
| 201 | + <div | |
| 202 | + dangerouslySetInnerHTML={ { | |
| 203 | + __html: question.explanation, | |
| 204 | + } } | |
| 205 | + ></div> | |
| 166 | 206 | </div> |
| 167 | 207 | </> |
| 168 | 208 | ) |
| 169 | 209 | ); |
| @@ -170,13 +210,21 @@ | ||
| 170 | 210 | }, |
| 171 | 211 | |
| 172 | 212 | hint: () => { |
| 173 | 213 | return ( |
| 174 | - question.hint && ! question.explanation && question.showHint && ( | |
| 214 | + question.hint && | |
| 215 | + ! question.explanation && | |
| 216 | + question.showHint && ( | |
| 175 | 217 | <> |
| 176 | 218 | <div className="question-hint-content"> |
| 177 | - <strong className="hint-title">{ __( 'Hint', 'learnpress' ) }:</strong> | |
| 178 | - <div dangerouslySetInnerHTML={ { __html: question.hint } } /> | |
| 219 | + <strong className="hint-title"> | |
| 220 | + { __( 'Hint', 'learnpress' ) }: | |
| 221 | + </strong> | |
| 222 | + <div | |
| 223 | + dangerouslySetInnerHTML={ { | |
| 224 | + __html: question.hint, | |
| 225 | + } } | |
| 226 | + /> | |
| 179 | 227 | </div> |
| 180 | 228 | </> |
| 181 | 229 | ) |
| 182 | 230 | ); |
| @@ -183,9 +231,9 @@ | ||
| 183 | 231 | }, |
| 184 | 232 | |
| 185 | 233 | buttons: () => { |
| 186 | 234 | return ( |
| 187 | - ( 'started' === status ) && <Buttons question={ question } /> | |
| 235 | + 'started' === status && <Buttons question={ question } /> | |
| 188 | 236 | ); |
| 189 | 237 | }, |
| 190 | 238 | }; |
| 191 | 239 | |
| @@ -192,13 +240,14 @@ | ||
| 192 | 240 | const configBlocks = LP.config.questionBlocks(); |
| 193 | 241 | |
| 194 | 242 | return ( |
| 195 | 243 | <> |
| 196 | - <div className={ this.getWrapperClass().join( ' ' ) } | |
| 244 | + <div | |
| 245 | + className={ this.getWrapperClass().join( ' ' ) } | |
| 197 | 246 | style={ { display: isShow ? '' : 'none' } } |
| 198 | 247 | data-id={ question.id } |
| 199 | - ref={ this.setRef }> | |
| 200 | - | |
| 248 | + ref={ this.setRef } | |
| 249 | + > | |
| 201 | 250 | { configBlocks.map( ( name ) => { |
| 202 | 251 | return ( |
| 203 | 252 | <Fragment key={ `block-${ name }` }> |
| 204 | 253 | { blocks[ name ] ? blocks[ name ]() : '' } |
| @@ -212,13 +261,10 @@ | ||
| 212 | 261 | } |
| 213 | 262 | |
| 214 | 263 | export default compose( [ |
| 215 | 264 | withSelect( ( select, { question: { id } } ) => { |
| 216 | - const { | |
| 217 | - getData, | |
| 218 | - getQuestionAnswered, | |
| 219 | - getQuestionMark, | |
| 220 | - } = select( 'learnpress/quiz' ); | |
| 265 | + const { getData, getQuestionAnswered, getQuestionMark } = | |
| 266 | + select( 'learnpress/quiz' ); | |
| 221 | 267 | |
| 222 | 268 | return { |
| 223 | 269 | status: getData( 'status' ), |
| 224 | 270 | questions: getData( 'question' ), |
| @@ -226,13 +272,15 @@ | ||
| 226 | 272 | questionsRendered: getData( 'questionsRendered' ), |
| 227 | 273 | editPermalink: getData( 'editPermalink' ), |
| 228 | 274 | numPages: getData( 'numPages' ), |
| 229 | 275 | mark: getQuestionMark( id ) || '', |
| 276 | + results: getData( 'results' ), | |
| 230 | 277 | }; |
| 231 | 278 | } ), |
| 232 | 279 | withDispatch( ( dispatch ) => { |
| 233 | 280 | const { |
| 234 | 281 | updateUserQuestionAnswers, |
| 282 | + updateUserQuestionFibAnswers, | |
| 235 | 283 | markQuestionRendered, |
| 236 | 284 | } = dispatch( 'learnpress/quiz' ); |
| 237 | 285 | |
| 238 | 286 | return { |
| @@ -237,7 +285,8 @@ | ||
| 237 | 285 | |
| 238 | 286 | return { |
| 239 | 287 | markQuestionRendered, |
| 240 | 288 | updateUserQuestionAnswers, |
| 289 | + updateUserQuestionFibAnswers, | |
| 241 | 290 | }; |
| 242 | 291 | } ), |
| 243 | 292 | ] )( Question ); |