@micromag/screen-quiz 0.3.310 → 0.3.318

package/lib/index.js

@@ -26,6 +26,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
+var web = require('@react-spring/web');
 var Button = require('@micromag/element-button');
 var reactTransitionGroup = require('react-transition-group');
 
@@ -47,7 +48,7 @@ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 
-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"};
+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"};
 
 var propTypes$5 = {
   items: core.PropTypes.quizAnswers.isRequired,
@@ -62,10 +63,6 @@ var propTypes$5 = {
   withoutIcon: PropTypes__default["default"].bool,
   focusable: PropTypes__default["default"].bool,
   collapsed: PropTypes__default["default"].bool,
-  transitions: core.PropTypes.transitions,
-  transitionPlaying: PropTypes__default["default"].bool,
-  transitionStagger: PropTypes__default["default"].number,
-  transitionDisabled: PropTypes__default["default"].bool,
   onClick: PropTypes__default["default"].func,
   onCollapse: PropTypes__default["default"].func,
   onCollapsed: PropTypes__default["default"].func,
@@ -84,100 +81,69 @@ var defaultProps$5 = {
   withoutIcon: false,
   focusable: false,
   collapsed: false,
-  transitions: null,
-  transitionPlaying: false,
-  transitionStagger: 100,
-  transitionDisabled: false,
   onClick: null,
   onCollapse: null,
   onCollapsed: null,
   onTransitionEnd: null,
   className: null
 };
-
 var Answers = function Answers(_ref) {
-  var _ref4;
-
+  var _ref9;
   var items = _ref.items,
-      answeredIndex = _ref.answeredIndex,
-      answersCollapseDelay = _ref.answersCollapseDelay,
-      buttonsStyle = _ref.buttonsStyle,
-      buttonsTextStyle = _ref.buttonsTextStyle,
-      goodAnswerColor = _ref.goodAnswerColor,
-      badAnswerColor = _ref.badAnswerColor,
-      showUserAnswer = _ref.showUserAnswer,
-      withoutGoodAnswer = _ref.withoutGoodAnswer,
-      withoutIcon = _ref.withoutIcon,
-      focusable = _ref.focusable,
-      initialCollapsed = _ref.collapsed,
-      transitions = _ref.transitions,
-      transitionPlaying = _ref.transitionPlaying,
-      transitionStagger = _ref.transitionStagger,
-      transitionDisabled = _ref.transitionDisabled,
-      _onClick = _ref.onClick,
-      onCollapse = _ref.onCollapse,
-      onCollapsed = _ref.onCollapsed,
-      onTransitionEnd = _ref.onTransitionEnd,
-      className = _ref.className;
-
+    answeredIndex = _ref.answeredIndex,
+    answersCollapseDelay = _ref.answersCollapseDelay,
+    buttonsStyle = _ref.buttonsStyle,
+    buttonsTextStyle = _ref.buttonsTextStyle,
+    goodAnswerColor = _ref.goodAnswerColor,
+    badAnswerColor = _ref.badAnswerColor,
+    showUserAnswer = _ref.showUserAnswer,
+    withoutGoodAnswer = _ref.withoutGoodAnswer,
+    withoutIcon = _ref.withoutIcon,
+    focusable = _ref.focusable,
+    initialCollapsed = _ref.collapsed,
+    onClick = _ref.onClick,
+    onCollapse = _ref.onCollapse,
+    onCollapsed = _ref.onCollapsed,
+    onTransitionEnd = _ref.onTransitionEnd,
+    className = _ref.className;
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit;
-
+    isView = _useScreenRenderConte.isView,
+    isPreview = _useScreenRenderConte.isPreview,
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit;
   var answered = answeredIndex !== null;
-
   var _ref2 = answeredIndex !== null ? items[answeredIndex] : {},
-      _ref2$good = _ref2.good,
-      hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good; // we get .answer's current and future height to animate its height
-  // we also get the right answer's Y to animate its position
-
-
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-      answerRef = _useDimensionObserver.ref,
-      answerHeight = _useDimensionObserver.height;
-
-  var _useDimensionObserver2 = hooks.useDimensionObserver(),
-      rightAnswerRef = _useDimensionObserver2.ref,
-      rightAnswerHeight = _useDimensionObserver2.height;
-
-  var rightAnswerTop = React.useMemo(function () {
-    return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
-  }, [rightAnswerHeight]);
+    _ref2$good = _ref2.good,
+    hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
+  var _useState = React.useState(true),
+    _useState2 = _slicedToArray__default["default"](_useState, 1),
+    visible = _useState2[0];
   var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, answer) {
     var _ref3 = answer || {},
-        _ref3$good = _ref3.good,
-        good = _ref3$good === void 0 ? false : _ref3$good;
-
+      _ref3$good = _ref3.good,
+      good = _ref3$good === void 0 ? false : _ref3$good;
     return hasGood || good;
   }, false) : false;
   var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
   var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
-
-  var _useState = React.useState(answeredIndex !== null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      answersCollapsed = _useState2[0],
-      setAnswersCollapsed = _useState2[1];
-
-  var _useState3 = React.useState(initialCollapsed || answeredIndex !== null),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      answersDidCollapsed = _useState4[0],
-      setAnswersDidCollapsed = _useState4[1];
-
+  var _useState3 = React.useState(answeredIndex !== null),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    answersCollapsed = _useState4[0],
+    setAnswersCollapsed = _useState4[1];
+  var _useState5 = React.useState(initialCollapsed || answeredIndex !== null),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    answersDidCollapse = _useState6[0],
+    setAnswersDidCollapse = _useState6[1];
   React.useEffect(function () {
     var timeout = null;
-
     if (answeredIndex !== null && shouldCollapse) {
       timeout = setTimeout(function () {
         setAnswersCollapsed(true);
-
         if (onCollapse !== null) {
           onCollapse();
         }
       }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
     }
-
     return function () {
       if (timeout !== null) {
         clearTimeout(timeout);
@@ -188,58 +154,106 @@ var Answers = function Answers(_ref) {
     if (onTransitionEnd !== null) {
       onTransitionEnd();
     }
-
-    if (shouldCollapse && answersCollapsed && !answersDidCollapsed) {
-      setAnswersDidCollapsed(true);
-
+    if (shouldCollapse && answersCollapsed && !answersDidCollapse) {
+      setAnswersDidCollapse(true);
       if (onCollapsed !== null) {
         onCollapsed();
       }
     }
-  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
+  }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
+  var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items;
+  var filteredListOfItems = listOfItems.map(function (answer, answerI) {
+    if (!isView) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
+        hidden: false,
+        index: answerI
+      });
+    }
+    var userAnswer = answerI === answeredIndex;
+    var _ref4 = answer || {},
+      _ref4$good = _ref4.good,
+      rightAnswer = _ref4$good === void 0 ? false : _ref4$good;
+    if (answersDidCollapse && !rightAnswer && (hasRightAnswer || !userAnswer)) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
+        hidden: true,
+        index: answerI
+      });
+    }
+    if (answersCollapsed && !rightAnswer) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
+        hidden: true,
+        index: answerI
+      });
+    }
+    return _objectSpread__default["default"](_objectSpread__default["default"]({}, answer), {}, {
+      hidden: false,
+      index: answerI
+    });
+  });
+  var transitions = web.useTransition(filteredListOfItems.map(function (data) {
+    return _objectSpread__default["default"](_objectSpread__default["default"]({}, data), {}, {
+      hidden: data.hidden
+    });
+  }), {
+    key: function key(_ref5) {
+      var _ref5$index = _ref5.index,
+        index = _ref5$index === void 0 ? 0 : _ref5$index;
+      return "index-".concat(index);
+    },
+    leave: function leave() {
+      return {
+        opacity: 0,
+        height: 0
+      };
+    },
+    from: function from(_ref6) {
+      var _ref6$hidden = _ref6.hidden,
+        hidden = _ref6$hidden === void 0 ? false : _ref6$hidden;
+      return {
+        opacity: hidden && isView ? 0 : 1,
+        height: hidden && isView ? 0 : 'auto'
+      };
+    },
+    enter: function enter(_ref7) {
+      var _ref7$hidden = _ref7.hidden,
+        hidden = _ref7$hidden === void 0 ? false : _ref7$hidden;
+      return {
+        opacity: hidden && isView ? 0 : 1,
+        height: hidden && isView ? 0 : 'auto'
+      };
+    },
+    update: function update(_ref8) {
+      var _ref8$hidden = _ref8.hidden,
+        hidden = _ref8$hidden === void 0 ? false : _ref8$hidden;
+      return {
+        opacity: hidden && isView ? 0 : 1,
+        height: hidden && isView ? 0 : 'auto'
+      };
+    }
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$4.answered, answered), _defineProperty__default["default"](_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty__default["default"](_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty__default["default"](_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
-    ref: answerRef,
-    style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
-      height: answersCollapsed ? rightAnswerHeight : answerHeight
-    } : null
-  }, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$4.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, styles$4.answered, answered), _defineProperty__default["default"](_ref9, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty__default["default"](_ref9, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty__default["default"](_ref9, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref9, styles$4.didCollapsed, shouldCollapse && answersDidCollapse), _defineProperty__default["default"](_ref9, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, className, className !== null), _ref9)])
+  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$4.items
-  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
-    var _ref7;
-
+  }, transitions(function (style, answer, t, answerI) {
     var userAnswer = answerI === answeredIndex;
-
-    var _ref5 = answer || {},
-        _ref5$good = _ref5.good,
-        rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
-        _ref5$label = _ref5.label,
-        label = _ref5$label === void 0 ? null : _ref5$label,
-        _ref5$buttonStyle = _ref5.buttonStyle,
-        answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
-        _ref5$textStyle = _ref5.textStyle,
-        answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
-
-    var _ref6 = label || {},
-        _ref6$textStyle = _ref6.textStyle,
-        textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
-
+    var _ref10 = answer || {},
+      _ref10$good = _ref10.good,
+      rightAnswer = _ref10$good === void 0 ? false : _ref10$good,
+      _ref10$label = _ref10.label,
+      label = _ref10$label === void 0 ? null : _ref10$label,
+      _ref10$buttonStyle = _ref10.buttonStyle,
+      answerButtonStyle = _ref10$buttonStyle === void 0 ? null : _ref10$buttonStyle,
+      _ref10$textStyle = _ref10.textStyle,
+      answerButtonTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
+    var _ref11 = label || {},
+      _ref11$textStyle = _ref11.textStyle,
+      textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle;
     var hasAnswer = utils.isTextFilled(label);
-    var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
-
-    if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
-      return null;
-    }
-
-    var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
       key: "answer-".concat(answerI),
-      ref: answerToShow ? rightAnswerRef : null,
-      className: classNames__default["default"]([styles$4.item, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref7, styles$4.userAnswer, userAnswer && !finalShowUserAnswer), _defineProperty__default["default"](_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _defineProperty__default["default"](_ref7, styles$4.answerToSlide, answerToShow), _ref7)]),
-      style: answersCollapsed && answerToShow && !answersDidCollapsed && shouldCollapse ? {
-        transform: "translateY(".concat(-rightAnswerTop, "px)")
-      } : null,
-      onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
+      className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer)]),
+      style: _objectSpread__default["default"]({}, style)
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles$4.itemContent
     }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -256,17 +270,15 @@ var Answers = function Answers(_ref) {
       }),
       emptyClassName: styles$4.emptyAnswer,
       isEmpty: !hasAnswer
