@micromag/screen-quiz 0.3.816 → 0.3.820

package/assets/css/styles.css

@@ -1,4 +1,4 @@
-.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.6!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-withoutOpacity{opacity:1!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{display:-ms-flexbox;display:flex;left:5px;position:absolute;top:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;height:32px;justify-content:center;margin-top:-16px;opacity:0;padding:5px;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
+.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.6!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-withoutOpacity{opacity:1!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-withSquareItems .micromag-screen-quiz-answers-button{aspect-ratio:1}.micromag-screen-quiz-answers-resultIcon{display:-ms-flexbox;display:flex;left:5px;position:absolute;top:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;height:34px;justify-content:center;margin-top:-18px;opacity:0;padding:5px;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;width:34px}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-resultIcon .micromag-screen-quiz-answers-faIcon{display:block;height:24px}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
 .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;transition-delay:.3s}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:0 auto;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{opacity:1;pointer-events:all;position:relative}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultHidden .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultHidden .micromag-screen-quiz-question-result .micromag-screen-quiz-question-resultContent{padding:0}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);font-size:8px;mix-blend-mode:difference}
 .micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{padding:6px;position:relative}.micromag-screen-quiz-nextButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-nextButton,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-nextButton.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-nextButton.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-nextButton.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-nextButton.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-nextButton.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-nextButton.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-nextButton.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-nextButton{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-nextButton:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-withIcon .micromag-screen-quiz-nextButton{padding-left:42px;padding-right:42px}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
 .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:0 auto;width:100%}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}

package/es/index.js

@@ -5,12 +5,12 @@ import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { ScreenElement, Transitions, Button as Button$1 } from '@micromag/core/components';
+import { ScreenElement, Transitions, Button } from '@micromag/core/components';
 import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
