@micromag/screen-quiz 0.4.70 → 0.4.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.d.ts +6 -3
  2. package/es/index.js +1905 -1328
  3. package/package.json +21 -20
package/es/index.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
2
+ import { c } from 'react/compiler-runtime';
5
3
  import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
6
4
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7
5
  import classNames from 'classnames';
@@ -9,7 +7,7 @@ import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
9
7
  import { ScreenElement, Transitions, Button } from '@micromag/core/components';
10
8
  import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
11
9
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
12
- import { isTextFilled, isImageFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
10
+ import { isTextFilled, isImageFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
13
11
  import { useQuizCreate } from '@micromag/data';
14
12
  import Background from '@micromag/element-background';
15
13
  import Container from '@micromag/element-container';
@@ -20,7 +18,6 @@ import Heading from '@micromag/element-heading';
20
18
  import Layout, { Spacer } from '@micromag/element-layout';
21
19
  import Text from '@micromag/element-text';
22
20
  import Visual from '@micromag/element-visual';
23
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
24
21
  import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
25
22
  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
26
23
  import Button$1, { RichButton } from '@micromag/element-button';
@@ -31,88 +28,59 @@ import isArray from 'lodash/isArray';
31
28
 
32
29
  var styles$4 = {"container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","button":"micromag-screen-quiz-answers-button","withIcon":"micromag-screen-quiz-answers-withIcon","withSquareItems":"micromag-screen-quiz-answers-withSquareItems","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
33
30
 
34
- function Answers(_ref) {
35
- var items = _ref.items,
36
- _ref$keypadLayout = _ref.keypadLayout,
37
- keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
38
- _ref$answeredIndex = _ref.answeredIndex,
39
- answeredIndex = _ref$answeredIndex === void 0 ? null : _ref$answeredIndex,
40
- _ref$answersCollapseD = _ref.answersCollapseDelay,
41
- answersCollapseDelay = _ref$answersCollapseD === void 0 ? 1000 : _ref$answersCollapseD,
42
- _ref$buttonsStyle = _ref.buttonsStyle,
43
- buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
44
- _ref$buttonsLayout = _ref.buttonsLayout,
45
- buttonsLayout = _ref$buttonsLayout === void 0 ? null : _ref$buttonsLayout,
46
- _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
47
- inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
48
- _ref$buttonsTextStyle = _ref.buttonsTextStyle,
49
- buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
50
- _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
51
- inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
52
- _ref$goodAnswerColor = _ref.goodAnswerColor,
53
- goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
54
- _ref$badAnswerColor = _ref.badAnswerColor,
55
- badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
56
- _ref$showUserAnswer = _ref.showUserAnswer,
57
- showUserAnswer = _ref$showUserAnswer === void 0 ? false : _ref$showUserAnswer,
58
- _ref$withoutGoodAnswe = _ref.withoutGoodAnswer,
59
- withoutGoodAnswer = _ref$withoutGoodAnswe === void 0 ? false : _ref$withoutGoodAnswe,
60
- _ref$withoutIcon = _ref.withoutIcon,
61
- withoutIcon = _ref$withoutIcon === void 0 ? false : _ref$withoutIcon,
62
- _ref$focusable = _ref.focusable,
63
- focusable = _ref$focusable === void 0 ? false : _ref$focusable,
64
- _ref$animated = _ref.animated,
65
- collapseAnimated = _ref$animated === void 0 ? false : _ref$animated,
66
- _ref$collapsed = _ref.collapsed,
67
- initialCollapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
68
- _ref$onClick = _ref.onClick,
69
- onClick = _ref$onClick === void 0 ? null : _ref$onClick,
70
- _ref$onCollapse = _ref.onCollapse,
71
- onCollapse = _ref$onCollapse === void 0 ? null : _ref$onCollapse,
72
- _ref$onCollapsed = _ref.onCollapsed,
73
- onCollapsed = _ref$onCollapsed === void 0 ? null : _ref$onCollapsed,
74
- _ref$onTransitionEnd = _ref.onTransitionEnd,
75
- onTransitionEnd = _ref$onTransitionEnd === void 0 ? null : _ref$onTransitionEnd,
76
- _ref$withoutCollapse = _ref.withoutCollapse,
77
- withoutCollapse = _ref$withoutCollapse === void 0 ? false : _ref$withoutCollapse,
78
- _ref$className = _ref.className,
79
- className = _ref$className === void 0 ? null : _ref$className;
80
- var _useScreenRenderConte = useScreenRenderContext(),
81
- isView = _useScreenRenderConte.isView,
82
- isPreview = _useScreenRenderConte.isPreview,
83
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
84
- isEdit = _useScreenRenderConte.isEdit;
85
- var answered = answeredIndex !== null;
86
- var _ref2 = answeredIndex !== null ? items[answeredIndex] : {},
87
- _ref2$good = _ref2.good,
88
- hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
89
- var _useState = useState(true),
90
- _useState2 = _slicedToArray(_useState, 1),
91
- visible = _useState2[0];
92
- var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, answer) {
93
- var _ref3 = answer || {},
94
- _ref3$good = _ref3.good,
95
- good = _ref3$good === void 0 ? false : _ref3$good;
31
+ /* eslint-disable react/no-array-index-key */
32
+
33
+ function Answers({
34
+ items,
35
+ keypadLayout = null,
36
+ answeredIndex = null,
37
+ answersCollapseDelay = 1000,
38
+ buttonsStyle = null,
39
+ buttonsLayout = null,
40
+ inactiveButtonsStyle = null,
41
+ buttonsTextStyle = null,
42
+ inactiveButtonsTextStyle = null,
43
+ goodAnswerColor = null,
44
+ badAnswerColor = null,
45
+ showUserAnswer = false,
46
+ withoutGoodAnswer = false,
47
+ withoutIcon = false,
48
+ focusable = false,
49
+ animated: collapseAnimated = false,
50
+ collapsed: initialCollapsed = false,
51
+ onClick = null,
52
+ onCollapse = null,
53
+ onCollapsed = null,
54
+ onTransitionEnd = null,
55
+ withoutCollapse = false,
56
+ className = null
57
+ }) {
58
+ const {
59
+ isView,
60
+ isPreview,
61
+ isPlaceholder,
62
+ isEdit
63
+ } = useScreenRenderContext();
64
+ const answered = answeredIndex !== null;
65
+ const {
66
+ good: hasAnsweredRight = false
67
+ } = answeredIndex !== null ? items[answeredIndex] : {};
68
+ const [visible] = useState(true);
69
+ const hasRightAnswer = items !== null && !isPlaceholder ? items.reduce((hasGood, answer) => {
70
+ const {
71
+ good = false
72
+ } = answer || {};
96
73
  return hasGood || good;
97
74
  }, false) : false;
98
- var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
99
- var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null && !withoutCollapse;
100
- var _useState3 = useState(answeredIndex !== null),
101
- _useState4 = _slicedToArray(_useState3, 2),
102
- answersCollapsed = _useState4[0],
103
- setAnswersCollapsed = _useState4[1];
104
- var _useState5 = useState(initialCollapsed || answeredIndex !== null),
105
- _useState6 = _slicedToArray(_useState5, 2),
106
- answersDidCollapse = _useState6[0];
107
- _useState6[1];
108
- var _useState7 = useState(initialCollapsed || answeredIndex !== null),
109
- _useState8 = _slicedToArray(_useState7, 2),
110
- answersFinalCollapse = _useState8[0],
111
- setAnswersFinalCollapse = _useState8[1];
112
- useEffect(function () {
113
- var timeout = null;
75
+ const finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
76
+ const shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null && !withoutCollapse;
77
+ const [answersCollapsed, setAnswersCollapsed] = useState(answeredIndex !== null);
78
+ const [answersDidCollapse, setAnswersDidCollapse] = useState(initialCollapsed || answeredIndex !== null);
79
+ const [answersFinalCollapse, setAnswersFinalCollapse] = useState(initialCollapsed || answeredIndex !== null);
80
+ useEffect(() => {
81
+ let timeout = null;
114
82
  if (answeredIndex !== null && shouldCollapse) {
115
- timeout = setTimeout(function () {
83
+ timeout = setTimeout(() => {
116
84
  // console.log('ok should collapse whatever');
117
85
  setAnswersCollapsed(true);
118
86
  if (onCollapse !== null) {
@@ -120,7 +88,7 @@ function Answers(_ref) {
120
88
  }
121
89
  }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
122
90
  } else if (answeredIndex !== null && !shouldCollapse) {
123
- timeout = setTimeout(function () {
91
+ timeout = setTimeout(() => {
124
92
  // console.log('ok no collapse');
125
93
  if (onCollapse !== null) {
126
94
  onCollapse();
@@ -135,29 +103,29 @@ function Answers(_ref) {
135
103
  } else if (answeredIndex === null && shouldCollapse) {
136
104
  setAnswersCollapsed(false);
137
105
  }
138
- return function () {
106
+ return () => {
139
107
  if (timeout !== null) {
140
108
  clearTimeout(timeout);
141
109
  }
142
110
  };
143
111
  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, onCollapsed, onTransitionEnd, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer, shouldCollapse]);
144
- useEffect(function () {
145
- var timeout = null;
146
- var endTimeout = null;
112
+ useEffect(() => {
113
+ let timeout_0 = null;
114
+ let endTimeout = null;
147
115
  if (answersCollapsed) {
148
- timeout = setTimeout(function () {
116
+ timeout_0 = setTimeout(() => {
149
117
  setAnswersFinalCollapse(true);
150
118
  }, 300);
151
- endTimeout = setTimeout(function () {
119
+ endTimeout = setTimeout(() => {
152
120
  // Failsafe cause collapse transition is not always active
153
121
  if (onTransitionEnd !== null) {
154
122
  onTransitionEnd();
155
123
  }
156
124
  }, 500);
157
125
  }
158
- return function () {
159
- if (timeout !== null) {
160
- clearTimeout(timeout);
126
+ return () => {
127
+ if (timeout_0 !== null) {
128
+ clearTimeout(timeout_0);
161
129
  }
162
130
  if (endTimeout !== null) {
163
131
  clearTimeout(endTimeout);
@@ -183,15 +151,15 @@ function Answers(_ref) {
183
151
  // onTransitionEnd,
184
152
  // ]);
185
153
 
186
- var itemsRefs = useRef([]);
187
- var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
188
- var heights = useMemo(function () {
154
+ const itemsRefs = useRef([]);
155
+ const listOfItems = isPlaceholder || isEdit && items.length === 0 ? [...new Array(2)] : items;
156
+ const heights = useMemo(() => {
189
157
  if (collapseAnimated) {
190
- var allHeights = listOfItems.reduce(function (acc, it, i) {
158
+ const allHeights = listOfItems.reduce((acc, it, i) => {
191
159
  if (itemsRefs.current[i] && collapseAnimated) {
192
- var _ref4 = itemsRefs.current[i].getBoundingClientRect() || {},
193
- _ref4$height = _ref4.height,
194
- height = _ref4$height === void 0 ? 0 : _ref4$height;
160
+ const {
161
+ height = 0
162
+ } = itemsRefs.current[i].getBoundingClientRect() || {};
195
163
  acc.push(height);
196
164
  }
197
165
  return acc;
@@ -200,31 +168,32 @@ function Answers(_ref) {
200
168
  }
201
169
  return [];
202
170
  }, [collapseAnimated, answeredIndex, shouldCollapse, collapseAnimated, listOfItems]);
203
- var showAnimation = isView || isEdit;
204
- var filteredListOfItems = listOfItems.map(function (answer, answerI) {
205
- var height = heights[answerI] ? heights[answerI] : 0;
206
- var userAnswer = answerI === answeredIndex;
207
- var _ref5 = answer || {},
208
- _ref5$good = _ref5.good,
209
- rightAnswer = _ref5$good === void 0 ? false : _ref5$good;
210
- var hidden = false;
171
+ const showAnimation = isView || isEdit;
172
+ const filteredListOfItems = listOfItems.map((answer_0, answerI) => {
173
+ const height_0 = heights[answerI] ? heights[answerI] : 0;
174
+ const userAnswer = answerI === answeredIndex;
175
+ const {
176
+ good: rightAnswer = false
177
+ } = answer_0 || {};
178
+ let hidden = false;
211
179
  if (answeredIndex !== null && showAnimation && answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
212
180
  hidden = true;
213
181
  }
214
182
  if (answeredIndex !== null && showAnimation && answersCollapsed && !rightAnswer) {
215
183
  hidden = true;
216
184
  }
217
- var _ref6 = answer || {},
218
- _ref6$label = _ref6.label,
219
- label = _ref6$label === void 0 ? null : _ref6$label;
220
- var key = "key-".concat(answerI, "-").concat((label === null || label === void 0 ? void 0 : label.body) || null);
221
- return _objectSpread(_objectSpread({}, answer), {}, {
222
- hidden: hidden,
223
- userAnswer: userAnswer,
185
+ const {
186
+ label = null
187
+ } = answer_0 || {};
188
+ const key = `key-${answerI}-${label?.body || null}`;
189
+ return {
190
+ ...answer_0,
191
+ hidden,
192
+ userAnswer,
224
193
  index: answerI,
225
- maxHeight: height,
226
- key: key
227
- });
194
+ maxHeight: height_0,
195
+ key
196
+ };
228
197
  });
229
198
 
230
199
  // const transitions = useTransition(filteredListOfItems, {
@@ -262,128 +231,135 @@ function Answers(_ref) {
262
231
  // }
263
232
  // }, [transitioned, onTransitionEnd]);
264
233
 
265
- var hasGoodOrBadAnswerInList = useMemo(function () {
234
+ const hasGoodOrBadAnswerInList = useMemo(() => {
266
235
  if (filteredListOfItems !== null) {
267
- return filteredListOfItems.reduce(function (hasGoodOrBad, answer) {
268
- return hasGoodOrBad || answer.good === true && !withoutGoodAnswer || answer.good === false && !withoutIcon;
269
- }, false);
236
+ return filteredListOfItems.reduce((hasGoodOrBad, answer_1) => hasGoodOrBad || answer_1.good === true && !withoutGoodAnswer || answer_1.good === false && !withoutIcon, false);
270
237
  }
271
238
  return false;
272
239
  }, [filteredListOfItems, withoutGoodAnswer, withoutIcon]);
273
- var hasOpacity = useMemo(function () {
274
- var _ref7 = inactiveButtonsStyle || {},
275
- _ref7$backgroundColor = _ref7.backgroundColor,
276
- backgroundColor = _ref7$backgroundColor === void 0 ? null : _ref7$backgroundColor;
240
+ const hasOpacity = useMemo(() => {
241
+ const {
242
+ backgroundColor = null
243
+ } = inactiveButtonsStyle || {};
277
244
  return backgroundColor === null;
278
245
  }, [inactiveButtonsStyle]);
279
- var itemsWithStyle = filteredListOfItems.map(function (answer) {
280
- var _ref8 = answer || {},
281
- hidden = _ref8.hidden,
282
- maxHeight = _ref8.maxHeight;
283
- var style = {
284
- opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
246
+ const itemsWithStyle = filteredListOfItems.map(answer_2 => {
247
+ const {
248
+ hidden: hidden_0,
249
+ maxHeight
250
+ } = answer_2 || {};
251
+ const style = {
252
+ opacity: hidden_0 && showAnimation && !withoutGoodAnswer ? 0 : 1,
285
253
  // Animate this, not height
286
254
  maxHeight:
287
255
  // eslint-disable-next-line no-nested-ternary
288
- hidden && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
289
- height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
256
+ hidden_0 && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
257
+ height: hidden_0 && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
258
+ };
259
+ return {
260
+ ...answer_2,
261
+ style
290
262
  };
291
- return _objectSpread(_objectSpread({}, answer), {}, {
292
- style: style
293
- });
294
263
  });
295
264
 
296
265
  // const keypadItems = transitions((style, answer, t, answerI) => {
297
- var keypadItems = (itemsWithStyle || []).map(function (answer, answerI) {
298
- var userAnswer = answerI === answeredIndex;
299
- var _ref9 = answer || {},
300
- _ref9$good = _ref9.good,
301
- rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
302
- _ref9$label = _ref9.label,
303
- label = _ref9$label === void 0 ? null : _ref9$label,
304
- _ref9$visual = _ref9.visual,
305
- visual = _ref9$visual === void 0 ? null : _ref9$visual,
306
- _ref9$buttonLayout = _ref9.buttonLayout,
307
- buttonLayout = _ref9$buttonLayout === void 0 ? null : _ref9$buttonLayout,
308
- _ref9$buttonStyle = _ref9.buttonStyle,
309
- answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
310
- _ref9$textStyle = _ref9.textStyle,
311
- answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
312
- _ref9$style = _ref9.style,
313
- style = _ref9$style === void 0 ? null : _ref9$style;
314
- var _ref0 = label || {},
315
- _ref0$textStyle = _ref0.textStyle,
316
- textStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
317
- var hasText = isTextFilled(label);
318
- var hasVisual = isImageFilled(visual);
319
- var hasAnswer = hasText || hasVisual;
320
- var isUserAnswer = withoutGoodAnswer && userAnswer;
321
- var isOtherAnswer = withoutGoodAnswer && !userAnswer;
322
- var isInactive = isOtherAnswer && answeredIndex !== null;
323
- var inactiveButtonStyle = isInactive ? inactiveButtonsStyle : null;
324
- var inactiveButtonTextStyle = isInactive ? inactiveButtonsTextStyle : null;
325
- var finalButtonStyle = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), inactiveButtonStyle), answerButtonStyle);
326
- var finalTextStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, Object.keys(buttonsTextStyle || {}).reduce(function (acc, key) {
327
- var value = buttonsTextStyle[key];
328
- if (value !== null && value !== '') {
329
- acc[key] = value;
330
- }
331
- return acc;
332
- }, {})), Object.keys(textStyle || {}).reduce(function (acc, key) {
333
- var value = textStyle[key];
334
- if (value !== null && value !== '') {
335
- acc[key] = value;
336
- }
337
- return acc;
338
- }, {})), inactiveButtonTextStyle), answerButtonTextStyle);
266
+ const keypadItems = (itemsWithStyle || []).map((answer_3, answerI_0) => {
267
+ const userAnswer_0 = answerI_0 === answeredIndex;
268
+ const {
269
+ good: rightAnswer_0 = null,
270
+ label: label_0 = null,
271
+ visual = null,
272
+ buttonLayout = null,
273
+ buttonStyle: answerButtonStyle = null,
274
+ textStyle: answerButtonTextStyle = null,
275
+ style: style_0 = null
276
+ } = answer_3 || {};
277
+ const {
278
+ textStyle = null
279
+ } = label_0 || {};
280
+ const hasText = isTextFilled(label_0);
281
+ const hasVisual = isImageFilled(visual);
282
+ const hasAnswer = hasText || hasVisual;
283
+ const isUserAnswer = withoutGoodAnswer && userAnswer_0;
284
+ const isOtherAnswer = withoutGoodAnswer && !userAnswer_0;
285
+ const isInactive = isOtherAnswer && answeredIndex !== null;
286
+ const inactiveButtonStyle = isInactive ? inactiveButtonsStyle : null;
287
+ const inactiveButtonTextStyle = isInactive ? inactiveButtonsTextStyle : null;
288
+ const finalButtonStyle = {
289
+ ...buttonsStyle,
290
+ ...inactiveButtonStyle,
291
+ ...answerButtonStyle
292
+ };
293
+ const finalTextStyle = {
294
+ ...Object.keys(buttonsTextStyle || {}).reduce((acc_0, key_0) => {
295
+ const value = buttonsTextStyle[key_0];
296
+ if (value !== null && value !== '') {
297
+ acc_0[key_0] = value;
298
+ }
299
+ return acc_0;
300
+ }, {}),
301
+ ...Object.keys(textStyle || {}).reduce((acc_1, key_1) => {
302
+ const value_0 = textStyle[key_1];
303
+ if (value_0 !== null && value_0 !== '') {
304
+ acc_1[key_1] = value_0;
305
+ }
306
+ return acc_1;
307
+ }, {}),
308
+ ...inactiveButtonTextStyle,
309
+ ...answerButtonTextStyle
310
+ };
339
311
  return /*#__PURE__*/jsx("div", {
340
- className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, isUserAnswer), styles$4.otherAnswer, isOtherAnswer), styles$4.withoutOpacity, !hasOpacity)])
312
+ className: classNames([styles$4.item, {
313
+ [styles$4.rightAnswer]: !withoutGoodAnswer && rightAnswer_0 === true,
314
+ [styles$4.userAnswer]: isUserAnswer,
315
+ [styles$4.otherAnswer]: isOtherAnswer,
316
+ [styles$4.withoutOpacity]: !hasOpacity
317
+ }])
341
318
  // onTransitionEnd={onAnswerTransitionEnd}
342
319
  ,
343
- style: _objectSpread({}, style),
320
+ style: {
321
+ ...style_0
322
+ },
344
323
  children: /*#__PURE__*/jsx("div", {
345
324
  className: styles$4.itemContent,
346
- ref: function ref(el) {
347
- itemsRefs.current[answerI] = el;
325
+ ref: el => {
326
+ itemsRefs.current[answerI_0] = el;
348
327
  },
349
328
  children: /*#__PURE__*/jsx(ScreenElement, {
350
329
  placeholder: "quizAnswer",
351
330
  placeholderProps: {
352
- good: answerI === 0
331
+ good: answerI_0 === 0
353
332
  },
354
333
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
355
334
  id: "+Ok+7S",
356
- defaultMessage: [{
357
- "type": 0,
358
- "value": "Answer"
359
- }]
335
+ defaultMessage: "Answer"
360
336
  }),
361
337
  emptyClassName: styles$4.emptyAnswer,
362
338
  isEmpty: !hasAnswer,
363
339
  children: hasAnswer ? /*#__PURE__*/jsxs(RichButton, {
364
340
  className: styles$4.button,
365
- onPointerUp: function onPointerUp(e) {
341
+ onPointerUp: e => {
366
342
  if (e.pointerType !== 'mouse' || e.button === 0) {
367
- onClick(answer, answerI);
343
+ onClick(answer_3, answerI_0);
368
344
  }
369
345
  },
370
346
  disabled: !visible || isPreview || answered,
371
347
  focusable: focusable,
372
348
  buttonStyle: finalButtonStyle,
373
349
  textStyle: finalTextStyle,
374
- label: label,
350
+ label: label_0,
375
351
  visual: visual,
376
352
  visualClassName: styles$4.optionVisual,
377
353
  imageClassName: styles$4.optionImage,
378
354
  layout: buttonLayout || buttonsLayout || (hasVisual ? 'label-right' : null),
379
- children: [answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/jsx("span", {
355
+ children: [answered && !withoutIcon && rightAnswer_0 === true ? /*#__PURE__*/jsx("span", {
380
356
  className: styles$4.resultIcon,
381
357
  style: getStyleFromColor(goodAnswerColor, 'backgroundColor'),
382
358
  children: /*#__PURE__*/jsx(FontAwesomeIcon, {
383
359
  className: styles$4.faIcon,
384
360
  icon: faCheck
385
361
  })
386
- }) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/jsx("span", {
362
+ }) : null, !withoutIcon && answered && rightAnswer_0 === false ? /*#__PURE__*/jsx("span", {
387
363
  className: styles$4.resultIcon,
388
364
  style: getStyleFromColor(badAnswerColor, 'backgroundColor'),
389
365
  children: /*#__PURE__*/jsx(FontAwesomeIcon, {
@@ -394,19 +370,21 @@ function Answers(_ref) {
394
370
  }) : null
395
371
  })
396
372
  })
397
- }, "answer-".concat(answerI));
373
+ }, `answer-${answerI_0}`);
398
374
  });
399
- var _ref10 = keypadLayout || {},
400
- _ref10$columnAlign = _ref10.columnAlign,
401
- align = _ref10$columnAlign === void 0 ? null : _ref10$columnAlign,
402
- _ref10$columns = _ref10.columns,
403
- columns = _ref10$columns === void 0 ? 1 : _ref10$columns,
404
- _ref10$spacing = _ref10.spacing,
405
- spacing = _ref10$spacing === void 0 ? null : _ref10$spacing,
406
- _ref10$withSquareItem = _ref10.withSquareItems,
407
- withSquareItems = _ref10$withSquareItem === void 0 ? false : _ref10$withSquareItem;
375
+ const {
376
+ columnAlign: align = null,
377
+ columns = 1,
378
+ spacing = null,
379
+ withSquareItems = false
380
+ } = keypadLayout || {};
408
381
  return /*#__PURE__*/jsx("div", {
409
- className: classNames([styles$4.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon && hasGoodOrBadAnswerInList), styles$4.withSquareItems, withSquareItems === true), styles$4.isPlaceholder, isPlaceholder)]),
382
+ className: classNames([styles$4.container, className, {
383
+ [styles$4.answered]: answered,
384
+ [styles$4.withIcon]: !withoutIcon && hasGoodOrBadAnswerInList,
385
+ [styles$4.withSquareItems]: withSquareItems === true,
386
+ [styles$4.isPlaceholder]: isPlaceholder
387
+ }]),
410
388
  children: filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/jsx(Keypad, {
411
389
  className: styles$4.items,
412
390
  items: keypadItems,
@@ -419,113 +397,204 @@ function Answers(_ref) {
419
397
 
420
398
  var styles$3 = {"container":"micromag-screen-quiz-question-container","question":"micromag-screen-quiz-question-question","index":"micromag-screen-quiz-question-index","resultContent":"micromag-screen-quiz-question-resultContent","result":"micromag-screen-quiz-question-result","emptyQuestion":"micromag-screen-quiz-question-emptyQuestion","emptyResult":"micromag-screen-quiz-question-emptyResult","resultVisible":"micromag-screen-quiz-question-resultVisible","resultHidden":"micromag-screen-quiz-question-resultHidden","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
421
399
 
422
- function Question(_ref) {
423
- var _ref$question = _ref.question,
424
- question = _ref$question === void 0 ? null : _ref$question,
425
- _ref$answers = _ref.answers,
426
- answers = _ref$answers === void 0 ? null : _ref$answers,
427
- _ref$keypadLayout = _ref.keypadLayout,
428
- keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
429
- _ref$result = _ref.result,
430
- result = _ref$result === void 0 ? null : _ref$result,
431
- _ref$resultImage = _ref.resultImage,
432
- resultImage = _ref$resultImage === void 0 ? null : _ref$resultImage,
433
- _ref$index = _ref.index,
434
- index = _ref$index === void 0 ? null : _ref$index,
435
- _ref$totalCount = _ref.totalCount,
436
- totalCount = _ref$totalCount === void 0 ? null : _ref$totalCount,
437
- _ref$answeredIndex = _ref.answeredIndex,
438
- answeredIndex = _ref$answeredIndex === void 0 ? null : _ref$answeredIndex,
439
- _ref$buttonsLayout = _ref.buttonsLayout,
440
- buttonsLayout = _ref$buttonsLayout === void 0 ? null : _ref$buttonsLayout,
441
- _ref$buttonsStyle = _ref.buttonsStyle,
442
- buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
443
- _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
444
- inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
445
- _ref$buttonsTextStyle = _ref.buttonsTextStyle,
446
- buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
447
- _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
448
- inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
449
- _ref$questionsHeading = _ref.questionsHeadingStyle,
450
- questionsHeadingStyle = _ref$questionsHeading === void 0 ? null : _ref$questionsHeading,
451
- _ref$feedbackTextStyl = _ref.feedbackTextStyle,
452
- feedbackTextStyle = _ref$feedbackTextStyl === void 0 ? null : _ref$feedbackTextStyl,
453
- _ref$numbersTextStyle = _ref.numbersTextStyle,
454
- numbersTextStyle = _ref$numbersTextStyle === void 0 ? null : _ref$numbersTextStyle,
455
- _ref$goodAnswerColor = _ref.goodAnswerColor,
456
- goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
457
- _ref$badAnswerColor = _ref.badAnswerColor,
458
- badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
459
- _ref$focusable = _ref.focusable,
460
- focusable = _ref$focusable === void 0 ? false : _ref$focusable,
461
- _ref$animated = _ref.animated,
462
- animated = _ref$animated === void 0 ? false : _ref$animated,
463
- _ref$showInstantAnswe = _ref.showInstantAnswer,
464
- showInstantAnswer = _ref$showInstantAnswe === void 0 ? false : _ref$showInstantAnswe,
465
- _ref$withResult = _ref.withResult,
466
- withResult = _ref$withResult === void 0 ? false : _ref$withResult,
467
- _ref$withoutGoodAnswe = _ref.withoutGoodAnswer,
468
- withoutGoodAnswer = _ref$withoutGoodAnswe === void 0 ? false : _ref$withoutGoodAnswe,
469
- _ref$withoutTrueFalse = _ref.withoutTrueFalse,
470
- withoutTrueFalse = _ref$withoutTrueFalse === void 0 ? false : _ref$withoutTrueFalse,
471
- _ref$withoutIndex = _ref.withoutIndex,
472
- withoutIndex = _ref$withoutIndex === void 0 ? false : _ref$withoutIndex,
473
- _ref$layout = _ref.layout,
474
- layout = _ref$layout === void 0 ? null : _ref$layout,
475
- _ref$transitions = _ref.transitions,
476
- transitions = _ref$transitions === void 0 ? null : _ref$transitions,
477
- _ref$transitionPlayin = _ref.transitionPlaying,
478
- transitionPlaying = _ref$transitionPlayin === void 0 ? false : _ref$transitionPlayin,
479
- _ref$transitionStagge = _ref.transitionStagger,
480
- transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
481
- _ref$transitionDisabl = _ref.transitionDisabled,
482
- transitionDisabled = _ref$transitionDisabl === void 0 ? false : _ref$transitionDisabl,
483
- _ref$onAnswerClick = _ref.onAnswerClick,
484
- onAnswerClick = _ref$onAnswerClick === void 0 ? null : _ref$onAnswerClick,
485
- _ref$onAnswerTransiti = _ref.onAnswerTransitionEnd,
486
- onAnswerTransitionEnd = _ref$onAnswerTransiti === void 0 ? null : _ref$onAnswerTransiti,
487
- _ref$withoutCollapse = _ref.withoutCollapse,
488
- withoutCollapse = _ref$withoutCollapse === void 0 ? false : _ref$withoutCollapse,
489
- _ref$className = _ref.className,
490
- className = _ref$className === void 0 ? null : _ref$className,
491
- _ref$style = _ref.style,
492
- style = _ref$style === void 0 ? null : _ref$style;
493
- var _useScreenRenderConte = useScreenRenderContext(),
494
- isPlaceholder = _useScreenRenderConte.isPlaceholder;
495
- var isSplitted = layout === 'split';
496
- var verticalAlign = isSplitted ? null : layout;
497
- var hasQuestion = isTextFilled(question);
498
- var _ref2 = question || {},
499
- _ref2$textStyle = _ref2.textStyle,
500
- questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
501
- var _useState = useState(showInstantAnswer),
502
- _useState2 = _slicedToArray(_useState, 2),
503
- resultVisible = _useState2[0],
504
- setResultVisible = _useState2[1];
505
- var answered = answeredIndex !== null;
506
- var answer = answeredIndex !== null && answers[answeredIndex] ? answers[answeredIndex] : null;
507
- var _ref3 = answer || {},
508
- _ref3$result = _ref3.result,
509
- answerResult = _ref3$result === void 0 ? null : _ref3$result,
510
- _ref3$answerImage = _ref3.answerImage,
511
- answerImage = _ref3$answerImage === void 0 ? null : _ref3$answerImage;
512
- var hasResult = isTextFilled(answerResult) || isTextFilled(result);
513
- var hasResultVisual = isImageFilled(answerImage) || isImageFilled(resultImage);
514
- var defaultResult = isTextFilled(result) ? result : null;
515
- var customResult = isTextFilled(answerResult) ? answerResult : null;
516
- var finalResult = customResult || defaultResult;
517
- var _ref4 = finalResult || {},
518
- _ref4$textStyle = _ref4.textStyle,
519
- resultTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
520
- var onAnswersCollapse = useCallback(function () {
521
- setResultVisible(true);
522
- }, [setResultVisible]);
523
- var hasIndex = index !== null && totalCount !== null;
524
- return /*#__PURE__*/jsx(Layout, {
525
- className: classNames([styles$3.container, className, _defineProperty(_defineProperty(_defineProperty({}, styles$3.isPlaceholder, isPlaceholder), styles$3.resultVisible, resultVisible), styles$3.resultHidden, !hasResult)]),
526
- verticalAlign: verticalAlign,
527
- style: style,
528
- children: [!withoutIndex && hasIndex ? /*#__PURE__*/jsx(ScreenElement, {
400
+ function Question(t0) {
401
+ const $ = c(97);
402
+ const {
403
+ question: t1,
404
+ answers: t2,
405
+ keypadLayout: t3,
406
+ result: t4,
407
+ resultImage: t5,
408
+ index: t6,
409
+ totalCount: t7,
410
+ answeredIndex: t8,
411
+ buttonsLayout: t9,
412
+ buttonsStyle: t10,
413
+ inactiveButtonsStyle: t11,
414
+ buttonsTextStyle: t12,
415
+ inactiveButtonsTextStyle: t13,
416
+ questionsHeadingStyle: t14,
417
+ feedbackTextStyle: t15,
418
+ numbersTextStyle: t16,
419
+ goodAnswerColor: t17,
420
+ badAnswerColor: t18,
421
+ focusable: t19,
422
+ animated: t20,
423
+ showInstantAnswer: t21,
424
+ withResult: t22,
425
+ withoutGoodAnswer: t23,
426
+ withoutTrueFalse: t24,
427
+ withoutIndex: t25,
428
+ layout: t26,
429
+ transitions: t27,
430
+ transitionPlaying: t28,
431
+ transitionStagger: t29,
432
+ transitionDisabled: t30,
433
+ onAnswerClick: t31,
434
+ onAnswerTransitionEnd: t32,
435
+ withoutCollapse: t33,
436
+ className: t34,
437
+ style: t35
438
+ } = t0;
439
+ const question = t1 === undefined ? null : t1;
440
+ const answers = t2 === undefined ? null : t2;
441
+ const keypadLayout = t3 === undefined ? null : t3;
442
+ const result = t4 === undefined ? null : t4;
443
+ const resultImage = t5 === undefined ? null : t5;
444
+ const index = t6 === undefined ? null : t6;
445
+ const totalCount = t7 === undefined ? null : t7;
446
+ const answeredIndex = t8 === undefined ? null : t8;
447
+ const buttonsLayout = t9 === undefined ? null : t9;
448
+ const buttonsStyle = t10 === undefined ? null : t10;
449
+ const inactiveButtonsStyle = t11 === undefined ? null : t11;
450
+ const buttonsTextStyle = t12 === undefined ? null : t12;
451
+ const inactiveButtonsTextStyle = t13 === undefined ? null : t13;
452
+ const questionsHeadingStyle = t14 === undefined ? null : t14;
453
+ const feedbackTextStyle = t15 === undefined ? null : t15;
454
+ const numbersTextStyle = t16 === undefined ? null : t16;
455
+ const goodAnswerColor = t17 === undefined ? null : t17;
456
+ const badAnswerColor = t18 === undefined ? null : t18;
457
+ const focusable = t19 === undefined ? false : t19;
458
+ const animated = t20 === undefined ? false : t20;
459
+ const showInstantAnswer = t21 === undefined ? false : t21;
460
+ const withResult = t22 === undefined ? false : t22;
461
+ const withoutGoodAnswer = t23 === undefined ? false : t23;
462
+ const withoutTrueFalse = t24 === undefined ? false : t24;
463
+ const withoutIndex = t25 === undefined ? false : t25;
464
+ const layout = t26 === undefined ? null : t26;
465
+ const transitions = t27 === undefined ? null : t27;
466
+ const transitionPlaying = t28 === undefined ? false : t28;
467
+ const transitionStagger = t29 === undefined ? 100 : t29;
468
+ const transitionDisabled = t30 === undefined ? false : t30;
469
+ const onAnswerClick = t31 === undefined ? null : t31;
470
+ const onAnswerTransitionEnd = t32 === undefined ? null : t32;
471
+ const withoutCollapse = t33 === undefined ? false : t33;
472
+ const className = t34 === undefined ? null : t34;
473
+ const style = t35 === undefined ? null : t35;
474
+ const {
475
+ isPlaceholder
476
+ } = useScreenRenderContext();
477
+ const isSplitted = layout === "split";
478
+ const verticalAlign = isSplitted ? null : layout;
479
+ let t36;
480
+ if ($[0] !== question) {
481
+ t36 = isTextFilled(question);
482
+ $[0] = question;
483
+ $[1] = t36;
484
+ } else {
485
+ t36 = $[1];
486
+ }
487
+ const hasQuestion = t36;
488
+ let t37;
489
+ if ($[2] !== question) {
490
+ t37 = question || {};
491
+ $[2] = question;
492
+ $[3] = t37;
493
+ } else {
494
+ t37 = $[3];
495
+ }
496
+ const {
497
+ textStyle: t38
498
+ } = t37;
499
+ const questionTextStyle = t38 === undefined ? null : t38;
500
+ const [resultVisible, setResultVisible] = useState(showInstantAnswer);
501
+ const answered = answeredIndex !== null;
502
+ const answer = answeredIndex !== null && answers[answeredIndex] ? answers[answeredIndex] : null;
503
+ let t39;
504
+ if ($[4] !== answer) {
505
+ t39 = answer || {};
506
+ $[4] = answer;
507
+ $[5] = t39;
508
+ } else {
509
+ t39 = $[5];
510
+ }
511
+ const {
512
+ result: t40,
513
+ answerImage: t41
514
+ } = t39;
515
+ const answerResult = t40 === undefined ? null : t40;
516
+ const answerImage = t41 === undefined ? null : t41;
517
+ let t42;
518
+ if ($[6] !== answerResult || $[7] !== result) {
519
+ t42 = isTextFilled(answerResult) || isTextFilled(result);
520
+ $[6] = answerResult;
521
+ $[7] = result;
522
+ $[8] = t42;
523
+ } else {
524
+ t42 = $[8];
525
+ }
526
+ const hasResult = t42;
527
+ let t43;
528
+ if ($[9] !== answerImage || $[10] !== resultImage) {
529
+ t43 = isImageFilled(answerImage) || isImageFilled(resultImage);
530
+ $[9] = answerImage;
531
+ $[10] = resultImage;
532
+ $[11] = t43;
533
+ } else {
534
+ t43 = $[11];
535
+ }
536
+ const hasResultVisual = t43;
537
+ let t44;
538
+ if ($[12] !== result) {
539
+ t44 = isTextFilled(result) ? result : null;
540
+ $[12] = result;
541
+ $[13] = t44;
542
+ } else {
543
+ t44 = $[13];
544
+ }
545
+ const defaultResult = t44;
546
+ let t45;
547
+ if ($[14] !== answerResult) {
548
+ t45 = isTextFilled(answerResult) ? answerResult : null;
549
+ $[14] = answerResult;
550
+ $[15] = t45;
551
+ } else {
552
+ t45 = $[15];
553
+ }
554
+ const customResult = t45;
555
+ const finalResult = customResult || defaultResult;
556
+ let t46;
557
+ if ($[16] !== finalResult) {
558
+ t46 = finalResult || {};
559
+ $[16] = finalResult;
560
+ $[17] = t46;
561
+ } else {
562
+ t46 = $[17];
563
+ }
564
+ const {
565
+ textStyle: t47
566
+ } = t46;
567
+ const resultTextStyle = t47 === undefined ? null : t47;
568
+ let t48;
569
+ if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
570
+ t48 = () => {
571
+ setResultVisible(true);
572
+ };
573
+ $[18] = t48;
574
+ } else {
575
+ t48 = $[18];
576
+ }
577
+ const onAnswersCollapse = t48;
578
+ const hasIndex = index !== null && totalCount !== null;
579
+ const t49 = !hasResult;
580
+ let t50;
581
+ if ($[19] !== className || $[20] !== isPlaceholder || $[21] !== resultVisible || $[22] !== t49) {
582
+ t50 = classNames([styles$3.container, className, {
583
+ [styles$3.isPlaceholder]: isPlaceholder,
584
+ [styles$3.resultVisible]: resultVisible,
585
+ [styles$3.resultHidden]: t49
586
+ }]);
587
+ $[19] = className;
588
+ $[20] = isPlaceholder;
589
+ $[21] = resultVisible;
590
+ $[22] = t49;
591
+ $[23] = t50;
592
+ } else {
593
+ t50 = $[23];
594
+ }
595
+ let t51;
596
+ if ($[24] !== hasIndex || $[25] !== index || $[26] !== numbersTextStyle || $[27] !== totalCount || $[28] !== transitionDisabled || $[29] !== transitionPlaying || $[30] !== transitions || $[31] !== withoutIndex) {
597
+ t51 = !withoutIndex && hasIndex ? /*#__PURE__*/jsx(ScreenElement, {
529
598
  placeholder: /*#__PURE__*/jsx("div", {
530
599
  className: styles$3.index,
531
600
  children: "1 / 10"
@@ -536,32 +605,95 @@ function Question(_ref) {
536
605
  disabled: transitionDisabled,
537
606
  children: /*#__PURE__*/jsx(Text, {
538
607
  className: styles$3.index,
539
- body: "".concat(index + 1, " / ").concat(totalCount),
608
+ body: `${index + 1} / ${totalCount}`,
540
609
  textStyle: numbersTextStyle
541
610
  })
542
611
  }) : null
543
- }, "stats") : null, /*#__PURE__*/jsx(ScreenElement, {
612
+ }, "stats") : null;
613
+ $[24] = hasIndex;
614
+ $[25] = index;
615
+ $[26] = numbersTextStyle;
616
+ $[27] = totalCount;
617
+ $[28] = transitionDisabled;
618
+ $[29] = transitionPlaying;
619
+ $[30] = transitions;
620
+ $[31] = withoutIndex;
621
+ $[32] = t51;
622
+ } else {
623
+ t51 = $[32];
624
+ }
625
+ let t52;
626
+ if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
627
+ t52 = /*#__PURE__*/jsx(FormattedMessage, {
628
+ id: "FOmgqv",
629
+ defaultMessage: "Question"
630
+ });
631
+ $[33] = t52;
632
+ } else {
633
+ t52 = $[33];
634
+ }
635
+ const t53 = !hasQuestion;
636
+ let t54;
637
+ if ($[34] !== hasQuestion || $[35] !== question || $[36] !== questionTextStyle || $[37] !== questionsHeadingStyle || $[38] !== transitionDisabled || $[39] !== transitionPlaying || $[40] !== transitions) {
638
+ t54 = hasQuestion ? /*#__PURE__*/jsx(Transitions, {
639
+ transitions: transitions,
640
+ playing: transitionPlaying,
641
+ disabled: transitionDisabled,
642
+ children: /*#__PURE__*/jsx(Heading, {
643
+ ...question,
644
+ className: styles$3.question,
645
+ textStyle: {
646
+ ...questionsHeadingStyle,
647
+ ...questionTextStyle
648
+ }
649
+ })
650
+ }) : null;
651
+ $[34] = hasQuestion;
652
+ $[35] = question;
653
+ $[36] = questionTextStyle;
654
+ $[37] = questionsHeadingStyle;
655
+ $[38] = transitionDisabled;
656
+ $[39] = transitionPlaying;
657
+ $[40] = transitions;
658
+ $[41] = t54;
659
+ } else {
660
+ t54 = $[41];
661
+ }
662
+ let t55;
663
+ if ($[42] !== t53 || $[43] !== t54) {
664
+ t55 = /*#__PURE__*/jsx(ScreenElement, {
544
665
  placeholder: "title",
545
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
546
- id: "FOmgqv",
547
- defaultMessage: [{
548
- "type": 0,
549
- "value": "Question"
550
- }]
551
- }),
666
+ emptyLabel: t52,
552
667
  emptyClassName: styles$3.emptyQuestion,
553
- isEmpty: !hasQuestion,
554
- children: hasQuestion ? /*#__PURE__*/jsx(Transitions, {
555
- transitions: transitions,
556
- playing: transitionPlaying,
557
- disabled: transitionDisabled,
558
- children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, question), {}, {
559
- className: styles$3.question,
560
- textStyle: _objectSpread(_objectSpread({}, questionsHeadingStyle), questionTextStyle)
561
- }))
562
- }) : null
563
- }, "question"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(Answers, {
564
- items: answers || [],
668
+ isEmpty: t53,
669
+ children: t54
670
+ }, "question");
671
+ $[42] = t53;
672
+ $[43] = t54;
673
+ $[44] = t55;
674
+ } else {
675
+ t55 = $[44];
676
+ }
677
+ let t56;
678
+ if ($[45] !== isSplitted) {
679
+ t56 = isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null;
680
+ $[45] = isSplitted;
681
+ $[46] = t56;
682
+ } else {
683
+ t56 = $[46];
684
+ }
685
+ let t57;
686
+ if ($[47] !== answers) {
687
+ t57 = answers || [];
688
+ $[47] = answers;
689
+ $[48] = t57;
690
+ } else {
691
+ t57 = $[48];
692
+ }
693
+ let t58;
694
+ if ($[49] !== animated || $[50] !== answeredIndex || $[51] !== badAnswerColor || $[52] !== buttonsLayout || $[53] !== buttonsStyle || $[54] !== buttonsTextStyle || $[55] !== focusable || $[56] !== goodAnswerColor || $[57] !== inactiveButtonsStyle || $[58] !== inactiveButtonsTextStyle || $[59] !== keypadLayout || $[60] !== onAnswerClick || $[61] !== onAnswerTransitionEnd || $[62] !== t57 || $[63] !== transitionDisabled || $[64] !== transitionPlaying || $[65] !== transitionStagger || $[66] !== transitions || $[67] !== withoutCollapse || $[68] !== withoutGoodAnswer || $[69] !== withoutTrueFalse) {
695
+ t58 = /*#__PURE__*/jsx(Answers, {
696
+ items: t57,
565
697
  keypadLayout: keypadLayout,
566
698
  answeredIndex: answeredIndex,
567
699
  goodAnswerColor: goodAnswerColor,
@@ -584,17 +716,42 @@ function Question(_ref) {
584
716
  onCollapse: onAnswersCollapse,
585
717
  onTransitionEnd: onAnswerTransitionEnd,
586
718
  withoutCollapse: withoutCollapse
587
- }, "answers"), withResult ? /*#__PURE__*/jsx("div", {
719
+ }, "answers");
720
+ $[49] = animated;
721
+ $[50] = answeredIndex;
722
+ $[51] = badAnswerColor;
723
+ $[52] = buttonsLayout;
724
+ $[53] = buttonsStyle;
725
+ $[54] = buttonsTextStyle;
726
+ $[55] = focusable;
727
+ $[56] = goodAnswerColor;
728
+ $[57] = inactiveButtonsStyle;
729
+ $[58] = inactiveButtonsTextStyle;
730
+ $[59] = keypadLayout;
731
+ $[60] = onAnswerClick;
732
+ $[61] = onAnswerTransitionEnd;
733
+ $[62] = t57;
734
+ $[63] = transitionDisabled;
735
+ $[64] = transitionPlaying;
736
+ $[65] = transitionStagger;
737
+ $[66] = transitions;
738
+ $[67] = withoutCollapse;
739
+ $[68] = withoutGoodAnswer;
740
+ $[69] = withoutTrueFalse;
741
+ $[70] = t58;
742
+ } else {
743
+ t58 = $[70];
744
+ }
745
+ let t59;
746
+ if ($[71] !== answerImage || $[72] !== answered || $[73] !== answers || $[74] !== feedbackTextStyle || $[75] !== finalResult || $[76] !== hasResult || $[77] !== hasResultVisual || $[78] !== resultImage || $[79] !== resultTextStyle || $[80] !== transitionDisabled || $[81] !== transitionPlaying || $[82] !== transitionStagger || $[83] !== transitions || $[84] !== withResult) {
747
+ t59 = withResult ? /*#__PURE__*/jsx("div", {
588
748
  className: styles$3.result,
589
749
  children: /*#__PURE__*/jsx("div", {
590
750
  className: styles$3.resultContent,
591
751
  children: /*#__PURE__*/jsx(ScreenElement, {
592
752
  emptyLabel: answered ? /*#__PURE__*/jsx(FormattedMessage, {
593
753
  id: "li7ADr",
594
- defaultMessage: [{
595
- "type": 0,
596
- "value": "Result"
597
- }]
754
+ defaultMessage: "Result"
598
755
  }) : null,
599
756
  isEmpty: answered && !hasResult,
600
757
  emptyClassName: styles$3.emptyResult,
@@ -603,10 +760,14 @@ function Question(_ref) {
603
760
  playing: transitionPlaying,
604
761
  delay: (1 + answers.length) * transitionStagger,
605
762
  disabled: transitionDisabled,
606
- children: [hasResult ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, finalResult || {}), {}, {
763
+ children: [hasResult ? /*#__PURE__*/jsx(Text, {
764
+ ...(finalResult || {}),
607
765
  className: styles$3.resultText,
608
- textStyle: _objectSpread(_objectSpread({}, feedbackTextStyle || null), resultTextStyle || null)
609
- })) : null, hasResultVisual ? /*#__PURE__*/jsx(Visual, {
766
+ textStyle: {
767
+ ...(feedbackTextStyle || null),
768
+ ...(resultTextStyle || null)
769
+ }
770
+ }) : null, hasResultVisual ? /*#__PURE__*/jsx(Visual, {
610
771
  media: answerImage || resultImage,
611
772
  width: "100%",
612
773
  height: "auto"
@@ -614,291 +775,623 @@ function Question(_ref) {
614
775
  }) : null
615
776
  })
616
777
  })
617
- }, "results") : null]
618
- });
778
+ }, "results") : null;
779
+ $[71] = answerImage;
780
+ $[72] = answered;
781
+ $[73] = answers;
782
+ $[74] = feedbackTextStyle;
783
+ $[75] = finalResult;
784
+ $[76] = hasResult;
785
+ $[77] = hasResultVisual;
786
+ $[78] = resultImage;
787
+ $[79] = resultTextStyle;
788
+ $[80] = transitionDisabled;
789
+ $[81] = transitionPlaying;
790
+ $[82] = transitionStagger;
791
+ $[83] = transitions;
792
+ $[84] = withResult;
793
+ $[85] = t59;
794
+ } else {
795
+ t59 = $[85];
796
+ }
797
+ let t60;
798
+ if ($[86] !== t51 || $[87] !== t55 || $[88] !== t56 || $[89] !== t58 || $[90] !== t59) {
799
+ t60 = [t51, t55, t56, t58, t59];
800
+ $[86] = t51;
801
+ $[87] = t55;
802
+ $[88] = t56;
803
+ $[89] = t58;
804
+ $[90] = t59;
805
+ $[91] = t60;
806
+ } else {
807
+ t60 = $[91];
808
+ }
809
+ let t61;
810
+ if ($[92] !== style || $[93] !== t50 || $[94] !== t60 || $[95] !== verticalAlign) {
811
+ t61 = /*#__PURE__*/jsx(Layout, {
812
+ className: t50,
813
+ verticalAlign: verticalAlign,
814
+ style: style,
815
+ children: t60
816
+ });
817
+ $[92] = style;
818
+ $[93] = t50;
819
+ $[94] = t60;
820
+ $[95] = verticalAlign;
821
+ $[96] = t61;
822
+ } else {
823
+ t61 = $[96];
824
+ }
825
+ return t61;
619
826
  }
620
827
 
621
828
  var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","content":"micromag-screen-quiz-content","disabled":"micromag-screen-quiz-disabled","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","nextButton":"micromag-screen-quiz-nextButton","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro"};
622
829
 
623
- function QuizScreen(_ref) {
624
- var _ref$id = _ref.id,
625
- id = _ref$id === void 0 ? null : _ref$id,
626
- _ref$layout = _ref.layout,
627
- layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
628
- _ref$keypadLayout = _ref.keypadLayout,
629
- keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
630
- _ref$question = _ref.question,
631
- question = _ref$question === void 0 ? null : _ref$question,
632
- _ref$answers = _ref.answers,
633
- answers = _ref$answers === void 0 ? null : _ref$answers,
634
- _ref$result = _ref.result,
635
- result = _ref$result === void 0 ? null : _ref$result,
636
- _ref$resultImage = _ref.resultImage,
637
- resultImage = _ref$resultImage === void 0 ? null : _ref$resultImage,
638
- _ref$buttonsLayout = _ref.buttonsLayout,
639
- buttonsLayout = _ref$buttonsLayout === void 0 ? null : _ref$buttonsLayout,
640
- _ref$buttonsStyle = _ref.buttonsStyle,
641
- buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
642
- _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
643
- inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
644
- _ref$buttonsTextStyle = _ref.buttonsTextStyle,
645
- buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
646
- _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
647
- inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
648
- _ref$feedbackTextStyl = _ref.feedbackTextStyle,
649
- feedbackTextStyle = _ref$feedbackTextStyl === void 0 ? null : _ref$feedbackTextStyl,
650
- _ref$numbersTextStyle = _ref.numbersTextStyle,
651
- numbersTextStyle = _ref$numbersTextStyle === void 0 ? null : _ref$numbersTextStyle,
652
- _ref$goodAnswerColor = _ref.goodAnswerColor,
653
- goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
654
- _ref$badAnswerColor = _ref.badAnswerColor,
655
- badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
656
- _ref$withoutTrueFalse = _ref.withoutTrueFalse,
657
- withoutTrueFalse = _ref$withoutTrueFalse === void 0 ? false : _ref$withoutTrueFalse,
658
- _ref$spacing = _ref.spacing,
659
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
660
- _ref$header = _ref.header,
661
- header = _ref$header === void 0 ? null : _ref$header,
662
- _ref$footer = _ref.footer,
663
- footer = _ref$footer === void 0 ? null : _ref$footer,
664
- _ref$background = _ref.background,
665
- background = _ref$background === void 0 ? null : _ref$background,
666
- _ref$current = _ref.current,
667
- current = _ref$current === void 0 ? true : _ref$current,
668
- _ref$preload = _ref.preload,
669
- preload = _ref$preload === void 0 ? true : _ref$preload,
670
- _ref$ready = _ref.ready,
671
- ready = _ref$ready === void 0 ? true : _ref$ready,
672
- _ref$transitions = _ref.transitions,
673
- transitions = _ref$transitions === void 0 ? null : _ref$transitions,
674
- _ref$transitionStagge = _ref.transitionStagger,
675
- transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
676
- _ref$type = _ref.type,
677
- type = _ref$type === void 0 ? null : _ref$type,
678
- _ref$className = _ref.className,
679
- className = _ref$className === void 0 ? null : _ref$className;
680
- var screenId = id || 'screen-id';
681
- var trackScreenEvent = useTrackScreenEvent(type);
682
- var _useScreenSize = useScreenSize(),
683
- width = _useScreenSize.width,
684
- height = _useScreenSize.height,
685
- resolution = _useScreenSize.resolution;
686
- var _useScreenRenderConte = useScreenRenderContext(),
687
- isView = _useScreenRenderConte.isView,
688
- isPreview = _useScreenRenderConte.isPreview,
689
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
690
- isEdit = _useScreenRenderConte.isEdit,
691
- isStatic = _useScreenRenderConte.isStatic,
692
- isCapture = _useScreenRenderConte.isCapture;
693
- var clickDisabled = !ready;
694
- var _useViewerContext = useViewerContext(),
695
- viewerTopHeight = _useViewerContext.topHeight,
696
- viewerBottomHeight = _useViewerContext.bottomHeight,
697
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
698
- var _useViewerWebView = useViewerWebView(),
699
- openWebView = _useViewerWebView.open;
700
- var _usePlaybackContext = usePlaybackContext(),
701
- muted = _usePlaybackContext.muted;
702
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
703
- mediaRef = _usePlaybackMediaRef.ref,
704
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
705
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
706
- var transitionPlaying = current && ready;
707
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
708
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
709
- var mediaShouldLoad = current || preload;
710
- var hasHeader = isHeaderFilled(header);
711
- var hasFooter = isFooterFilled(footer);
712
- var footerProps = getFooterProps(footer, {
713
- isView: isView,
714
- current: current,
715
- openWebView: openWebView,
716
- isPreview: isPreview
717
- });
718
- var _useDimensionObserver = useDimensionObserver(),
719
- headerRef = _useDimensionObserver.ref,
720
- _useDimensionObserver2 = _useDimensionObserver.height,
721
- headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
722
- var _useDimensionObserver3 = useDimensionObserver(),
723
- footerRef = _useDimensionObserver3.ref,
724
- _useDimensionObserver4 = _useDimensionObserver3.height,
725
- footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
726
- var showInstantAnswer = isStatic || isCapture;
727
- var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
728
- return answer !== null && answer.good;
729
- }) : null;
730
- var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
731
- var _useState = useState(showInstantAnswer ? goodAnswerIndex : null),
732
- _useState2 = _slicedToArray(_useState, 2),
733
- userAnswerIndex = _useState2[0],
734
- setUserAnswerIndex = _useState2[1];
735
- var _useQuizCreate = useQuizCreate({
736
- screenId: screenId
737
- }),
738
- submitQuiz = _useQuizCreate.create;
739
- var onAnswerClick = useCallback(function (answer, answerI) {
740
- if (userAnswerIndex !== null) {
741
- return;
742
- }
743
- setUserAnswerIndex(answerI);
744
- trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
745
- linkType: 'quiz_answer',
746
- answer: answer,
747
- answerIndex: answerI,
748
- isGood: answer.good || false
830
+ function QuizScreen(t0) {
831
+ const $ = c(135);
832
+ const {
833
+ id: t1,
834
+ layout: t2,
835
+ keypadLayout: t3,
836
+ question: t4,
837
+ answers: t5,
838
+ result: t6,
839
+ resultImage: t7,
840
+ buttonsLayout: t8,
841
+ buttonsStyle: t9,
842
+ inactiveButtonsStyle: t10,
843
+ buttonsTextStyle: t11,
844
+ inactiveButtonsTextStyle: t12,
845
+ feedbackTextStyle: t13,
846
+ numbersTextStyle: t14,
847
+ goodAnswerColor: t15,
848
+ badAnswerColor: t16,
849
+ withoutTrueFalse: t17,
850
+ spacing: t18,
851
+ header: t19,
852
+ footer: t20,
853
+ background: t21,
854
+ current: t22,
855
+ preload: t23,
856
+ ready: t24,
857
+ transitions: t25,
858
+ transitionStagger: t26,
859
+ type: t27,
860
+ mediaRef: t28,
861
+ className: t29
862
+ } = t0;
863
+ const id = t1 === undefined ? null : t1;
864
+ const layout = t2 === undefined ? "middle" : t2;
865
+ const keypadLayout = t3 === undefined ? null : t3;
866
+ const question = t4 === undefined ? null : t4;
867
+ const answers = t5 === undefined ? null : t5;
868
+ const result = t6 === undefined ? null : t6;
869
+ const resultImage = t7 === undefined ? null : t7;
870
+ const buttonsLayout = t8 === undefined ? null : t8;
871
+ const buttonsStyle = t9 === undefined ? null : t9;
872
+ const inactiveButtonsStyle = t10 === undefined ? null : t10;
873
+ const buttonsTextStyle = t11 === undefined ? null : t11;
874
+ const inactiveButtonsTextStyle = t12 === undefined ? null : t12;
875
+ const feedbackTextStyle = t13 === undefined ? null : t13;
876
+ const numbersTextStyle = t14 === undefined ? null : t14;
877
+ const goodAnswerColor = t15 === undefined ? null : t15;
878
+ const badAnswerColor = t16 === undefined ? null : t16;
879
+ const withoutTrueFalse = t17 === undefined ? false : t17;
880
+ const spacing = t18 === undefined ? 20 : t18;
881
+ const header = t19 === undefined ? null : t19;
882
+ const footer = t20 === undefined ? null : t20;
883
+ const background = t21 === undefined ? null : t21;
884
+ const current = t22 === undefined ? true : t22;
885
+ const preload = t23 === undefined ? true : t23;
886
+ const ready = t24 === undefined ? true : t24;
887
+ const transitions = t25 === undefined ? null : t25;
888
+ const transitionStagger = t26 === undefined ? 100 : t26;
889
+ const type = t27 === undefined ? null : t27;
890
+ const customMediaRef = t28 === undefined ? null : t28;
891
+ const className = t29 === undefined ? null : t29;
892
+ const screenId = id || "screen-id";
893
+ const trackScreenEvent = useTrackScreenEvent(type);
894
+ const {
895
+ width,
896
+ height,
897
+ resolution
898
+ } = useScreenSize();
899
+ const {
900
+ isView,
901
+ isPreview,
902
+ isPlaceholder,
903
+ isEdit,
904
+ isStatic,
905
+ isCapture
906
+ } = useScreenRenderContext();
907
+ const clickDisabled = !ready;
908
+ const {
909
+ topHeight: viewerTopHeight,
910
+ bottomHeight: viewerBottomHeight,
911
+ bottomSidesWidth: viewerBottomSidesWidth
912
+ } = useViewerContext();
913
+ const {
914
+ open: openWebView
915
+ } = useViewerWebView();
916
+ const {
917
+ muted
918
+ } = usePlaybackContext();
919
+ const {
920
+ ref: mediaRef,
921
+ isCurrent: t30
922
+ } = usePlaybackMediaRef(current, true);
923
+ const isCurrentMedia = t30 === undefined ? false : t30;
924
+ const transitionPlaying = current && ready;
925
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
926
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
927
+ const mediaShouldLoad = current || preload;
928
+ let t31;
929
+ if ($[0] !== header) {
930
+ t31 = isHeaderFilled(header);
931
+ $[0] = header;
932
+ $[1] = t31;
933
+ } else {
934
+ t31 = $[1];
935
+ }
936
+ const hasHeader = t31;
937
+ let t32;
938
+ if ($[2] !== footer) {
939
+ t32 = isFooterFilled(footer);
940
+ $[2] = footer;
941
+ $[3] = t32;
942
+ } else {
943
+ t32 = $[3];
944
+ }
945
+ const hasFooter = t32;
946
+ let t33;
947
+ if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
948
+ t33 = getFooterProps(footer, {
949
+ isView,
950
+ current,
951
+ openWebView,
952
+ isPreview
749
953
  });
750
- }, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, answers]);
751
- useEffect(function () {
752
- if (!current && isEdit && userAnswerIndex !== null) {
753
- setUserAnswerIndex(null);
754
- }
755
- }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
756
- useEffect(function () {
757
- if (!isView) {
758
- return;
759
- }
760
- if (userAnswerIndex !== null) {
761
- var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
762
- _ref2$good = _ref2.good,
763
- isGood = _ref2$good === void 0 ? false : _ref2$good,
764
- _ref2$label = _ref2.label,
765
- label = _ref2$label === void 0 ? {} : _ref2$label;
766
- var _ref3 = label || {},
767
- _ref3$body = _ref3.body,
768
- body = _ref3$body === void 0 ? '' : _ref3$body;
769
- submitQuiz({
770
- choice: body || userAnswerIndex,
771
- value: isGood ? 1 : 0
772
- });
773
- }
774
- }, [isView, userAnswerIndex, answers, submitQuiz]);
775
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
776
- var _useState3 = useState(false),
777
- _useState4 = _slicedToArray(_useState3, 2),
778
- scrolledBottom = _useState4[0],
779
- setScrolledBottom = _useState4[1];
780
- var onScrolledBottom = useCallback(function (_ref4) {
781
- var initial = _ref4.initial;
782
- if (initial) {
783
- trackScreenEvent('scroll', 'Screen');
784
- }
785
- setScrolledBottom(true);
786
- }, [trackScreenEvent]);
787
- var onScrolledNotBottom = useCallback(function () {
788
- setScrolledBottom(false);
789
- }, [setScrolledBottom]);
790
- var onScrolledTrigger = useCallback(function () {
791
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
792
- if (trigger !== null) {
793
- var scrollPercent = Math.round(trigger * 100);
794
- trackScreenEvent('scroll', scrollPercent, {
795
- scrollPercent: scrollPercent
954
+ $[4] = current;
955
+ $[5] = footer;
956
+ $[6] = isPreview;
957
+ $[7] = isView;
958
+ $[8] = openWebView;
959
+ $[9] = t33;
960
+ } else {
961
+ t33 = $[9];
962
+ }
963
+ const footerProps = t33;
964
+ const {
965
+ ref: headerRef,
966
+ height: t34
967
+ } = useDimensionObserver();
968
+ const headerHeight = t34 === undefined ? 0 : t34;
969
+ const {
970
+ ref: footerRef,
971
+ height: t35
972
+ } = useDimensionObserver();
973
+ const footerHeight = t35 === undefined ? 0 : t35;
974
+ const showInstantAnswer = isStatic || isCapture;
975
+ let t36;
976
+ if ($[10] !== answers) {
977
+ t36 = answers !== null ? answers.findIndex(_temp) : null;
978
+ $[10] = answers;
979
+ $[11] = t36;
980
+ } else {
981
+ t36 = $[11];
982
+ }
983
+ const goodAnswerIndex = t36;
984
+ const withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
985
+ const [userAnswerIndex, setUserAnswerIndex] = useState(showInstantAnswer ? goodAnswerIndex : null);
986
+ let t37;
987
+ if ($[12] !== screenId) {
988
+ t37 = {
989
+ screenId
990
+ };
991
+ $[12] = screenId;
992
+ $[13] = t37;
993
+ } else {
994
+ t37 = $[13];
995
+ }
996
+ const {
997
+ create: submitQuiz
998
+ } = useQuizCreate(t37);
999
+ let t38;
1000
+ if ($[14] !== trackScreenEvent || $[15] !== userAnswerIndex) {
1001
+ t38 = (answer_0, answerI) => {
1002
+ if (userAnswerIndex !== null) {
1003
+ return;
1004
+ }
1005
+ setUserAnswerIndex(answerI);
1006
+ trackScreenEvent("click_answer", `${userAnswerIndex + 1}: ${answer_0.label.body}`, {
1007
+ linkType: "quiz_answer",
1008
+ answer: answer_0,
1009
+ answerIndex: answerI,
1010
+ isGood: answer_0.good || false
796
1011
  });
797
- }
798
- }, [trackScreenEvent]);
799
- var _useState5 = useState(false),
800
- _useState6 = _slicedToArray(_useState5, 2),
801
- hasScroll = _useState6[0],
802
- setHasScroll = _useState6[1];
803
- var onScrollHeightChange = useCallback(function (_ref5) {
804
- var _ref5$canScroll = _ref5.canScroll,
805
- canScroll = _ref5$canScroll === void 0 ? false : _ref5$canScroll;
806
- setHasScroll(canScroll);
807
- }, [setHasScroll]);
808
- var onQuizReset = useCallback(function () {
809
- setUserAnswerIndex(null);
810
- }, [setUserAnswerIndex]);
811
- var numberOfAnswers = (answers || []).length;
812
- useEffect(function () {
813
- onQuizReset();
814
- }, [numberOfAnswers, onQuizReset]);
815
- var isSplitted = layout === 'split';
816
- var verticalAlign = isSplitted ? null : layout;
817
- var showReset = isEdit && userAnswerIndex !== null;
818
- return /*#__PURE__*/jsxs("div", {
819
- className: classNames([styles$2.container, className, _defineProperty({}, styles$2.disabled, clickDisabled)]),
820
- "data-screen-ready": true,
821
- children: [/*#__PURE__*/jsxs(Container, {
1012
+ };
1013
+ $[14] = trackScreenEvent;
1014
+ $[15] = userAnswerIndex;
1015
+ $[16] = t38;
1016
+ } else {
1017
+ t38 = $[16];
1018
+ }
1019
+ const onAnswerClick = t38;
1020
+ let t39;
1021
+ let t40;
1022
+ if ($[17] !== current || $[18] !== isEdit || $[19] !== userAnswerIndex) {
1023
+ t39 = () => {
1024
+ if (!current && isEdit && userAnswerIndex !== null) {
1025
+ setUserAnswerIndex(null);
1026
+ }
1027
+ };
1028
+ t40 = [isEdit, current, userAnswerIndex, setUserAnswerIndex];
1029
+ $[17] = current;
1030
+ $[18] = isEdit;
1031
+ $[19] = userAnswerIndex;
1032
+ $[20] = t39;
1033
+ $[21] = t40;
1034
+ } else {
1035
+ t39 = $[20];
1036
+ t40 = $[21];
1037
+ }
1038
+ useEffect(t39, t40);
1039
+ let t41;
1040
+ let t42;
1041
+ if ($[22] !== answers || $[23] !== isView || $[24] !== submitQuiz || $[25] !== userAnswerIndex) {
1042
+ t41 = () => {
1043
+ if (!isView) {
1044
+ return;
1045
+ }
1046
+ if (userAnswerIndex !== null) {
1047
+ const {
1048
+ good: t43,
1049
+ label: t44
1050
+ } = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {};
1051
+ const isGood = t43 === undefined ? false : t43;
1052
+ const label = t44 === undefined ? {} : t44;
1053
+ const {
1054
+ body: t45
1055
+ } = label || {};
1056
+ const body = t45 === undefined ? "" : t45;
1057
+ submitQuiz({
1058
+ choice: body || userAnswerIndex,
1059
+ value: isGood ? 1 : 0
1060
+ });
1061
+ }
1062
+ };
1063
+ t42 = [isView, userAnswerIndex, answers, submitQuiz];
1064
+ $[22] = answers;
1065
+ $[23] = isView;
1066
+ $[24] = submitQuiz;
1067
+ $[25] = userAnswerIndex;
1068
+ $[26] = t41;
1069
+ $[27] = t42;
1070
+ } else {
1071
+ t41 = $[26];
1072
+ t42 = $[27];
1073
+ }
1074
+ useEffect(t41, t42);
1075
+ const scrollingDisabled = !isEdit && transitionDisabled || !current;
1076
+ const [scrolledBottom, setScrolledBottom] = useState(false);
1077
+ let t43;
1078
+ if ($[28] !== trackScreenEvent) {
1079
+ t43 = t44 => {
1080
+ const {
1081
+ initial
1082
+ } = t44;
1083
+ if (initial) {
1084
+ trackScreenEvent("scroll", "Screen");
1085
+ }
1086
+ setScrolledBottom(true);
1087
+ };
1088
+ $[28] = trackScreenEvent;
1089
+ $[29] = t43;
1090
+ } else {
1091
+ t43 = $[29];
1092
+ }
1093
+ const onScrolledBottom = t43;
1094
+ let t44;
1095
+ if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
1096
+ t44 = () => {
1097
+ setScrolledBottom(false);
1098
+ };
1099
+ $[30] = t44;
1100
+ } else {
1101
+ t44 = $[30];
1102
+ }
1103
+ const onScrolledNotBottom = t44;
1104
+ let t45;
1105
+ if ($[31] !== trackScreenEvent) {
1106
+ t45 = t46 => {
1107
+ const trigger = t46 === undefined ? null : t46;
1108
+ if (trigger !== null) {
1109
+ const scrollPercent = Math.round(trigger * 100);
1110
+ trackScreenEvent("scroll", scrollPercent, {
1111
+ scrollPercent
1112
+ });
1113
+ }
1114
+ };
1115
+ $[31] = trackScreenEvent;
1116
+ $[32] = t45;
1117
+ } else {
1118
+ t45 = $[32];
1119
+ }
1120
+ const onScrolledTrigger = t45;
1121
+ const [hasScroll, setHasScroll] = useState(false);
1122
+ let t46;
1123
+ if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
1124
+ t46 = t47 => {
1125
+ const {
1126
+ canScroll: t48
1127
+ } = t47;
1128
+ const canScroll = t48 === undefined ? false : t48;
1129
+ setHasScroll(canScroll);
1130
+ };
1131
+ $[33] = t46;
1132
+ } else {
1133
+ t46 = $[33];
1134
+ }
1135
+ const onScrollHeightChange = t46;
1136
+ let t47;
1137
+ if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
1138
+ t47 = () => {
1139
+ setUserAnswerIndex(null);
1140
+ };
1141
+ $[34] = t47;
1142
+ } else {
1143
+ t47 = $[34];
1144
+ }
1145
+ const onQuizReset = t47;
1146
+ let t48;
1147
+ if ($[35] !== answers) {
1148
+ t48 = answers || [];
1149
+ $[35] = answers;
1150
+ $[36] = t48;
1151
+ } else {
1152
+ t48 = $[36];
1153
+ }
1154
+ const numberOfAnswers = t48.length;
1155
+ let t49;
1156
+ if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
1157
+ t49 = () => {
1158
+ onQuizReset();
1159
+ };
1160
+ $[37] = t49;
1161
+ } else {
1162
+ t49 = $[37];
1163
+ }
1164
+ let t50;
1165
+ if ($[38] !== numberOfAnswers) {
1166
+ t50 = [numberOfAnswers, onQuizReset];
1167
+ $[38] = numberOfAnswers;
1168
+ $[39] = t50;
1169
+ } else {
1170
+ t50 = $[39];
1171
+ }
1172
+ useEffect(t49, t50);
1173
+ const isSplitted = layout === "split";
1174
+ const verticalAlign = isSplitted ? null : layout;
1175
+ const showReset = isEdit && userAnswerIndex !== null;
1176
+ let t51;
1177
+ if ($[40] !== className || $[41] !== clickDisabled) {
1178
+ t51 = classNames([styles$2.container, className, {
1179
+ [styles$2.disabled]: clickDisabled
1180
+ }]);
1181
+ $[40] = className;
1182
+ $[41] = clickDisabled;
1183
+ $[42] = t51;
1184
+ } else {
1185
+ t51 = $[42];
1186
+ }
1187
+ let t52;
1188
+ if ($[43] !== showReset) {
1189
+ t52 = showReset ? /*#__PURE__*/jsx(Button, {
1190
+ className: styles$2.reset,
1191
+ icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
1192
+ icon: faRedo,
1193
+ size: "md"
1194
+ }),
1195
+ onClick: onQuizReset
1196
+ }) : null;
1197
+ $[43] = showReset;
1198
+ $[44] = t52;
1199
+ } else {
1200
+ t52 = $[44];
1201
+ }
1202
+ let t53;
1203
+ if ($[45] !== hasHeader || $[46] !== hasScroll || $[47] !== header || $[48] !== headerRef || $[49] !== isPlaceholder || $[50] !== isPreview || $[51] !== scrolledBottom || $[52] !== scrollingDisabled || $[53] !== spacing || $[54] !== userAnswerIndex || $[55] !== viewerTopHeight) {
1204
+ t53 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
1205
+ className: classNames([styles$2.header, {
1206
+ [styles$2.disabled]: userAnswerIndex !== null || scrolledBottom && !scrollingDisabled && hasScroll
1207
+ }]),
1208
+ ref: headerRef,
1209
+ style: {
1210
+ paddingTop: spacing / 2,
1211
+ paddingLeft: spacing,
1212
+ paddingRight: spacing,
1213
+ paddingBottom: spacing,
1214
+ transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
1215
+ },
1216
+ children: /*#__PURE__*/jsx(Header, {
1217
+ ...header
1218
+ })
1219
+ }) : null;
1220
+ $[45] = hasHeader;
1221
+ $[46] = hasScroll;
1222
+ $[47] = header;
1223
+ $[48] = headerRef;
1224
+ $[49] = isPlaceholder;
1225
+ $[50] = isPreview;
1226
+ $[51] = scrolledBottom;
1227
+ $[52] = scrollingDisabled;
1228
+ $[53] = spacing;
1229
+ $[54] = userAnswerIndex;
1230
+ $[55] = viewerTopHeight;
1231
+ $[56] = t53;
1232
+ } else {
1233
+ t53 = $[56];
1234
+ }
1235
+ const t54 = current && isView;
1236
+ let t55;
1237
+ if ($[57] !== current || $[58] !== footerHeight || $[59] !== headerHeight || $[60] !== isPlaceholder || $[61] !== isPreview || $[62] !== spacing || $[63] !== viewerBottomHeight || $[64] !== viewerTopHeight) {
1238
+ t55 = !isPlaceholder ? {
1239
+ paddingLeft: spacing,
1240
+ paddingRight: spacing,
1241
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
1242
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
1243
+ } : null;
1244
+ $[57] = current;
1245
+ $[58] = footerHeight;
1246
+ $[59] = headerHeight;
1247
+ $[60] = isPlaceholder;
1248
+ $[61] = isPreview;
1249
+ $[62] = spacing;
1250
+ $[63] = viewerBottomHeight;
1251
+ $[64] = viewerTopHeight;
1252
+ $[65] = t55;
1253
+ } else {
1254
+ t55 = $[65];
1255
+ }
1256
+ let t56;
1257
+ if ($[66] !== answers || $[67] !== badAnswerColor || $[68] !== buttonsLayout || $[69] !== buttonsStyle || $[70] !== buttonsTextStyle || $[71] !== feedbackTextStyle || $[72] !== goodAnswerColor || $[73] !== inactiveButtonsStyle || $[74] !== inactiveButtonsTextStyle || $[75] !== isView || $[76] !== keypadLayout || $[77] !== layout || $[78] !== numbersTextStyle || $[79] !== onAnswerClick || $[80] !== question || $[81] !== result || $[82] !== resultImage || $[83] !== showInstantAnswer || $[84] !== t54 || $[85] !== t55 || $[86] !== transitionDisabled || $[87] !== transitionPlaying || $[88] !== transitionStagger || $[89] !== transitions || $[90] !== userAnswerIndex || $[91] !== withoutGoodAnswer || $[92] !== withoutTrueFalse) {
1258
+ t56 = /*#__PURE__*/jsx(Question, {
1259
+ question: question,
1260
+ answers: answers,
1261
+ keypadLayout: keypadLayout,
1262
+ result: result,
1263
+ resultImage: resultImage,
1264
+ answeredIndex: userAnswerIndex,
1265
+ buttonsLayout: buttonsLayout,
1266
+ buttonsStyle: buttonsStyle,
1267
+ buttonsTextStyle: buttonsTextStyle,
1268
+ inactiveButtonsStyle: inactiveButtonsStyle,
1269
+ inactiveButtonsTextStyle: inactiveButtonsTextStyle,
1270
+ feedbackTextStyle: feedbackTextStyle,
1271
+ numbersTextStyle: numbersTextStyle,
1272
+ goodAnswerColor: goodAnswerColor,
1273
+ badAnswerColor: badAnswerColor,
1274
+ withoutTrueFalse: withoutTrueFalse,
1275
+ withoutGoodAnswer: withoutGoodAnswer,
1276
+ focusable: t54,
1277
+ animated: isView,
1278
+ showInstantAnswer: showInstantAnswer,
1279
+ withResult: true,
1280
+ layout: layout,
1281
+ transitions: transitions,
1282
+ transitionPlaying: transitionPlaying,
1283
+ transitionStagger: transitionStagger,
1284
+ transitionDisabled: transitionDisabled,
1285
+ onAnswerClick: onAnswerClick,
1286
+ className: styles$2.question,
1287
+ style: t55
1288
+ });
1289
+ $[66] = answers;
1290
+ $[67] = badAnswerColor;
1291
+ $[68] = buttonsLayout;
1292
+ $[69] = buttonsStyle;
1293
+ $[70] = buttonsTextStyle;
1294
+ $[71] = feedbackTextStyle;
1295
+ $[72] = goodAnswerColor;
1296
+ $[73] = inactiveButtonsStyle;
1297
+ $[74] = inactiveButtonsTextStyle;
1298
+ $[75] = isView;
1299
+ $[76] = keypadLayout;
1300
+ $[77] = layout;
1301
+ $[78] = numbersTextStyle;
1302
+ $[79] = onAnswerClick;
1303
+ $[80] = question;
1304
+ $[81] = result;
1305
+ $[82] = resultImage;
1306
+ $[83] = showInstantAnswer;
1307
+ $[84] = t54;
1308
+ $[85] = t55;
1309
+ $[86] = transitionDisabled;
1310
+ $[87] = transitionPlaying;
1311
+ $[88] = transitionStagger;
1312
+ $[89] = transitions;
1313
+ $[90] = userAnswerIndex;
1314
+ $[91] = withoutGoodAnswer;
1315
+ $[92] = withoutTrueFalse;
1316
+ $[93] = t56;
1317
+ } else {
1318
+ t56 = $[93];
1319
+ }
1320
+ let t57;
1321
+ if ($[94] !== onScrolledBottom || $[95] !== onScrolledTrigger || $[96] !== scrollingDisabled || $[97] !== t53 || $[98] !== t56 || $[99] !== verticalAlign) {
1322
+ t57 = /*#__PURE__*/jsxs(Scroll, {
1323
+ verticalAlign: verticalAlign,
1324
+ disabled: scrollingDisabled,
1325
+ onScrolledTrigger: onScrolledTrigger,
1326
+ onScrolledBottom: onScrolledBottom,
1327
+ onScrolledNotBottom: onScrolledNotBottom,
1328
+ onScrollHeightChange: onScrollHeightChange,
1329
+ withShadow: true,
1330
+ children: [t53, t56]
1331
+ });
1332
+ $[94] = onScrolledBottom;
1333
+ $[95] = onScrolledTrigger;
1334
+ $[96] = scrollingDisabled;
1335
+ $[97] = t53;
1336
+ $[98] = t56;
1337
+ $[99] = verticalAlign;
1338
+ $[100] = t57;
1339
+ } else {
1340
+ t57 = $[100];
1341
+ }
1342
+ let t58;
1343
+ if ($[101] !== current || $[102] !== footerProps || $[103] !== footerRef || $[104] !== hasFooter || $[105] !== hasScroll || $[106] !== isPlaceholder || $[107] !== isPreview || $[108] !== scrolledBottom || $[109] !== spacing || $[110] !== viewerBottomHeight || $[111] !== viewerBottomSidesWidth) {
1344
+ t58 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
1345
+ ref: footerRef,
1346
+ className: classNames([styles$2.footer, {
1347
+ [styles$2.disabled]: !scrolledBottom && hasScroll
1348
+ }]),
1349
+ style: {
1350
+ transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
1351
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
1352
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
1353
+ paddingTop: spacing / 2,
1354
+ paddingBottom: spacing / 2
1355
+ },
1356
+ children: /*#__PURE__*/jsx(Footer, {
1357
+ ...footerProps
1358
+ })
1359
+ }) : null;
1360
+ $[101] = current;
1361
+ $[102] = footerProps;
1362
+ $[103] = footerRef;
1363
+ $[104] = hasFooter;
1364
+ $[105] = hasScroll;
1365
+ $[106] = isPlaceholder;
1366
+ $[107] = isPreview;
1367
+ $[108] = scrolledBottom;
1368
+ $[109] = spacing;
1369
+ $[110] = viewerBottomHeight;
1370
+ $[111] = viewerBottomSidesWidth;
1371
+ $[112] = t58;
1372
+ } else {
1373
+ t58 = $[112];
1374
+ }
1375
+ let t59;
1376
+ if ($[113] !== height || $[114] !== t52 || $[115] !== t57 || $[116] !== t58 || $[117] !== width) {
1377
+ t59 = /*#__PURE__*/jsxs(Container, {
822
1378
  width: width,
823
1379
  height: height,
824
1380
  className: styles$2.content,
825
- children: [showReset ? /*#__PURE__*/jsx(Button, {
826
- className: styles$2.reset,
827
- icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
828
- icon: faRedo,
829
- size: "md"
830
- }),
831
- onClick: onQuizReset
832
- }) : null, /*#__PURE__*/jsxs(Scroll, {
833
- verticalAlign: verticalAlign
834
- // disabled={scrollingDisabled || userAnswerIndex !== null}
835
- ,
836
- disabled: scrollingDisabled,
837
- onScrolledTrigger: onScrolledTrigger,
838
- onScrolledBottom: onScrolledBottom,
839
- onScrolledNotBottom: onScrolledNotBottom,
840
- onScrollHeightChange: onScrollHeightChange,
841
- withShadow: true,
842
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
843
- className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, userAnswerIndex !== null || scrolledBottom && !scrollingDisabled && hasScroll)]),
844
- ref: headerRef,
845
- style: {
846
- paddingTop: spacing / 2,
847
- paddingLeft: spacing,
848
- paddingRight: spacing,
849
- paddingBottom: spacing,
850
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
851
- },
852
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
853
- }) : null, /*#__PURE__*/jsx(Question, {
854
- question: question,
855
- answers: answers,
856
- keypadLayout: keypadLayout,
857
- result: result,
858
- resultImage: resultImage,
859
- answeredIndex: userAnswerIndex,
860
- buttonsLayout: buttonsLayout,
861
- buttonsStyle: buttonsStyle,
862
- buttonsTextStyle: buttonsTextStyle,
863
- inactiveButtonsStyle: inactiveButtonsStyle,
864
- inactiveButtonsTextStyle: inactiveButtonsTextStyle,
865
- feedbackTextStyle: feedbackTextStyle,
866
- numbersTextStyle: numbersTextStyle,
867
- goodAnswerColor: goodAnswerColor,
868
- badAnswerColor: badAnswerColor,
869
- withoutTrueFalse: withoutTrueFalse,
870
- withoutGoodAnswer: withoutGoodAnswer,
871
- focusable: current && isView,
872
- animated: isView,
873
- showInstantAnswer: showInstantAnswer,
874
- withResult: true,
875
- layout: layout,
876
- transitions: transitions,
877
- transitionPlaying: transitionPlaying,
878
- transitionStagger: transitionStagger,
879
- transitionDisabled: transitionDisabled,
880
- onAnswerClick: onAnswerClick,
881
- className: styles$2.question,
882
- style: !isPlaceholder ? {
883
- paddingLeft: spacing,
884
- paddingRight: spacing,
885
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
886
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
887
- } : null
888
- })]
889
- }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
890
- ref: footerRef,
891
- className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom && hasScroll)]),
892
- style: {
893
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
894
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
895
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
896
- paddingTop: spacing / 2,
897
- paddingBottom: spacing / 2
898
- },
899
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
900
- }) : null]
901
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
1381
+ children: [t52, t57, t58]
1382
+ });
1383
+ $[113] = height;
1384
+ $[114] = t52;
1385
+ $[115] = t57;
1386
+ $[116] = t58;
1387
+ $[117] = width;
1388
+ $[118] = t59;
1389
+ } else {
1390
+ t59 = $[118];
1391
+ }
1392
+ let t60;
1393
+ if ($[119] !== background || $[120] !== backgroundPlaying || $[121] !== customMediaRef || $[122] !== height || $[123] !== isPlaceholder || $[124] !== isPreview || $[125] !== mediaRef || $[126] !== mediaShouldLoad || $[127] !== muted || $[128] !== resolution || $[129] !== width) {
1394
+ t60 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
902
1395
  background: background,
903
1396
  width: width,
904
1397
  height: height,
@@ -906,448 +1399,706 @@ function QuizScreen(_ref) {
906
1399
  playing: backgroundPlaying,
907
1400
  muted: muted,
908
1401
  shouldLoad: mediaShouldLoad,
909
- mediaRef: mediaRef,
1402
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
910
1403
  withoutVideo: isPreview,
911
1404
  className: styles$2.background
912
- }) : null]
913
- });
1405
+ }) : null;
1406
+ $[119] = background;
1407
+ $[120] = backgroundPlaying;
1408
+ $[121] = customMediaRef;
1409
+ $[122] = height;
1410
+ $[123] = isPlaceholder;
1411
+ $[124] = isPreview;
1412
+ $[125] = mediaRef;
1413
+ $[126] = mediaShouldLoad;
1414
+ $[127] = muted;
1415
+ $[128] = resolution;
1416
+ $[129] = width;
1417
+ $[130] = t60;
1418
+ } else {
1419
+ t60 = $[130];
1420
+ }
1421
+ let t61;
1422
+ if ($[131] !== t51 || $[132] !== t59 || $[133] !== t60) {
1423
+ t61 = /*#__PURE__*/jsxs("div", {
1424
+ className: t51,
1425
+ "data-screen-ready": true,
1426
+ children: [t59, t60]
1427
+ });
1428
+ $[131] = t51;
1429
+ $[132] = t59;
1430
+ $[133] = t60;
1431
+ $[134] = t61;
1432
+ } else {
1433
+ t61 = $[134];
1434
+ }
1435
+ return t61;
1436
+ }
1437
+ function _temp(answer) {
1438
+ return answer !== null && answer.good;
914
1439
  }
915
1440
 
916
1441
  var styles$1 = {"container":"micromag-screen-quiz-results-container","title":"micromag-screen-quiz-results-title","emptyTitle":"micromag-screen-quiz-results-emptyTitle","emptyDescription":"micromag-screen-quiz-results-emptyDescription"};
917
1442
 
918
- function Results(_ref) {
919
- var _ref$layout = _ref.layout,
920
- layout = _ref$layout === void 0 ? null : _ref$layout,
921
- _ref$title = _ref.title,
922
- title = _ref$title === void 0 ? null : _ref$title,
923
- _ref$description = _ref.description,
924
- description = _ref$description === void 0 ? null : _ref$description,
925
- _ref$resultsHeadingSt = _ref.resultsHeadingStyle,
926
- resultsHeadingStyle = _ref$resultsHeadingSt === void 0 ? null : _ref$resultsHeadingSt,
927
- _ref$resultsTextStyle = _ref.resultsTextStyle,
928
- resultsTextStyle = _ref$resultsTextStyle === void 0 ? null : _ref$resultsTextStyle,
929
- _ref$transitions = _ref.transitions,
930
- transitions = _ref$transitions === void 0 ? null : _ref$transitions,
931
- _ref$transitionPlayin = _ref.transitionPlaying,
932
- transitionPlaying = _ref$transitionPlayin === void 0 ? false : _ref$transitionPlayin,
933
- _ref$transitionStagge = _ref.transitionStagger,
934
- transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
935
- _ref$transitionDisabl = _ref.transitionDisabled,
936
- transitionDisabled = _ref$transitionDisabl === void 0 ? false : _ref$transitionDisabl,
937
- _ref$className = _ref.className,
938
- className = _ref$className === void 0 ? null : _ref$className,
939
- _ref$style = _ref.style,
940
- style = _ref$style === void 0 ? null : _ref$style;
941
- var isSplitted = layout === 'split';
942
- var verticalAlign = isSplitted ? null : layout;
943
- var hasTitle = isTextFilled(title);
944
- var _ref2 = title || {},
945
- _ref2$textStyle = _ref2.textStyle,
946
- titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
947
- var hasDescription = isTextFilled(description);
948
- var _ref3 = description || {},
949
- _ref3$textStyle = _ref3.textStyle,
950
- descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
951
- return /*#__PURE__*/jsx(Layout, {
952
- className: classNames([styles$1.container, className]),
953
- fullscreen: true,
954
- verticalAlign: verticalAlign,
955
- style: style,
956
- children: [/*#__PURE__*/jsx(ScreenElement, {
1443
+ function Results(t0) {
1444
+ const $ = c(46);
1445
+ const {
1446
+ layout: t1,
1447
+ title: t2,
1448
+ description: t3,
1449
+ resultsHeadingStyle: t4,
1450
+ resultsTextStyle: t5,
1451
+ transitions: t6,
1452
+ transitionPlaying: t7,
1453
+ transitionStagger: t8,
1454
+ transitionDisabled: t9,
1455
+ className: t10,
1456
+ style: t11
1457
+ } = t0;
1458
+ const layout = t1 === undefined ? null : t1;
1459
+ const title = t2 === undefined ? null : t2;
1460
+ const description = t3 === undefined ? null : t3;
1461
+ const resultsHeadingStyle = t4 === undefined ? null : t4;
1462
+ const resultsTextStyle = t5 === undefined ? null : t5;
1463
+ const transitions = t6 === undefined ? null : t6;
1464
+ const transitionPlaying = t7 === undefined ? false : t7;
1465
+ const transitionStagger = t8 === undefined ? 100 : t8;
1466
+ const transitionDisabled = t9 === undefined ? false : t9;
1467
+ const className = t10 === undefined ? null : t10;
1468
+ const style = t11 === undefined ? null : t11;
1469
+ const isSplitted = layout === "split";
1470
+ const verticalAlign = isSplitted ? null : layout;
1471
+ let t12;
1472
+ if ($[0] !== title) {
1473
+ t12 = isTextFilled(title);
1474
+ $[0] = title;
1475
+ $[1] = t12;
1476
+ } else {
1477
+ t12 = $[1];
1478
+ }
1479
+ const hasTitle = t12;
1480
+ let t13;
1481
+ if ($[2] !== title) {
1482
+ t13 = title || {};
1483
+ $[2] = title;
1484
+ $[3] = t13;
1485
+ } else {
1486
+ t13 = $[3];
1487
+ }
1488
+ const {
1489
+ textStyle: t14
1490
+ } = t13;
1491
+ const titleTextStyle = t14 === undefined ? null : t14;
1492
+ let t15;
1493
+ if ($[4] !== description) {
1494
+ t15 = isTextFilled(description);
1495
+ $[4] = description;
1496
+ $[5] = t15;
1497
+ } else {
1498
+ t15 = $[5];
1499
+ }
1500
+ const hasDescription = t15;
1501
+ let t16;
1502
+ if ($[6] !== description) {
1503
+ t16 = description || {};
1504
+ $[6] = description;
1505
+ $[7] = t16;
1506
+ } else {
1507
+ t16 = $[7];
1508
+ }
1509
+ const {
1510
+ textStyle: t17
1511
+ } = t16;
1512
+ const descriptionTextStyle = t17 === undefined ? null : t17;
1513
+ let t18;
1514
+ if ($[8] !== className) {
1515
+ t18 = classNames([styles$1.container, className]);
1516
+ $[8] = className;
1517
+ $[9] = t18;
1518
+ } else {
1519
+ t18 = $[9];
1520
+ }
1521
+ let t19;
1522
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
1523
+ t19 = /*#__PURE__*/jsx(FormattedMessage, {
1524
+ id: "BSTWf8",
1525
+ defaultMessage: "Title"
1526
+ });
1527
+ $[10] = t19;
1528
+ } else {
1529
+ t19 = $[10];
1530
+ }
1531
+ const t20 = !hasTitle;
1532
+ let t21;
1533
+ if ($[11] !== hasTitle || $[12] !== resultsHeadingStyle || $[13] !== title || $[14] !== titleTextStyle || $[15] !== transitionDisabled || $[16] !== transitionPlaying || $[17] !== transitions) {
1534
+ t21 = hasTitle ? /*#__PURE__*/jsx(Transitions, {
1535
+ transitions: transitions,
1536
+ playing: transitionPlaying,
1537
+ disabled: transitionDisabled,
1538
+ children: /*#__PURE__*/jsx(Heading, {
1539
+ ...title,
1540
+ className: styles$1.title,
1541
+ textStyle: {
1542
+ ...resultsHeadingStyle,
1543
+ ...titleTextStyle
1544
+ }
1545
+ })
1546
+ }) : null;
1547
+ $[11] = hasTitle;
1548
+ $[12] = resultsHeadingStyle;
1549
+ $[13] = title;
1550
+ $[14] = titleTextStyle;
1551
+ $[15] = transitionDisabled;
1552
+ $[16] = transitionPlaying;
1553
+ $[17] = transitions;
1554
+ $[18] = t21;
1555
+ } else {
1556
+ t21 = $[18];
1557
+ }
1558
+ let t22;
1559
+ if ($[19] !== t20 || $[20] !== t21) {
1560
+ t22 = /*#__PURE__*/jsx(ScreenElement, {
957
1561
  placeholder: "title",
958
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
959
- id: "BSTWf8",
960
- defaultMessage: [{
961
- "type": 0,
962
- "value": "Title"
963
- }]
964
- }),
1562
+ emptyLabel: t19,
965
1563
  emptyClassName: styles$1.emptyTitle,
966
- isEmpty: !hasTitle,
967
- children: hasTitle ? /*#__PURE__*/jsx(Transitions, {
968
- transitions: transitions,
969
- playing: transitionPlaying,
970
- disabled: transitionDisabled,
971
- children: /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, title), {}, {
972
- className: styles$1.title,
973
- textStyle: _objectSpread(_objectSpread({}, resultsHeadingStyle), titleTextStyle)
974
- }))
975
- }) : null
976
- }, "title"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
1564
+ isEmpty: t20,
1565
+ children: t21
1566
+ }, "title");
1567
+ $[19] = t20;
1568
+ $[20] = t21;
1569
+ $[21] = t22;
1570
+ } else {
1571
+ t22 = $[21];
1572
+ }
1573
+ let t23;
1574
+ if ($[22] !== isSplitted) {
1575
+ t23 = isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null;
1576
+ $[22] = isSplitted;
1577
+ $[23] = t23;
1578
+ } else {
1579
+ t23 = $[23];
1580
+ }
1581
+ let t24;
1582
+ if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
1583
+ t24 = /*#__PURE__*/jsx(FormattedMessage, {
1584
+ id: "hoDz0O",
1585
+ defaultMessage: "Description"
1586
+ });
1587
+ $[24] = t24;
1588
+ } else {
1589
+ t24 = $[24];
1590
+ }
1591
+ const t25 = !hasDescription;
1592
+ let t26;
1593
+ if ($[25] !== description || $[26] !== descriptionTextStyle || $[27] !== hasTitle || $[28] !== resultsTextStyle || $[29] !== transitionDisabled || $[30] !== transitionPlaying || $[31] !== transitionStagger || $[32] !== transitions) {
1594
+ t26 = hasTitle ? /*#__PURE__*/jsx(Transitions, {
1595
+ transitions: transitions,
1596
+ playing: transitionPlaying,
1597
+ disabled: transitionDisabled,
1598
+ delay: transitionStagger,
1599
+ children: /*#__PURE__*/jsx(Text, {
1600
+ ...description,
1601
+ className: styles$1.description,
1602
+ textStyle: {
1603
+ ...resultsTextStyle,
1604
+ ...descriptionTextStyle
1605
+ }
1606
+ })
1607
+ }) : null;
1608
+ $[25] = description;
1609
+ $[26] = descriptionTextStyle;
1610
+ $[27] = hasTitle;
1611
+ $[28] = resultsTextStyle;
1612
+ $[29] = transitionDisabled;
1613
+ $[30] = transitionPlaying;
1614
+ $[31] = transitionStagger;
1615
+ $[32] = transitions;
1616
+ $[33] = t26;
1617
+ } else {
1618
+ t26 = $[33];
1619
+ }
1620
+ let t27;
1621
+ if ($[34] !== t25 || $[35] !== t26) {
1622
+ t27 = /*#__PURE__*/jsx(ScreenElement, {
977
1623
  placeholder: "text",
978
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
979
- id: "hoDz0O",
980
- defaultMessage: [{
981
- "type": 0,
982
- "value": "Description"
983
- }]
984
- }),
1624
+ emptyLabel: t24,
985
1625
  emptyClassName: styles$1.emptyDescription,
986
- isEmpty: !hasDescription,
987
- children: hasTitle ? /*#__PURE__*/jsx(Transitions, {
988
- transitions: transitions,
989
- playing: transitionPlaying,
990
- disabled: transitionDisabled,
991
- delay: transitionStagger,
992
- children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
993
- className: styles$1.description,
994
- textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
995
- }))
996
- }) : null
997
- }, "description")]
998
- });
1626
+ isEmpty: t25,
1627
+ children: t26
1628
+ }, "description");
1629
+ $[34] = t25;
1630
+ $[35] = t26;
1631
+ $[36] = t27;
1632
+ } else {
1633
+ t27 = $[36];
1634
+ }
1635
+ let t28;
1636
+ if ($[37] !== t22 || $[38] !== t23 || $[39] !== t27) {
1637
+ t28 = [t22, t23, t27];
1638
+ $[37] = t22;
1639
+ $[38] = t23;
1640
+ $[39] = t27;
1641
+ $[40] = t28;
1642
+ } else {
1643
+ t28 = $[40];
1644
+ }
1645
+ let t29;
1646
+ if ($[41] !== style || $[42] !== t18 || $[43] !== t28 || $[44] !== verticalAlign) {
1647
+ t29 = /*#__PURE__*/jsx(Layout, {
1648
+ className: t18,
1649
+ fullscreen: true,
1650
+ verticalAlign: verticalAlign,
1651
+ style: style,
1652
+ children: t28
1653
+ });
1654
+ $[41] = style;
1655
+ $[42] = t18;
1656
+ $[43] = t28;
1657
+ $[44] = verticalAlign;
1658
+ $[45] = t29;
1659
+ } else {
1660
+ t29 = $[45];
1661
+ }
1662
+ return t29;
999
1663
  }
1000
1664
 
1001
1665
  var styles = {"container":"micromag-screen-quiz-title-container","title":"micromag-screen-quiz-title-title","description":"micromag-screen-quiz-title-description","emptyTitle":"micromag-screen-quiz-title-emptyTitle","emptyDescription":"micromag-screen-quiz-title-emptyDescription"};
1002
1666
 
1003
- function Title(_ref) {
1004
- var _ref$layout = _ref.layout,
1005
- layout = _ref$layout === void 0 ? null : _ref$layout,
1006
- _ref$title = _ref.title,
1007
- title = _ref$title === void 0 ? null : _ref$title,
1008
- _ref$description = _ref.description,
1009
- description = _ref$description === void 0 ? null : _ref$description,
1010
- _ref$button = _ref.button,
1011
- button = _ref$button === void 0 ? null : _ref$button,
1012
- _ref$buttonDisabled = _ref.buttonDisabled,
1013
- buttonDisabled = _ref$buttonDisabled === void 0 ? false : _ref$buttonDisabled,
1014
- _ref$focusable = _ref.focusable,
1015
- focusable = _ref$focusable === void 0 ? false : _ref$focusable,
1016
- _ref$className = _ref.className,
1017
- className = _ref$className === void 0 ? null : _ref$className,
1018
- _ref$style = _ref.style,
1019
- style = _ref$style === void 0 ? null : _ref$style,
1020
- _ref$onClickButton = _ref.onClickButton,
1021
- onClickButton = _ref$onClickButton === void 0 ? null : _ref$onClickButton;
1022
- // const { isPreview, isEdit } = useScreenRenderContext();
1023
- var isSplitted = layout === 'split';
1024
- var verticalAlign = isSplitted ? null : layout;
1025
- var hasTitle = isTextFilled(title);
1026
- var hasDescription = isTextFilled(description);
1027
- var hasButton = isTextFilled(button);
1028
- return /*#__PURE__*/jsx(Layout, {
1029
- className: classNames([styles.container, className]),
1030
- fullscreen: true,
1031
- verticalAlign: verticalAlign,
1032
- style: style,
1033
- children: [/*#__PURE__*/jsx(ScreenElement, {
1667
+ function Title(t0) {
1668
+ const $ = c(43);
1669
+ const {
1670
+ layout: t1,
1671
+ title: t2,
1672
+ description: t3,
1673
+ button: t4,
1674
+ buttonDisabled: t5,
1675
+ focusable: t6,
1676
+ className: t7,
1677
+ style: t8,
1678
+ onClickButton: t9
1679
+ } = t0;
1680
+ const layout = t1 === undefined ? null : t1;
1681
+ const title = t2 === undefined ? null : t2;
1682
+ const description = t3 === undefined ? null : t3;
1683
+ const button = t4 === undefined ? null : t4;
1684
+ const buttonDisabled = t5 === undefined ? false : t5;
1685
+ const focusable = t6 === undefined ? false : t6;
1686
+ const className = t7 === undefined ? null : t7;
1687
+ const style = t8 === undefined ? null : t8;
1688
+ const onClickButton = t9 === undefined ? null : t9;
1689
+ const isSplitted = layout === "split";
1690
+ const verticalAlign = isSplitted ? null : layout;
1691
+ let t10;
1692
+ if ($[0] !== title) {
1693
+ t10 = isTextFilled(title);
1694
+ $[0] = title;
1695
+ $[1] = t10;
1696
+ } else {
1697
+ t10 = $[1];
1698
+ }
1699
+ const hasTitle = t10;
1700
+ let t11;
1701
+ if ($[2] !== description) {
1702
+ t11 = isTextFilled(description);
1703
+ $[2] = description;
1704
+ $[3] = t11;
1705
+ } else {
1706
+ t11 = $[3];
1707
+ }
1708
+ const hasDescription = t11;
1709
+ let t12;
1710
+ if ($[4] !== button) {
1711
+ t12 = isTextFilled(button);
1712
+ $[4] = button;
1713
+ $[5] = t12;
1714
+ } else {
1715
+ t12 = $[5];
1716
+ }
1717
+ const hasButton = t12;
1718
+ let t13;
1719
+ if ($[6] !== className) {
1720
+ t13 = classNames([styles.container, className]);
1721
+ $[6] = className;
1722
+ $[7] = t13;
1723
+ } else {
1724
+ t13 = $[7];
1725
+ }
1726
+ let t14;
1727
+ if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
1728
+ t14 = /*#__PURE__*/jsx(FormattedMessage, {
1729
+ id: "BSTWf8",
1730
+ defaultMessage: "Title"
1731
+ });
1732
+ $[8] = t14;
1733
+ } else {
1734
+ t14 = $[8];
1735
+ }
1736
+ const t15 = !hasTitle;
1737
+ let t16;
1738
+ if ($[9] !== hasTitle || $[10] !== title) {
1739
+ t16 = hasTitle ? /*#__PURE__*/jsx(Heading, {
1740
+ ...title,
1741
+ className: styles.title
1742
+ }) : null;
1743
+ $[9] = hasTitle;
1744
+ $[10] = title;
1745
+ $[11] = t16;
1746
+ } else {
1747
+ t16 = $[11];
1748
+ }
1749
+ let t17;
1750
+ if ($[12] !== t15 || $[13] !== t16) {
1751
+ t17 = /*#__PURE__*/jsx(ScreenElement, {
1034
1752
  placeholder: "title",
1035
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
1036
- id: "BSTWf8",
1037
- defaultMessage: [{
1038
- "type": 0,
1039
- "value": "Title"
1040
- }]
1041
- }),
1753
+ emptyLabel: t14,
1042
1754
  emptyClassName: styles.emptyTitle,
1043
- isEmpty: !hasTitle,
1044
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, title), {}, {
1045
- className: styles.title
1046
- })) : null
1047
- }, "title"), /*#__PURE__*/jsx(ScreenElement, {
1755
+ isEmpty: t15,
1756
+ children: t16
1757
+ }, "title");
1758
+ $[12] = t15;
1759
+ $[13] = t16;
1760
+ $[14] = t17;
1761
+ } else {
1762
+ t17 = $[14];
1763
+ }
1764
+ let t18;
1765
+ if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
1766
+ t18 = /*#__PURE__*/jsx(FormattedMessage, {
1767
+ id: "hoDz0O",
1768
+ defaultMessage: "Description"
1769
+ });
1770
+ $[15] = t18;
1771
+ } else {
1772
+ t18 = $[15];
1773
+ }
1774
+ const t19 = !hasDescription;
1775
+ let t20;
1776
+ if ($[16] !== description || $[17] !== hasDescription) {
1777
+ t20 = hasDescription ? /*#__PURE__*/jsx(Text, {
1778
+ ...description,
1779
+ className: styles.description
1780
+ }) : null;
1781
+ $[16] = description;
1782
+ $[17] = hasDescription;
1783
+ $[18] = t20;
1784
+ } else {
1785
+ t20 = $[18];
1786
+ }
1787
+ let t21;
1788
+ if ($[19] !== t19 || $[20] !== t20) {
1789
+ t21 = /*#__PURE__*/jsx(ScreenElement, {
1048
1790
  placeholder: "text",
1049
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
1050
- id: "hoDz0O",
1051
- defaultMessage: [{
1052
- "type": 0,
1053
- "value": "Description"
1054
- }]
1055
- }),
1791
+ emptyLabel: t18,
1056
1792
  emptyClassName: styles.emptyDescription,
1057
- isEmpty: !hasDescription,
1058
- children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
1059
- className: styles.description
1060
- })) : null
1061
- }, "description"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
1793
+ isEmpty: t19,
1794
+ children: t20
1795
+ }, "description");
1796
+ $[19] = t19;
1797
+ $[20] = t20;
1798
+ $[21] = t21;
1799
+ } else {
1800
+ t21 = $[21];
1801
+ }
1802
+ let t22;
1803
+ if ($[22] !== isSplitted) {
1804
+ t22 = isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null;
1805
+ $[22] = isSplitted;
1806
+ $[23] = t22;
1807
+ } else {
1808
+ t22 = $[23];
1809
+ }
1810
+ const t23 = button !== null ? button.buttonStyle : null;
1811
+ let t24;
1812
+ if ($[24] !== button || $[25] !== hasButton) {
1813
+ t24 = hasButton ? /*#__PURE__*/jsx(Text, {
1814
+ ...button,
1815
+ className: styles.label
1816
+ }) : /*#__PURE__*/jsx(FormattedMessage, {
1817
+ id: "D7LIZQ",
1818
+ defaultMessage: "Start"
1819
+ });
1820
+ $[24] = button;
1821
+ $[25] = hasButton;
1822
+ $[26] = t24;
1823
+ } else {
1824
+ t24 = $[26];
1825
+ }
1826
+ let t25;
1827
+ if ($[27] !== buttonDisabled || $[28] !== focusable || $[29] !== onClickButton || $[30] !== t23 || $[31] !== t24) {
1828
+ t25 = /*#__PURE__*/jsx(ScreenElement, {
1062
1829
  placeholder: "button",
1063
1830
  children: /*#__PURE__*/jsx(Button$1, {
1064
1831
  disabled: buttonDisabled,
1065
1832
  focusable: focusable,
1066
- buttonStyle: button !== null ? button.buttonStyle : null,
1833
+ buttonStyle: t23,
1067
1834
  className: styles.button,
1068
1835
  onClick: onClickButton,
1069
- children: hasButton ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, button), {}, {
1070
- className: styles.label
1071
- })) : /*#__PURE__*/jsx(FormattedMessage, {
1072
- id: "D7LIZQ",
1073
- defaultMessage: [{
1074
- "type": 0,
1075
- "value": "Start"
1076
- }]
1077
- })
1836
+ children: t24
1078
1837
  })
1079
- }, "button")]
1080
- });
1838
+ }, "button");
1839
+ $[27] = buttonDisabled;
1840
+ $[28] = focusable;
1841
+ $[29] = onClickButton;
1842
+ $[30] = t23;
1843
+ $[31] = t24;
1844
+ $[32] = t25;
1845
+ } else {
1846
+ t25 = $[32];
1847
+ }
1848
+ let t26;
1849
+ if ($[33] !== t17 || $[34] !== t21 || $[35] !== t22 || $[36] !== t25) {
1850
+ t26 = [t17, t21, t22, t25];
1851
+ $[33] = t17;
1852
+ $[34] = t21;
1853
+ $[35] = t22;
1854
+ $[36] = t25;
1855
+ $[37] = t26;
1856
+ } else {
1857
+ t26 = $[37];
1858
+ }
1859
+ let t27;
1860
+ if ($[38] !== style || $[39] !== t13 || $[40] !== t26 || $[41] !== verticalAlign) {
1861
+ t27 = /*#__PURE__*/jsx(Layout, {
1862
+ className: t13,
1863
+ fullscreen: true,
1864
+ verticalAlign: verticalAlign,
1865
+ style: style,
1866
+ children: t26
1867
+ });
1868
+ $[38] = style;
1869
+ $[39] = t13;
1870
+ $[40] = t26;
1871
+ $[41] = verticalAlign;
1872
+ $[42] = t27;
1873
+ } else {
1874
+ t27 = $[42];
1875
+ }
1876
+ return t27;
1081
1877
  }