-    }, hasAnswer ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
-      transitions: transitions,
-      playing: transitionPlaying,
-      delay: (answerI + 1) * transitionStagger,
-      disabled: transitionDisabled
-    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    }, hasAnswer ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
       className: styles$4.button,
-      onClick: function onClick() {
-        return _onClick(answer, answerI);
+      onPointerUp: function onPointerUp(e) {
+        if (e.pointerType !== 'mouse' || e.button === 0) {
+          onClick(answer, answerI);
+          onAnswerTransitionEnd();
+        }
       },
-      disabled: isPreview || answered,
+      disabled: !visible || isPreview || answered,
       focusable: focusable,
       buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsStyle), answerButtonStyle),
       textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, buttonsTextStyle), answerButtonTextStyle)
@@ -285,10 +297,9 @@ var Answers = function Answers(_ref) {
     })) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
       className: styles$4.optionLabel,
       textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
-    })))) : null)));
+    }))) : null)));
   })) : null);
 };
-
 Answers.propTypes = propTypes$5;
 Answers.defaultProps = defaultProps$5;
 
@@ -353,62 +364,58 @@ var defaultProps$4 = {
   className: null,
   style: null
 };
-
 var Question = function Question(_ref) {
-  var _ref3;
-
+  var _ref4;
   var question = _ref.question,
-      answers = _ref.answers,
-      result = _ref.result,
-      index = _ref.index,
-      totalCount = _ref.totalCount,
-      answeredIndex = _ref.answeredIndex,
-      buttonsStyle = _ref.buttonsStyle,
-      buttonsTextStyle = _ref.buttonsTextStyle,
-      questionsHeadingStyle = _ref.questionsHeadingStyle,
-      goodAnswerColor = _ref.goodAnswerColor,
-      badAnswerColor = _ref.badAnswerColor,
-      focusable = _ref.focusable,
-      showInstantAnswer = _ref.showInstantAnswer,
-      withResult = _ref.withResult,
-      withoutGoodAnswer = _ref.withoutGoodAnswer,
-      withoutTrueFalse = _ref.withoutTrueFalse,
-      withoutIndex = _ref.withoutIndex,
-      layout = _ref.layout,
-      transitions = _ref.transitions,
-      transitionPlaying = _ref.transitionPlaying,
-      transitionStagger = _ref.transitionStagger,
-      transitionDisabled = _ref.transitionDisabled,
-      onAnswerClick = _ref.onAnswerClick,
-      onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
-      className = _ref.className,
-      style = _ref.style;
-
+    answers = _ref.answers,
+    result = _ref.result,
+    index = _ref.index,
+    totalCount = _ref.totalCount,
+    answeredIndex = _ref.answeredIndex,
+    buttonsStyle = _ref.buttonsStyle,
+    buttonsTextStyle = _ref.buttonsTextStyle,
+    questionsHeadingStyle = _ref.questionsHeadingStyle,
+    goodAnswerColor = _ref.goodAnswerColor,
+    badAnswerColor = _ref.badAnswerColor,
+    focusable = _ref.focusable,
+    showInstantAnswer = _ref.showInstantAnswer,
+    withResult = _ref.withResult,
+    withoutGoodAnswer = _ref.withoutGoodAnswer,
+    withoutTrueFalse = _ref.withoutTrueFalse,
+    withoutIndex = _ref.withoutIndex,
+    layout = _ref.layout,
+    transitions = _ref.transitions,
+    transitionPlaying = _ref.transitionPlaying,
+    transitionStagger = _ref.transitionStagger,
+    transitionDisabled = _ref.transitionDisabled,
+    onAnswerClick = _ref.onAnswerClick,
+    onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
+    className = _ref.className,
+    style = _ref.style;
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isPlaceholder = _useScreenRenderConte.isPlaceholder;
-
+    isPlaceholder = _useScreenRenderConte.isPlaceholder;
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasQuestion = utils.isTextFilled(question);
-
   var _ref2 = question || {},
-      _ref2$textStyle = _ref2.textStyle,
-      questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-
-  var hasResult = utils.isTextFilled(result);
-
+    _ref2$textStyle = _ref2.textStyle,
+    questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var _useState = React.useState(showInstantAnswer),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      resultVisible = _useState2[0],
-      setResultVisible = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    resultVisible = _useState2[0],
+    setResultVisible = _useState2[1];
   var answered = answeredIndex !== null;
+  var answer = answeredIndex !== null && answers[answeredIndex] ? answers[answeredIndex] : null;
+  var _ref3 = answer || {},
+    _ref3$customAnswerLab = _ref3.customAnswerLabel,
+    customAnswerLabel = _ref3$customAnswerLab === void 0 ? null : _ref3$customAnswerLab;
+  var hasResult = customAnswerLabel !== null || utils.isTextFilled(result);
   var onAnswersCollapse = React.useCallback(function () {
     setResultVisible(true);
   }, [setResultVisible]);
   var hasIndex = index !== null && totalCount !== null;
   return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
-    className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
+    className: classNames__default["default"]([styles$3.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
     verticalAlign: verticalAlign,
     style: style
   }, [!withoutIndex && hasIndex ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -482,15 +489,14 @@ var Question = function Question(_ref) {
     playing: transitionPlaying,
     delay: (1 + answers.length) * transitionStagger,
     disabled: transitionDisabled
-  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, result, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, customAnswerLabel || result, {
     className: styles$3.resultText
   }))) : null))) : null]);
 };
