@micromag/screen-quiz 0.3.310 → 0.3.318

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 (4) hide show
  1. package/assets/css/styles.css +5 -5
  2. package/es/index.js +362 -419
  3. package/lib/index.js +360 -417
  4. package/package.json +15 -14
package/es/index.js CHANGED
@@ -3,10 +3,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import classNames from 'classnames';
5
5
  import PropTypes$1 from 'prop-types';
6
- import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
6
+ import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
7
7
  import { PropTypes } from '@micromag/core';
8
8
  import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
9
- import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
9
+ import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
10
10
  import { useQuizCreate } from '@micromag/data';
11
11
  import Background from '@micromag/element-background';
12
12
  import CallToAction from '@micromag/element-call-to-action';
@@ -22,10 +22,11 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
22
22
  import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
23
23
  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
24
24
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
25
+ import { useTransition, animated } from '@react-spring/web';
25
26
  import Button from '@micromag/element-button';
26
27
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
27
28
 
28
- var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","answerToSlide":"micromag-screen-quiz-answers-answerToSlide","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","userAnswer":"micromag-screen-quiz-answers-userAnswer","willCollapse":"micromag-screen-quiz-answers-willCollapse","didCollapsed":"micromag-screen-quiz-answers-didCollapsed","withoutGoodAnswer":"micromag-screen-quiz-answers-withoutGoodAnswer","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","withGoodAnswer":"micromag-screen-quiz-answers-withGoodAnswer","resultIcon":"micromag-screen-quiz-answers-resultIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
29
+ var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","item":"micromag-screen-quiz-answers-item","withGoodAnswer":"micromag-screen-quiz-answers-withGoodAnswer","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"};
29
30
 
