← All changes | assets/src/apps/js/frontend/quiz/components/questions/question.js +91 -44 4.4.2 → 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' && typeof MathJax.Hub !== '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,8 +272,9 @@
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 {