-
 Question.propTypes = propTypes$4;
 Question.defaultProps = defaultProps$4;
 
-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"};
+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"};
 
 var propTypes$3 = {
   id: PropTypes__default["default"].string,
@@ -511,6 +517,7 @@ var propTypes$3 = {
   callToAction: core.PropTypes.callToAction,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
+  ready: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
   transitionStagger: PropTypes__default["default"].number,
   type: PropTypes__default["default"].string,
@@ -532,94 +539,87 @@ var defaultProps$3 = {
   callToAction: null,
   current: true,
   active: true,
+  ready: true,
   transitions: null,
   transitionStagger: 100,
   type: null,
   className: null
 };
-
 var QuizScreen = function QuizScreen(_ref) {
+  var _ref6;
   var id = _ref.id,
-      layout = _ref.layout,
-      question = _ref.question,
-      answers = _ref.answers,
-      result = _ref.result,
-      buttonsStyle = _ref.buttonsStyle,
-      buttonsTextStyle = _ref.buttonsTextStyle,
-      goodAnswerColor = _ref.goodAnswerColor,
-      badAnswerColor = _ref.badAnswerColor,
-      withoutTrueFalse = _ref.withoutTrueFalse,
-      spacing = _ref.spacing,
-      background = _ref.background,
-      callToAction = _ref.callToAction,
-      current = _ref.current,
-      active = _ref.active,
-      transitions = _ref.transitions,
-      transitionStagger = _ref.transitionStagger,
-      type = _ref.type,
-      className = _ref.className;
+    layout = _ref.layout,
+    question = _ref.question,
+    answers = _ref.answers,
+    result = _ref.result,
+    buttonsStyle = _ref.buttonsStyle,
+    buttonsTextStyle = _ref.buttonsTextStyle,
+    goodAnswerColor = _ref.goodAnswerColor,
+    badAnswerColor = _ref.badAnswerColor,
+    withoutTrueFalse = _ref.withoutTrueFalse,
+    spacing = _ref.spacing,
+    background = _ref.background,
+    callToAction = _ref.callToAction,
+    current = _ref.current,
+    active = _ref.active,
+    ready = _ref.ready,
+    transitions = _ref.transitions,
+    transitionStagger = _ref.transitionStagger,
+    type = _ref.type,
+    className = _ref.className;
   var screenId = id || 'screen-id';
   var trackScreenEvent = hooks.useTrackScreenEvent(type);
-
   var _useScreenSize = contexts.useScreenSize(),
-      width = _useScreenSize.width,
-      height = _useScreenSize.height,
-      resolution = _useScreenSize.resolution;
-
+    width = _useScreenSize.width,
+    height = _useScreenSize.height,
+    resolution = _useScreenSize.resolution;
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isStatic = _useScreenRenderConte.isStatic,
-      isCapture = _useScreenRenderConte.isCapture;
-
+    isView = _useScreenRenderConte.isView,
+    isPreview = _useScreenRenderConte.isPreview,
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isStatic = _useScreenRenderConte.isStatic,
+    isCapture = _useScreenRenderConte.isCapture;
+  var clickDisabled = !ready;
   var _useViewerContext = contexts.useViewerContext(),
-      viewerTopHeight = _useViewerContext.topHeight,
-      viewerBottomHeight = _useViewerContext.bottomHeight,
-      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-
+    viewerTopHeight = _useViewerContext.topHeight,
+    viewerBottomHeight = _useViewerContext.bottomHeight,
+    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
   var _useViewerWebView = contexts.useViewerWebView(),
-      openWebView = _useViewerWebView.open;
-
+    openWebView = _useViewerWebView.open;
   var _usePlaybackContext = contexts.usePlaybackContext(),
-      muted = _usePlaybackContext.muted;
-
+    muted = _usePlaybackContext.muted;
   var mediaRef = contexts.usePlaybackMediaRef(current);
-  var transitionPlaying = current;
+  var transitionPlaying = current && ready;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active; // Call to Action
+  var mediaShouldLoad = current || active;
 
+  // Call to Action
   var _ref2 = callToAction || {},
-      _ref2$active = _ref2.active,
-      hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
-
+    _ref2$active = _ref2.active,
+    hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      callToActionRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.height,
-      callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-
+    callToActionRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var showInstantAnswer = isStatic || isCapture;
   var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
     return answer !== null && answer.good;
   }) : null;
-
+  var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
   var _useState = React.useState(showInstantAnswer ? goodAnswerIndex : null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      userAnswerIndex = _useState2[0],
-      setUserAnswerIndex = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    userAnswerIndex = _useState2[0],
+    setUserAnswerIndex = _useState2[1];
   var _useQuizCreate = data.useQuizCreate({
-    screenId: screenId
-  }),
-      submitQuiz = _useQuizCreate.create;
-
+      screenId: screenId
+    }),
+    submitQuiz = _useQuizCreate.create;
   var onAnswerClick = React.useCallback(function (answer, answerI) {
     if (userAnswerIndex !== null) {
       return;
     }
-
     setUserAnswerIndex(answerI);
     trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
       answer: answer,
@@ -634,15 +634,13 @@ var QuizScreen = function QuizScreen(_ref) {
   React.useEffect(function () {
     if (userAnswerIndex !== null) {
       var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
-          _ref3$good = _ref3.good,
-          isGood = _ref3$good === void 0 ? false : _ref3$good,
-          _ref3$label = _ref3.label,
-          label = _ref3$label === void 0 ? {} : _ref3$label;
-
+        _ref3$good = _ref3.good,
+        isGood = _ref3$good === void 0 ? false : _ref3$good,
+        _ref3$label = _ref3.label,
+        label = _ref3$label === void 0 ? {} : _ref3$label;
       var _ref4 = label || {},
-          _ref4$body = _ref4.body,
-          body = _ref4$body === void 0 ? '' : _ref4$body;
-
+        _ref4$body = _ref4.body,
+        body = _ref4$body === void 0 ? '' : _ref4$body;
       submitQuiz({
         choice: body || userAnswerIndex,
         value: isGood ? 1 : 0
@@ -650,19 +648,15 @@ var QuizScreen = function QuizScreen(_ref) {
     }
   }, [userAnswerIndex, answers, submitQuiz]);
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-
   var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      scrolledBottom = _useState4[0],
-      setScrolledBottom = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    scrolledBottom = _useState4[0],
+    setScrolledBottom = _useState4[1];
   var onScrolledBottom = React.useCallback(function (_ref5) {
     var initial = _ref5.initial;
-
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
-
     setScrolledBottom(true);
   }, [trackScreenEvent]);
   var onScrolledNotBottom = React.useCallback(function () {
@@ -671,7 +665,7 @@ var QuizScreen = function QuizScreen(_ref) {
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$2.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles$2.disabled, clickDisabled), _defineProperty__default["default"](_ref6, className, className !== null), _ref6)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -692,6 +686,7 @@ var QuizScreen = function QuizScreen(_ref) {
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
     withoutTrueFalse: withoutTrueFalse,
+    withoutGoodAnswer: withoutGoodAnswer,
     focusable: current && isView,
     showInstantAnswer: showInstantAnswer,
     withResult: true,
@@ -734,11 +729,10 @@ var QuizScreen = function QuizScreen(_ref) {
     className: styles$2.background
   }) : null);
 };
-
 QuizScreen.propTypes = propTypes$3;
 QuizScreen.defaultProps = defaultProps$3;
 
-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"};
+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"};
 
 var propTypes$2 = {
   title: core.PropTypes.textElement,
@@ -766,33 +760,28 @@ var defaultProps$2 = {
   className: null,
   style: null
 };
-
 var Results = function Results(_ref) {
   var layout = _ref.layout,
-      title = _ref.title,
-      description = _ref.description,
-      resultsHeadingStyle = _ref.resultsHeadingStyle,
-      resultsTextStyle = _ref.resultsTextStyle,
-      transitions = _ref.transitions,
-      transitionPlaying = _ref.transitionPlaying,
-      transitionStagger = _ref.transitionStagger,
-      transitionDisabled = _ref.transitionDisabled,
-      className = _ref.className,
-      style = _ref.style;
+    title = _ref.title,
+    description = _ref.description,
+    resultsHeadingStyle = _ref.resultsHeadingStyle,
+    resultsTextStyle = _ref.resultsTextStyle,
+    transitions = _ref.transitions,
+    transitionPlaying = _ref.transitionPlaying,
+    transitionStagger = _ref.transitionStagger,
+    transitionDisabled = _ref.transitionDisabled,
+    className = _ref.className,
+    style = _ref.style;
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = utils.isTextFilled(title);
-
   var _ref2 = title || {},
-      _ref2$textStyle = _ref2.textStyle,
-      titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-
+    _ref2$textStyle = _ref2.textStyle,
+    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var hasDescription = utils.isTextFilled(description);
-
   var _ref3 = description || {},
-      _ref3$textStyle = _ref3.textStyle,
-      descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
-
+    _ref3$textStyle = _ref3.textStyle,
+    descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
   return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
     className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
     fullscreen: true,
@@ -841,11 +830,10 @@ var Results = function Results(_ref) {
     textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, resultsTextStyle), descriptionTextStyle)
   }))) : null)]);
 };