30
31
  var propTypes$5 = {
31
32
  items: PropTypes.quizAnswers.isRequired,
@@ -40,10 +41,6 @@ var propTypes$5 = {
40
41
  withoutIcon: PropTypes$1.bool,
41
42
  focusable: PropTypes$1.bool,
42
43
  collapsed: PropTypes$1.bool,
43
- transitions: PropTypes.transitions,
44
- transitionPlaying: PropTypes$1.bool,
45
- transitionStagger: PropTypes$1.number,
46
- transitionDisabled: PropTypes$1.bool,
47
44
  onClick: PropTypes$1.func,
48
45
  onCollapse: PropTypes$1.func,
49
46
  onCollapsed: PropTypes$1.func,
@@ -62,100 +59,69 @@ var defaultProps$5 = {
62
59
  withoutIcon: false,
63
60
  focusable: false,
64
61
  collapsed: false,
65
- transitions: null,
66
- transitionPlaying: false,
67
- transitionStagger: 100,
68
- transitionDisabled: false,
69
62
  onClick: null,
70
63
  onCollapse: null,
71
64
  onCollapsed: null,
72
65
  onTransitionEnd: null,
73
66
  className: null
74
67
  };
75
-
76
68
  var Answers = function Answers(_ref) {
77
- var _ref4;
78
-
69
+ var _ref9;
79
70
  var items = _ref.items,
80
- answeredIndex = _ref.answeredIndex,
81
- answersCollapseDelay = _ref.answersCollapseDelay,
82
- buttonsStyle = _ref.buttonsStyle,
83
- buttonsTextStyle = _ref.buttonsTextStyle,
84
- goodAnswerColor = _ref.goodAnswerColor,
85
- badAnswerColor = _ref.badAnswerColor,
86
- showUserAnswer = _ref.showUserAnswer,
87
- withoutGoodAnswer = _ref.withoutGoodAnswer,
88
- withoutIcon = _ref.withoutIcon,
89
- focusable = _ref.focusable,
90
- initialCollapsed = _ref.collapsed,
91
- transitions = _ref.transitions,
92
- transitionPlaying = _ref.transitionPlaying,
93
- transitionStagger = _ref.transitionStagger,
94
- transitionDisabled = _ref.transitionDisabled,
95
- _onClick = _ref.onClick,
96
- onCollapse = _ref.onCollapse,
97
- onCollapsed = _ref.onCollapsed,
98
- onTransitionEnd = _ref.onTransitionEnd,
99
- className = _ref.className;
100
-
71
+ answeredIndex = _ref.answeredIndex,
72
+ answersCollapseDelay = _ref.answersCollapseDelay,
73
+ buttonsStyle = _ref.buttonsStyle,
74
+ buttonsTextStyle = _ref.buttonsTextStyle,
75
+ goodAnswerColor = _ref.goodAnswerColor,
76
+ badAnswerColor = _ref.badAnswerColor,
77
+ showUserAnswer = _ref.showUserAnswer,
78
+ withoutGoodAnswer = _ref.withoutGoodAnswer,
79
+ withoutIcon = _ref.withoutIcon,
80
+ focusable = _ref.focusable,
81
+ initialCollapsed = _ref.collapsed,
82
+ onClick = _ref.onClick,
83
+ onCollapse = _ref.onCollapse,
84
+ onCollapsed = _ref.onCollapsed,
85
+ onTransitionEnd = _ref.onTransitionEnd,
86
+ className = _ref.className;
101
87
  var _useScreenRenderConte = useScreenRenderContext(),
102
- isView = _useScreenRenderConte.isView,
103
- isPreview = _useScreenRenderConte.isPreview,
104
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
105
- isEdit = _useScreenRenderConte.isEdit;
106
-
88
+ isView = _useScreenRenderConte.isView,
89
+ isPreview = _useScreenRenderConte.isPreview,
90
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
91
+ isEdit = _useScreenRenderConte.isEdit;
107
92
  var answered = answeredIndex !== null;
108
-
109
93
  var _ref2 = answeredIndex !== null ? items[answeredIndex] : {},
110
- _ref2$good = _ref2.good,
111
- hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good; // we get .answer's current and future height to animate its height
112
- // we also get the right answer's Y to animate its position
113
-
114
-
115
- var _useDimensionObserver = useDimensionObserver(),
116
- answerRef = _useDimensionObserver.ref,
117
- answerHeight = _useDimensionObserver.height;
118
-
119
- var _useDimensionObserver2 = useDimensionObserver(),
120
- rightAnswerRef = _useDimensionObserver2.ref,
121
- rightAnswerHeight = _useDimensionObserver2.height;
122
-
123
- var rightAnswerTop = useMemo(function () {
124
- return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
125
- }, [rightAnswerHeight]);
94
+ _ref2$good = _ref2.good,
95
+ hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
96
+ var _useState = useState(true),
97
+ _useState2 = _slicedToArray(_useState, 1),
98
+ visible = _useState2[0];
126
99
  var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, answer) {
127
100
  var _ref3 = answer || {},
128
- _ref3$good = _ref3.good,
129
- good = _ref3$good === void 0 ? false : _ref3$good;
130
-
101
+ _ref3$good = _ref3.good,
102
+ good = _ref3$good === void 0 ? false : _ref3$good;
131
103
  return hasGood || good;
132
104
  }, false) : false;
133
105
  var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
134
106
  var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
135
-
136
- var _useState = useState(answeredIndex !== null),
137
- _useState2 = _slicedToArray(_useState, 2),
138
- answersCollapsed = _useState2[0],
139
- setAnswersCollapsed = _useState2[1];
140
-
141
- var _useState3 = useState(initialCollapsed || answeredIndex !== null),
142
- _useState4 = _slicedToArray(_useState3, 2),
143
- answersDidCollapsed = _useState4[0],
144
- setAnswersDidCollapsed = _useState4[1];
145
-
107
+ var _useState3 = useState(answeredIndex !== null),
108
+ _useState4 = _slicedToArray(_useState3, 2),
109
+ answersCollapsed = _useState4[0],
110
+ setAnswersCollapsed = _useState4[1];
111
+ var _useState5 = useState(initialCollapsed || answeredIndex !== null),
112
+ _useState6 = _slicedToArray(_useState5, 2),
113
+ answersDidCollapse = _useState6[0],
114
+ setAnswersDidCollapse = _useState6[1];
146
115
  useEffect(function () {
147
116
  var timeout = null;
148
-
149
117
  if (answeredIndex !== null && shouldCollapse) {
150
118
  timeout = setTimeout(function () {
151
119
  setAnswersCollapsed(true);
152
-
153
120
  if (onCollapse !== null) {
154
121
  onCollapse();
155
122
  }
156
123
  }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
157
124
  }
158
-
159
125
  return function () {
160
126
  if (timeout !== null) {
161
127
  clearTimeout(timeout);
@@ -166,58 +132,106 @@ var Answers = function Answers(_ref) {
166
132
  if (onTransitionEnd !== null) {
167
133
  onTransitionEnd();
168
134
  }
169
-
170
- if (shouldCollapse && answersCollapsed && !answersDidCollapsed) {
171
- setAnswersDidCollapsed(true);
172
-
135
+ if (shouldCollapse && answersCollapsed && !answersDidCollapse) {
136
+ setAnswersDidCollapse(true);
173
137
  if (onCollapsed !== null) {
174
138
  onCollapsed();
175
139
  }
176
140
  }
177
- }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
141
+ }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
142
+ var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
143
+ var filteredListOfItems = listOfItems.map(function (answer, answerI) {
144
+ if (!isView) {
145
+ return _objectSpread(_objectSpread({}, answer), {}, {
146
+ hidden: false,
147
+ index: answerI
148
+ });
149
+ }
150
+ var userAnswer = answerI === answeredIndex;
151
+ var _ref4 = answer || {},
152
+ _ref4$good = _ref4.good,
153
+ rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
154
+ if (answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
155
+ return _objectSpread(_objectSpread({}, answer), {}, {
156
+ hidden: true,
157
+ index: answerI
158
+ });
159
+ }
160
+ if (answersCollapsed && !rightAnswer) {
161
+ return _objectSpread(_objectSpread({}, answer), {}, {
162
+ hidden: true,
163
+ index: answerI
164
+ });
165
+ }
166
+ return _objectSpread(_objectSpread({}, answer), {}, {
167
+ hidden: false,
168
+ index: answerI
169
+ });
170
+ });
171
+ var transitions = useTransition(filteredListOfItems.map(function (data) {
172
+ return _objectSpread(_objectSpread({}, data), {}, {
173
+ hidden: data.hidden
174
+ });
175
+ }), {
176
+ key: function key(_ref5) {
177
+ var _ref5$index = _ref5.index,
178
+ index = _ref5$index === void 0 ? 0 : _ref5$index;
179
+ return "index-".concat(index);
180
+ },
181
+ leave: function leave() {
182
+ return {
183
+ opacity: 0,
184
+ height: 0
185
+ };
186
+ },
187
+ from: function from(_ref6) {
188
+ var _ref6$hidden = _ref6.hidden,
189
+ hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
190
+ return {
191
+ opacity: hidden && isView ? 0 : 1,
192
+ height: hidden && isView ? 0 : 'auto'
193
+ };
194
+ },
195
+ enter: function enter(_ref7) {
196
+ var _ref7$hidden = _ref7.hidden,
197
+ hidden = _ref7$hidden === void 0 ? false : _ref7$hidden;
198
+ return {
199
+ opacity: hidden && isView ? 0 : 1,
200
+ height: hidden && isView ? 0 : 'auto'
201
+ };
202
+ },
203
+ update: function update(_ref8) {
204
+ var _ref8$hidden = _ref8.hidden,
205
+ hidden = _ref8$hidden === void 0 ? false : _ref8$hidden;
206
+ return {
207
+ opacity: hidden && isView ? 0 : 1,
208
+ height: hidden && isView ? 0 : 'auto'
209
+ };
210
+ }
211
+ });
178
212
  return /*#__PURE__*/React.createElement("div", {
179
- className: classNames([styles$4.container, (_ref4 = {}, _defineProperty(_ref4, styles$4.answered, answered), _defineProperty(_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty(_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty(_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref4, className, className !== null), _ref4)]),
180
- ref: answerRef,
181
- style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
182
- height: answersCollapsed ? rightAnswerHeight : answerHeight
183
- } : null
184
- }, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
213
+ className: classNames([styles$4.container, (_ref9 = {}, _defineProperty(_ref9, styles$4.answered, answered), _defineProperty(_ref9, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty(_ref9, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty(_ref9, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref9, styles$4.didCollapsed, shouldCollapse && answersDidCollapse), _defineProperty(_ref9, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref9, className, className !== null), _ref9)])
214
+ }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
185
215
  className: styles$4.items
186
- }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
187
- var _ref7;
188
-
216
+ }, transitions(function (style, answer, t, answerI) {
189
217
  var userAnswer = answerI === answeredIndex;
190
-
191
- var _ref5 = answer || {},
192
- _ref5$good = _ref5.good,
193
- rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
194
- _ref5$label = _ref5.label,
195
- label = _ref5$label === void 0 ? null : _ref5$label,
196
- _ref5$buttonStyle = _ref5.buttonStyle,
197
- answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
198
- _ref5$textStyle = _ref5.textStyle,
199
- answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
200
-
201
- var _ref6 = label || {},
202
- _ref6$textStyle = _ref6.textStyle,
203
- textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
204
-
218
+ var _ref10 = answer || {},
219
+ _ref10$good = _ref10.good,
220
+ rightAnswer = _ref10$good === void 0 ? false : _ref10$good,
221
+ _ref10$label = _ref10.label,
222
+ label = _ref10$label === void 0 ? null : _ref10$label,
223
+ _ref10$buttonStyle = _ref10.buttonStyle,
224
+ answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
225
+ _ref10$textStyle = _ref10.textStyle,
226
+ answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
227
+ var _ref11 = label || {},
228
+ _ref11$textStyle = _ref11.textStyle,
229
+ textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
205
230
  var hasAnswer = isTextFilled(label);
206
- var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
207
-
208
- if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
209
- return null;
210
- }
211
-
212
- var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
213
- return /*#__PURE__*/React.createElement("div", {
231
+ return /*#__PURE__*/React.createElement(animated.div, {
214
232
  key: "answer-".concat(answerI),
215
- ref: answerToShow ? rightAnswerRef : null,
216
- className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer && !finalShowUserAnswer), _defineProperty(_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _defineProperty(_ref7, styles$4.answerToSlide, answerToShow), _ref7)]),
217
- style: answersCollapsed && answerToShow && !answersDidCollapsed && shouldCollapse ? {
218
- transform: "translateY(".concat(-rightAnswerTop, "px)")
219
- } : null,
220
- onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
233
+ className: classNames([styles$4.item, _defineProperty({}, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer)]),
234
+ style: _objectSpread({}, style)
221
235
  }, /*#__PURE__*/React.createElement("div", {
222
236
  className: styles$4.itemContent
223
237
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -234,17 +248,15 @@ var Answers = function Answers(_ref) {
234
248
  }),
235
249
  emptyClassName: styles$4.emptyAnswer,
236
250
  isEmpty: !hasAnswer
237
- }, hasAnswer ? /*#__PURE__*/React.createElement(Transitions, {
238
- transitions: transitions,
239
- playing: transitionPlaying,
240
- delay: (answerI + 1) * transitionStagger,
241
- disabled: transitionDisabled
242
- }, /*#__PURE__*/React.createElement(Button, {
251
+ }, hasAnswer ? /*#__PURE__*/React.createElement(Button, {
243
252
  className: styles$4.button,
244
- onClick: function onClick() {
245
- return _onClick(answer, answerI);
253
+ onPointerUp: function onPointerUp(e) {
254
+ if (e.pointerType !== 'mouse' || e.button === 0) {
255
+ onClick(answer, answerI);
256
+ onAnswerTransitionEnd();
257
+ }
246
258
  },
247
- disabled: isPreview || answered,
259
+ disabled: !visible || isPreview || answered,
248
260
  focusable: focusable,
249
261
  buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle),
250
262
  textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), answerButtonTextStyle)
@@ -263,10 +275,9 @@ var Answers = function Answers(_ref) {
263
275
  })) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
264
276
  className: styles$4.optionLabel,
265
277
  textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
266
- })))) : null)));
278
+ }))) : null)));
267
279
  })) : null);
