← All changes | assets/src/apps/js/frontend/quiz/components/status/index.js +127 -127 4.3.9 → 4.4.10 View file →

		@@ -1,127 +1,127 @@
1		-import { useEffect } from '@wordpress/element';
2		-import { dispatch, select } from '@wordpress/data';
3		-import Timer from '../timer';
4		-import { __, sprintf } from '@wordpress/i18n';
5		-
6		-const $ = jQuery;
7		-const { debounce } = lodash;
8		-
9		-const Status = () => {
10		- const { submitQuiz } = dispatch( 'learnpress/quiz' );
11		-
12		- useEffect( () => {
13		- const $pc = $( '#popup-content' );
14		-
15		- if ( ! $pc.length ) {
16		- return;
17		- }
18		-
19		- const $sc = $pc.find( '.content-item-scrollable:eq(1)' );
20		- const $qs = $pc.find( '.quiz-status' );
21		- const pcTop = $qs.offset().top - 92;
22		- let isFixed = false;
23		-
24		- /**
25		- * Check when status bar is stopped in the top
26		- * to add new class into html
27		- */
28		- $sc.on( 'scroll', () => {
29		- if ( $sc.scrollTop() >= pcTop ) {
30		- if ( isFixed ) {
31		- return;
32		- }
33		- isFixed = true;
34		- } else {
35		- if ( ! isFixed ) {
36		- return;
37		- }
38		- isFixed = false;
39		- }
40		-
41		- if ( isFixed ) {
42		- $pc.addClass( 'fixed-quiz-status' );
43		- } else {
44		- $pc.removeClass( 'fixed-quiz-status' );
45		- }
46		- } );
47		- }, [] );
48		-
49		- /**
50		- * Submit question to record results.
51		- */
52		- const submit = () => {
53		- const { confirm } = select( 'learnpress/modal' );
54		-
55		- if ( 'no' === confirm( __( 'Are you sure to submit the quiz?', 'learnpress' ), submit ) ) {
56		- return;
57		- }
58		-
59		- submitQuiz();
60		- };
61		-
62		- const getMark = () => {
63		- const answered = select( 'learnpress/quiz' ).getData( 'answered' );
64		-
65		- return Object.values( answered ).reduce( ( m, r ) => {
66		- return m + r.mark;
67		- }, 0 );
68		- };
69		-
70		- const { getData, getUserMark } = select( 'learnpress/quiz' );
71		-
72		- const currentPage = getData( 'currentPage' );
73		- const questionsPerPage = getData( 'questionsPerPage' );
74		- const questionsCount = getData( 'numberQuestionsToDo' );
75		- const submitting = getData( 'submitting' );
76		- const duration = getData( 'duration' );
77		- const userMark = getUserMark();
78		-
79		- const classNames = [ 'quiz-status' ];
80		-
81		- const start = ( ( currentPage - 1 ) * questionsPerPage ) + 1;
82		- let end = start + questionsPerPage - 1;
83		- let indexHtml = '';
84		-
85		- end = Math.min( end, questionsCount );
86		-
87		- if ( submitting ) {
88		- classNames.push( 'submitting' );
89		- }
90		-
91		- if ( end < questionsCount ) {
92		- if ( questionsPerPage > 1 ) {
93		- indexHtml = sprintf( __( 'Question <span>%d to %d of %d</span>', 'learnpress' ), start, end, questionsCount );
94		- } else {
95		- indexHtml = sprintf( __( 'Question <span>%d of %d</span>', 'learnpress' ), start, questionsCount );
96		- }
97		- } else {
98		- indexHtml = sprintf( __( 'Question <span>%d of %d</span>', 'learnpress' ), start, end );
99		- }
100		-
101		- return (
102		- <div className={ classNames.join( ' ' ) }>
103		- <div>
104		- <div className="questions-index" dangerouslySetInnerHTML={ { __html: indexHtml } } />
105		-
106		- <div className="current-point">
107		- { sprintf( __( 'Earned Point: %s', 'learnpress' ), userMark ) }
108		- </div>
109		-
110		- <div>
111		- <div className="submit-quiz">
112		- <button
113		- className="lp-button" id="button-submit-quiz"
114		- onClick={ submit }
115		- >
116		- { ! submitting ? __( 'Finish Quiz', 'learnpress' ) : __( 'Submitting…', 'learnpress' ) }
117		- </button>
118		- </div>
119		-
120		- { <Timer /> }
121		- </div>
122		- </div>
123		- </div>
124		- );
125		-};
126		-
127		-export default Status;
	1	+import { useEffect } from '@wordpress/element';
	2	+import { dispatch, select } from '@wordpress/data';
	3	+import Timer from '../timer';
	4	+import { __, sprintf } from '@wordpress/i18n';
	5	+
	6	+const $ = jQuery;
	7	+const { debounce } = lodash;
	8	+
	9	+const Status = () => {
	10	+ const { submitQuiz } = dispatch( 'learnpress/quiz' );
	11	+
	12	+ useEffect( () => {
	13	+ const $pc = $( '#popup-content' );
	14	+
	15	+ if ( ! $pc.length ) {
	16	+ return;
	17	+ }
	18	+
	19	+ const $sc = $pc.find( '.content-item-scrollable:eq(1)' );
	20	+ const $qs = $pc.find( '.quiz-status' );
	21	+ const pcTop = $qs.offset().top - 92;
	22	+ let isFixed = false;
	23	+
	24	+ /**
	25	+ * Check when status bar is stopped in the top
	26	+ * to add new class into html
	27	+ */
	28	+ $sc.on( 'scroll', () => {
	29	+ if ( $sc.scrollTop() >= pcTop ) {
	30	+ if ( isFixed ) {
	31	+ return;
	32	+ }
	33	+ isFixed = true;
	34	+ } else {
	35	+ if ( ! isFixed ) {
	36	+ return;
	37	+ }
	38	+ isFixed = false;
	39	+ }
	40	+
	41	+ if ( isFixed ) {
	42	+ $pc.addClass( 'fixed-quiz-status' );
	43	+ } else {
	44	+ $pc.removeClass( 'fixed-quiz-status' );
	45	+ }
	46	+ } );
	47	+ }, [] );
	48	+
	49	+ /**
	50	+ * Submit question to record results.
	51	+ */
	52	+ const submit = () => {
	53	+ const { confirm } = select( 'learnpress/modal' );
	54	+
	55	+ if ( 'no' === confirm( __( 'Are you sure to submit the quiz?', 'learnpress' ), submit ) ) {
	56	+ return;
	57	+ }
	58	+
	59	+ submitQuiz();
	60	+ };
	61	+
	62	+ const getMark = () => {
	63	+ const answered = select( 'learnpress/quiz' ).getData( 'answered' );
	64	+
	65	+ return Object.values( answered ).reduce( ( m, r ) => {
	66	+ return m + r.mark;
	67	+ }, 0 );
	68	+ };
	69	+
	70	+ const { getData, getUserMark } = select( 'learnpress/quiz' );
	71	+
	72	+ const currentPage = getData( 'currentPage' );
	73	+ const questionsPerPage = getData( 'questionsPerPage' );
	74	+ const questionsCount = getData( 'numberQuestionsToDo' );
	75	+ const submitting = getData( 'submitting' );
	76	+ const duration = getData( 'duration' );
	77	+ const userMark = getUserMark();
	78	+
	79	+ const classNames = [ 'quiz-status' ];
	80	+
	81	+ const start = ( ( currentPage - 1 ) * questionsPerPage ) + 1;
	82	+ let end = start + questionsPerPage - 1;
	83	+ let indexHtml = '';
	84	+
	85	+ end = Math.min( end, questionsCount );
	86	+
	87	+ if ( submitting ) {
	88	+ classNames.push( 'submitting' );
	89	+ }
	90	+
	91	+ if ( end < questionsCount ) {
	92	+ if ( questionsPerPage > 1 ) {
	93	+ indexHtml = sprintf( __( 'Question <span>%d to %d of %d</span>', 'learnpress' ), start, end, questionsCount );
	94	+ } else {
	95	+ indexHtml = sprintf( __( 'Question <span>%d of %d</span>', 'learnpress' ), start, questionsCount );
	96	+ }
	97	+ } else {
	98	+ indexHtml = sprintf( __( 'Question <span>%d of %d</span>', 'learnpress' ), start, end );
	99	+ }
	100	+
	101	+ return (
	102	+ <div className={ classNames.join( ' ' ) }>
	103	+ <div>
	104	+ <div className="questions-index" dangerouslySetInnerHTML={ { __html: indexHtml } } />
	105	+
	106	+ <div className="current-point">
	107	+ { sprintf( __( 'Earned Point: %s', 'learnpress' ), userMark ) }
	108	+ </div>
	109	+
	110	+ <div>
	111	+ <div className="submit-quiz">
	112	+ <button
	113	+ className="lp-button" id="button-submit-quiz"
	114	+ onClick={ submit }
	115	+ >
	116	+ { ! submitting ? __( 'Finish Quiz', 'learnpress' ) : __( 'Submitting…', 'learnpress' ) }
	117	+ </button>
	118	+ </div>
	119	+
	120	+ { <Timer /> }
	121	+ </div>
	122	+ </div>
	123	+ </div>
	124	+ );
	125	+};
	126	+
	127	+export default Status;