mumuki-laboratory 7.12.0 → 7.12.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,145 +1,200 @@
1
1
  mumuki.load(() => {
2
- mumuki.kindergarten = {
2
+
3
+ mumuki.isKindergartenExercise = () => !!$('.mu-kindergarten').get(0);
4
+
5
+ class MumukiKindergarten extends mumuki.Kids {
6
+
7
+ constructor() {
8
+ super();
9
+ }
10
+
3
11
  initialize() {
12
+ super.initialize();
13
+ this.$contextModalButton = new mumuki.Button($('#mu-kids-context .mu-kindergarten-modal-button.mu-close'));
14
+
15
+ this.resultActions.passed = this._showSuccessPopup.bind(this);
16
+ this.resultActions.passed_with_warnings = this._showSuccessPopup.bind(this);
17
+ this.resultActions.failed = this._showFailurePopup.bind(this);
18
+ this.resultActions.errored = this._showFailurePopup.bind(this);
19
+ this.resultActions.pending = this._showFailurePopup.bind(this);
20
+ this.resultActions.aborted = this.showAbortedPopup.bind(this);
21
+
4
22
  this.speech.verifyBrowserSupport();
5
23
  this.hint.showOrHideExpandHintButton();
6
24
  this.context.showNextOrCloseButton();
7
- this.result.configureCallbacks();
8
- },
9
- speech: {
10
- _isPlaying: false,
11
- click(selector, locale) {
12
- if (this._isPlaying) {
13
- this.stop();
14
- } else {
15
- this.play(selector, locale);
16
- }
17
- },
18
- play(selector, locale) {
19
- const msg = new SpeechSynthesisUtterance();
20
- msg.text = $(selector).text();
21
- msg.lang = locale.split('_')[0];
22
- msg.pitch = 0;
23
- msg.onend = () => this.stop();
24
- this._action('play', 'stop', true, (speech) => speech.speak(msg))
25
- },
26
- stop() {
27
- this._action('stop', 'play', false, (speech) => speech.cancel())
28
- },
29
- _action(add, remove, isPlaying, callback = () => {}) {
30
- callback(window.speechSynthesis);
31
- const $button = $('.mu-kindergarten-play-description')
32
- $button.find(`.mu-kindergarten-${add}`).addClass('hidden');
33
- $button.find(`.mu-kindergarten-${remove}`).removeClass('hidden');
34
- this._isPlaying = isPlaying;
35
- },
36
- verifyBrowserSupport() {
37
- if (!window.speechSynthesis) {
38
- const $button = $('.mu-kindergarten-play-description')
39
- $button.prop('disabled', true);
40
- $button.css('cursor', 'not-allowed');
41
- this._action('play', 'stop', false)
42
- }
43
- }
44
- },
45
- hint: {
46
- toggle() {
47
- $('.mu-kindergarten-light-speech-bubble').toggleClass('open');
48
- },
49
- toggleMedia() {
50
- const $hintMedia = $('.mu-kindergarten-hint-media');
51
- const $i = $('.expand-or-collapse-hint-media').children('i');
52
- $i.toggleClass('fa-caret-up').toggleClass('fa-caret-down');
53
- $hintMedia.toggleClass('closed');
54
- },
55
- showOrHideExpandHintButton() {
56
- const $button = $('.expand-or-collapse-hint-media');
57
- const $hintMedia = $('.mu-kindergarten-hint-media');
58
- if (!$hintMedia.get(0)) $button.addClass('hidden');
59
- },
60
- },
61
- context: {
62
- showContext() {
63
- mumuki.kids.showContext();
64
- this._showFirstSlideImage();
65
- },
66
- nextSlide() {
67
- this._clickButton('next');
68
- },
69
- prevSlide() {
70
- this._clickButton('prev');
71
- },
72
- _imageSlides() {
73
- return $('.mu-kindergarten-context-image-slides');
74
- },
75
- _activeSlideImage() {
76
- return this._imageSlides().find('.active');
77
- },
78
- _clickButton(prevOrNext) {
79
- this._activeSlideImage().removeClass('active')[prevOrNext]().addClass('active');
80
- this.showNextOrCloseButton();
81
- this._hidePreviousButtonIfFirstImage();
82
- },
83
- showNextOrCloseButton() {
84
- const $next = $('.mu-kindergarten-modal-button.mu-next');
85
- const $close = $('.mu-kindergarten-modal-button.mu-close');
86
- const isLastChild = this._activeSlideImage().is(':last-child');
87
- this._addClassIf($next, 'hidden', () => isLastChild);
88
- this._addClassIf($close, 'hidden', () => !isLastChild);
89
- },
90
- _hidePreviousButtonIfFirstImage() {
91
- const $prev = $('.mu-kindergarten-modal-button.mu-previous');
92
- this._addClassIf($prev, 'hidden', () => this._activeSlideImage().is(':first-child'))
93
- },
94
- _showFirstSlideImage() {
95
- this._imageSlides().find('img').each((i, el) => this._addClassIf($(el), 'active', () => i === 0))
96
- this.showNextOrCloseButton();
97
- this._hidePreviousButtonIfFirstImage();
98
- },
99
- _addClassIf(element, clazz, criteria) {
100
- if (criteria()) {
101
- element.addClass(clazz)
102
- } else {
103
- element.removeClass(clazz);
104
- }
105
- }
106
- },
107
- result: {
108
- configureCallbacks() {
109
- mumuki.kids.resultAction.passed = this._showOnSuccessPopup;
110
- mumuki.kids.resultAction.passed_with_warnings = this._showOnSuccessPopup;
111
-
112
- mumuki.kids.resultAction.failed = this._showOnFailurePopup;
113
- mumuki.kids.resultAction.errored = this._showOnFailurePopup;
114
- mumuki.kids.resultAction.pending = this._showOnFailurePopup;
115
- },
116
- _showOnSuccessPopup(data) {
117
- $('.submission-results').html(data.title_html);
118
- mumuki.kids._showOnSuccessPopup(data);
119
- $('#kids-results .modal-content').addClass(data.status);
120
- },
121
- _showOnFailurePopup(data) {
122
- mumuki.kids._getResultsAbortedModal().modal();
123
- $('#kids-results-aborted .modal-header').html(data.title_html);
124
- $('#kids-results-aborted .modal-content').addClass(data.status);
125
- mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
126
- }
127
25
  }
128
- };
129
26
 
130
- $(document).ready(() => {
27
+ // ================
28
+ // == Public API ==
29
+ // ================
30
+
31
+ showNonAbortedPopup(data, animation_name) {
32
+ data.guide_finished_by_solution = false;
33
+ this.$submissionResult.html(data.title_html);
34
+ this.$resultsModal.find('.modal-content').removeClass().addClass('modal-content').addClass(data.status);
35
+ super.showNonAbortedPopup(data, animation_name, 1000);
36
+ }
37
+
38
+ showAbortedPopup(data) {
39
+ const $closeResultAbortedModalButton = new mumuki.Button(this.$resultsAbortedModal.find('.mu-close'));
40
+ $closeResultAbortedModalButton.setWaiting();
41
+ mumuki.presenterCharacter.playAnimation('failed', $('.mu-kids-character-result-aborted'));
42
+ super.showAbortedPopup(data);
43
+ setTimeout(() => $closeResultAbortedModalButton.enable(), 2500);
44
+ }
131
45
 
132
- if ($('.mu-kindergarten').get(0)) {
46
+ // ==================
47
+ // == Hook Methods ==
48
+ // ==================
133
49
 
134
- mumuki.resize(() => {
135
- mumuki.kids.scaleState($('.mu-kids-states'), 100);
136
- mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
137
- })
50
+ _showSuccessPopup(data) {
51
+ this.showNonAbortedPopup(data, 'success2_l');
52
+ }
53
+
54
+ _showFailurePopup(data) {
55
+ this.showNonAbortedPopup(data, 'failure');
56
+ }
138
57
 
139
- mumuki.kindergarten.initialize()
58
+ // ====================
59
+ // == Event Callback ==
60
+ // ====================
140
61
 
62
+ onReady() {
63
+ mumuki.resize(this.onResize.bind(this));
141
64
  }
142
65
 
143
- })
66
+ onResize() {
67
+ this.scaleState(this.$states, 50);
68
+ this.scaleBlocksArea(this.$blocks);
69
+ }
70
+
71
+ // ==========================
72
+ // == Called by the runner ==
73
+ // ==========================
74
+
75
+ restart() {
76
+ mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
77
+ }
78
+
79
+ // =======================
80
+ // == Specific Behavior ==
81
+ // =======================
82
+
83
+ get speech() {
84
+ return {
85
+ _isPlaying: false,
86
+ click(selector, locale) {
87
+ if (this._isPlaying) {
88
+ this.stop();
89
+ } else {
90
+ this.play(selector, locale);
91
+ }
92
+ },
93
+ play(selector, locale) {
94
+ const msg = new SpeechSynthesisUtterance();
95
+ msg.text = $(selector).text();
96
+ msg.lang = locale.split('_')[0];
97
+ msg.pitch = 0;
98
+ msg.onend = () => this.stop();
99
+ this._action('play', 'stop', true, (speech) => {
100
+ mumuki.presenterCharacter.playAnimation('talk', mumuki.kids.$bubbleCharacterAnimation);
101
+ speech.speak(msg);
102
+ })
103
+ },
104
+ stop() {
105
+ this._action('stop', 'play', false, (speech) => speech.cancel())
106
+ },
107
+ _action(add, remove, isPlaying, callback) {
108
+ callback(window.speechSynthesis);
109
+ const $button = $('.mu-kindergarten-play-description')
110
+ $button.find(`.mu-kindergarten-${add}`).addClass('hidden');
111
+ $button.find(`.mu-kindergarten-${remove}`).removeClass('hidden');
112
+ this._isPlaying = isPlaying;
113
+ },
114
+ verifyBrowserSupport() {
115
+ if (!window.speechSynthesis) {
116
+ const $button = $('.mu-kindergarten-play-description')
117
+ $button.prop('disabled', true);
118
+ $button.css('cursor', 'not-allowed');
119
+ this._action('play', 'stop', false)
120
+ }
121
+ }
122
+ }
123
+
124
+ }
125
+
126
+ get hint() {
127
+ return {
128
+ toggle() {
129
+ $('.mu-kindergarten-light-speech-bubble').toggleClass('open');
130
+ },
131
+ toggleMedia() {
132
+ const $hintMedia = $('.mu-kindergarten-hint-media');
133
+ const $i = $('.expand-or-collapse-hint-media').children('i');
134
+ $i.toggleClass('fa-caret-up').toggleClass('fa-caret-down');
135
+ $hintMedia.toggleClass('closed');
136
+ },
137
+ showOrHideExpandHintButton() {
138
+ const $button = $('.expand-or-collapse-hint-media');
139
+ const $hintMedia = $('.mu-kindergarten-hint-media');
140
+ if (!$hintMedia.get(0)) $button.addClass('hidden');
141
+ },
142
+ }
143
+ }
144
+
145
+ get context() {
146
+ return {
147
+ showContext() {
148
+ mumuki.kids.showContext();
149
+ this._showFirstSlideImage();
150
+ },
151
+ nextSlide() {
152
+ this._clickButton('next');
153
+ },
154
+ prevSlide() {
155
+ this._clickButton('prev');
156
+ },
157
+ _imageSlides() {
158
+ return $('.mu-kindergarten-context-image-slides');
159
+ },
160
+ _activeSlideImage() {
161
+ return this._imageSlides().find('.active');
162
+ },
163
+ _clickButton(prevOrNext) {
164
+ this._activeSlideImage().removeClass('active')[prevOrNext]().addClass('active');
165
+ this.showNextOrCloseButton();
166
+ this._hidePreviousButtonIfFirstImage();
167
+ },
168
+ showNextOrCloseButton() {
169
+ const $next = $('.mu-kindergarten-modal-button.mu-next');
170
+ const $close = $('.mu-kindergarten-modal-button.mu-close');
171
+ const isLastChild = this._activeSlideImage().is(':last-child');
172
+ this._addClassIf($next, 'hidden', () => isLastChild);
173
+ this._addClassIf($close, 'hidden', () => !isLastChild);
174
+ },
175
+ _hidePreviousButtonIfFirstImage() {
176
+ const $prev = $('.mu-kindergarten-modal-button.mu-previous');
177
+ this._addClassIf($prev, 'hidden', () => this._activeSlideImage().is(':first-child'))
178
+ },
179
+ _showFirstSlideImage() {
180
+ this._imageSlides().find('img').each((i, el) => this._addClassIf($(el), 'active', () => i === 0))
181
+ this.showNextOrCloseButton();
182
+ this._hidePreviousButtonIfFirstImage();
183
+ },
184
+ _addClassIf(element, clazz, criteria) {
185
+ if (criteria()) {
186
+ element.addClass(clazz)
187
+ } else {
188
+ element.removeClass(clazz);
189
+ }
190
+ }
191
+ }
192
+ }
193
+
194
+ }
195
+
196
+ if (mumuki.isKindergartenExercise()) {
197
+ mumuki.kids = new MumukiKindergarten();
198
+ }
144
199
 
145
200
  });
@@ -0,0 +1,257 @@
1
+ mumuki.load(() => {
2
+
3
+ mumuki.isPrimaryExercise = () => !!$('.mu-kids-exercise').get(0) && !$('.mu-kindergarten').get(0);
4
+
5
+ class MumukiPrimary extends mumuki.Kids {
6
+
7
+ constructor() {
8
+ super();
9
+ }
10
+
11
+ // ================
12
+ // == Public API ==
13
+ // ================
14
+
15
+ initialize() {
16
+ super.initialize();
17
+ this.$characterSpeechBubble = $('.mu-kids-character-speech-bubble');
18
+ this.$characterSpeechBubbleNormal = this.$characterSpeechBubble.children('.mu-kids-character-speech-bubble-normal');
19
+ this.$overlay = $('.mu-kids-overlay');
20
+ this.$contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
21
+
22
+ this._paragraphHeight = undefined;
23
+ this._currentParagraphIndex = 0;
24
+ this._paragraphCount = 1;
25
+ this._paragraphsLines = 2;
26
+ this._availableTabs = ['.description', '.hint'];
27
+ this._$speechParagraphs = undefined;
28
+ this._paragraphHeight = undefined;
29
+ this._scrollHeight = undefined;
30
+ this._nextSpeechBlinking = undefined;
31
+ this._$prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
32
+ this._$nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
33
+ this._$speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
34
+ this._$texts = this.$characterSpeechBubbleNormal.children(this._availableTabs.join(", "));
35
+ this._$hint = $('.mu-kids-hint');
36
+ this._$description = $('.mu-kids-description');
37
+
38
+ this.resultActions.passed = this._showSuccessPopup.bind(this);
39
+ this.resultActions.passed_with_warnings = this._showOnCharacterBubble.bind(this);
40
+ this.resultActions.failed = this._showOnCharacterBubble.bind(this);
41
+ this.resultActions.errored = this._showOnCharacterBubble.bind(this);
42
+ this.resultActions.pending = this._showOnCharacterBubble.bind(this);
43
+ this.resultActions.aborted = this.showAbortedPopup.bind(this);
44
+
45
+ this.$contextModal.on('hidden.bs.modal', this.animateSpeech.bind(this));
46
+ }
47
+
48
+ showAbortedPopup(data) {
49
+ super.showAbortedPopup(data);
50
+ mumuki.submission.animateTimeoutError(this.submitButton);
51
+ }
52
+
53
+ // ==================
54
+ // == Hook Methods ==
55
+ // ==================
56
+
57
+ _showSuccessPopup(data) {
58
+ this.showNonAbortedPopup(data, 'success2_l', 4000);
59
+ }
60
+
61
+ _showFailurePopup(data) {
62
+ this._showOnCharacterBubble(data);
63
+ }
64
+
65
+ // ====================
66
+ // == Event Callback ==
67
+ // ====================
68
+
69
+ onReady() {
70
+ mumuki.resize(this.onResize.bind(this));
71
+
72
+ this._availableTabs.forEach((selector) => this._tabParagraphs(selector).contents().unwrap().wrapAll('<p>'));
73
+
74
+ this._updateSpeechParagraphs();
75
+ this._resizeSpeechParagraphs();
76
+
77
+ this._$speechTabs.each((i) => {
78
+ const $tab = $(this._$speechTabs[i]);
79
+ if ($tab.data('target')) {
80
+ $tab.click(() => {
81
+ this._$speechTabs.removeClass('active');
82
+ $tab.addClass('active');
83
+ this._$texts.hide();
84
+ this.$characterSpeechBubbleNormal.children('.' + $tab.data('target')).show();
85
+ this._updateSpeechParagraphs();
86
+ })
87
+ }
88
+ });
89
+
90
+ if (this._paragraphCount > 1) {
91
+ this._nextSpeechBlinking = mumuki.setInterval(() => this._$nextSpeech.fadeTo('slow', 0.1).fadeTo('slow', 1.0), 1000);
92
+ }
93
+
94
+ this._$nextSpeech.click(this._showNextParagraph.bind(this));
95
+ this._$prevSpeech.click(this._showPrevParagraph.bind(this));
96
+ this._$description.click(this.animateSpeech.bind(this));
97
+
98
+ this._$hint.click(() => {
99
+ this.animateHint();
100
+ this._$hint.removeClass('blink');
101
+ });
102
+ }
103
+
104
+ onResize() {
105
+ const FULL_MARGIN = 30;
106
+
107
+ distributeAreas(this.$stateImage, this.$states, this.$blocks, FULL_MARGIN);
108
+
109
+ if (!this.$exerciseDescription.hasClass('mu-kids-exercise-description-fixed')) {
110
+ this.$exerciseDescription.width(this.$exercise.width() - this.$states.width() - FULL_MARGIN / 2);
111
+ }
112
+
113
+ this.$state.each((_index, state) => this.scaleState($(state), FULL_MARGIN));
114
+ this.scaleBlocksArea(this.$blocks);
115
+
116
+ if (this._paragraphCount <= 1) clearInterval(this._nextSpeechBlinking);
117
+
118
+ this._updateSpeechParagraphs();
119
+ this._resizeSpeechParagraphs();
120
+ }
121
+
122
+ onNonAbortedPopupCall(data) {
123
+ this._showMessageOnCharacterBubble(data);
124
+ }
125
+
126
+ onSubmissionResultModalOpen(_data) {
127
+ this._showCorollaryCharacter();
128
+ }
129
+
130
+ // ==========================
131
+ // == Called by the runner ==
132
+ // ==========================
133
+
134
+ restart() {
135
+ this._hideMessageOnCharacterBubble();
136
+ const $bubble = this.$characterSpeechBubble;
137
+ Object.keys(this.resultActions).forEach($bubble.removeClass.bind($bubble));
138
+ mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
139
+ }
140
+
141
+ // =======================
142
+ // == Specific Behavior ==
143
+ // =======================
144
+
145
+ _hideMessageOnCharacterBubble() {
146
+ const $bubble = this.$characterSpeechBubble;
147
+ $bubble.find('.mu-kids-character-speech-bubble-tabs').show();
148
+ $bubble.find('.mu-kids-character-speech-bubble-normal').show();
149
+ $bubble.find('.mu-kids-character-speech-bubble-failed').hide();
150
+ $bubble.find('.mu-kids-discussion-link').remove();
151
+ Object.keys(this.resultActions).forEach($bubble.removeClass.bind($bubble));
152
+ this.$overlay.hide();
153
+ }
154
+
155
+ _showMessageOnCharacterBubble(data) {
156
+ const renderer = new mumuki.renderers.speechBubble.SpeechBubbleRenderer(this.$characterSpeechBubble);
157
+ renderer.setDiscussionsLinkHtml($('#mu-kids-discussion-link-html').html());
158
+ renderer.setResponseData(data);
159
+ renderer.render();
160
+ this.$overlay.show();
161
+ }
162
+
163
+ _showOnCharacterBubble(data) {
164
+ mumuki.presenterCharacter.playAnimation('failure', this.$bubbleCharacterAnimation);
165
+ this._showMessageOnCharacterBubble(data);
166
+ }
167
+
168
+ _showCorollaryCharacter() {
169
+ mumuki.characters.magnifying_glass.playAnimation('show', $('.mu-kids-corollary-animation'));
170
+ }
171
+
172
+ animateSpeech() {
173
+ mumuki.presenterCharacter.playAnimation('talk', this.$bubbleCharacterAnimation);
174
+ }
175
+
176
+ animateHint() {
177
+ mumuki.presenterCharacter.playAnimation('hint', this.$bubbleCharacterAnimation);
178
+ }
179
+
180
+ _showPrevParagraph() {
181
+ this.animateSpeech();
182
+ this._showParagraph(this._currentParagraphIndex - 1);
183
+ }
184
+
185
+ _showNextParagraph() {
186
+ this.animateSpeech();
187
+ this._showParagraph(this._currentParagraphIndex + 1);
188
+ clearInterval(this._nextSpeechBlinking);
189
+ }
190
+
191
+ _resizeSpeechParagraphs(paragraphIndex) {
192
+ const previousParagraphCount = this._paragraphCount;
193
+ this._scrollHeight = this.$characterSpeechBubbleNormal[0].scrollHeight;
194
+ this._paragraphHeight = floatFromPx(this._$speechParagraphs.css('line-height')) * this._paragraphsLines;
195
+ this._paragraphCount = Math.ceil(this._scrollHeight / this._paragraphHeight);
196
+ const newParagraphIndex = Math.floor((this._paragraphCount / previousParagraphCount) * this._currentParagraphIndex);
197
+ this._showParagraph(paragraphIndex || newParagraphIndex);
198
+ }
199
+
200
+ _showParagraph(index) {
201
+ this.$characterSpeechBubbleNormal[0].scrollTop = index * this._paragraphHeight;
202
+ this._currentParagraphIndex = index;
203
+ this._checkArrowsSpeechVisibility();
204
+ }
205
+
206
+ _checkArrowsSpeechVisibility() {
207
+ this._setVisibility(this._$prevSpeech, this._currentParagraphIndex !== 0);
208
+ this._setVisibility(this._$nextSpeech, this._currentParagraphIndex !== this._paragraphCount - 1);
209
+ }
210
+
211
+ _setVisibility(element, isVisible) {
212
+ isVisible ? element.show() : element.hide();
213
+ }
214
+
215
+ _tabParagraphs(selector) {
216
+ return $('.mu-kids-character-speech-bubble > .mu-kids-character-speech-bubble-normal > div' + selector + ' > p');
217
+ }
218
+
219
+ _updateSpeechParagraphs() {
220
+ this._$speechParagraphs = this._tabParagraphs('.' + this._getSelectedTabName());
221
+ this._resizeSpeechParagraphs(0);
222
+ }
223
+
224
+ _getSelectedTabName() {
225
+ return this._$speechTabs.filter('.active').data('target') || 'description';
226
+ }
227
+
228
+ }
229
+
230
+ /**
231
+ * Assigns propert widths to the states and blocks areas
232
+ * depending on the presence and type of available states
233
+ *
234
+ * @param {*} $muKidsStateImage
235
+ * @param {*} $muKidsStatesContainer
236
+ * @param {*} $muKidsBlocks
237
+ * @param {number} fullMargin
238
+ */
239
+ function distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin) {
240
+ if ($muKidsStateImage.children().length) {
241
+ const ratio = $muKidsStatesContainer.hasClass('mu-kids-single-state') ? 1 : 2;
242
+ $muKidsStatesContainer.width($muKidsStatesContainer.height() / ratio * 1.25 - fullMargin);
243
+ } else {
244
+ $muKidsStatesContainer.width(0);
245
+ $muKidsBlocks.width('100%');
246
+ }
247
+ }
248
+
249
+ function floatFromPx(value) {
250
+ return parseFloat(value.substring(0, value.length - 2));
251
+ }
252
+
253
+ if (mumuki.isPrimaryExercise()) {
254
+ mumuki.kids = new MumukiPrimary();
255
+ }
256
+
257
+ });