268
280
  };
269
-
270
281
  Answers.propTypes = propTypes$5;
271
282
  Answers.defaultProps = defaultProps$5;
272
283
 
@@ -331,62 +342,58 @@ var defaultProps$4 = {
331
342
  className: null,
332
343
  style: null
333
344
  };
334
-
335
345
  var Question = function Question(_ref) {
336
- var _ref3;
337
-
346
+ var _ref4;
338
347
  var question = _ref.question,
339
- answers = _ref.answers,
340
- result = _ref.result,
341
- index = _ref.index,
342
- totalCount = _ref.totalCount,
343
- answeredIndex = _ref.answeredIndex,
344
- buttonsStyle = _ref.buttonsStyle,
345
- buttonsTextStyle = _ref.buttonsTextStyle,
346
- questionsHeadingStyle = _ref.questionsHeadingStyle,
347
- goodAnswerColor = _ref.goodAnswerColor,
348
- badAnswerColor = _ref.badAnswerColor,
349
- focusable = _ref.focusable,
350
- showInstantAnswer = _ref.showInstantAnswer,
351
- withResult = _ref.withResult,
352
- withoutGoodAnswer = _ref.withoutGoodAnswer,
353
- withoutTrueFalse = _ref.withoutTrueFalse,
354
- withoutIndex = _ref.withoutIndex,
355
- layout = _ref.layout,
356
- transitions = _ref.transitions,
357
- transitionPlaying = _ref.transitionPlaying,
358
- transitionStagger = _ref.transitionStagger,
359
- transitionDisabled = _ref.transitionDisabled,
360
- onAnswerClick = _ref.onAnswerClick,
361
- onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
362
- className = _ref.className,
363
- style = _ref.style;
364
-
348
+ answers = _ref.answers,
349
+ result = _ref.result,
350
+ index = _ref.index,
351
+ totalCount = _ref.totalCount,
352
+ answeredIndex = _ref.answeredIndex,
353
+ buttonsStyle = _ref.buttonsStyle,
354
+ buttonsTextStyle = _ref.buttonsTextStyle,
355
+ questionsHeadingStyle = _ref.questionsHeadingStyle,
356
+ goodAnswerColor = _ref.goodAnswerColor,
357
+ badAnswerColor = _ref.badAnswerColor,
358
+ focusable = _ref.focusable,
359
+ showInstantAnswer = _ref.showInstantAnswer,
360
+ withResult = _ref.withResult,
361
+ withoutGoodAnswer = _ref.withoutGoodAnswer,
362
+ withoutTrueFalse = _ref.withoutTrueFalse,
363
+ withoutIndex = _ref.withoutIndex,
364
+ layout = _ref.layout,
365
+ transitions = _ref.transitions,
366
+ transitionPlaying = _ref.transitionPlaying,
367
+ transitionStagger = _ref.transitionStagger,
368
+ transitionDisabled = _ref.transitionDisabled,
369
+ onAnswerClick = _ref.onAnswerClick,
370
+ onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
371
+ className = _ref.className,
372
+ style = _ref.style;
365
373
  var _useScreenRenderConte = useScreenRenderContext(),
366
- isPlaceholder = _useScreenRenderConte.isPlaceholder;
367
-
374
+ isPlaceholder = _useScreenRenderConte.isPlaceholder;
368
375
  var isSplitted = layout === 'split';
369
376
  var verticalAlign = isSplitted ? null : layout;
370
377
  var hasQuestion = isTextFilled(question);
371
-
372
378
  var _ref2 = question || {},
373
- _ref2$textStyle = _ref2.textStyle,
374
- questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
375
-
376
- var hasResult = isTextFilled(result);
377
-
379
+ _ref2$textStyle = _ref2.textStyle,
380
+ questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
378
381
  var _useState = useState(showInstantAnswer),
379
- _useState2 = _slicedToArray(_useState, 2),
380
- resultVisible = _useState2[0],
381
- setResultVisible = _useState2[1];
382
-
382
+ _useState2 = _slicedToArray(_useState, 2),
383
+ resultVisible = _useState2[0],
384
+ setResultVisible = _useState2[1];
383
385
  var answered = answeredIndex !== null;
386
+ var answer = answeredIndex !== null && answers[answeredIndex] ? answers[answeredIndex] : null;
387
+ var _ref3 = answer || {},
388
+ _ref3$customAnswerLab = _ref3.customAnswerLabel,
389
+ customAnswerLabel = _ref3$customAnswerLab === void 0 ? null : _ref3$customAnswerLab;
390
+ var hasResult = customAnswerLabel !== null || isTextFilled(result);
384
391
  var onAnswersCollapse = useCallback(function () {
385
392
  setResultVisible(true);
386
393
  }, [setResultVisible]);
387
394
  var hasIndex = index !== null && totalCount !== null;
388
395
  return /*#__PURE__*/React.createElement(Layout, {
389
- className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles$3.resultVisible, resultVisible), _defineProperty(_ref3, className, className !== null), _ref3)]),
396
+ className: classNames([styles$3.container, (_ref4 = {}, _defineProperty(_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles$3.resultVisible, resultVisible), _defineProperty(_ref4, className, className !== null), _ref4)]),
390
397
  verticalAlign: verticalAlign,