-
 Results.propTypes = propTypes$2;
 Results.defaultProps = defaultProps$2;
 
-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"};
+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"};
 
 var propTypes$1 = {
   title: core.PropTypes.textElement,
@@ -875,25 +863,22 @@ var defaultProps$1 = {
   style: null,
   onClickButton: null
 };
-
 var Title = function Title(_ref) {
   var layout = _ref.layout,
-      title = _ref.title,
-      description = _ref.description,
-      button = _ref.button,
-      focusable = _ref.focusable,
-      transitions = _ref.transitions,
-      transitionPlaying = _ref.transitionPlaying,
-      transitionStagger = _ref.transitionStagger,
-      transitionDisabled = _ref.transitionDisabled,
-      className = _ref.className,
-      style = _ref.style,
-      onClickButton = _ref.onClickButton;
-
+    title = _ref.title,
+    description = _ref.description,
+    button = _ref.button,
+    focusable = _ref.focusable,
+    transitions = _ref.transitions,
+    transitionPlaying = _ref.transitionPlaying,
+    transitionStagger = _ref.transitionStagger,
+    transitionDisabled = _ref.transitionDisabled,
+    className = _ref.className,
+    style = _ref.style,
+    onClickButton = _ref.onClickButton;
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isPreview = _useScreenRenderConte.isPreview,
-      isEdit = _useScreenRenderConte.isEdit;
-
+    isPreview = _useScreenRenderConte.isPreview,
+    isEdit = _useScreenRenderConte.isEdit;
   var isSplitted = layout === 'split';
   var verticalAlign = isSplitted ? null : layout;
   var hasTitle = utils.isTextFilled(title);
@@ -967,7 +952,6 @@ var Title = function Title(_ref) {
     }]
   }))))]);
 };