-import { isTextFilled, getStyleFromColor, isImageFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
+import { isTextFilled, isImageFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
 import { useQuizCreate } from '@micromag/data';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
@@ -25,14 +25,16 @@ import Visual from '@micromag/element-visual';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
-import { animated, useTransition, easings } from '@react-spring/web';
-import Button from '@micromag/element-button';
+import { animated } from '@react-spring/web';
+import Button$1, { RichButton } from '@micromag/element-button';
+import Keypad from '@micromag/element-keypad';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
-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","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","withIcon":"micromag-screen-quiz-answers-withIcon","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 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","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withoutOpacity":"micromag-screen-quiz-answers-withoutOpacity","withIcon":"micromag-screen-quiz-answers-withIcon","withSquareItems":"micromag-screen-quiz-answers-withSquareItems","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
 
 var propTypes$5 = {
   items: PropTypes$1.quizAnswers.isRequired,
+  keypadLayout: PropTypes.shape({}),
   answeredIndex: PropTypes.number,
   answersCollapseDelay: PropTypes.number,
   buttonsStyle: PropTypes$1.boxStyle,
@@ -55,6 +57,7 @@ var propTypes$5 = {
   className: PropTypes.string
 };
 var defaultProps$5 = {
+  keypadLayout: null,
   answeredIndex: null,
   answersCollapseDelay: 1000,
   buttonsStyle: null,
@@ -78,6 +81,7 @@ var defaultProps$5 = {
 };
 var Answers = function Answers(_ref) {
   var items = _ref.items,
+    keypadLayout = _ref.keypadLayout,
     answeredIndex = _ref.answeredIndex,
     answersCollapseDelay = _ref.answersCollapseDelay,
     buttonsStyle = _ref.buttonsStyle,
@@ -124,8 +128,8 @@ var Answers = function Answers(_ref) {
     setAnswersCollapsed = _useState4[1];
   var _useState5 = useState(initialCollapsed || answeredIndex !== null),
     _useState6 = _slicedToArray(_useState5, 2),
-    answersDidCollapse = _useState6[0],
-    setAnswersDidCollapse = _useState6[1];
+    answersDidCollapse = _useState6[0];
+    _useState6[1];
   var _useState7 = useState(initialCollapsed || answeredIndex !== null),
     _useState8 = _slicedToArray(_useState7, 2),
     answersFinalCollapse = _useState8[0],
@@ -185,19 +189,25 @@ var Answers = function Answers(_ref) {
       }
     };
   }, [answersCollapsed, onTransitionEnd, setAnswersFinalCollapse]);
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    transitioned = _useState0[0],
-    setTransitioned = _useState0[1];
-  var onAnswerTransitionEnd = useCallback(function () {
-    setTransitioned(true);
-    if (shouldCollapse && answersCollapsed && !answersDidCollapse) {
-      setAnswersDidCollapse(true);
-      if (onCollapsed !== null) {
-        onCollapsed();
-      }
-    }
-  }, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
+
+  // const [transitioned, setTransitioned] = useState(false);
+  // const onAnswerTransitionEnd = useCallback(() => {
+  //     setTransitioned(true);
+  //     if (shouldCollapse && answersCollapsed && !answersDidCollapse) {
+  //         setAnswersDidCollapse(true);
+  //         if (onCollapsed !== null) {
+  //             onCollapsed();
+  //         }
+  //     }
+  // }, [
+  //     shouldCollapse,
+  //     answersCollapsed,
+  //     answersDidCollapse,
+  //     setAnswersCollapsed,
+  //     onCollapsed,
+  //     onTransitionEnd,
+  // ]);
+
   var itemsRefs = useRef([]);
   var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
   var heights = useMemo(function () {
@@ -241,61 +251,97 @@ var Answers = function Answers(_ref) {
       key: key
     });
   });
-  var transitions = useTransition(filteredListOfItems, {
-    key: function key(_ref7) {
-      var _key = _ref7.key;
-      return _key;
-    },
-    update: function update(_ref8) {
-      var _ref8$hidden = _ref8.hidden,
-        hidden = _ref8$hidden === void 0 ? false : _ref8$hidden,
-        _ref8$maxHeight = _ref8.maxHeight,
-        maxHeight = _ref8$maxHeight === void 0 ? 0 : _ref8$maxHeight;
-      return {
-        opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
-        // Animate this, not height
-        maxHeight:
-        // eslint-disable-next-line no-nested-ternary
-        hidden && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
-        height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
-      };
-    },
-    // config: { tension: 300, friction: 35 },
-    config: {
-      duration: 300,
-      easing: easings.easeOutSine
-    }
-  });
-  useEffect(function () {
-    if (transitioned && onTransitionEnd !== null) {
-      onTransitionEnd();
+
+  // const transitions = useTransition(filteredListOfItems, {
+  //     key: ({ key }) => key,
+  //     update: ({ hidden = false, maxHeight = 0 }) => ({
+  //         opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
+  //         // Animate this, not height
+  //         maxHeight:
+  //             // eslint-disable-next-line no-nested-ternary
+  //             hidden &&
+  //             showAnimation &&
+  //             !withoutGoodAnswer &&
+  //             collapseAnimated &&
+  //             answersFinalCollapse
+  //                 ? 0
+  //                 : maxHeight > 0
+  //                   ? maxHeight
+  //                   : null,
+  //         height:
+  //             hidden &&
+  //             showAnimation &&
+  //             !withoutGoodAnswer &&
+  //             !collapseAnimated &&
+  //             answersFinalCollapse
+  //                 ? 0
+  //                 : 'auto',
+  //     }),
+  //     // config: { tension: 300, friction: 35 },
+  //     config: { duration: 300, easing: easings.easeOutSine },
+  // });
+
+  // useEffect(() => {
+  //     if (transitioned && onTransitionEnd !== null) {
+  //         onTransitionEnd();
+  //     }
+  // }, [transitioned, onTransitionEnd]);
+
+  var hasGoodOrBadAnswerInList = useMemo(function () {
+    if (filteredListOfItems !== null) {
+      return filteredListOfItems.reduce(function (hasGoodOrBad, answer) {
+        return hasGoodOrBad || answer.good === true && !withoutGoodAnswer || answer.good === false && !withoutIcon;
+      }, false);
     }
-  }, [transitioned, onTransitionEnd]);
+    return false;
+  }, [filteredListOfItems, withoutGoodAnswer, withoutIcon]);
   var hasOpacity = useMemo(function () {
-    var _ref9 = inactiveButtonsStyle || {},
-      _ref9$backgroundColor = _ref9.backgroundColor,
-      backgroundColor = _ref9$backgroundColor === void 0 ? null : _ref9$backgroundColor;
+    var _ref7 = inactiveButtonsStyle || {},
+      _ref7$backgroundColor = _ref7.backgroundColor,
+      backgroundColor = _ref7$backgroundColor === void 0 ? null : _ref7$backgroundColor;
     return backgroundColor === null;
   }, [inactiveButtonsStyle]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
-  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.items
-  }, transitions(function (style, answer, t, answerI) {
+  var itemsWithStyle = filteredListOfItems.map(function (answer) {
+    var _ref8 = answer || {},
+      hidden = _ref8.hidden,
+      maxHeight = _ref8.maxHeight;
+    var style = {
+      opacity: hidden && showAnimation && !withoutGoodAnswer ? 0 : 1,
+      // Animate this, not height
+      maxHeight:
+      // eslint-disable-next-line no-nested-ternary
+      hidden && showAnimation && !withoutGoodAnswer && collapseAnimated && answersFinalCollapse ? 0 : maxHeight > 0 ? maxHeight : null,
+      height: hidden && showAnimation && !withoutGoodAnswer && !collapseAnimated && answersFinalCollapse ? 0 : 'auto'
+    };
+    return _objectSpread(_objectSpread({}, answer), {}, {
+      style: style
+    });
+  });
+
+  // const keypadItems = transitions((style, answer, t, answerI) => {
+  var keypadItems = (itemsWithStyle || []).map(function (answer, answerI) {
     var userAnswer = answerI === answeredIndex;
-    var _ref1 = answer || {},
-      _ref1$good = _ref1.good,
-      rightAnswer = _ref1$good === void 0 ? null : _ref1$good,
-      _ref1$label = _ref1.label,
-      label = _ref1$label === void 0 ? null : _ref1$label,
-      _ref1$buttonStyle = _ref1.buttonStyle,
-      answerButtonStyle = _ref1$buttonStyle === void 0 ? null : _ref1$buttonStyle,
-      _ref1$textStyle = _ref1.textStyle,
-      answerButtonTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
-    var _ref10 = label || {},
-      _ref10$textStyle = _ref10.textStyle,
-      textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
-    var hasAnswer = isTextFilled(label);
+    var _ref9 = answer || {},
+      _ref9$good = _ref9.good,
+      rightAnswer = _ref9$good === void 0 ? null : _ref9$good,
+      _ref9$label = _ref9.label,
+      label = _ref9$label === void 0 ? null : _ref9$label,
+      _ref9$visual = _ref9.visual,
+      visual = _ref9$visual === void 0 ? null : _ref9$visual,
+      _ref9$buttonLayout = _ref9.buttonLayout,
+      buttonLayout = _ref9$buttonLayout === void 0 ? null : _ref9$buttonLayout,
+      _ref9$buttonStyle = _ref9.buttonStyle,
+      answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle,
+      _ref9$textStyle = _ref9.textStyle,
+      answerButtonTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
+      _ref9$style = _ref9.style,
+      style = _ref9$style === void 0 ? null : _ref9$style;
+    var _ref0 = label || {},
+      _ref0$textStyle = _ref0.textStyle,
+      textStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
+    var hasText = isTextFilled(label);
+    var hasVisual = isImageFilled(visual);
+    var hasAnswer = hasText || hasVisual;
     var isUserAnswer = withoutGoodAnswer && userAnswer;
     var isOtherAnswer = withoutGoodAnswer && !userAnswer;
     var isInactive = isOtherAnswer && answeredIndex !== null;
@@ -303,8 +349,9 @@ var Answers = function Answers(_ref) {
     var inactiveButtonTextStyle = isInactive ? inactiveButtonsTextStyle : null;
     return /*#__PURE__*/React.createElement(animated.div, {
       key: "answer-".concat(answerI),
-      className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, isUserAnswer), styles$4.otherAnswer, isOtherAnswer), styles$4.withoutOpacity, !hasOpacity)]),
-      onTransitionEnd: onAnswerTransitionEnd,
+      className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, isUserAnswer), styles$4.otherAnswer, isOtherAnswer), styles$4.withoutOpacity, !hasOpacity)])
+      // onTransitionEnd={onAnswerTransitionEnd}
+      ,
       style: _objectSpread({}, style)
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$4.itemContent,
@@ -325,7 +372,7 @@ var Answers = function Answers(_ref) {
       }),
       emptyClassName: styles$4.emptyAnswer,
       isEmpty: !hasAnswer