391
398
  style: style
392
399
  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
@@ -460,15 +467,14 @@ var Question = function Question(_ref) {
460
467
  playing: transitionPlaying,
461
468
  delay: (1 + answers.length) * transitionStagger,
462
469
  disabled: transitionDisabled
463
- }, /*#__PURE__*/React.createElement(Text, Object.assign({}, result, {
470
+ }, /*#__PURE__*/React.createElement(Text, Object.assign({}, customAnswerLabel || result, {
464
471
  className: styles$3.resultText
465
472
  }))) : null))) : null]);
466
473
  };
467
-
468
474
  Question.propTypes = propTypes$4;
469
475
  Question.defaultProps = defaultProps$4;
470
476
 
471
- var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","intro":"micromag-screen-quiz-intro","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
477
+ var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
472
478
 
473
479
  var propTypes$3 = {
474
480
  id: PropTypes$1.string,
@@ -489,6 +495,7 @@ var propTypes$3 = {
489
495
  callToAction: PropTypes.callToAction,
490
496
  current: PropTypes$1.bool,
491
497
  active: PropTypes$1.bool,
498
+ ready: PropTypes$1.bool,
492
499
  transitions: PropTypes.transitions,
493
500
  transitionStagger: PropTypes$1.number,
494
501
  type: PropTypes$1.string,
@@ -510,94 +517,87 @@ var defaultProps$3 = {
510
517
  callToAction: null,
511
518
  current: true,
512
519
  active: true,
520
+ ready: true,
513
521
  transitions: null,
514
522
  transitionStagger: 100,
515
523
  type: null,
516
524
  className: null
517
525
  };
518
-
519
526
  var QuizScreen = function QuizScreen(_ref) {
527
+ var _ref6;
520
528
  var id = _ref.id,
521
- layout = _ref.layout,
522
- question = _ref.question,
523
- answers = _ref.answers,
524
- result = _ref.result,
525
- buttonsStyle = _ref.buttonsStyle,
526
- buttonsTextStyle = _ref.buttonsTextStyle,
527
- goodAnswerColor = _ref.goodAnswerColor,
528
- badAnswerColor = _ref.badAnswerColor,
529
- withoutTrueFalse = _ref.withoutTrueFalse,
530
- spacing = _ref.spacing,
531
- background = _ref.background,
532
- callToAction = _ref.callToAction,
533
- current = _ref.current,
534
- active = _ref.active,
535
- transitions = _ref.transitions,
536
- transitionStagger = _ref.transitionStagger,
537
- type = _ref.type,
538
- className = _ref.className;
529
+ layout = _ref.layout,
530
+ question = _ref.question,
531
+ answers = _ref.answers,
532
+ result = _ref.result,
533
+ buttonsStyle = _ref.buttonsStyle,
534
+ buttonsTextStyle = _ref.buttonsTextStyle,
535
+ goodAnswerColor = _ref.goodAnswerColor,
536
+ badAnswerColor = _ref.badAnswerColor,
537
+ withoutTrueFalse = _ref.withoutTrueFalse,
538
+ spacing = _ref.spacing,
539
+ background = _ref.background,
540
+ callToAction = _ref.callToAction,
541
+ current = _ref.current,
542
+ active = _ref.active,
543
+ ready = _ref.ready,
544
+ transitions = _ref.transitions,
545
+ transitionStagger = _ref.transitionStagger,
546
+ type = _ref.type,
547
+ className = _ref.className;
539
548
  var screenId = id || 'screen-id';
540
549
  var trackScreenEvent = useTrackScreenEvent(type);
541
-
542
550
  var _useScreenSize = useScreenSize(),
543
- width = _useScreenSize.width,
544
- height = _useScreenSize.height,
545
- resolution = _useScreenSize.resolution;
546
-
551
+ width = _useScreenSize.width,
552
+ height = _useScreenSize.height,
553
+ resolution = _useScreenSize.resolution;
547
554
  var _useScreenRenderConte = useScreenRenderContext(),
548
- isView = _useScreenRenderConte.isView,
549
- isPreview = _useScreenRenderConte.isPreview,
550
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
551
- isEdit = _useScreenRenderConte.isEdit,
552
- isStatic = _useScreenRenderConte.isStatic,
553
- isCapture = _useScreenRenderConte.isCapture;
554
-
555
+ isView = _useScreenRenderConte.isView,
556
+ isPreview = _useScreenRenderConte.isPreview,
557
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
558
+ isEdit = _useScreenRenderConte.isEdit,
559
+ isStatic = _useScreenRenderConte.isStatic,
560
+ isCapture = _useScreenRenderConte.isCapture;
561
+ var clickDisabled = !ready;
555
562
  var _useViewerContext = useViewerContext(),
556
- viewerTopHeight = _useViewerContext.topHeight,
557
- viewerBottomHeight = _useViewerContext.bottomHeight,
558
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
559
-
563
+ viewerTopHeight = _useViewerContext.topHeight,
564
+ viewerBottomHeight = _useViewerContext.bottomHeight,
565
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
560
566
  var _useViewerWebView = useViewerWebView(),
561
- openWebView = _useViewerWebView.open;
562
-
567
+ openWebView = _useViewerWebView.open;
563
568
  var _usePlaybackContext = usePlaybackContext(),
564
- muted = _usePlaybackContext.muted;
565
-
569
+ muted = _usePlaybackContext.muted;
566
570
  var mediaRef = usePlaybackMediaRef(current);
567
- var transitionPlaying = current;
571
+ var transitionPlaying = current && ready;
568
572
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
569
573
  var backgroundPlaying = current && (isView || isEdit);
570
- var mediaShouldLoad = current || active; // Call to Action
574
+ var mediaShouldLoad = current || active;
571
575
 
576
+ // Call to Action
572
577
  var _ref2 = callToAction || {},
573
- _ref2$active = _ref2.active,
574
- hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
575
-
578
+ _ref2$active = _ref2.active,
579
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
576
580
  var _useDimensionObserver = useDimensionObserver(),
577
- callToActionRef = _useDimensionObserver.ref,
578
- _useDimensionObserver2 = _useDimensionObserver.height,
579
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
580
-
581
+ callToActionRef = _useDimensionObserver.ref,
582
+ _useDimensionObserver2 = _useDimensionObserver.height,
583
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
581
584
  var showInstantAnswer = isStatic || isCapture;
582
585
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
583
586
  return answer !== null && answer.good;
584
587
  }) : null;
585
-
588
+ var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
586
589
  var _useState = useState(showInstantAnswer ? goodAnswerIndex : null),
587
- _useState2 = _slicedToArray(_useState, 2),
588
- userAnswerIndex = _useState2[0],
589
- setUserAnswerIndex = _useState2[1];
590
-
590
+ _useState2 = _slicedToArray(_useState, 2),
591
+ userAnswerIndex = _useState2[0],
592
+ setUserAnswerIndex = _useState2[1];
591
593
  var _useQuizCreate = useQuizCreate({
592
- screenId: screenId
593
- }),
594
- submitQuiz = _useQuizCreate.create;
595
-
594
+ screenId: screenId
595
+ }),
596
+ submitQuiz = _useQuizCreate.create;
596
597
  var onAnswerClick = useCallback(function (answer, answerI) {
597
598
  if (userAnswerIndex !== null) {
598
599
  return;
599
600
  }
600
-
601
601
  setUserAnswerIndex(answerI);
602
602
  trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
603
603
  answer: answer,
@@ -612,15 +612,13 @@ var QuizScreen = function QuizScreen(_ref) {
612
612
  useEffect(function () {
613
613
  if (userAnswerIndex !== null) {
614
614
  var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
615
- _ref3$good = _ref3.good,
616
- isGood = _ref3$good === void 0 ? false : _ref3$good,
617
- _ref3$label = _ref3.label,
618
- label = _ref3$label === void 0 ? {} : _ref3$label;
619
-
615
+ _ref3$good = _ref3.good,
616
+ isGood = _ref3$good === void 0 ? false : _ref3$good,
617
+ _ref3$label = _ref3.label,
618
+ label = _ref3$label === void 0 ? {} : _ref3$label;
620
619
  var _ref4 = label || {},
621
- _ref4$body = _ref4.body,
622
- body = _ref4$body === void 0 ? '' : _ref4$body;
623
-
620
+ _ref4$body = _ref4.body,
621
+ body = _ref4$body === void 0 ? '' : _ref4$body;
624
622
  submitQuiz({
625
623
  choice: body || userAnswerIndex,
626
624
  value: isGood ? 1 : 0
@@ -628,19 +626,15 @@ var QuizScreen = function QuizScreen(_ref) {
628
626
  }
629
627
  }, [userAnswerIndex, answers, submitQuiz]);
630
628
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
631
-
632
629
  var _useState3 = useState(false),
633
- _useState4 = _slicedToArray(_useState3, 2),
634
- scrolledBottom = _useState4[0],
635
- setScrolledBottom = _useState4[1];
636
-
630
+ _useState4 = _slicedToArray(_useState3, 2),
631
+ scrolledBottom = _useState4[0],
632
+ setScrolledBottom = _useState4[1];
637
633
  var onScrolledBottom = useCallback(function (_ref5) {
638
634
  var initial = _ref5.initial;
639
-
640
635
  if (initial) {
641
636
  trackScreenEvent('scroll', 'Screen');
642
637
  }
643
-
644
638
  setScrolledBottom(true);
645
639
  }, [trackScreenEvent]);
646
640
  var onScrolledNotBottom = useCallback(function () {
@@ -649,7 +643,7 @@ var QuizScreen = function QuizScreen(_ref) {
649
643
  var isSplitted = layout === 'split';
650
644
  var verticalAlign = isSplitted ? null : layout;
651
645
  return /*#__PURE__*/React.createElement("div", {
652
- className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
646
+ className: classNames([styles$2.container, (_ref6 = {}, _defineProperty(_ref6, styles$2.disabled, clickDisabled), _defineProperty(_ref6, className, className !== null), _ref6)]),
653
647
  "data-screen-ready": true
654
648
  }, /*#__PURE__*/React.createElement(Container, {
655
649
  width: width,
@@ -670,6 +664,7 @@ var QuizScreen = function QuizScreen(_ref) {
670
664
  goodAnswerColor: goodAnswerColor,
671
665
  badAnswerColor: badAnswerColor,
672
666
  withoutTrueFalse: withoutTrueFalse,
667
+ withoutGoodAnswer: withoutGoodAnswer,
673
668
  focusable: current && isView,
674
669
  showInstantAnswer: showInstantAnswer,
675
670
  withResult: true,
@@ -712,11 +707,10 @@ var QuizScreen = function QuizScreen(_ref) {
712
707
  className: styles$2.background
713
708
  }) : null);
714
709
  };
715
-
716
710
  QuizScreen.propTypes = propTypes$3;
717
711
  QuizScreen.defaultProps = defaultProps$3;
718
712
 
719
- var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyDescription":"micromag-screen-quiz-results-emptyDescription","emptyTitle":"micromag-screen-quiz-results-emptyTitle","title":"micromag-screen-quiz-results-title","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
713
+ var styles$1 = {"container":"micromag-screen-quiz-results-container","emptyTitle":"micromag-screen-quiz-results-emptyTitle","emptyDescription":"micromag-screen-quiz-results-emptyDescription","title":"micromag-screen-quiz-results-title","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
720
714
 
721
715
  var propTypes$2 = {
722
716
  title: PropTypes.textElement,
@@ -744,33 +738,28 @@ var defaultProps$2 = {
744
738
  className: null,
745
739
  style: null
746
740
  };
747
-
748
741
  var Results = function Results(_ref) {
749
742
  var layout = _ref.layout,
750
- title = _ref.title,
751
- description = _ref.description,
752
- resultsHeadingStyle = _ref.resultsHeadingStyle,
753
- resultsTextStyle = _ref.resultsTextStyle,
754
- transitions = _ref.transitions,
755
- transitionPlaying = _ref.transitionPlaying,
756
- transitionStagger = _ref.transitionStagger,
757
- transitionDisabled = _ref.transitionDisabled,
758
- className = _ref.className,
759
- style = _ref.style;
743
+ title = _ref.title,
744
+ description = _ref.description,
745
+ resultsHeadingStyle = _ref.resultsHeadingStyle,
746
+ resultsTextStyle = _ref.resultsTextStyle,
747
+ transitions = _ref.transitions,
748
+ transitionPlaying = _ref.transitionPlaying,
749
+ transitionStagger = _ref.transitionStagger,
750
+ transitionDisabled = _ref.transitionDisabled,
751
+ className = _ref.className,
752
+ style = _ref.style;
760
753
  var isSplitted = layout === 'split';
761
754
  var verticalAlign = isSplitted ? null : layout;
762
755
  var hasTitle = isTextFilled(title);
763
-
764
756
  var _ref2 = title || {},
765
- _ref2$textStyle = _ref2.textStyle,
766
- titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
767
-
757
+ _ref2$textStyle = _ref2.textStyle,
758
+ titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
768
759
  var hasDescription = isTextFilled(description);
769
-
770
760
  var _ref3 = description || {},
771
- _ref3$textStyle = _ref3.textStyle,
772
- descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
773
-
761
+ _ref3$textStyle = _ref3.textStyle,
762
+ descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
774
763
  return /*#__PURE__*/React.createElement(Layout, {
775
764
  className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
776
765
  fullscreen: true,
@@ -819,11 +808,10 @@ var Results = function Results(_ref) {
819
808
  textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
820
809
  }))) : null)]);
821
810
  };
822
-
823
811
  Results.propTypes = propTypes$2;
824
812
  Results.defaultProps = defaultProps$2;
825
813
 
826
- var styles = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","description":"micromag-screen-quiz-title-description","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
814
+ var styles = {"container":"micromag-screen-quiz-title-container","emptyTitle":"micromag-screen-quiz-title-emptyTitle","emptyDescription":"micromag-screen-quiz-title-emptyDescription","title":"micromag-screen-quiz-title-title","description":"micromag-screen-quiz-title-description","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
827
815
 
828
816
  var propTypes$1 = {
829
817
  title: PropTypes.textElement,
@@ -853,25 +841,22 @@ var defaultProps$1 = {
853
841
  style: null,
854
842
  onClickButton: null
855
843
  };
856
-
857
844
  var Title = function Title(_ref) {
858
845
  var layout = _ref.layout,
859
- title = _ref.title,
860
- description = _ref.description,
861
- button = _ref.button,
862
- focusable = _ref.focusable,
863
- transitions = _ref.transitions,
864
- transitionPlaying = _ref.transitionPlaying,
865
- transitionStagger = _ref.transitionStagger,
866
- transitionDisabled = _ref.transitionDisabled,
867
- className = _ref.className,
868
- style = _ref.style,
869
- onClickButton = _ref.onClickButton;
870
-
846
+ title = _ref.title,
847
+ description = _ref.description,
848
+ button = _ref.button,
849
+ focusable = _ref.focusable,
850
+ transitions = _ref.transitions,
851
+ transitionPlaying = _ref.transitionPlaying,
852
+ transitionStagger = _ref.transitionStagger,
853
+ transitionDisabled = _ref.transitionDisabled,
854
+ className = _ref.className,
855
+ style = _ref.style,
856
+ onClickButton = _ref.onClickButton;
871
857
  var _useScreenRenderConte = useScreenRenderContext(),
872
- isPreview = _useScreenRenderConte.isPreview,
873
- isEdit = _useScreenRenderConte.isEdit;
874
-
858
+ isPreview = _useScreenRenderConte.isPreview,
859
+ isEdit = _useScreenRenderConte.isEdit;
875
860
  var isSplitted = layout === 'split';
876
861
  var verticalAlign = isSplitted ? null : layout;
877
862
  var hasTitle = isTextFilled(title);
@@ -945,7 +930,6 @@ var Title = function Title(_ref) {
945
930
  }]
946
931
  }))))]);
947
932
  };
948
-
949
933
  Title.propTypes = propTypes$1;
950
934
  Title.defaultProps = defaultProps$1;
951
935
 
@@ -1009,106 +993,90 @@ var defaultProps = {
1009
993
  type: null,
1010
994
  className: null
1011
995
  };
1012
-
1013
996
  var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1014
997
  var _ref12;
1015
-
1016
998
  var id = _ref.id,
1017
- layout = _ref.layout,
1018
- introLayout = _ref.introLayout,
1019
- title = _ref.title,
1020
- description = _ref.description,
1021
- questions = _ref.questions,
1022
- results = _ref.results,
1023
- buttonsStyle = _ref.buttonsStyle,
1024
- buttonsTextStyle = _ref.buttonsTextStyle,
1025
- questionsHeadingStyle = _ref.questionsHeadingStyle,
1026
- resultsHeadingStyle = _ref.resultsHeadingStyle,
1027
- resultsTextStyle = _ref.resultsTextStyle,
1028
- goodAnswerColor = _ref.goodAnswerColor,
1029
- badAnswerColor = _ref.badAnswerColor,
1030
- spacing = _ref.spacing,
1031
- background = _ref.background,
1032
- introBackground = _ref.introBackground,
1033
- introButton = _ref.introButton,
1034
- callToAction = _ref.callToAction,
1035
- current = _ref.current,
1036
- active = _ref.active,
1037
- transitions = _ref.transitions,
1038
- transitionStagger = _ref.transitionStagger,
1039
- type = _ref.type,
1040
- className = _ref.className;
999
+ layout = _ref.layout,
1000
+ introLayout = _ref.introLayout,
1001
+ title = _ref.title,
1002
+ description = _ref.description,
1003
+ questions = _ref.questions,
1004
+ results = _ref.results,
1005
+ buttonsStyle = _ref.buttonsStyle,
1006
+ buttonsTextStyle = _ref.buttonsTextStyle,
1007
+ questionsHeadingStyle = _ref.questionsHeadingStyle,
1008
+ resultsHeadingStyle = _ref.resultsHeadingStyle,
1009
+ resultsTextStyle = _ref.resultsTextStyle,
1010
+ goodAnswerColor = _ref.goodAnswerColor,
1011
+ badAnswerColor = _ref.badAnswerColor,
1012
+ spacing = _ref.spacing,
1013
+ background = _ref.background,
1014
+ introBackground = _ref.introBackground,
1015
+ introButton = _ref.introButton,
1016
+ callToAction = _ref.callToAction,
1017
+ current = _ref.current,
1018
+ active = _ref.active,
1019
+ transitions = _ref.transitions,
1020
+ transitionStagger = _ref.transitionStagger,
1021
+ type = _ref.type,
1022
+ className = _ref.className;
1041
1023
  var screenId = id || 'screen-id';
1042
1024
  var trackScreenEvent = useTrackScreenEvent(type);
1043
-
1044
1025
  var _useScreenSize = useScreenSize(),
1045
- width = _useScreenSize.width,
1046
- height = _useScreenSize.height,
1047
- resolution = _useScreenSize.resolution;
1048
-
1026
+ width = _useScreenSize.width,
1027
+ height = _useScreenSize.height,
1028
+ resolution = _useScreenSize.resolution;
1049
1029
  var _useViewerContext = useViewerContext(),
1050
- viewerTopHeight = _useViewerContext.topHeight,
1051
- viewerBottomHeight = _useViewerContext.bottomHeight,
1052
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1053
-
1030
+ viewerTopHeight = _useViewerContext.topHeight,
1031
+ viewerBottomHeight = _useViewerContext.bottomHeight,
1032
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1054
1033
  var _useScreenRenderConte = useScreenRenderContext(),
1055
- isView = _useScreenRenderConte.isView,
1056
- isPreview = _useScreenRenderConte.isPreview,
1057
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
1058
- isEdit = _useScreenRenderConte.isEdit,
1059
- isStatic = _useScreenRenderConte.isStatic,
1060
- isCapture = _useScreenRenderConte.isCapture;
1061
-
1034
+ isView = _useScreenRenderConte.isView,
1035
+ isPreview = _useScreenRenderConte.isPreview,
1036
+ isPlaceholder = _useScreenRenderConte.isPlaceholder,
1037
+ isEdit = _useScreenRenderConte.isEdit,
1038
+ isStatic = _useScreenRenderConte.isStatic,
1039
+ isCapture = _useScreenRenderConte.isCapture;
1062
1040
  var _usePlaybackContext = usePlaybackContext(),
1063
- muted = _usePlaybackContext.muted;
1064
-
1041
+ muted = _usePlaybackContext.muted;
1065
1042
  var mediaRef = usePlaybackMediaRef(current);
1066
-
1067
1043
  var _useViewerWebView = useViewerWebView(),
1068
- openWebView = _useViewerWebView.open;
1069
-
1044
+ openWebView = _useViewerWebView.open;
1070
1045
  var screenState = useScreenState();
1071
-
1072
1046
  var _ref2 = screenState !== null ? screenState.split('.') : [],
1073
- _ref3 = _slicedToArray(_ref2, 2),
1074
- _ref3$ = _ref3[0],
1075
- stateId = _ref3$ === void 0 ? null : _ref3$,
1076
- _ref3$2 = _ref3[1],
1077
- stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
1078
-
1047
+ _ref3 = _slicedToArray(_ref2, 2),
1048
+ _ref3$ = _ref3[0],
1049
+ stateId = _ref3$ === void 0 ? null : _ref3$,
1050
+ _ref3$2 = _ref3[1],
1051
+ stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
1079
1052
  var transitionPlaying = current;
1080
1053
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
1081
1054
  var backgroundPlaying = current && (isView || isEdit);
1082
- var backgroundShouldLoad = current || active; // Call to Action
1055
+ var backgroundShouldLoad = current || active;
1083
1056
 
1084
- var hasCallToAction = callToAction !== null && callToAction.active === true;
1057
+ // Call to Action
1085
1058
 
1059
+ var hasCallToAction = callToAction !== null && callToAction.active === true;
1086
1060
  var _useDimensionObserver = useDimensionObserver(),
1087
- callToActionRef = _useDimensionObserver.ref,
1088
- _useDimensionObserver2 = _useDimensionObserver.height,
1089
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1090
-
1061
+ callToActionRef = _useDimensionObserver.ref,
1062
+ _useDimensionObserver2 = _useDimensionObserver.height,
1063
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1091
1064
  var showInstantAnswer = isStatic || isCapture;
1092
1065
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
1093
-
1094
1066
  var _useState = useState(null),
1095
- _useState2 = _slicedToArray(_useState, 2),
1096
- userAnswers = _useState2[0],
1097
- setUserAnswers = _useState2[1];
1098
-
1067
+ _useState2 = _slicedToArray(_useState, 2),
1068
+ userAnswers = _useState2[0],
1069
+ setUserAnswers = _useState2[1];
1099
1070
  var initialQuestionIndex = 'intro';
1100
-
1101
1071
  if (stateId !== null) {
1102
1072
  initialQuestionIndex = stateId === 'questions' ? parseInt(stateIndex, 10) : stateId;
1103
1073
  } else if (isPlaceholder || !hasIntro) {
1104
1074
  initialQuestionIndex = 0;
1105
1075
  }
1106
-
1107
1076
  var _useState3 = useState(initialQuestionIndex),
1108
- _useState4 = _slicedToArray(_useState3, 2),
1109
- questionIndex = _useState4[0],
1110
- setQuestionIndex = _useState4[1];
1111
-
1077
+ _useState4 = _slicedToArray(_useState3, 2),
1078
+ questionIndex = _useState4[0],
1079
+ setQuestionIndex = _useState4[1];
1112
1080
  useEffect(function () {
1113
1081
  if (isPreview && hasIntro && questionIndex !== 'intro') {
1114
1082
  setQuestionIndex('intro');
@@ -1126,7 +1094,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1126
1094
  var onAnswerTransitionEnd = useCallback(function () {
1127
1095
  var nextIndex = questionIndex + 1;
1128
1096
  var questionsCount = questions.length;
1129
-
1130
1097
  if (nextIndex < questionsCount) {
1131
1098
  setQuestionIndex(nextIndex);
1132
1099
  } else if (nextIndex === questionsCount) {
@@ -1144,26 +1111,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1144
1111
  var hasQuestions = questions !== null && questions.length > 0;
1145
1112
  var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
1146
1113
  var _currentQuestion$text = currentQuestion.text,
1147
- text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
1148
- _currentQuestion$answ = currentQuestion.answers,
1149
- answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
1150
- _currentQuestion$back = currentQuestion.background,
1151
- questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
1152
- _currentQuestion$layo = currentQuestion.layout,
1153
- questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
1114
+ text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
1115
+ _currentQuestion$answ = currentQuestion.answers,
1116
+ answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
1117
+ _currentQuestion$back = currentQuestion.background,
1118
+ questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
1119
+ _currentQuestion$layo = currentQuestion.layout,
1120
+ questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
1154
1121
  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
1155
1122
  var currentPoints = useMemo(function () {
1156
1123
  return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
1157
1124
  var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1158
- _ref4$answers = _ref4.answers,
1159
- questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
1160
-
1125
+ _ref4$answers = _ref4.answers,
1126
+ questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
1161
1127
  var answerIndex = userAnswers[answerQuestionIndex];
1162
-
1163
1128
  var _ref5 = questionAnswers[answerIndex] || {},
1164
- _ref5$points = _ref5.points,
1165
- points = _ref5$points === void 0 ? 0 : _ref5$points;
1166
-
1129
+ _ref5$points = _ref5.points,
1130
+ points = _ref5$points === void 0 ? 0 : _ref5$points;
1167
1131
  return points + totalPoints;
1168
1132
  }, 0) : 0;
1169
1133
  }, [userAnswers, questions]);
@@ -1174,62 +1138,52 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1174
1138
  if (!isResults) {
1175
1139
  return null;
1176
1140
  }
1177
-
1178
1141
  if (stateId === 'results') {
1179
1142
  return (results || [])[parseInt(stateIndex, 10)] || null;
1180
1143
  }
1181
-
1182
1144
  return (results || []).sort(function (_ref6, _ref7) {
1183
1145
  var _ref6$points = _ref6.points,
1184
- pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
1146
+ pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
1185
1147
  var _ref7$points = _ref7.points,
1186
- pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
1187
-
1148
+ pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
1188
1149
  if (pointsA === pointsB) {
1189
1150
  return 0;
1190
1151
  }
1191
-
1192
1152
  return pointsA > pointsB ? 1 : -1;
1193
1153
  }).reduce(function (lastResult, result) {
1194
1154
  var _ref8 = lastResult || {},
1195
- _ref8$points = _ref8.points,
1196
- lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
1197
-
1155
+ _ref8$points = _ref8.points,
1156
+ lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
1198
1157
  var _ref9 = result || {},
1199
- _ref9$points = _ref9.points,
1200
- points = _ref9$points === void 0 ? 0 : _ref9$points;
1201
-
1202
- return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
1158
+ _ref9$points = _ref9.points,
1159
+ points = _ref9$points === void 0 ? 0 : _ref9$points;
1160
+ return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
1203
1161
  }, null);
1204
1162
  }, [isResults, results, currentPoints, stateId, stateIndex]);
1205
-
1206
1163
  var _ref10 = currentResult || {},
1207
- _ref10$background = _ref10.background,
1208
- resultBackground = _ref10$background === void 0 ? null : _ref10$background,
1209
- _ref10$layout = _ref10.layout,
1210
- resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1211
-
1164
+ _ref10$background = _ref10.background,
1165
+ resultBackground = _ref10$background === void 0 ? null : _ref10$background,
1166
+ _ref10$layout = _ref10.layout,
1167
+ resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1212
1168
  var _useQuizCreate = useQuizCreate({
1213
- screenId: screenId
1214
- }),
1215
- submitQuiz = _useQuizCreate.create;
1216
-
1169
+ screenId: screenId
1170
+ }),
1171
+ submitQuiz = _useQuizCreate.create;
1217
1172
  useEffect(function () {
1218
1173
  if (!isResults || isEdit) {
1219
1174
  return;
1220
1175
  }
1221
-
1222
1176
  submitQuiz({
1223
1177
  choice: userAnswers,
1224
1178
  value: currentPoints
1225
1179
  });
1226
- }, [isResults, userAnswers, submitQuiz]); // Switch state
1180
+ }, [isResults, userAnswers, submitQuiz]);
1227
1181
 