-
 Title.propTypes = propTypes$1;
 Title.defaultProps = defaultProps$1;
 
@@ -1031,106 +1015,90 @@ var defaultProps = {
   type: null,
   className: null
 };
-
 var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var _ref12;
-
   var id = _ref.id,
-      layout = _ref.layout,
-      introLayout = _ref.introLayout,
-      title = _ref.title,
-      description = _ref.description,
-      questions = _ref.questions,
-      results = _ref.results,
-      buttonsStyle = _ref.buttonsStyle,
-      buttonsTextStyle = _ref.buttonsTextStyle,
-      questionsHeadingStyle = _ref.questionsHeadingStyle,
-      resultsHeadingStyle = _ref.resultsHeadingStyle,
-      resultsTextStyle = _ref.resultsTextStyle,
-      goodAnswerColor = _ref.goodAnswerColor,
-      badAnswerColor = _ref.badAnswerColor,
-      spacing = _ref.spacing,
-      background = _ref.background,
-      introBackground = _ref.introBackground,
-      introButton = _ref.introButton,
-      callToAction = _ref.callToAction,
-      current = _ref.current,
-      active = _ref.active,
-      transitions = _ref.transitions,
-      transitionStagger = _ref.transitionStagger,
-      type = _ref.type,
-      className = _ref.className;
+    layout = _ref.layout,
+    introLayout = _ref.introLayout,
+    title = _ref.title,
+    description = _ref.description,
+    questions = _ref.questions,
+    results = _ref.results,
+    buttonsStyle = _ref.buttonsStyle,
+    buttonsTextStyle = _ref.buttonsTextStyle,
+    questionsHeadingStyle = _ref.questionsHeadingStyle,
+    resultsHeadingStyle = _ref.resultsHeadingStyle,
+    resultsTextStyle = _ref.resultsTextStyle,
+    goodAnswerColor = _ref.goodAnswerColor,
+    badAnswerColor = _ref.badAnswerColor,
+    spacing = _ref.spacing,
+    background = _ref.background,
+    introBackground = _ref.introBackground,
+    introButton = _ref.introButton,
+    callToAction = _ref.callToAction,
+    current = _ref.current,
+    active = _ref.active,
+    transitions = _ref.transitions,
+    transitionStagger = _ref.transitionStagger,
+    type = _ref.type,
+    className = _ref.className;
   var screenId = id || 'screen-id';
   var trackScreenEvent = hooks.useTrackScreenEvent(type);