1082
1878
 
1083
- function QuizMultipleScreen(_ref) {
1084
- var _ref$id = _ref.id,
1085
- id = _ref$id === void 0 ? null : _ref$id,
1086
- _ref$layout = _ref.layout,
1087
- layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
1088
- _ref$introLayout = _ref.introLayout,
1089
- introLayout = _ref$introLayout === void 0 ? null : _ref$introLayout,
1090
- _ref$title = _ref.title,
1091
- title = _ref$title === void 0 ? null : _ref$title,
1092
- _ref$description = _ref.description,
1093
- description = _ref$description === void 0 ? null : _ref$description,
1094
- _ref$questions = _ref.questions,
1095
- questions = _ref$questions === void 0 ? null : _ref$questions,
1096
- _ref$results = _ref.results,
1097
- results = _ref$results === void 0 ? null : _ref$results,
1098
- _ref$buttonsStyle = _ref.buttonsStyle,
1099
- buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
1100
- _ref$inactiveButtonsS = _ref.inactiveButtonsStyle,
1101
- inactiveButtonsStyle = _ref$inactiveButtonsS === void 0 ? null : _ref$inactiveButtonsS,
1102
- _ref$buttonsTextStyle = _ref.buttonsTextStyle,
1103
- buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
1104
- _ref$inactiveButtonsT = _ref.inactiveButtonsTextStyle,
1105
- inactiveButtonsTextStyle = _ref$inactiveButtonsT === void 0 ? null : _ref$inactiveButtonsT,
1106
- _ref$questionsHeading = _ref.questionsHeadingStyle,
1107
- questionsHeadingStyle = _ref$questionsHeading === void 0 ? null : _ref$questionsHeading,
1108
- _ref$resultsHeadingSt = _ref.resultsHeadingStyle,
1109
- resultsHeadingStyle = _ref$resultsHeadingSt === void 0 ? null : _ref$resultsHeadingSt,
1110
- _ref$resultsTextStyle = _ref.resultsTextStyle,
1111
- resultsTextStyle = _ref$resultsTextStyle === void 0 ? null : _ref$resultsTextStyle,
1112
- _ref$feedbackTextStyl = _ref.feedbackTextStyle,
1113
- feedbackTextStyle = _ref$feedbackTextStyl === void 0 ? null : _ref$feedbackTextStyl,
1114
- _ref$numbersTextStyle = _ref.numbersTextStyle,
1115
- numbersTextStyle = _ref$numbersTextStyle === void 0 ? null : _ref$numbersTextStyle,
1116
- _ref$goodAnswerColor = _ref.goodAnswerColor,
1117
- goodAnswerColor = _ref$goodAnswerColor === void 0 ? null : _ref$goodAnswerColor,
1118
- _ref$badAnswerColor = _ref.badAnswerColor,
1119
- badAnswerColor = _ref$badAnswerColor === void 0 ? null : _ref$badAnswerColor,
1120
- _ref$spacing = _ref.spacing,
1121
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
1122
- _ref$background = _ref.background,
1123
- background = _ref$background === void 0 ? null : _ref$background,
1124
- _ref$introBackground = _ref.introBackground,
1125
- introBackground = _ref$introBackground === void 0 ? null : _ref$introBackground,
1126
- _ref$introButton = _ref.introButton,
1127
- introButton = _ref$introButton === void 0 ? null : _ref$introButton,
1128
- _ref$nextButton = _ref.nextButton,
1129
- nextButton = _ref$nextButton === void 0 ? null : _ref$nextButton,
1130
- _ref$header = _ref.header,
1131
- header = _ref$header === void 0 ? null : _ref$header,
1132
- _ref$footer = _ref.footer,
1133
- footer = _ref$footer === void 0 ? null : _ref$footer,
1134
- _ref$current = _ref.current,
1135
- current = _ref$current === void 0 ? true : _ref$current,
1136
- _ref$active = _ref.active,
1137
- active = _ref$active === void 0 ? true : _ref$active,
1138
- _ref$transitions = _ref.transitions,
1139
- transitions = _ref$transitions === void 0 ? null : _ref$transitions,
1140
- _ref$transitionStagge = _ref.transitionStagger,
1141
- transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
1142
- _ref$type = _ref.type,
1143
- type = _ref$type === void 0 ? null : _ref$type,
1144
- _ref$className = _ref.className,
1145
- className = _ref$className === void 0 ? null : _ref$className;
1146
- var screenId = id || 'screen-id';
1147
- var trackScreenEvent = useTrackScreenEvent(type);
1148
- var _useScreenSize = useScreenSize(),
1149
- width = _useScreenSize.width,
1150
- height = _useScreenSize.height,
1151
- resolution = _useScreenSize.resolution;
1152
- var _useViewerContext = useViewerContext(),
1153
- viewerTopHeight = _useViewerContext.topHeight,
1154
- viewerBottomHeight = _useViewerContext.bottomHeight,
1155
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1156
- var _useScreenRenderConte = useScreenRenderContext(),
1157
- isView = _useScreenRenderConte.isView,
1158
- isPreview = _useScreenRenderConte.isPreview,
1159
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
1160
- isEdit = _useScreenRenderConte.isEdit,
1161
- isStatic = _useScreenRenderConte.isStatic,
1162
- isCapture = _useScreenRenderConte.isCapture;
1163
- var _usePlaybackContext = usePlaybackContext(),
1164
- muted = _usePlaybackContext.muted;
1879
+ function QuizMultipleScreen({
1880
+ id = null,
1881
+ layout = 'middle',
1882
+ introLayout = null,
1883
+ title = null,
1884
+ description = null,
1885
+ questions = null,
1886
+ results = null,
1887
+ buttonsStyle = null,
1888
+ inactiveButtonsStyle = null,
1889
+ buttonsTextStyle = null,
1890
+ inactiveButtonsTextStyle = null,
1891
+ questionsHeadingStyle = null,
1892
+ resultsHeadingStyle = null,
1893
+ resultsTextStyle = null,
1894
+ feedbackTextStyle = null,
1895
+ numbersTextStyle = null,
1896
+ goodAnswerColor = null,
1897
+ badAnswerColor = null,
1898
+ spacing = 20,
1899
+ background = null,
1900
+ introBackground = null,
1901
+ introButton = null,
1902
+ nextButton = null,
1903
+ header = null,
1904
+ footer = null,
1905
+ current = true,
1906
+ active = true,
1907
+ transitions = null,
1908
+ transitionStagger = 100,
1909
+ type = null,
1910
+ mediaRef: customMediaRef = null,
1911
+ className = null
1912
+ }) {
1913
+ const screenId = id || 'screen-id';
1914
+ const trackScreenEvent = useTrackScreenEvent(type);
1915
+ const {
1916
+ width,
1917
+ height,
1918
+ resolution
1919
+ } = useScreenSize();
1920
+ const {
1921
+ topHeight: viewerTopHeight,
1922
+ bottomHeight: viewerBottomHeight,
1923
+ bottomSidesWidth: viewerBottomSidesWidth
1924
+ } = useViewerContext();
1925
+ const {
1926
+ isView,
1927
+ isPreview,
1928
+ isPlaceholder,
1929
+ isEdit,
1930
+ isStatic,
1931
+ isCapture
1932
+ } = useScreenRenderContext();
1933
+ const {
1934
+ muted
1935
+ } = usePlaybackContext();
1165
1936
 
1166
1937
  // console.log('isCurrentMedia', isCurrentMedia, mediaRef);
1167
1938
 
1168
- var _useViewerWebView = useViewerWebView(),
1169
- openWebView = _useViewerWebView.open;
1170
- var screenState = useScreenState();
1171
- var _ref2 = screenState !== null ? screenState.split('.') : [],
1172
- _ref3 = _slicedToArray(_ref2, 2),
1173
- _ref3$ = _ref3[0],
1174
- stateId = _ref3$ === void 0 ? null : _ref3$,
1175
- _ref3$2 = _ref3[1],
1176
- stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
1177
- var transitionPlaying = current;
1178
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
1179
- var hasButtonText = isTextFilled(nextButton);
1939
+ const {
1940
+ open: openWebView
1941
+ } = useViewerWebView();
1942
+ const screenState = useScreenState();
1943
+ const [stateId = null, stateIndex = 0] = screenState !== null ? screenState.split('.') : [];
1944
+ const transitionPlaying = current;
1945
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
1946
+ const hasButtonText = isTextFilled(nextButton);
1180
1947
 
1181
1948
  // Call to Action
1182
- var hasHeader = isHeaderFilled(header);
1183
- var hasFooter = isFooterFilled(footer);
1184
- var footerProps = getFooterProps(footer, {
1185
- isView: isView,
1186
- current: current,
1187
- openWebView: openWebView,
1188
- isPreview: isPreview
1949
+ const hasHeader = isHeaderFilled(header);
1950
+ const hasFooter = isFooterFilled(footer);
1951
+ const footerProps = getFooterProps(footer, {
1952
+ isView,
1953
+ current,
1954
+ openWebView,
1955
+ isPreview
1189
1956
  });
1190
- var _useDimensionObserver = useDimensionObserver(),
1191
- headerRef = _useDimensionObserver.ref,
1192
- _useDimensionObserver2 = _useDimensionObserver.height,
1193
- headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1194
- var _useDimensionObserver3 = useDimensionObserver(),
1195
- footerRef = _useDimensionObserver3.ref,
1196
- _useDimensionObserver4 = _useDimensionObserver3.height,
1197
- callToActionHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
1198
- var showInstantAnswer = isStatic || isCapture;
1199
- var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
1200
- var _useState = useState(null),
1201
- _useState2 = _slicedToArray(_useState, 2),
1202
- userAnswers = _useState2[0],
1203
- setUserAnswers = _useState2[1];
1204
- var initialQuestionIndex = 'intro';
1957
+ const {
1958
+ ref: headerRef,
1959
+ height: headerHeight = 0
1960
+ } = useDimensionObserver();
1961
+ const {
1962
+ ref: footerRef,
1963
+ height: callToActionHeight = 0
1964
+ } = useDimensionObserver();
1965
+ const showInstantAnswer = isStatic || isCapture;
1966
+ const hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
1967
+ const [userAnswers, setUserAnswers] = useState(null);
1968
+ let initialQuestionIndex = 'intro';
1205
1969
  if (stateId !== null) {
1206
1970
  initialQuestionIndex = stateId === 'questions' ? parseInt(stateIndex, 10) : stateId;
1207
1971
  } else if (isPlaceholder || !hasIntro) {
1208
1972
  initialQuestionIndex = 0;
1209
1973
  }
1210
- var _useState3 = useState(initialQuestionIndex),
1211
- _useState4 = _slicedToArray(_useState3, 2),
1212
- questionIndex = _useState4[0],
1213
- setQuestionIndex = _useState4[1];
1214
- useEffect(function () {
1974
+ const [questionIndex, setQuestionIndex] = useState(initialQuestionIndex);
1975
+ useEffect(() => {
1215
1976
  if (isPreview && hasIntro && questionIndex !== 'intro') {
1216
1977
  setQuestionIndex('intro');
1217
1978
  }
1218
1979
  }, [isPreview, hasIntro, questionIndex, setQuestionIndex]);
1219
- var onAnswerClick = useCallback(function (answer, answerIndex) {
1220
- setUserAnswers(_objectSpread(_objectSpread({}, userAnswers), {}, _defineProperty({}, questionIndex, answerIndex)));
1221
- trackScreenEvent('click_answer', "Question #".concat(questionIndex + 1, " ").concat(answerIndex + 1, ": ").concat(answer.label.body), {
1980
+ const onAnswerClick = useCallback((answer, answerIndex) => {
1981
+ setUserAnswers({
1982
+ ...userAnswers,
1983
+ [questionIndex]: answerIndex
1984
+ });
1985
+ trackScreenEvent('click_answer', `Question #${questionIndex + 1} ${answerIndex + 1}: ${answer.label.body}`, {
1222
1986
  linkType: 'quiz_answer',
1223
1987
  question: questions[questionIndex],
1224
- questionIndex: questionIndex,
1225
- answer: answer,
1226
- answerIndex: answerIndex
1988
+ questionIndex,
1989
+ answer,
1990
+ answerIndex
1227
1991
  });
1228
1992
  }, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
1229
- var onClickIntroButton = useCallback(function () {
1993
+ const onClickIntroButton = useCallback(() => {
1230
1994
  setQuestionIndex(0);
1231
1995
  }, [setQuestionIndex]);
1232
- useEffect(function () {
1996
+ useEffect(() => {
1233
1997
  if (!current && isEdit && userAnswers !== null) {
1234
1998
  setUserAnswers(null);
1235
1999
  }
1236
2000
  }, [isEdit, current, userAnswers, setUserAnswers]);
1237
- var hasQuestions = questions !== null && questions.length > 0;
1238
- var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
1239
- var _ref4 = currentQuestion || {},
1240
- _ref4$text = _ref4.text,
1241
- text = _ref4$text === void 0 ? null : _ref4$text,
1242
- _ref4$answers = _ref4.answers,
1243
- answers = _ref4$answers === void 0 ? [] : _ref4$answers,
1244
- _ref4$background = _ref4.background,
1245
- questionBackground = _ref4$background === void 0 ? null : _ref4$background,
1246
- _ref4$layout = _ref4.layout,
1247
- questionLayout = _ref4$layout === void 0 ? null : _ref4$layout,
1248
- _ref4$keypadLayout = _ref4.keypadLayout,
1249
- keypadLayout = _ref4$keypadLayout === void 0 ? null : _ref4$keypadLayout,
1250
- _ref4$result = _ref4.result,
1251
- questionResult = _ref4$result === void 0 ? null : _ref4$result,
1252
- _ref4$resultImage = _ref4.resultImage,
1253
- questionResultImage = _ref4$resultImage === void 0 ? null : _ref4$resultImage;
1254
- var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
1255
- var answer = currentAnsweredIndex !== null && typeof answers[currentAnsweredIndex] !== 'undefined' ? answers[currentAnsweredIndex] : null;
1256
- var _ref5 = answer || {},
1257
- _ref5$result = _ref5.result,
1258
- answerResult = _ref5$result === void 0 ? null : _ref5$result;
1259
- var hasTrueFalse = answers !== null ? (answers || []).find(function (ans) {
1260
- return (ans === null || ans === void 0 ? void 0 : ans.good) === true || (ans === null || ans === void 0 ? void 0 : ans.good) === false;
1261
- }) !== undefined : false;
1262
- var goodAnswerIndex = answers !== null ? answers.findIndex(function (ans) {
1263
- return ans !== null && ans.good === true;
1264
- }) : null;
1265
- var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
1266
- var questionResultHasText = isTextFilled(questionResult);
1267
- var questionResultHasImage = isImageFilled(questionResultImage);
1268
- var answerResultHasText = isTextFilled(answerResult);
1269
- var hasResult = questionResultHasText || questionResultHasImage || answerResultHasText;
1270
- var onNextSlide = useCallback(function () {
2001
+ const hasQuestions = questions !== null && questions.length > 0;
2002
+ const currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
2003
+ const {
2004
+ text = null,
2005
+ answers = [],
2006
+ background: questionBackground = null,
2007
+ layout: questionLayout = null,
2008
+ keypadLayout = null,
2009
+ result: questionResult = null,
2010
+ resultImage: questionResultImage = null
2011
+ } = currentQuestion || {};
2012
+ const currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
2013
+ const answer_0 = currentAnsweredIndex !== null && typeof answers[currentAnsweredIndex] !== 'undefined' ? answers[currentAnsweredIndex] : null;
2014
+ const {
2015
+ result: answerResult = null
2016
+ } = answer_0 || {};
2017
+ const hasTrueFalse = answers !== null ? (answers || []).find(ans => ans?.good === true || ans?.good === false) !== undefined : false;
2018
+ const goodAnswerIndex = answers !== null ? answers.findIndex(ans_0 => ans_0 !== null && ans_0.good === true) : null;
2019
+ const withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
2020
+ const questionResultHasText = isTextFilled(questionResult);
2021
+ const questionResultHasImage = isImageFilled(questionResultImage);
2022
+ const answerResultHasText = isTextFilled(answerResult);
2023
+ const hasResult = questionResultHasText || questionResultHasImage || answerResultHasText;
2024
+ const onNextSlide = useCallback(() => {
1271
2025
  // console.log('onNextSlide', isEdit, isPreview);
1272
2026
  if (isEdit || isPreview) {
1273
2027
  return;
1274
2028
  }
1275
- var nextIndex = questionIndex + 1;
1276
- var questionsCount = questions.length;
2029
+ const nextIndex = questionIndex + 1;
2030
+ const questionsCount = questions.length;
1277
2031
  if (nextIndex < questionsCount) {
1278
2032
  setQuestionIndex(nextIndex);
1279
2033
  } else if (nextIndex === questionsCount) {
1280
2034
  setQuestionIndex('results');
1281
2035
  }
1282
2036
  }, [questions, questionIndex, setQuestionIndex, isEdit, isPreview]);
1283
- var currentPoints = useMemo(function () {
1284
- return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
1285
- var _ref6 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1286
- _ref6$answers = _ref6.answers,
1287
- questionAnswers = _ref6$answers === void 0 ? [] : _ref6$answers;
1288
- var answerIndex = userAnswers[answerQuestionIndex];
1289
- var _ref7 = questionAnswers[answerIndex] || {},
1290
- _ref7$points = _ref7.points,
1291
- points = _ref7$points === void 0 ? 0 : _ref7$points;
1292
- return points + totalPoints;
1293
- }, 0) : 0;
1294
- }, [userAnswers, questions]);
1295
- var isIntro = hasIntro && questionIndex === 'intro';
1296
- var isResults = questionIndex === 'results';
1297
- var isQuestion = !isIntro && !isResults;
1298
- var currentResult = useMemo(function () {
2037
+ const currentPoints = useMemo(() => userAnswers !== null ? Object.keys(userAnswers).reduce((totalPoints, answerQuestionIndex) => {
2038
+ const {
2039
+ answers: questionAnswers = []
2040
+ } = questions !== null ? questions[answerQuestionIndex] || {} : {};
2041
+ const answerIndex_0 = userAnswers[answerQuestionIndex];
2042
+ const {
2043
+ points = 0
2044
+ } = questionAnswers[answerIndex_0] || {};
2045
+ return points + totalPoints;
2046
+ }, 0) : 0, [userAnswers, questions]);
2047
+ const isIntro = hasIntro && questionIndex === 'intro';
2048
+ const isResults = questionIndex === 'results';
2049
+ const isQuestion = !isIntro && !isResults;
2050
+ const currentResult = useMemo(() => {
1299
2051
  if (!isResults) {
1300
2052
  return null;
1301
2053
  }
1302
2054
  if (stateId === 'results') {
1303
2055
  return (results || [])[parseInt(stateIndex, 10)] || null;
1304
2056
  }
1305
- return (results || []).sort(function (_ref8, _ref9) {
1306
- var _ref8$points = _ref8.points,
1307
- pointsA = _ref8$points === void 0 ? 0 : _ref8$points;
1308
- var _ref9$points = _ref9.points,
1309
- pointsB = _ref9$points === void 0 ? 0 : _ref9$points;
2057
+ return (results || []).sort(({
2058
+ points: pointsA = 0
2059
+ }, {
2060
+ points: pointsB = 0
2061
+ }) => {
1310
2062
  if (pointsA === pointsB) {
1311
2063
  return 0;
1312
2064
  }
1313
2065
  return pointsA > pointsB ? 1 : -1;
1314
- }).reduce(function (lastResult, result) {
1315
- var _ref0 = lastResult || {},
1316
- _ref0$points = _ref0.points,
1317
- lastPoints = _ref0$points === void 0 ? 0 : _ref0$points;
1318
- var _ref1 = result || {},
1319
- _ref1$points = _ref1.points,
1320
- points = _ref1$points === void 0 ? 0 : _ref1$points;
1321
- return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
2066
+ }).reduce((lastResult, result) => {
2067
+ const {
2068
+ points: lastPoints = 0
2069
+ } = lastResult || {};
2070
+ const {
2071
+ points: points_0 = 0
2072
+ } = result || {};
2073
+ return currentPoints >= (lastPoints || 0) && currentPoints >= points_0 ? result : lastResult;
1322
2074
  }, null);
1323
2075
  }, [isResults, results, currentPoints, stateId, stateIndex]);
1324
- useEffect(function () {
2076
+ useEffect(() => {
1325
2077
  if (currentResult !== null && isResults) {
1326
- var _ref10 = currentResult || {},
1327
- _ref10$title = _ref10.title,
1328
- resultTitle = _ref10$title === void 0 ? null : _ref10$title,
1329
- _ref10$points = _ref10.points,
1330
- points = _ref10$points === void 0 ? null : _ref10$points;
1331
- trackScreenEvent('view_result', "Result: ".concat((resultTitle === null || resultTitle === void 0 ? void 0 : resultTitle.body) || 'No title'), {
1332
- resultPoints: points || null,
2078
+ const {
2079
+ title: resultTitle = null,
2080
+ points: points_1 = null
2081
+ } = currentResult || {};
2082
+ trackScreenEvent('view_result', `Result: ${resultTitle?.body || 'No title'}`, {
2083
+ resultPoints: points_1 || null,
1333
2084
  userPoints: currentPoints || null
1334
2085
  });
1335
2086
  }
1336
2087
  }, [currentResult, currentPoints, isResults, trackScreenEvent]);
1337
- var _ref11 = currentResult || {},
1338
- _ref11$background = _ref11.background,
1339
- resultBackground = _ref11$background === void 0 ? null : _ref11$background,
1340
- _ref11$layout = _ref11.layout,
1341
- resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
1342
- var _useQuizCreate = useQuizCreate({
1343
- screenId: screenId
1344
- }),
1345
- submitQuiz = _useQuizCreate.create;
1346
- useEffect(function () {
2088
+ const {
2089
+ background: resultBackground = null,
2090
+ layout: resultLayout = null
2091
+ } = currentResult || {};
2092
+ const {
2093
+ create: submitQuiz
2094
+ } = useQuizCreate({
2095
+ screenId
2096
+ });
2097
+ useEffect(() => {
1347
2098
  if (!isResults || !isView) {
1348
2099
  return;
1349
2100
  }
1350
- var finalUserAnswers = isArray(userAnswers) ? JSON.stringify(userAnswers) : userAnswers;
2101
+ const finalUserAnswers = isArray(userAnswers) ? JSON.stringify(userAnswers) : userAnswers;
1351
2102
  submitQuiz({
1352
2103
  choice: finalUserAnswers,
1353
2104
  value: currentPoints
@@ -1355,7 +2106,7 @@ function QuizMultipleScreen(_ref) {
1355
2106
  }, [isView, isResults, userAnswers, submitQuiz]);
1356
2107
 
1357
2108
  // Switch state
1358
- useEffect(function () {
2109
+ useEffect(() => {
1359
2110
  if (!isEdit && !isPreview) {
1360
2111
  return;
1361
2112
  }
@@ -1367,8 +2118,8 @@ function QuizMultipleScreen(_ref) {
1367
2118
  setQuestionIndex('intro');
1368
2119
  }
1369
2120
  }, [stateId, stateIndex, isEdit, isPreview, setQuestionIndex]);
1370
- var finalBackground = background;
1371
- var backgroundKey = 'background';
2121
+ let finalBackground = background;
2122
+ let backgroundKey = 'background';
1372
2123
  if (isIntro && introBackground !== null) {
1373
2124
  finalBackground = introBackground;
1374
2125
  backgroundKey = 'results';
@@ -1377,22 +2128,24 @@ function QuizMultipleScreen(_ref) {
1377
2128
  backgroundKey = 'results';
1378
2129
  } else if (isQuestion && questionBackground !== null) {
1379
2130
  finalBackground = questionBackground;
1380
- backgroundKey = "question_".concat(questionIndex);
1381
- }
1382
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, finalBackground !== null, backgroundKey),
1383
- mediaRef = _usePlaybackMediaRef.ref,
1384
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
1385
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
1386
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
1387
- var backgroundShouldLoad = current || active;
2131
+ backgroundKey = `question_${questionIndex}`;
2132
+ }
2133
+ const {
2134
+ ref: mediaRef,
2135
+ isCurrent: isCurrentMedia = false
2136
+ } = usePlaybackMediaRef(current, finalBackground !== null, backgroundKey);
2137
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
2138
+ const backgroundShouldLoad = current || active;
1388
2139
 
1389
2140
  // Transition direction
1390
- var lastQuestionIndexRef = useRef(questionIndex);
1391
- var direction = useMemo(function () {
2141
+ const lastQuestionIndexRef = useRef(questionIndex);
2142
+ const direction = useMemo(() => {
1392
2143
  if (questionIndex === lastQuestionIndexRef.current) {
1393
2144
  return null;
1394
2145
  }
1395
- var lastQuestionIndex = lastQuestionIndexRef.current;
2146
+ const {
2147
+ current: lastQuestionIndex
2148
+ } = lastQuestionIndexRef;
1396
2149
  lastQuestionIndexRef.current = questionIndex;
1397
2150
  if (questionIndex === 'intro' || lastQuestionIndex === 'results' || lastQuestionIndex > questionIndex) {
1398
2151
  return 'left';
@@ -1400,43 +2153,37 @@ function QuizMultipleScreen(_ref) {
1400
2153
  lastQuestionIndexRef.current = questionIndex;
1401
2154
  return 'right';
1402
2155
  }, [questionIndex]);
1403
- var scrollingDisabled = !isEdit && transitionDisabled || !current || isIntro;
1404
- var _useState5 = useState(false),
1405
- _useState6 = _slicedToArray(_useState5, 2),
1406
- scrolledBottom = _useState6[0],
1407
- setScrolledBottom = _useState6[1];
1408
- var onScrolledBottom = useCallback(function (_ref12) {
1409
- var initial = _ref12.initial;
2156
+ const scrollingDisabled = !isEdit && transitionDisabled || !current || isIntro;
2157
+ const [scrolledBottom, setScrolledBottom] = useState(false);
2158
+ const onScrolledBottom = useCallback(({
2159
+ initial
2160
+ }) => {
1410
2161
  if (initial) {
1411
2162
  trackScreenEvent('scroll', 'Screen');
1412
2163
  }
1413
2164
  setScrolledBottom(true);
1414
2165
  }, [trackScreenEvent]);
1415
- var onScrolledNotBottom = useCallback(function () {
2166
+ const onScrolledNotBottom = useCallback(() => {
1416
2167
  setScrolledBottom(false);
1417
2168
  }, [setScrolledBottom]);
1418
- var onScrolledTrigger = useCallback(function () {
1419
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
2169
+ const onScrolledTrigger = useCallback((trigger = null) => {
1420
2170
  if (trigger !== null) {
1421
- var scrollPercent = Math.round(trigger * 100);
2171
+ const scrollPercent = Math.round(trigger * 100);
1422
2172
  trackScreenEvent('scroll', scrollPercent, {
1423
- scrollPercent: scrollPercent
2173
+ scrollPercent
1424
2174
  });
1425
2175
  }
1426
2176
  }, [trackScreenEvent]);
1427
- var _useState7 = useState(false),
1428
- _useState8 = _slicedToArray(_useState7, 2),
1429
- hasScroll = _useState8[0],
1430
- setHasScroll = _useState8[1];
1431
- var onScrollHeightChange = useCallback(function (_ref13) {
1432
- var _ref13$canScroll = _ref13.canScroll,
1433
- canScroll = _ref13$canScroll === void 0 ? false : _ref13$canScroll;
2177
+ const [hasScroll, setHasScroll] = useState(false);
2178
+ const onScrollHeightChange = useCallback(({
2179
+ canScroll = false
2180
+ }) => {
1434
2181
  setHasScroll(canScroll);
1435
2182
  }, [setHasScroll]);
1436
- var onQuizReset = useCallback(function () {
2183
+ const onQuizReset = useCallback(() => {
1437
2184
  setUserAnswers(null);
1438
2185
  }, [setUserAnswers]);
1439
- var verticalAlign = layout;
2186
+ let verticalAlign = layout;
1440
2187
  if (isIntro && introLayout !== null) {
1441
2188
  verticalAlign = introLayout;
1442
2189
  } else if (isQuestion && questionLayout !== null) {
@@ -1444,11 +2191,11 @@ function QuizMultipleScreen(_ref) {
1444
2191
  } else if (isResults && resultLayout !== null) {
1445
2192
  verticalAlign = questionLayout;
1446
2193
  }
1447
- var showPoints = isEdit;
1448
- var showReset = isEdit && currentAnsweredIndex !== null;
2194
+ const showPoints = isEdit;
2195
+ const showReset = isEdit && currentAnsweredIndex !== null;
1449
2196
 
1450
2197
  // Content transition items (captured for leaving animations)
1451
- var contentItems = [];
2198
+ const contentItems = [];
1452
2199
  if (isIntro) {
1453
2200
  contentItems.push({
1454
2201
  key: 'intro',
@@ -1476,7 +2223,7 @@ function QuizMultipleScreen(_ref) {
1476
2223
  }
1477
2224
  if (isQuestion) {
1478
2225
  contentItems.push({
1479
- key: "question-".concat(questionIndex),
2226
+ key: `question-${questionIndex}`,
1480
2227
  element: /*#__PURE__*/jsx(Question, {
1481
2228
  index: questionIndex,
1482
2229
  totalCount: (questions || []).length,
@@ -1535,16 +2282,14 @@ function QuizMultipleScreen(_ref) {
1535
2282
  buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
1536
2283
  className: styles$2.nextButton,
1537
2284
  onClick: onNextSlide,
1538
- children: hasButtonText ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, nextButton), {}, {
2285
+ children: hasButtonText ? /*#__PURE__*/jsx(Text, {
2286
+ ...nextButton,
1539
2287
  className: styles$2.label
1540
- })) : /*#__PURE__*/jsx("span", {
2288
+ }) : /*#__PURE__*/jsx("span", {
1541
2289
  className: styles$2.label,
1542
2290
  children: /*#__PURE__*/jsx(FormattedMessage, {
1543
2291
  id: "SVLGTA",
1544
- defaultMessage: [{
1545
- "type": 0,
1546
- "value": "Next"
1547
- }]
2292
+ defaultMessage: "Next"
1548
2293
  })
1549
2294
  })
1550
2295
  })
@@ -1554,7 +2299,8 @@ function QuizMultipleScreen(_ref) {
1554
2299
  if (isResults) {
1555
2300
  contentItems.push({
1556
2301
  key: 'results',
1557
- element: /*#__PURE__*/jsx(Results, _objectSpread(_objectSpread({}, currentResult), {}, {
2302
+ element: /*#__PURE__*/jsx(Results, {
2303
+ ...currentResult,
1558
2304
  resultsHeadingStyle: resultsHeadingStyle,
1559
2305
  resultsTextStyle: resultsTextStyle,
1560
2306
  layout: resultLayout || layout,
@@ -1569,51 +2315,39 @@ function QuizMultipleScreen(_ref) {
1569
2315
  paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
1570
2316
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1571
2317
  } : null
1572
- }))
2318
+ })
1573
2319
  });
1574
2320
  }
1575
- var contentTransitions = useTransition(contentItems, {
1576
- keys: function keys(item) {
1577
- return item.key;
1578
- },
1579
- from: function from(item) {
1580
- return item.key === 'next' ? {
1581
- transform: 'translateX(0%)'
1582
- } : {
1583
- transform: direction === 'left' ? 'translateX(-100%)' : 'translateX(100%)'
1584
- };
2321
+ const contentTransitions = useTransition(contentItems, {
2322
+ keys: item => item.key,
2323
+ from: item_0 => item_0.key === 'next' ? {
2324
+ transform: 'translateX(0%)'
2325
+ } : {
2326
+ transform: direction === 'left' ? 'translateX(-100%)' : 'translateX(100%)'
1585
2327
  },
1586
2328
  enter: {
1587
2329
  transform: 'translateX(0%)'
1588
2330
  },
1589
- leave: function leave(item) {
1590
- return item.key === 'next' ? {
1591
- transform: 'translateX(0%)'
1592
- } : {
1593
- transform: direction === 'left' ? 'translateX(100%)' : 'translateX(-100%)'
1594
- };
2331
+ leave: item_1 => item_1.key === 'next' ? {
2332
+ transform: 'translateX(0%)'
2333
+ } : {
2334
+ transform: direction === 'left' ? 'translateX(100%)' : 'translateX(-100%)'
1595
2335
  },
1596
- config: function config(item) {
1597
- return item.key === 'next' ? {
1598
- duration: 0
1599
- } : {
1600
- duration: 1000,
1601
- easing: easings.easeInOutSine
1602
- };
2336
+ config: item_2 => item_2.key === 'next' ? {
2337
+ duration: 0
2338
+ } : {
2339
+ duration: 1000,
2340
+ easing: easings.easeInOutSine
1603
2341
  }
1604
2342
  });
1605
2343
 
1606
2344
  // Background transition
1607
- var bgItem = useMemo(function () {
1608
- return {
1609
- key: backgroundKey,
1610
- background: finalBackground || null
1611
- };
1612
- }, [backgroundKey, finalBackground]);
1613
- var bgTransitions = useTransition(bgItem, {
1614
- keys: function keys(item) {
1615
- return item.key;
1616
- },
2345
+ const bgItem = useMemo(() => ({
2346
+ key: backgroundKey,
2347
+ background: finalBackground || null
2348
+ }), [backgroundKey, finalBackground]);
2349
+ const bgTransitions = useTransition(bgItem, {
2350
+ keys: item_3 => item_3.key,
1617
2351
  from: {
1618
2352
  opacity: 0
1619
2353
  },
@@ -1637,12 +2371,9 @@ function QuizMultipleScreen(_ref) {
1637
2371
  className: styles$2.content,
1638
2372
  children: [showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/jsxs("div", {
1639
2373
  className: styles$2.points,
1640
- children: ["".concat(currentPoints, " "), /*#__PURE__*/jsx(FormattedMessage, {
2374
+ children: [`${currentPoints} `, /*#__PURE__*/jsx(FormattedMessage, {
1641
2375
  id: "Xr1v8l",
1642
- defaultMessage: [{
1643
- "type": 0,
1644
- "value": "points gained"
1645
- }]
2376
+ defaultMessage: "points gained"
1646
2377
  })]
1647
2378
  }) : null, showReset ? /*#__PURE__*/jsx(Button$1, {
1648
2379
  className: styles$2.reset,
@@ -1652,16 +2383,20 @@ function QuizMultipleScreen(_ref) {
1652
2383
  }),
1653
2384
  onClick: onQuizReset
1654
2385
  }) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
1655
- className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
2386
+ className: classNames([styles$2.header, {
2387
+ [styles$2.disabled]: scrolledBottom && !scrollingDisabled && hasScroll
2388
+ }]),
1656
2389
  ref: headerRef,
1657
2390
  style: {
1658
2391
  paddingTop: spacing / 2,
1659
2392
  paddingLeft: spacing,
1660
2393
  paddingRight: spacing,
1661
2394
  paddingBottom: spacing,
1662
- transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
2395
+ transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
1663
2396
  },
1664
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
2397
+ children: /*#__PURE__*/jsx(Header, {
2398
+ ...header
2399
+ })
1665
2400
  }) : null, /*#__PURE__*/jsx(Scroll, {
1666
2401
  verticalAlign: verticalAlign,
1667
2402
  disabled: scrollingDisabled,
@@ -1675,66 +2410,70 @@ function QuizMultipleScreen(_ref) {
1675
2410
  position: 'absolute',
1676
2411
  inset: '0'
1677
2412
  },
1678
- children: contentTransitions(function (springStyle, item) {
1679
- var isActive = contentItems.some(function (ci) {
1680
- return ci.key === item.key;
1681
- });
2413
+ children: contentTransitions((springStyle, item_4) => {
2414
+ const isActive = contentItems.some(ci => ci.key === item_4.key);
1682
2415
  return /*#__PURE__*/jsx(animated.div, {
1683
- style: _objectSpread(_objectSpread({}, springStyle), !isActive ? {
1684
- position: 'absolute',
1685
- top: 0,
1686
- left: 0,
1687
- width: '100%',
1688
- minHeight: '100%',
1689
- zIndex: 0
1690
- } : {
1691
- position: 'relative',
1692
- zIndex: 1,
1693
- top: 0,
1694
- left: 0,
1695
- width: '100%',
1696
- minHeight: hasResult && currentAnsweredIndex !== null ? 0 : '100%'
1697
- }),
1698
- children: item.element
2416
+ style: {
2417
+ ...springStyle,
2418
+ ...(!isActive ? {
2419
+ position: 'absolute',
2420
+ top: 0,
2421
+ left: 0,
2422
+ width: '100%',
2423
+ minHeight: '100%',
2424
+ zIndex: 0
2425
+ } : {
2426
+ position: 'relative',
2427
+ zIndex: 1,
2428
+ top: 0,
2429
+ left: 0,
2430
+ width: '100%',
2431
+ minHeight: hasResult && currentAnsweredIndex !== null ? 0 : '100%'
2432
+ })
2433
+ },
2434
+ children: item_4.element
1699
2435
  });
1700
2436
  })
1701
2437
  })
1702
2438
  }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
1703
2439
  ref: footerRef,
1704
- className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
2440
+ className: classNames([styles$2.footer, {
2441
+ [styles$2.disabled]: !scrolledBottom
2442
+ }]),
1705
2443
  style: {
1706
2444
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
1707
2445
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
1708
2446
  paddingTop: spacing / 2,
1709
2447
  paddingBottom: spacing / 2,
1710
- transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
2448
+ transform: !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null
1711
2449
  },
1712
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
1713
- }) : null]
1714
- }), !isPlaceholder ? bgTransitions(function (springStyle, item) {
1715
- return /*#__PURE__*/jsx(animated.div, {
1716
- style: _objectSpread(_objectSpread({}, springStyle), {}, {
1717
- position: 'absolute',
1718
- top: 0,
1719
- left: 0,
1720
- width: '100%',
1721
- height: '100%',
1722
- zIndex: item.key === bgItem.key ? 1 : 0
1723
- }),
1724
- children: /*#__PURE__*/jsx(Background, {
1725
- background: item.background,
1726
- width: width,
1727
- height: height,
1728
- resolution: resolution,
1729
- playing: item.key === bgItem.key && backgroundPlaying,
1730
- muted: muted,
1731
- shouldLoad: backgroundShouldLoad,
1732
- mediaRef: item.key === bgItem.key ? mediaRef : null,
1733
- className: styles$2.background,
1734
- withoutVideo: isPreview
2450
+ children: /*#__PURE__*/jsx(Footer, {
2451
+ ...footerProps
1735
2452
  })
1736
- });
1737
- }) : null]
2453
+ }) : null]
2454
+ }), !isPlaceholder ? bgTransitions((springStyle_0, item_5) => /*#__PURE__*/jsx(animated.div, {
2455
+ style: {
2456
+ ...springStyle_0,
2457
+ position: 'absolute',
2458
+ top: 0,
2459
+ left: 0,
2460
+ width: '100%',
2461
+ height: '100%',
2462
+ zIndex: item_5.key === bgItem.key ? 1 : 0
2463
+ },
2464
+ children: /*#__PURE__*/jsx(Background, {
2465
+ background: item_5.background,
2466
+ width: width,
2467
+ height: height,
2468
+ resolution: resolution,
2469
+ playing: item_5.key === bgItem.key && backgroundPlaying,
2470
+ muted: muted,
2471
+ shouldLoad: backgroundShouldLoad,
2472
+ mediaRef: item_5.key === bgItem.key ? mergeRefs(mediaRef, customMediaRef) : null,
2473
+ className: styles$2.background,
2474
+ withoutVideo: isPreview
2475
+ })
2476
+ })) : null]
1738
2477
  });
1739
2478
  }
1740
2479
 
@@ -1744,19 +2483,13 @@ var definition = [{
1744
2483
  group: {
1745
2484
  label: defineMessage({
1746
2485
  id: "ZiWlL6",
1747
- defaultMessage: [{
1748
- "type": 0,
1749
- "value": "Questions"
1750
- }]
2486
+ defaultMessage: "Questions"
1751
2487
  }),
1752
2488
  order: 7
1753
2489
  },
1754
2490
  title: defineMessage({
1755
2491
  id: "zW7IVm",
1756
- defaultMessage: [{
1757
- "type": 0,
1758
- "value": "Quiz"
1759
- }]
2492
+ defaultMessage: "Quiz"
1760
2493
  }),
1761
2494
  component: QuizScreen,
1762
2495
  layouts: ['top', 'middle', 'bottom', 'split'],
@@ -1778,10 +2511,7 @@ var definition = [{
1778
2511
  },
1779
2512
  label: defineMessage({
1780
2513
  id: "hVE7TA",
1781
- defaultMessage: [{
1782
- "type": 0,
1783
- "value": "Question"
1784
- }]
2514
+ defaultMessage: "Question"
1785
2515
  })
1786
2516
  }, {
1787
2517
  name: 'answers',
@@ -1793,10 +2523,7 @@ var definition = [{
1793
2523
  },
1794
2524
  label: defineMessage({
1795
2525
  id: "KHWeV7",
1796
- defaultMessage: [{
1797
- "type": 0,
1798
- "value": "Answers"
1799
- }]
2526
+ defaultMessage: "Answers"
1800
2527
  })
1801
2528
  }, {
1802
2529
  name: 'keypadLayout',
@@ -1811,20 +2538,14 @@ var definition = [{
1811
2538
  },
1812
2539
  label: defineMessage({
1813
2540
  id: "FjuRaw",
1814
- defaultMessage: [{
1815
- "type": 0,
1816
- "value": "Keypad settings"
1817
- }]
2541
+ defaultMessage: "Keypad settings"
1818
2542
  })
1819
2543
  }, {
1820
2544
  name: 'withoutTrueFalse',
1821
2545
  type: 'toggle',
1822
2546
  label: defineMessage({
1823
2547
  id: "LFziCV",
1824
- defaultMessage: [{
1825
- "type": 0,
1826
- "value": "Without right/wrong icon"
1827
- }]
2548
+ defaultMessage: "Without right/wrong icon"
1828
2549
  })
1829
2550
  }, {
1830
2551
  name: 'result',
@@ -1834,110 +2555,77 @@ var definition = [{
1834
2555
  },
1835
2556
  label: defineMessage({
1836
2557
  id: "iQ5Uf7",
1837
- defaultMessage: [{
1838
- "type": 0,
1839
- "value": "Default feedback"
1840
- }]
2558
+ defaultMessage: "Default feedback"
1841
2559
  })
1842
2560
  }, {
1843
2561
  name: 'resultImage',
1844
2562
  type: 'visual',
1845
2563
  label: defineMessage({
1846
2564
  id: "yA4B6h",
1847
- defaultMessage: [{
1848
- "type": 0,
1849
- "value": "Result feedback image"
1850
- }]
2565
+ defaultMessage: "Result feedback image"
1851
2566
  })
1852
2567
  }, {
1853
2568
  type: 'fields',
1854
2569
  isList: true,
1855
2570
  label: defineMessage({
1856
2571
  id: "R9DB4a",
1857
- defaultMessage: [{
1858
- "type": 0,
1859
- "value": "Styles"
1860
- }]
2572
+ defaultMessage: "Styles"
1861
2573
  }),
1862
2574
  fields: [{
1863
2575
  name: 'buttonsLayout',
1864
2576
  type: 'button-layout',
1865
2577
  label: defineMessage({
1866
2578
  id: "8Dmlwh",
1867
- defaultMessage: [{
1868
- "type": 0,
1869
- "value": "Answer button layout"
1870
- }]
2579
+ defaultMessage: "Answer button layout"
1871
2580
  })
1872
2581
  }, {
1873
2582
  name: 'buttonsTextStyle',
1874
2583
  type: 'text-style-form',
1875
2584
  label: defineMessage({
1876
2585
  id: "gwPu/I",
1877
- defaultMessage: [{
1878
- "type": 0,
1879
- "value": "Buttons text"
1880
- }]
2586
+ defaultMessage: "Buttons text"
1881
2587
  })
1882
2588
  }, {
1883
2589
  name: 'buttonsStyle',
1884
2590
  type: 'box-style-form',
1885
2591
  label: defineMessage({
1886
2592
  id: "l5uLMd",
1887
- defaultMessage: [{
1888
- "type": 0,
1889
- "value": "Buttons"
1890
- }]
2593
+ defaultMessage: "Buttons"
1891
2594
  })
1892
2595
  }, {
1893
2596
  name: 'inactiveButtonsTextStyle',
1894
2597
  type: 'text-style-form',
1895
2598
  label: defineMessage({
1896
2599
  id: "my7Kox",
1897
- defaultMessage: [{
1898
- "type": 0,
1899
- "value": "Inactive buttons text"
1900
- }]
2600
+ defaultMessage: "Inactive buttons text"
1901
2601
  })
1902
2602
  }, {
1903
2603
  name: 'inactiveButtonsStyle',
1904
2604
  type: 'box-style-form',
1905
2605
  label: defineMessage({
1906
2606
  id: "xlFOg3",
1907
- defaultMessage: [{
1908
- "type": 0,
1909
- "value": "Inactive buttons"
1910
- }]
2607
+ defaultMessage: "Inactive buttons"
1911
2608
  })
1912
2609
  }, {
1913
2610
  name: 'feedbackTextStyle',
1914
2611
  type: 'text-style-form',
1915
2612
  label: defineMessage({
1916
2613
  id: "4w7K2K",
1917
- defaultMessage: [{
1918
- "type": 0,
1919
- "value": "Feedback text"
1920
- }]
2614
+ defaultMessage: "Feedback text"
1921
2615
  })
1922
2616
  }, {
1923
2617
  name: 'goodAnswerColor',
1924
2618
  type: 'color',
1925
2619
  label: defineMessage({
1926
2620
  id: "hZcXoa",
1927
- defaultMessage: [{
1928
- "type": 0,
1929
- "value": "Good answer icon color"
1930
- }]
2621
+ defaultMessage: "Good answer icon color"
1931
2622
  })
1932
2623
  }, {
1933
2624
  name: 'badAnswerColor',
1934
2625
  type: 'color',
1935
2626
  label: defineMessage({
1936
2627
  id: "NbTtNk",
1937
- defaultMessage: [{
1938
- "type": 0,
1939
- "value": "Bad answer icon color"
1940
- }]
2628
+ defaultMessage: "Bad answer icon color"
1941
2629
  })
1942
2630
  }]
1943
2631
  }, {
@@ -1945,20 +2633,14 @@ var definition = [{
1945
2633
  type: 'background',
1946
2634
  label: defineMessage({
1947
2635
  id: "+MPZRu",
1948
- defaultMessage: [{
1949
- "type": 0,
1950
- "value": "Background"
1951
- }]
2636
+ defaultMessage: "Background"
1952
2637
  })
1953
2638
  }, {
1954
2639
  name: 'header',
1955
2640
  type: 'header',
1956
2641
  label: defineMessage({
1957
2642
  id: "rhuDxI",
1958
- defaultMessage: [{
1959
- "type": 0,
1960
- "value": "Header"
1961
- }]
2643
+ defaultMessage: "Header"
1962
2644
  }),
1963
2645
  theme: {
1964
2646
  badge: {
@@ -1973,10 +2655,7 @@ var definition = [{
1973
2655
  type: 'footer',
1974
2656
  label: defineMessage({
1975
2657
  id: "g4nybp",
1976
- defaultMessage: [{
1977
- "type": 0,
1978
- "value": "Footer"
1979
- }]
2658
+ defaultMessage: "Footer"
1980
2659
  }),
1981
2660
  theme: {
1982
2661
  callToAction: {
@@ -1993,19 +2672,13 @@ var definition = [{
1993
2672
  group: {
1994
2673
  label: defineMessage({
1995
2674
  id: "ZiWlL6",
1996
- defaultMessage: [{
1997
- "type": 0,
1998
- "value": "Questions"
1999
- }]
2675
+ defaultMessage: "Questions"
2000
2676
  }),
2001
2677
  order: 7
2002
2678
  },
2003
2679
  title: defineMessage({
2004
2680
  id: "ACkeH6",
2005
- defaultMessage: [{
2006
- "type": 0,
2007
- "value": "Quiz with multiple questions"
2008
- }]
2681
+ defaultMessage: "Quiz with multiple questions"
2009
2682
  }),
2010
2683
  component: QuizMultipleScreen,
2011
2684
  layouts: ['top', 'middle', 'bottom', 'split'],
@@ -2013,10 +2686,7 @@ var definition = [{
2013
2686
  id: 'intro',
2014
2687
  label: defineMessage({
2015
2688
  id: "BgrRxZ",
2016
- defaultMessage: [{
2017
- "type": 0,
2018
- "value": "Intro"
2019
- }]
2689
+ defaultMessage: "Intro"
2020
2690
  }),
2021
2691
  fields: [{
2022
2692
  name: 'introLayout',
@@ -2025,10 +2695,7 @@ var definition = [{
2025
2695
  screenState: 'intro',
2026
2696
  label: defineMessage({
2027
2697
  id: "4iBXj2",
2028
- defaultMessage: [{
2029
- "type": 0,
2030
- "value": "Layout"
2031
- }]
2698
+ defaultMessage: "Layout"
2032
2699
  })
2033
2700
  }, {
2034
2701
  name: 'title',
@@ -2038,10 +2705,7 @@ var definition = [{
2038
2705
  },
2039
2706
  label: defineMessage({
2040
2707
  id: "+AEVbJ",
2041
- defaultMessage: [{
2042
- "type": 0,
2043
- "value": "Title"
2044
- }]
2708
+ defaultMessage: "Title"
2045
2709
  })
2046
2710
  }, {
2047
2711
  name: 'description',
@@ -2051,10 +2715,7 @@ var definition = [{
2051
2715
  },
2052
2716
  label: defineMessage({
2053
2717
  id: "ZCe0r4",
2054
- defaultMessage: [{
2055
- "type": 0,
2056
- "value": "Description"
2057
- }]
2718
+ defaultMessage: "Description"
2058
2719
  })
2059
2720
  }, {
2060
2721
  name: 'introButton',
@@ -2064,30 +2725,21 @@ var definition = [{
2064
2725
  },
2065
2726
  label: defineMessage({
2066
2727
  id: "i6bmbD",
2067
- defaultMessage: [{
2068
- "type": 0,
2069
- "value": "Button"
2070
- }]
2728
+ defaultMessage: "Button"
2071
2729
  })
2072
2730
  }, {
2073
2731
  name: 'introBackground',
2074
2732
  type: 'background',
2075
2733
  label: defineMessage({
2076
2734
  id: "cDj1mZ",
2077
- defaultMessage: [{
2078
- "type": 0,
2079
- "value": "Background"
2080
- }]
2735
+ defaultMessage: "Background"
2081
2736
  })
2082
2737
  }]
2083
2738
  }, {
2084
2739
  id: 'questions',
2085
2740
  label: defineMessage({
2086
2741
  id: "VMd1oG",
2087
- defaultMessage: [{
2088
- "type": 0,
2089
- "value": "Questions"
2090
- }]
2742
+ defaultMessage: "Questions"
2091
2743
  }),
2092
2744
  repeatable: true,
2093
2745
  fieldName: 'questions',
@@ -2099,10 +2751,7 @@ var definition = [{
2099
2751
  },
2100
2752
  label: defineMessage({
2101
2753
  id: "hVE7TA",
2102
- defaultMessage: [{
2103
- "type": 0,
2104
- "value": "Question"
2105
- }]
2754
+ defaultMessage: "Question"
2106
2755
  })
2107
2756
  }, {
2108
2757
  name: 'answers',
@@ -2114,10 +2763,7 @@ var definition = [{
2114
2763
  },
2115
2764
  label: defineMessage({
2116
2765
  id: "KHWeV7",
2117
- defaultMessage: [{
2118
- "type": 0,
2119
- "value": "Answers"
2120
- }]
2766
+ defaultMessage: "Answers"
2121
2767
  })
2122
2768
  }, {
2123
2769
  name: 'keypadLayout',
@@ -2132,10 +2778,7 @@ var definition = [{
2132
2778
  },
2133
2779
  label: defineMessage({
2134
2780
  id: "FjuRaw",
2135
- defaultMessage: [{
2136
- "type": 0,
2137
- "value": "Keypad settings"
2138
- }]
2781
+ defaultMessage: "Keypad settings"
2139
2782
  })
2140
2783
  },
2141
2784
  // {
@@ -2162,20 +2805,14 @@ var definition = [{
2162
2805
  type: 'background',
2163
2806
  label: defineMessage({
2164
2807
  id: "cDj1mZ",
2165
- defaultMessage: [{
2166
- "type": 0,
2167
- "value": "Background"
2168
- }]
2808
+ defaultMessage: "Background"
2169
2809
  })
2170
2810
  }]
2171
2811
  }, {
2172
2812
  id: 'results',
2173
2813
  label: defineMessage({
2174
2814
  id: "uiTxd7",
2175
- defaultMessage: [{
2176
- "type": 0,
2177
- "value": "Results"
2178
- }]
2815
+ defaultMessage: "Results"
2179
2816
  }),
2180
2817
  repeatable: true,
2181
2818
  fields: [{
@@ -2185,10 +2822,7 @@ var definition = [{
2185
2822
  screenState: 'results',
2186
2823
  label: defineMessage({
2187
2824
  id: "4iBXj2",
2188
- defaultMessage: [{
2189
- "type": 0,
2190
- "value": "Layout"
2191
- }]
2825
+ defaultMessage: "Layout"
2192
2826
  })
2193
2827
  }, {
2194
2828
  name: 'title',
@@ -2198,10 +2832,7 @@ var definition = [{
2198
2832
  },
2199
2833
  label: defineMessage({
2200
2834
  id: "+AEVbJ",
2201
- defaultMessage: [{
2202
- "type": 0,
2203
- "value": "Title"
2204
- }]
2835
+ defaultMessage: "Title"
2205
2836
  })
2206
2837
  }, {
2207
2838
  name: 'description',
@@ -2211,10 +2842,7 @@ var definition = [{
2211
2842
  },
2212
2843
  label: defineMessage({
2213
2844
  id: "ZCe0r4",
2214
- defaultMessage: [{
2215
- "type": 0,
2216
- "value": "Description"
2217
- }]
2845
+ defaultMessage: "Description"
2218
2846
  })
2219
2847
  }, {
2220
2848
  name: 'points',
@@ -2222,27 +2850,18 @@ var definition = [{
2222
2850
  isHorizontal: true,
2223
2851
  label: defineMessage({
2224
2852
  id: "jWAJW4",
2225
- defaultMessage: [{
2226
- "type": 0,
2227
- "value": "Points"
2228
- }]
2853
+ defaultMessage: "Points"
2229
2854
  }),
2230
2855
  help: defineMessage({
2231
2856
  id: "JoyIgA",
2232
- defaultMessage: [{
2233
- "type": 0,
2234
- "value": "Minimum points for this result"
2235
- }]
2857
+ defaultMessage: "Minimum points for this result"
2236
2858
  })
2237
2859
  }, {
2238
2860
  name: 'background',
2239
2861
  type: 'background',
2240
2862
  label: defineMessage({
2241
2863
  id: "cDj1mZ",
2242
- defaultMessage: [{
2243
- "type": 0,
2244
- "value": "Background"
2245
- }]
2864
+ defaultMessage: "Background"
2246
2865
  })
2247
2866
  }]
2248
2867
  }],
@@ -2252,19 +2871,13 @@ var definition = [{
2252
2871
  defaultValue: 'top',
2253
2872
  label: defineMessage({
2254
2873
  id: "OPxJx/",
2255
- defaultMessage: [{
2256
- "type": 0,
2257
- "value": "Layout"
2258
- }]
2874
+ defaultMessage: "Layout"
2259
2875
  })
2260
2876
  }, {
2261
2877
  type: 'fields',
2262
2878
  label: defineMessage({
2263
2879
  id: "LOknw0",
2264
- defaultMessage: [{
2265
- "type": 0,
2266
- "value": "Styles"
2267
- }]
2880
+ defaultMessage: "Styles"
2268
2881
  }),
2269
2882
  isList: true,
2270
2883
  fields: [{
@@ -2272,80 +2885,56 @@ var definition = [{
2272
2885
  type: 'box-style-form',
2273
2886
  label: defineMessage({
2274
2887
  id: "l5uLMd",
2275
- defaultMessage: [{
2276
- "type": 0,
2277
- "value": "Buttons"
2278
- }]
2888
+ defaultMessage: "Buttons"
2279
2889
  })
2280
2890
  }, {
2281
2891
  name: 'buttonsTextStyle',
2282
2892
  type: 'text-style-form',
2283
2893
  label: defineMessage({
2284
2894
  id: "gwPu/I",
2285
- defaultMessage: [{
2286
- "type": 0,
2287
- "value": "Buttons text"
2288
- }]
2895
+ defaultMessage: "Buttons text"
2289
2896
  })
2290
2897
  }, {
2291
2898
  name: 'inactiveButtonsTextStyle',
2292
2899
  type: 'text-style-form',
2293
2900
  label: defineMessage({
2294
2901
  id: "my7Kox",
2295
- defaultMessage: [{
2296
- "type": 0,
2297
- "value": "Inactive buttons text"
2298
- }]
2902
+ defaultMessage: "Inactive buttons text"
2299
2903
  })
2300
2904
  }, {
2301
2905
  name: 'inactiveButtonsStyle',
2302
2906
  type: 'box-style-form',
2303
2907
  label: defineMessage({
2304
2908
  id: "xlFOg3",
2305
- defaultMessage: [{
2306
- "type": 0,
2307
- "value": "Inactive buttons"
2308
- }]
2909
+ defaultMessage: "Inactive buttons"
2309
2910
  })
2310
2911
  }, {
2311
2912
  name: 'questionsHeadingStyle',
2312
2913
  type: 'text-style-form',
2313
2914
  label: defineMessage({
2314
2915
  id: "+FHxPO",
2315
- defaultMessage: [{
2316
- "type": 0,
2317
- "value": "Questions title"
2318
- }]
2916
+ defaultMessage: "Questions title"
2319
2917
  })
2320
2918
  }, {
2321
2919
  name: 'resultsHeadingStyle',
2322
2920
  type: 'text-style-form',
2323
2921
  label: defineMessage({
2324
2922
  id: "BnRW4y",
2325
- defaultMessage: [{
2326
- "type": 0,
2327
- "value": "Results title"
2328
- }]
2923
+ defaultMessage: "Results title"
2329
2924
  })
2330
2925
  }, {
2331
2926
  name: 'resultsTextStyle',
2332
2927
  type: 'text-style-form',
2333
2928
  label: defineMessage({
2334
2929
  id: "uDHTZn",
2335
- defaultMessage: [{
2336
- "type": 0,
2337
- "value": "Results description"
2338
- }]
2930
+ defaultMessage: "Results description"
2339
2931
  })
2340
2932
  }, {
2341
2933
  name: 'numbersTextStyle',
2342
2934
  type: 'text-style-form',
2343
2935
  label: defineMessage({
2344
2936
  id: "iltluX",
2345
- defaultMessage: [{
2346
- "type": 0,
2347
- "value": "Numbers text"
2348
- }]
2937
+ defaultMessage: "Numbers text"
2349
2938
  })
2350
2939
  }]
2351
2940
  }, {
@@ -2356,30 +2945,21 @@ var definition = [{
2356
2945
  },
2357
2946
  label: defineMessage({
2358
2947
  id: "Yu/PB5",
2359
- defaultMessage: [{
2360
- "type": 0,
2361
- "value": "Next button"
2362
- }]
2948
+ defaultMessage: "Next button"
2363
2949
  })
2364
2950
  }, {
2365
2951
  name: 'background',
2366
2952
  type: 'background',
2367
2953
  label: defineMessage({
2368
2954
  id: "cDj1mZ",
2369
- defaultMessage: [{
2370
- "type": 0,
2371
- "value": "Background"
2372
- }]
2955
+ defaultMessage: "Background"
2373
2956
  })
2374
2957
  }, {
2375
2958
  name: 'header',
2376
2959
  type: 'header',
2377
2960
  label: defineMessage({
2378
2961
  id: "rhuDxI",
2379
- defaultMessage: [{
2380
- "type": 0,
2381
- "value": "Header"
2382
- }]
2962
+ defaultMessage: "Header"
2383
2963
  }),
2384
2964
  theme: {
2385
2965
  badge: {
@@ -2394,10 +2974,7 @@ var definition = [{
2394
2974
  type: 'footer',
2395
2975
  label: defineMessage({
2396
2976
  id: "g4nybp",
2397
- defaultMessage: [{
2398
- "type": 0,
2399
- "value": "Footer"
2400
- }]
2977
+ defaultMessage: "Footer"
2401
2978
  }),
2402
2979
  theme: {
2403
2980
  callToAction: {