1182
+ // Switch state
1228
1183
  useEffect(function () {
1229
1184
  if (!isEdit && !isPreview) {
1230
1185
  return;
1231
1186
  }
1232
-
1233
1187
  if (stateId === 'questions') {
1234
1188
  setQuestionIndex(parseInt(stateIndex, 10));
1235
1189
  } else if (stateId === 'results') {
@@ -1240,7 +1194,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1240
1194
  }, [stateId, stateIndex, isEdit, setQuestionIndex]);
1241
1195
  var finalBackground = background;
1242
1196
  var backgroundKey = 'background';
1243
-
1244
1197
  if (isIntro && introBackground !== null) {
1245
1198
  finalBackground = introBackground;
1246
1199
  backgroundKey = 'results';
@@ -1250,46 +1203,38 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1250
1203
  } else if (isQuestion && questionBackground !== null) {
1251
1204
  finalBackground = questionBackground;
1252
1205
  backgroundKey = "question_".concat(questionIndex);
1253
- } // Transition direction
1254
-
1206
+ }
1255
1207
 
1208
+ // Transition direction
1256
1209
  var lastQuestionIndexRef = useRef(questionIndex);
1257
1210
  var direction = useMemo(function () {
1258
1211
  if (questionIndex === lastQuestionIndexRef.current) {
1259
1212
  return null;
1260
1213
  }
1261
-
1262
1214
  var lastQuestionIndex = lastQuestionIndexRef.current;
1263
1215
  lastQuestionIndexRef.current = questionIndex;
1264
-
1265
1216
  if (questionIndex === 'intro' || lastQuestionIndex === 'results' || lastQuestionIndex > questionIndex) {
1266
1217
  return 'left';
1267
1218
  }
1268
-
1269
1219
  lastQuestionIndexRef.current = questionIndex;
1270
1220
  return 'right';
1271
1221
  }, [questionIndex]);