-
   var _useScreenSize = contexts.useScreenSize(),
-      width = _useScreenSize.width,
-      height = _useScreenSize.height,
-      resolution = _useScreenSize.resolution;
-
+    width = _useScreenSize.width,
+    height = _useScreenSize.height,
+    resolution = _useScreenSize.resolution;
   var _useViewerContext = contexts.useViewerContext(),
-      viewerTopHeight = _useViewerContext.topHeight,
-      viewerBottomHeight = _useViewerContext.bottomHeight,
-      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-
+    viewerTopHeight = _useViewerContext.topHeight,
+    viewerBottomHeight = _useViewerContext.bottomHeight,
+    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
-      isView = _useScreenRenderConte.isView,
-      isPreview = _useScreenRenderConte.isPreview,
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isStatic = _useScreenRenderConte.isStatic,
-      isCapture = _useScreenRenderConte.isCapture;
-
+    isView = _useScreenRenderConte.isView,
+    isPreview = _useScreenRenderConte.isPreview,
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isStatic = _useScreenRenderConte.isStatic,
+    isCapture = _useScreenRenderConte.isCapture;
   var _usePlaybackContext = contexts.usePlaybackContext(),
-      muted = _usePlaybackContext.muted;
-
+    muted = _usePlaybackContext.muted;
   var mediaRef = contexts.usePlaybackMediaRef(current);