-    }, hasAnswer ? /*#__PURE__*/React.createElement(Button, {
+    }, hasAnswer ? /*#__PURE__*/React.createElement(RichButton, {
       className: styles$4.button,
       onPointerUp: function onPointerUp(e) {
         if (e.pointerType !== 'mouse' || e.button === 0) {
@@ -335,7 +382,12 @@ var Answers = function Answers(_ref) {
       disabled: !visible || isPreview || answered,
       focusable: focusable,
       buttonStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), inactiveButtonStyle), answerButtonStyle),
-      textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), inactiveButtonTextStyle), answerButtonTextStyle)
+      textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), inactiveButtonTextStyle), answerButtonTextStyle),
+      label: label,
+      visual: visual,
+      visualClassName: styles$4.optionVisual,
+      imageClassName: styles$4.optionImage,
+      layout: buttonLayout || (hasVisual ? 'label-right' : null)
     }, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
       className: styles$4.resultIcon,
       style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
@@ -348,11 +400,26 @@ var Answers = function Answers(_ref) {
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       className: styles$4.faIcon,
       icon: faTimes
-    })) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      className: styles$4.optionLabel,
-      textStyle: _objectSpread(_objectSpread(_objectSpread({}, buttonsTextStyle), textStyle), answerButtonTextStyle)
-    }))) : null)));
-  })) : null);
+    })) : null) : null)));
+  });
+  var _ref10 = keypadLayout || {},
+    _ref10$columnAlign = _ref10.columnAlign,
+    align = _ref10$columnAlign === void 0 ? null : _ref10$columnAlign,
+    _ref10$columns = _ref10.columns,
+    columns = _ref10$columns === void 0 ? 1 : _ref10$columns,
+    _ref10$spacing = _ref10.spacing,
+    spacing = _ref10$spacing === void 0 ? null : _ref10$spacing,
+    _ref10$withSquareItem = _ref10.withSquareItems,
+    withSquareItems = _ref10$withSquareItem === void 0 ? false : _ref10$withSquareItem;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon && hasGoodOrBadAnswerInList), styles$4.withSquareItems, withSquareItems === true), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
+  }, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement(Keypad, {
+    className: styles$4.items,
+    items: keypadItems,
+    align: align,
+    columns: columns,
+    spacing: spacing
+  }) : null);
 };
 Answers.propTypes = propTypes$5;
 Answers.defaultProps = defaultProps$5;