1272
1222
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
1273
-
1274
1223
  var _useState5 = useState(false),
1275
- _useState6 = _slicedToArray(_useState5, 2),
1276
- scrolledBottom = _useState6[0],
1277
- setScrolledBottom = _useState6[1];
1278
-
1224
+ _useState6 = _slicedToArray(_useState5, 2),
1225
+ scrolledBottom = _useState6[0],
1226
+ setScrolledBottom = _useState6[1];
1279
1227
  var onScrolledBottom = useCallback(function (_ref11) {
1280
1228
  var initial = _ref11.initial;
1281
-
1282
1229
  if (initial) {
1283
1230
  trackScreenEvent('scroll', 'Screen');
1284
1231
  }
1285
-
1286
1232
  setScrolledBottom(true);
1287
1233
  }, [trackScreenEvent]);
1288
1234
  var onScrolledNotBottom = useCallback(function () {
1289
1235
  setScrolledBottom(false);
1290
1236
  }, [setScrolledBottom]);
1291
1237
  var verticalAlign = layout;
1292
-
1293
1238
  if (isIntro && introLayout !== null) {
1294
1239
  verticalAlign = introLayout;
1295
1240
  } else if (isQuestion && questionLayout !== null) {
@@ -1297,7 +1242,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1297
1242
  } else if (isResults && resultLayout !== null) {
1298
1243
  verticalAlign = questionLayout;
1299
1244
  }