-
   var _useViewerWebView = contexts.useViewerWebView(),
-      openWebView = _useViewerWebView.open;
-
+    openWebView = _useViewerWebView.open;
   var screenState = contexts.useScreenState();
-
   var _ref2 = screenState !== null ? screenState.split('.') : [],
-      _ref3 = _slicedToArray__default["default"](_ref2, 2),
-      _ref3$ = _ref3[0],
-      stateId = _ref3$ === void 0 ? null : _ref3$,
-      _ref3$2 = _ref3[1],
-      stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
-
+    _ref3 = _slicedToArray__default["default"](_ref2, 2),
+    _ref3$ = _ref3[0],
+    stateId = _ref3$ === void 0 ? null : _ref3$,
+    _ref3$2 = _ref3[1],
+    stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var backgroundPlaying = current && (isView || isEdit);
-  var backgroundShouldLoad = current || active; // Call to Action
+  var backgroundShouldLoad = current || active;
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  // Call to Action
 
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      callToActionRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.height,
-      callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-
+    callToActionRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
   var showInstantAnswer = isStatic || isCapture;
   var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
-
   var _useState = React.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      userAnswers = _useState2[0],
-      setUserAnswers = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    userAnswers = _useState2[0],
+    setUserAnswers = _useState2[1];
   var initialQuestionIndex = 'intro';
-
   if (stateId !== null) {
     initialQuestionIndex = stateId === 'questions' ? parseInt(stateIndex, 10) : stateId;
   } else if (isPlaceholder || !hasIntro) {
     initialQuestionIndex = 0;
   }
-
   var _useState3 = React.useState(initialQuestionIndex),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      questionIndex = _useState4[0],
-      setQuestionIndex = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    questionIndex = _useState4[0],
+    setQuestionIndex = _useState4[1];
   React.useEffect(function () {
     if (isPreview && hasIntro && questionIndex !== 'intro') {
       setQuestionIndex('intro');
@@ -1148,7 +1116,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var onAnswerTransitionEnd = React.useCallback(function () {
     var nextIndex = questionIndex + 1;
     var questionsCount = questions.length;
-
     if (nextIndex < questionsCount) {
       setQuestionIndex(nextIndex);
     } else if (nextIndex === questionsCount) {
@@ -1166,26 +1133,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var hasQuestions = questions !== null && questions.length > 0;
   var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
   var _currentQuestion$text = currentQuestion.text,
-      text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
-      _currentQuestion$answ = currentQuestion.answers,
-      answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
-      _currentQuestion$back = currentQuestion.background,
-      questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
-      _currentQuestion$layo = currentQuestion.layout,
-      questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
+    text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
+    _currentQuestion$answ = currentQuestion.answers,
+    answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
+    _currentQuestion$back = currentQuestion.background,
+    questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
+    _currentQuestion$layo = currentQuestion.layout,
+    questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
   var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
   var currentPoints = React.useMemo(function () {
     return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
       var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
-          _ref4$answers = _ref4.answers,
-          questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
-
+        _ref4$answers = _ref4.answers,
+        questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
       var answerIndex = userAnswers[answerQuestionIndex];
-
       var _ref5 = questionAnswers[answerIndex] || {},
-          _ref5$points = _ref5.points,
-          points = _ref5$points === void 0 ? 0 : _ref5$points;
-
+        _ref5$points = _ref5.points,
+        points = _ref5$points === void 0 ? 0 : _ref5$points;
       return points + totalPoints;
     }, 0) : 0;
   }, [userAnswers, questions]);
@@ -1196,62 +1160,52 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     if (!isResults) {
       return null;
     }
-
     if (stateId === 'results') {
       return (results || [])[parseInt(stateIndex, 10)] || null;
     }
-
     return (results || []).sort(function (_ref6, _ref7) {
       var _ref6$points = _ref6.points,
-          pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
+        pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
       var _ref7$points = _ref7.points,
-          pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
-
+        pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
       if (pointsA === pointsB) {
         return 0;
       }
-
       return pointsA > pointsB ? 1 : -1;
     }).reduce(function (lastResult, result) {
       var _ref8 = lastResult || {},
-          _ref8$points = _ref8.points,
-          lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
-
+        _ref8$points = _ref8.points,
+        lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
       var _ref9 = result || {},
-          _ref9$points = _ref9.points,
-          points = _ref9$points === void 0 ? 0 : _ref9$points;
-
-      return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
+        _ref9$points = _ref9.points,
+        points = _ref9$points === void 0 ? 0 : _ref9$points;
+      return currentPoints >= (lastPoints || 0) && currentPoints >= points ? result : lastResult;
     }, null);
   }, [isResults, results, currentPoints, stateId, stateIndex]);
-
   var _ref10 = currentResult || {},
-      _ref10$background = _ref10.background,
-      resultBackground = _ref10$background === void 0 ? null : _ref10$background,
-      _ref10$layout = _ref10.layout,
-      resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
-
+    _ref10$background = _ref10.background,
+    resultBackground = _ref10$background === void 0 ? null : _ref10$background,
+    _ref10$layout = _ref10.layout,
+    resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
   var _useQuizCreate = data.useQuizCreate({
-    screenId: screenId
-  }),
-      submitQuiz = _useQuizCreate.create;
-
+      screenId: screenId
+    }),
+    submitQuiz = _useQuizCreate.create;
   React.useEffect(function () {
     if (!isResults || isEdit) {
       return;
     }
-
     submitQuiz({
       choice: userAnswers,
       value: currentPoints
     });
-  }, [isResults, userAnswers, submitQuiz]); // Switch state
+  }, [isResults, userAnswers, submitQuiz]);
 