@@ -362,6 +429,7 @@ var styles$3 = {"container":"micromag-screen-quiz-question-container","emptyQues
 var propTypes$4 = {
   question: PropTypes$1.textElement,
   answers: PropTypes$1.quizAnswers,
+  keypadLayout: PropTypes.shape({}),
   result: PropTypes.shape({
     image: PropTypes$1.imageElement,
     text: PropTypes$1.textElement
@@ -400,6 +468,7 @@ var propTypes$4 = {
 var defaultProps$4 = {
   question: null,
   answers: null,
+  keypadLayout: null,
   result: null,
   resultImage: null,
   index: null,
@@ -435,6 +504,7 @@ var defaultProps$4 = {
 var Question = function Question(_ref) {
   var question = _ref.question,
     answers = _ref.answers,
+    keypadLayout = _ref.keypadLayout,
     result = _ref.result,
     resultImage = _ref.resultImage,
     index = _ref.index,
@@ -538,6 +608,7 @@ var Question = function Question(_ref) {
   }) : null, /*#__PURE__*/React.createElement(Answers, {
     key: "answers",
     items: answers || [],
+    keypadLayout: keypadLayout,
     answeredIndex: answeredIndex,
     goodAnswerColor: goodAnswerColor,
     badAnswerColor: badAnswerColor,
@@ -595,6 +666,7 @@ var styles$2 = {"container":"micromag-screen-quiz-container","background":"micro
 var propTypes$3 = {
   id: PropTypes.string,
   layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
+  keypadLayout: PropTypes.shape({}),
   question: PropTypes$1.textElement,
   answers: PropTypes$1.quizAnswers,
   result: PropTypes.shape({
@@ -626,6 +698,7 @@ var propTypes$3 = {
 var defaultProps$3 = {
   id: null,
   layout: 'middle',
+  keypadLayout: null,
   question: null,
   answers: null,
   result: null,
@@ -654,6 +727,7 @@ var defaultProps$3 = {
 var QuizScreen = function QuizScreen(_ref) {
   var id = _ref.id,
     layout = _ref.layout,
+    keypadLayout = _ref.keypadLayout,
     question = _ref.question,
     answers = _ref.answers,
     result = _ref.result,
@@ -823,7 +897,7 @@ var QuizScreen = function QuizScreen(_ref) {
     width: width,
     height: height,
     className: styles$2.content
-  }, showReset ? /*#__PURE__*/React.createElement(Button$1, {
+  }, showReset ? /*#__PURE__*/React.createElement(Button, {
     className: styles$2.reset,
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faRedo,
@@ -853,6 +927,7 @@ var QuizScreen = function QuizScreen(_ref) {
   }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Question, {
     question: question,
     answers: answers,
+    keypadLayout: keypadLayout,
     result: result,
     resultImage: resultImage,
     answeredIndex: userAnswerIndex,
@@ -1087,7 +1162,7 @@ var Title = function Title(_ref) {
   }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "button",
     placeholder: "button"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     disabled: buttonDisabled,
     focusable: focusable,
     buttonStyle: button !== null ? button.buttonStyle : null,
@@ -1315,6 +1390,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     questionBackground = _ref4$background === void 0 ? null : _ref4$background,
     _ref4$layout = _ref4.layout,
     questionLayout = _ref4$layout === void 0 ? null : _ref4$layout,
+    _ref4$keypadLayout = _ref4.keypadLayout,
+    keypadLayout = _ref4$keypadLayout === void 0 ? null : _ref4$keypadLayout,
     _ref4$result = _ref4.result,
     questionResult = _ref4$result === void 0 ? null : _ref4$result,
     _ref4$resultImage = _ref4.resultImage,
@@ -1522,7 +1599,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       "type": 0,
       "value": "points gained"
     }]
-  })) : null, showReset ? /*#__PURE__*/React.createElement(Button, {
+  })) : null, showReset ? /*#__PURE__*/React.createElement(Button$1, {
     className: styles$2.reset,
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faRedo,
@@ -1579,6 +1656,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     totalCount: (questions || []).length,
     question: text,
     answers: answers,
+    keypadLayout: keypadLayout,
     answeredIndex: currentAnsweredIndex,
     buttonsStyle: buttonsStyle,
     inactiveButtonsStyle: inactiveButtonsStyle,
@@ -1621,7 +1699,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button$1, {
     disabled: currentAnsweredIndex === null,
     focusable: true,
     buttonStyle: nextButton !== null ? nextButton.buttonStyle : null,
@@ -1707,18 +1785,17 @@ var definition = [{
   }),
   component: QuizScreen,
   layouts: ['top', 'middle', 'bottom', 'split'],
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
+  fields: [
+  // {
+  //     name: 'layout',
+  //     type: 'screen-layout',
+  //     defaultValue: 'top',
+  //     label: defineMessage({
+  //         defaultMessage: 'Layout',
+  //         description: 'Layout field label',
+  //     }),
+  // },
+  {
     name: 'question',
     type: 'heading-element',
     theme: {
@@ -1746,6 +1823,24 @@ var definition = [{
         "value": "Answers"
       }]
     })
+  }, {
+    name: 'keypadLayout',
+    type: 'keypad-layout',
+    isList: false,
+    withoutLabel: true,
+    defaultValue: {
+      columnAlign: 'middle',
+      columns: 1,
+      spacing: 10,
+      withSquareItems: false
+    },
+    label: defineMessage({
+      id: "FjuRaw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Keypad settings"
+      }]
+    })
   }, {
     name: 'withoutTrueFalse',
     type: 'toggle',
@@ -2039,6 +2134,24 @@ var definition = [{
           "value": "Answers"
         }]
       })
+    }, {
+      name: 'keypadLayout',
+      type: 'keypad-layout',
+      isList: false,
+      withoutLabel: true,
+      defaultValue: {
+        columnAlign: 'middle',
+        columns: 1,
+        spacing: 10,
+        withSquareItems: false
+      },
+      label: defineMessage({
+        id: "FjuRaw",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Keypad settings"
+        }]
+      })
     },
     // {
     //     name: 'result',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-quiz",
-    "version": "0.3.816",
+    "version": "0.3.820",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,19 +63,19 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.814",
-        "@micromag/data": "^0.3.814",
-        "@micromag/element-background": "^0.3.816",
-        "@micromag/element-button": "^0.3.814",
-        "@micromag/element-container": "^0.3.814",
-        "@micromag/element-footer": "^0.3.814",
-        "@micromag/element-header": "^0.3.814",
-        "@micromag/element-heading": "^0.3.814",
-        "@micromag/element-layout": "^0.3.814",
-        "@micromag/element-scroll": "^0.3.814",
-        "@micromag/element-text": "^0.3.814",
-        "@micromag/element-visual": "^0.3.816",
-        "@micromag/transforms": "^0.3.814",
+        "@micromag/core": "^0.3.820",
+        "@micromag/data": "^0.3.820",
+        "@micromag/element-background": "^0.3.820",
+        "@micromag/element-button": "^0.3.820",
+        "@micromag/element-container": "^0.3.820",
+        "@micromag/element-footer": "^0.3.820",
+        "@micromag/element-header": "^0.3.820",
+        "@micromag/element-heading": "^0.3.820",
+        "@micromag/element-layout": "^0.3.820",
+        "@micromag/element-scroll": "^0.3.820",
+        "@micromag/element-text": "^0.3.820",
+        "@micromag/element-visual": "^0.3.820",
+        "@micromag/transforms": "^0.3.820",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "classnames": "^2.2.6",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "85a6c6c833b345a90bf74323299ec3500c0099d0"
+    "gitHead": "c4ef0ae4055720a367551328e824ad3b111e4c9f"
 }