1300
-
1301
1245
  return /*#__PURE__*/React.createElement("div", {
1302
1246
  className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
1303
1247
  "data-screen-ready": true
@@ -1411,7 +1355,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1411
1355
  withoutVideo: isPreview
1412
1356
  }))) : null);
1413
1357
  };
1414
-
1415
1358
  QuizMultipleScreen.propTypes = propTypes;
1416
1359
  QuizMultipleScreen.defaultProps = defaultProps;
1417
1360
 
@@ -1480,10 +1423,10 @@ var definition = [{
1480
1423
  name: 'withoutTrueFalse',
1481
1424
  type: 'toggle',
1482
1425
  label: defineMessage({
1483
- id: "Wk/o9B",
1426
+ id: "LFziCV",
1484
1427
  defaultMessage: [{
1485
1428
  "type": 0,
1486
- "value": "Without true/false"
1429
+ "value": "Without right/wrong icon"
1487
1430
  }]
1488
1431
  })
1489
1432
  }, {
@@ -1493,10 +1436,10 @@ var definition = [{
1493
1436
  textStyle: 'text'
1494
1437
  },
1495
1438
  label: defineMessage({
1496
- id: "FJygXH",
1439
+ id: "iQ5Uf7",
1497
1440
  defaultMessage: [{
1498
1441
  "type": 0,
1499
- "value": "Result"
1442
+ "value": "Default feedback"
1500
1443
  }]
1501
1444
  })
1502
1445
  }, {