+  // Switch state
   React.useEffect(function () {
     if (!isEdit && !isPreview) {
       return;
     }
-
     if (stateId === 'questions') {
       setQuestionIndex(parseInt(stateIndex, 10));
     } else if (stateId === 'results') {
@@ -1262,7 +1216,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   }, [stateId, stateIndex, isEdit, setQuestionIndex]);
   var finalBackground = background;
   var backgroundKey = 'background';
-
   if (isIntro && introBackground !== null) {
     finalBackground = introBackground;
     backgroundKey = 'results';
@@ -1272,46 +1225,38 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   } else if (isQuestion && questionBackground !== null) {
     finalBackground = questionBackground;
     backgroundKey = "question_".concat(questionIndex);
-  } // Transition direction
-
+  }
 
+  // Transition direction
   var lastQuestionIndexRef = React.useRef(questionIndex);
   var direction = React.useMemo(function () {
     if (questionIndex === lastQuestionIndexRef.current) {
       return null;
     }
-
     var lastQuestionIndex = lastQuestionIndexRef.current;
     lastQuestionIndexRef.current = questionIndex;
-
     if (questionIndex === 'intro' || lastQuestionIndex === 'results' || lastQuestionIndex > questionIndex) {
       return 'left';
     }
-
     lastQuestionIndexRef.current = questionIndex;
     return 'right';
   }, [questionIndex]);
   var scrollingDisabled = !isEdit && transitionDisabled || !current;
-
   var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      scrolledBottom = _useState6[0],
-      setScrolledBottom = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    scrolledBottom = _useState6[0],
+    setScrolledBottom = _useState6[1];
   var onScrolledBottom = React.useCallback(function (_ref11) {
     var initial = _ref11.initial;
-
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
-
     setScrolledBottom(true);
   }, [trackScreenEvent]);
   var onScrolledNotBottom = React.useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   var verticalAlign = layout;
-
   if (isIntro && introLayout !== null) {
     verticalAlign = introLayout;
   } else if (isQuestion && questionLayout !== null) {
@@ -1319,7 +1264,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   } else if (isResults && resultLayout !== null) {
     verticalAlign = questionLayout;
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$2.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref12, className, className !== null), _ref12)]),
     "data-screen-ready": true
@@ -1433,7 +1377,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     withoutVideo: isPreview
   }))) : null);
 };
-
 QuizMultipleScreen.propTypes = propTypes;
 QuizMultipleScreen.defaultProps = defaultProps;
 
@@ -1502,10 +1445,10 @@ var definition = [{
     name: 'withoutTrueFalse',
     type: 'toggle',
     label: reactIntl.defineMessage({
-      id: "Wk/o9B",
+      id: "LFziCV",
       defaultMessage: [{
         "type": 0,
-        "value": "Without true/false"
+        "value": "Without right/wrong icon"
       }]
     })
   }, {
@@ -1515,10 +1458,10 @@ var definition = [{
       textStyle: 'text'
     },
     label: reactIntl.defineMessage({
-      id: "FJygXH",
+      id: "iQ5Uf7",
       defaultMessage: [{
         "type": 0,
-        "value": "Result"
+        "value": "Default feedback"
       }]
     })
   }, {