@micromag/screen-quiz 0.2.412 → 0.3.3

package/es/index.js

@@ -1,54 +1,476 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { ScreenElement, Transitions } from '@micromag/core/components';
-import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
-import { isTextFilled, getStyleFromButton, getStyleFromColor } from '@micromag/core/utils';
+import classNames from 'classnames';
+import PropTypes$1 from 'prop-types';
+import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import { PropTypes } from '@micromag/core';
+import { useScreenRenderContext, useScreenSize, useViewer, useScreenState } from '@micromag/core/contexts';
+import { useResizeObserver, useTrackScreenEvent } from '@micromag/core/hooks';
 import { useQuizCreate } from '@micromag/data';
 import Background from '@micromag/element-background';
-import Button from '@micromag/element-button';
 import CallToAction from '@micromag/element-call-to-action';
 import Container from '@micromag/element-container';
+import { ScreenElement, Transitions } from '@micromag/core/components';
+import { isTextFilled, getStyleFromBox, getStyleFromColor } from '@micromag/core/utils';
 import Heading from '@micromag/element-heading';
 import Layout, { Spacer } from '@micromag/element-layout';
 import Text from '@micromag/element-text';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useState, useCallback, useEffect } from 'react';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Button from '@micromag/element-button';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
-var styles = {"container":"micromag-screen-quiz-container","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","emptyAnswer":"micromag-screen-quiz-emptyAnswer","emptyResult":"micromag-screen-quiz-emptyResult","emptyTitle":"micromag-screen-quiz-emptyTitle","button":"micromag-screen-quiz-button","question":"micromag-screen-quiz-question","answers":"micromag-screen-quiz-answers","items":"micromag-screen-quiz-items","item":"micromag-screen-quiz-item","rightAnswer":"micromag-screen-quiz-rightAnswer","resultIcon":"micromag-screen-quiz-resultIcon","itemContent":"micromag-screen-quiz-itemContent","result":"micromag-screen-quiz-result","resultContent":"micromag-screen-quiz-resultContent","callToAction":"micromag-screen-quiz-callToAction","answered":"micromag-screen-quiz-answered","showResults":"micromag-screen-quiz-showResults","answerTransitionComplete":"micromag-screen-quiz-answerTransitionComplete","isPlaceholder":"micromag-screen-quiz-isPlaceholder","layout":"micromag-screen-quiz-layout"};
+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","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","answered":"micromag-screen-quiz-answers-answered","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 propTypes = {
-  id: PropTypes.string,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
-  question: PropTypes$1.textElement,
-  answers: PropTypes$1.quizAnswers,
-  result: PropTypes.shape({
-    image: PropTypes$1.imageElement,
-    text: PropTypes$1.textElement
+var propTypes$5 = {
+  items: PropTypes.quizAnswers.isRequired,
+  answeredIndex: PropTypes$1.number,
+  answersCollapseDelay: PropTypes$1.number,
+  buttonsStyle: PropTypes.boxStyle,
+  goodAnswerColor: PropTypes.color,
+  badAnswerColor: PropTypes.color,
+  withoutGoodAnswer: PropTypes$1.bool,
+  focusable: PropTypes$1.bool,
+  collapsed: PropTypes$1.bool,
+  transitions: PropTypes.transitions,
+  transitionPlaying: PropTypes$1.bool,
+  transitionStagger: PropTypes$1.number,
+  transitionDisabled: PropTypes$1.bool,
+  onClick: PropTypes$1.func,
+  onCollapse: PropTypes$1.func,
+  onCollapsed: PropTypes$1.func,
+  onTransitionEnd: PropTypes$1.func,
+  className: PropTypes$1.string
+};
+var defaultProps$5 = {
+  answeredIndex: null,
+  answersCollapseDelay: 2000,
+  buttonsStyle: null,
+  goodAnswerColor: null,
+  badAnswerColor: null,
+  withoutGoodAnswer: 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 _ref5;
+
+  var items = _ref.items,
+      answeredIndex = _ref.answeredIndex,
+      answersCollapseDelay = _ref.answersCollapseDelay,
+      buttonsStyle = _ref.buttonsStyle,
+      goodAnswerColor = _ref.goodAnswerColor,
+      badAnswerColor = _ref.badAnswerColor,
+      withoutGoodAnswer = _ref.withoutGoodAnswer,
+      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;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      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 _useResizeObserver = useResizeObserver(),
+      answerRef = _useResizeObserver.ref,
+      answerContentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref3 = answerContentRect || {},
+      answerHeight = _ref3.height;
+
+  var _useResizeObserver2 = useResizeObserver(),
+      rightAnswerRef = _useResizeObserver2.ref,
+      rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
+
+  var _ref4 = rightAnswerContentRect || {},
+      rightAnswerHeight = _ref4.height;
+
+  var rightAnswerTop = useMemo(function () {
+    return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
+  }, [rightAnswerHeight]);
+  var shouldCollapse = !withoutGoodAnswer;
+
+  var _useState = useState(answeredIndex !== null),
+      _useState2 = _slicedToArray(_useState, 2),
+      answersCollapsed = _useState2[0],
+      setAnswersCollapsed = _useState2[1];
+
+  var _useState3 = useState(initialCollapsed || answeredIndex !== null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      answersDidCollapsed = _useState4[0],
+      setAnswersDidCollapsed = _useState4[1];
+
+  useEffect(function () {
+    var timeout = null;
+
+    if (answeredIndex !== null && shouldCollapse) {
+      timeout = setTimeout(function () {
+        setAnswersCollapsed(true);
+
+        if (onCollapse !== null) {
+          onCollapse();
+        }
+      }, hasAnsweredRight ? 500 : answersCollapseDelay);
+    }
+
+    return function () {
+      if (timeout !== null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight]);
+  var onAnswerTransitionEnd = useCallback(function () {
+    if (onTransitionEnd !== null) {
+      onTransitionEnd();
+    }
+
+    if (shouldCollapse && answersCollapsed && !answersDidCollapsed) {
+      setAnswersDidCollapsed(true);
+
+      if (onCollapsed !== null) {
+        onCollapsed();
+      }
+    }
+  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
+  console.log(items);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, (_ref5 = {}, _defineProperty(_ref5, styles$4.answered, answered), _defineProperty(_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref5, className, className !== null), _ref5)]),
+    ref: answerRef,
+    style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
+      height: answersCollapsed ? rightAnswerHeight : answerHeight
+    } : null
+  }, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
+    className: styles$4.items
+  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
+    var _ref7;
+
+    var userAnswer = answerI === answeredIndex;
+
+    var _ref6 = answer || {},
+        _ref6$good = _ref6.good,
+        rightAnswer = _ref6$good === void 0 ? false : _ref6$good,
+        _ref6$label = _ref6.label,
+        label = _ref6$label === void 0 ? null : _ref6$label,
+        _ref6$buttonStyle = _ref6.buttonStyle,
+        answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle;
+
+    var hasAnswer = isTextFilled(label);
+
+    if (answersDidCollapsed && !rightAnswer) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: "answer-".concat(answerI),
+      ref: rightAnswer ? rightAnswerRef : null,
+      className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer), _ref7)]),
+      style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
+        transform: "translateY(".concat(-rightAnswerTop, "px)")
+      } : null,
+      onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer ? onAnswerTransitionEnd : null
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$4.itemContent
+    }, /*#__PURE__*/React.createElement(ScreenElement, {
+      placeholder: "quizAnswer",
+      placeholderProps: {
+        good: answerI === 0
+      },
+      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "+Ok+7S",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Answer"
+        }]
+      }),
+      emptyClassName: styles$4.emptyAnswer,
+      isEmpty: !hasAnswer
+    }, hasAnswer ? /*#__PURE__*/React.createElement(Transitions, {
+      transitions: transitions,
+      playing: transitionPlaying,
+      delay: (answerI + 1) * transitionStagger,
+      disabled: transitionDisabled
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: styles$4.button,
+      onClick: function onClick() {
+        return _onClick(answer, answerI);
+      },
+      disabled: isPreview || answered,
+      focusable: focusable,
+      buttonStyle: _objectSpread(_objectSpread({}, getStyleFromBox(buttonsStyle)), getStyleFromBox(answerButtonStyle))
+    }, !withoutGoodAnswer && rightAnswer ? /*#__PURE__*/React.createElement("span", {
+      className: styles$4.resultIcon,
+      style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: styles$4.faIcon,
+      icon: faCheck
+    })) : null, !withoutGoodAnswer && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React.createElement("span", {
+      className: styles$4.resultIcon,
+      style: getStyleFromColor(badAnswerColor, 'backgroundColor')
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      className: styles$4.faIcon,
+      icon: faTimes
+    })) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
+      className: styles$4.optionLabel
+    })))) : null)));
+  })) : null);
+};
+
+Answers.propTypes = propTypes$5;
+Answers.defaultProps = defaultProps$5;
+
+var styles$3 = {"container":"micromag-screen-quiz-question-container","emptyQuestion":"micromag-screen-quiz-question-emptyQuestion","emptyResult":"micromag-screen-quiz-question-emptyResult","question":"micromag-screen-quiz-question-question","index":"micromag-screen-quiz-question-index","result":"micromag-screen-quiz-question-result","resultContent":"micromag-screen-quiz-question-resultContent","resultVisible":"micromag-screen-quiz-question-resultVisible","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
+
+var propTypes$4 = {
+  question: PropTypes.textElement,
+  answers: PropTypes.quizAnswers,
+  result: PropTypes$1.shape({
+    image: PropTypes.imageElement,
+    text: PropTypes.textElement
   }),
-  buttonsStyle: PropTypes$1.buttonStyle,
-  goodAnswerColor: PropTypes$1.color,
-  badAnswerColor: PropTypes$1.color,
-  spacing: PropTypes.number,
-  showResultsDelay: PropTypes.number,
-  background: PropTypes$1.backgroundElement,
-  callToAction: PropTypes$1.callToAction,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  transitions: PropTypes$1.transitions,
-  transitionStagger: PropTypes.number,
-  resultsTransitionDuration: PropTypes.number,
-  type: PropTypes.string,
-  className: PropTypes.string
+  index: PropTypes$1.number,
+  totalCount: PropTypes$1.number,
+  answeredIndex: PropTypes$1.number,
+  buttonsStyle: PropTypes.boxStyle,
+  goodAnswerColor: PropTypes.color,
+  badAnswerColor: PropTypes.color,
+  focusable: PropTypes$1.bool,
+  layout: PropTypes$1.string,
+  callToActionHeight: PropTypes$1.number,
+  showInstantAnswer: PropTypes$1.bool,
+  withResult: PropTypes$1.bool,
+  withoutGoodAnswer: PropTypes$1.bool,
+  withoutIndex: PropTypes$1.bool,
+  transitions: PropTypes.transitions,
+  transitionPlaying: PropTypes$1.bool,
+  transitionStagger: PropTypes$1.number,
+  transitionDisabled: PropTypes$1.bool,
+  onAnswerClick: PropTypes$1.func,
+  onAnswerTransitionEnd: PropTypes$1.func,
+  className: PropTypes$1.string,
+  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
 };
-var defaultProps = {
+var defaultProps$4 = {
+  question: null,
+  answers: null,
+  result: null,
+  index: null,
+  totalCount: null,
+  answeredIndex: null,
+  buttonsStyle: null,
+  goodAnswerColor: null,
+  badAnswerColor: null,
+  focusable: false,
+  layout: null,
+  callToActionHeight: null,
+  showInstantAnswer: false,
+  withResult: false,
+  withoutGoodAnswer: false,
+  withoutIndex: false,
+  transitions: null,
+  transitionPlaying: false,
+  transitionStagger: 100,
+  transitionDisabled: false,
+  onAnswerClick: null,
+  onAnswerTransitionEnd: null,
+  className: null,
+  style: null
+};
+
+var Question = function Question(_ref) {
+  var _ref3;
+
+  var question = _ref.question,
+      answers = _ref.answers,
+      result = _ref.result,
+      index = _ref.index,
+      totalCount = _ref.totalCount,
+      answeredIndex = _ref.answeredIndex,
+      buttonsStyle = _ref.buttonsStyle,
+      goodAnswerColor = _ref.goodAnswerColor,
+      badAnswerColor = _ref.badAnswerColor,
+      focusable = _ref.focusable,
+      showInstantAnswer = _ref.showInstantAnswer,
+      withResult = _ref.withResult,
+      withoutGoodAnswer = _ref.withoutGoodAnswer,
+      withoutIndex = _ref.withoutIndex,
+      layout = _ref.layout,
+      callToActionHeight = _ref.callToActionHeight,
+      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 = useScreenRenderContext(),
+      isPlaceholder = _useScreenRenderConte.isPlaceholder;
+
+  var isSplitted = layout === 'split';
+  var verticalAlign = isSplitted ? null : layout;
+  var hasQuestion = isTextFilled(question);
+  var hasResult = isTextFilled(result);
+
+  var _useState = useState(showInstantAnswer),
+      _useState2 = _slicedToArray(_useState, 2),
+      resultVisible = _useState2[0],
+      setResultVisible = _useState2[1];
+
+  var answered = answeredIndex !== null;
+
+  var _useResizeObserver = useResizeObserver(),
+      resultRef = _useResizeObserver.ref,
+      resultContentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref2 = resultContentRect || {};
+      _ref2.height; // eslint-disable-line
+
+
+  var onAnswersCollapse = useCallback(function () {
+    setResultVisible(true);
+  }, [setResultVisible]);
+  var hasIndex = index !== null && totalCount !== null;
+  return /*#__PURE__*/React.createElement(Layout, {
+    className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles$3.resultVisible, resultVisible), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    fullscreen: true,
+    verticalAlign: verticalAlign,
+    style: style
+  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "stats",
+    placeholder: /*#__PURE__*/React.createElement("div", {
+      className: styles$3.index
+    }, "1 / 10")
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.index
+  }, index + 1, " / ", totalCount))) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "question",
+    placeholder: "title",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "FOmgqv",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Question"
+      }]
+    }),
+    emptyClassName: styles$3.emptyQuestion,
+    isEmpty: !hasQuestion
+  }, hasQuestion ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
+    className: styles$3.question
+  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer"
+  }) : null, /*#__PURE__*/React.createElement(Answers, {
+    key: "answers",
+    items: answers || [],
+    answeredIndex: answeredIndex,
+    goodAnswerColor: goodAnswerColor,
+    badAnswerColor: badAnswerColor,
+    withoutGoodAnswer: withoutGoodAnswer,
+    buttonsStyle: buttonsStyle,
+    focusable: focusable,
+    transitions: transitions,
+    transitionStagger: transitionStagger,
+    transitionPlaying: transitionPlaying,
+    transitionDisabled: transitionDisabled,
+    onClick: onAnswerClick,
+    onCollapse: onAnswersCollapse,
+    onTransitionEnd: onAnswerTransitionEnd
+  }), withResult ? /*#__PURE__*/React.createElement("div", {
+    className: styles$3.result,
+    key: "results",
+    ref: resultRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.resultContent
+  }, /*#__PURE__*/React.createElement(ScreenElement, {
+    emptyLabel: answered ? /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "li7ADr",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Result"
+      }]
+    }) : null,
+    isEmpty: answered && !hasResult,
+    emptyClassName: styles$3.emptyResult
+  }, hasResult && answers !== null ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: (1 + answers.length) * transitionStagger,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, result, {
+    className: styles$3.resultText
+  })), callToActionHeight !== null ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: callToActionHeight
+    }
+  }) : null) : null))) : null]);
+};
+
+Question.propTypes = propTypes$4;
+Question.defaultProps = defaultProps$4;
+
+var styles$2 = {"container":"micromag-screen-quiz-container","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","background":"micromag-screen-quiz-background"};
+
+var propTypes$3 = {
+  id: PropTypes$1.string,
+  layout: PropTypes$1.oneOf(['top', 'middle', 'bottom', 'split']),
+  question: PropTypes.textElement,
+  answers: PropTypes.quizAnswers,
+  result: PropTypes$1.shape({
+    image: PropTypes.imageElement,
+    text: PropTypes.textElement
+  }),
+  buttonsStyle: PropTypes.boxStyle,
+  goodAnswerColor: PropTypes.color,
+  badAnswerColor: PropTypes.color,
+  spacing: PropTypes$1.number,
+  background: PropTypes.backgroundElement,
+  callToAction: PropTypes.callToAction,
+  current: PropTypes$1.bool,
+  active: PropTypes$1.bool,
+  transitions: PropTypes.transitions,
+  transitionStagger: PropTypes$1.number,
+  type: PropTypes$1.string,
+  className: PropTypes$1.string
+};
+var defaultProps$3 = {
   id: null,
   layout: 'middle',
   question: null,
@@ -58,21 +480,17 @@ var defaultProps = {
   goodAnswerColor: null,
   badAnswerColor: null,
   spacing: 20,
-  showResultsDelay: 750,
   background: null,
   callToAction: null,
   current: true,
   active: true,
   transitions: null,
   transitionStagger: 100,
-  resultsTransitionDuration: 500,
   type: null,
   className: null
 };
 
 var QuizScreen = function QuizScreen(_ref) {
-  var _ref13;
-
   var id = _ref.id,
       layout = _ref.layout,
       question = _ref.question,
@@ -82,14 +500,12 @@ var QuizScreen = function QuizScreen(_ref) {
       goodAnswerColor = _ref.goodAnswerColor,
       badAnswerColor = _ref.badAnswerColor,
       spacing = _ref.spacing,
-      showResultsDelay = _ref.showResultsDelay,
       background = _ref.background,
       callToAction = _ref.callToAction,
       current = _ref.current,
       active = _ref.active,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
-      resultsTransitionDuration = _ref.resultsTransitionDuration,
       type = _ref.type,
       className = _ref.className;
   var screenId = id || 'screen-id';
@@ -111,37 +527,6 @@ var QuizScreen = function QuizScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
-  var hasQuestion = isTextFilled(question);
-  var hasResult = isTextFilled(result);
-  var showInstantAnswer = isStatic || isCapture;
-  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
-    return answer !== null && answer.good;
-  }) : null;
-
-  var _useState = useState(showInstantAnswer ? goodAnswerIndex : null),
-      _useState2 = _slicedToArray(_useState, 2),
-      userAnswerIndex = _useState2[0],
-      setUserAnswerIndex = _useState2[1];
-
-  var _useState3 = useState(showInstantAnswer),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showResults = _useState4[0],
-      setShowResults = _useState4[1]; // const [answerTransitionProps, setAnswerTransitionProps] = useState(null);
-
-
-  var _useState5 = useState(showInstantAnswer),
-      _useState6 = _slicedToArray(_useState5, 2),
-      answerTransitionComplete = _useState6[0],
-      setAnswerTransitionComplete = _useState6[1];
-
-  var answered = userAnswerIndex !== null;
-
-  var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
-      _ref2$good = _ref2.good,
-      hasUserAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
-
-  var isSplitted = layout === 'split';
-  var verticalAlign = isSplitted ? null : layout;
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var backgroundPlaying = current && (isView || isEdit);
@@ -153,285 +538,664 @@ var QuizScreen = function QuizScreen(_ref) {
       callToActionRef = _useResizeObserver.ref,
       callToActionRect = _useResizeObserver.entry.contentRect;
 
-  var _ref3 = callToActionRect || {},
-      _ref3$height = _ref3.height,
-      callToActionHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+  var _ref2 = callToActionRect || {},
+      _ref2$height = _ref2.height,
+      callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
+
+  var showInstantAnswer = isStatic || isCapture;
+  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
+    return answer !== null && answer.good;
+  }) : null;
+
+  var _useState = useState(showInstantAnswer ? goodAnswerIndex : null),
+      _useState2 = _slicedToArray(_useState, 2),
+      userAnswerIndex = _useState2[0],
+      setUserAnswerIndex = _useState2[1];
 
   var _useQuizCreate = useQuizCreate({
     screenId: screenId
   }),
       submitQuiz = _useQuizCreate.create;
 
-  var onAnswerClick = useCallback(function (answerI) {
-    var timeout = null;
-
-    if (userAnswerIndex === null) {
-      setUserAnswerIndex(answerI);
-      timeout = setTimeout(setShowResults, showResultsDelay, true);
-      var answer = answers[answerI];
-      trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
-        answer: answer,
-        answerIndex: answerI
-      });
+  var onAnswerClick = useCallback(function (answer, answerI) {
+    if (userAnswerIndex !== null) {
+      return;
     }
 
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [userAnswerIndex, setUserAnswerIndex, showResultsDelay, trackScreenEvent, answers]);
+    setUserAnswerIndex(answerI);
+    trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
+      answer: answer,
+      answerIndex: answerI
+    });
+  }, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, answers]);
   useEffect(function () {
     if (!current && isEdit && userAnswerIndex !== null) {
       setUserAnswerIndex(null);
-      setShowResults(false);
-      setAnswerTransitionComplete(false);
-    }
-  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex, setShowResults, setAnswerTransitionComplete]); // 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 _useResizeObserver2 = useResizeObserver(),
-      answerRef = _useResizeObserver2.ref,
-      answerContentRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref4 = answerContentRect || {},
-      answerHeight = _ref4.height;
-
-  var _useResizeObserver3 = useResizeObserver(),
-      rightAnswerRef = _useResizeObserver3.ref,
-      rightAnswerContentRect = _useResizeObserver3.entry.contentRect;
-
-  var _ref5 = rightAnswerContentRect || {},
-      rightAnswerHeight = _ref5.height;
-
-  var _useResizeObserver4 = useResizeObserver(),
-      resultRef = _useResizeObserver4.ref,
-      resultContentRect = _useResizeObserver4.entry.contentRect;
-
-  var _ref6 = resultContentRect || {},
-      resultHeight = _ref6.height;
-
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      rightAnswerTop = _useState8[0],
-      setRightAnswerTop = _useState8[1];
-
-  useEffect(function () {
-    if (rightAnswerRef.current !== null) {
-      setRightAnswerTop(rightAnswerRef.current.offsetTop);
     }
-  }, [rightAnswerHeight]); // when the animation is done, we set a state to remove animations props
-  // .results' position changes from absolute to relative
-  // the wrong answers are removed from DOM
-
-  useEffect(function () {
-    var timeout = null;
-
-    if (!showInstantAnswer && showResults) {
-      timeout = setTimeout(setAnswerTransitionComplete, resultsTransitionDuration, true);
-    }
-
-    return function () {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [showResults, resultsTransitionDuration, setAnswerTransitionComplete, showInstantAnswer]);
+  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
   useEffect(function () {
     if (userAnswerIndex !== null) {
-      var _ref7 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
-          _ref7$good = _ref7.good,
-          isGood = _ref7$good === void 0 ? false : _ref7$good,
-          _ref7$label = _ref7.label,
-          label = _ref7$label === void 0 ? {} : _ref7$label;
+      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;
 
-      var _ref8 = label || {},
-          _ref8$body = _ref8.body,
-          body = _ref8$body === void 0 ? '' : _ref8$body;
+      var _ref4 = label || {},
+          _ref4$body = _ref4.body,
+          body = _ref4$body === void 0 ? '' : _ref4$body;
 
       submitQuiz({
         choice: body || userAnswerIndex,
         value: isGood ? 1 : 0
       });
     }
-  }, [userAnswerIndex, answers, submitQuiz]); // Question
+  }, [userAnswerIndex, answers, submitQuiz]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
+    "data-screen-ready": true
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    playing: backgroundPlaying,
+    shouldLoad: backgroundShouldLoad
+  }) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(Question, {
+    question: question,
+    answers: answers,
+    result: result,
+    answeredIndex: userAnswerIndex,
+    buttonsStyle: buttonsStyle,
+    goodAnswerColor: goodAnswerColor,
+    badAnswerColor: badAnswerColor,
+    focusable: current && isView,
+    showInstantAnswer: showInstantAnswer,
+    withResult: true,
+    layout: layout,
+    callToActionHeight: callToActionHeight,
+    transitions: transitions,
+    transitionPlaying: transitionPlaying,
+    transitionStagger: transitionStagger,
+    transitionDisabled: transitionDisabled,
+    onAnswerClick: onAnswerClick,
+    className: styles$2.question,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
+    ref: callToActionRef,
+    className: styles$2.callToAction,
+    callToAction: callToAction,
+    animationDisabled: isPreview,
+    focusable: current && isView
+  }) : null));
+};
 
-  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
-    key: "question",
+QuizScreen.propTypes = propTypes$3;
+QuizScreen.defaultProps = defaultProps$3;
+
+var styles$1 = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
+
+var propTypes$2 = {
+  title: PropTypes.textElement,
+  description: PropTypes.textElement,
+  layout: PropTypes$1.string,
+  transitions: PropTypes.transitions,
+  transitionPlaying: PropTypes$1.bool,
+  transitionStagger: PropTypes$1.number,
+  transitionDisabled: PropTypes$1.bool,
+  className: PropTypes$1.string,
+  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
+};
+var defaultProps$2 = {
+  title: null,
+  description: null,
+  layout: null,
+  transitions: null,
+  transitionPlaying: false,
+  transitionStagger: 100,
+  transitionDisabled: false,
+  className: null,
+  style: null
+};
+
+var Title = function Title(_ref) {
+  var layout = _ref.layout,
+      title = _ref.title,
+      description = _ref.description,
+      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 = isTextFilled(title);
+  var hasDescription = isTextFilled(description);
+  return /*#__PURE__*/React.createElement(Layout, {
+    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
+    fullscreen: true,
+    verticalAlign: verticalAlign,
+    style: style
+  }, [/*#__PURE__*/React.createElement(ScreenElement, {
+    key: "title",
     placeholder: "title",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "e1I+KU",
+      id: "BSTWf8",
       defaultMessage: [{
         "type": 0,
-        "value": "Question"
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: styles$1.emptyTitle,
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
+    className: styles$1.title
+  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer"
+  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "description",
+    placeholder: "text",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "hoDz0O",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Description"
+      }]
+    }),
+    emptyClassName: styles$1.emptyDescription,
+    isEmpty: !hasDescription
+  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled,
+    delay: transitionStagger
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
+    className: styles$1.description
+  }))) : null)]);
+};
+
+Title.propTypes = propTypes$2;
+Title.defaultProps = defaultProps$2;
+
+var styles = {"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 propTypes$1 = {
+  title: PropTypes.textElement,
+  description: PropTypes.textElement,
+  layout: PropTypes$1.string,
+  transitions: PropTypes.transitions,
+  transitionPlaying: PropTypes$1.bool,
+  transitionStagger: PropTypes$1.number,
+  transitionDisabled: PropTypes$1.bool,
+  className: PropTypes$1.string,
+  style: PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]))
+};
+var defaultProps$1 = {
+  title: null,
+  description: null,
+  layout: null,
+  transitions: null,
+  transitionPlaying: false,
+  transitionStagger: 100,
+  transitionDisabled: false,
+  className: null,
+  style: null
+};
+
+var Results = function Results(_ref) {
+  var layout = _ref.layout,
+      title = _ref.title,
+      description = _ref.description,
+      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 = isTextFilled(title);
+  var hasDescription = isTextFilled(description);
+  return /*#__PURE__*/React.createElement(Layout, {
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
+    fullscreen: true,
+    verticalAlign: verticalAlign,
+    style: style
+  }, [/*#__PURE__*/React.createElement(ScreenElement, {
+    key: "title",
+    placeholder: "title",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "BSTWf8",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
       }]
     }),
     emptyClassName: styles.emptyTitle,
-    isEmpty: !hasQuestion
-  }, hasQuestion ? /*#__PURE__*/React.createElement(Transitions, {
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
     disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
-    className: styles.question
-  }))) : null)];
+  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
+    className: styles.title
+  }))) : null), isSplitted ? /*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer"
+  }) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "description",
+    placeholder: "text",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "hoDz0O",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Description"
+      }]
+    }),
+    emptyClassName: styles.emptyDescription,
+    isEmpty: !hasDescription
+  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled,
+    delay: transitionStagger
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
+    className: styles.description
+  }))) : null)]);
+};
+
+Results.propTypes = propTypes$1;
+Results.defaultProps = defaultProps$1;
+
+var propTypes = {
+  id: PropTypes$1.string,
+  layout: PropTypes$1.oneOf(['top', 'middle', 'bottom', 'split']),
+  introLayout: PropTypes$1.oneOf(['top', 'middle', 'bottom', 'split']),
+  title: PropTypes.textElement,
+  description: PropTypes.textElement,
+  questions: PropTypes$1.arrayOf(PropTypes$1.shape({
+    text: PropTypes.textElement,
+    answers: PropTypes.quizAnswers
+  })),
+  results: PropTypes$1.arrayOf(PropTypes$1.shape({
+    title: PropTypes.textElement,
+    description: PropTypes.textElement
+  })),
+  buttonsStyle: PropTypes.boxStyle,
+  goodAnswerColor: PropTypes.color,
+  badAnswerColor: PropTypes.color,
+  spacing: PropTypes$1.number,
+  background: PropTypes.backgroundElement,
+  introBackground: PropTypes.backgroundElement,
+  callToAction: PropTypes.callToAction,
+  current: PropTypes$1.bool,
+  active: PropTypes$1.bool,
+  transitions: PropTypes.transitions,
+  transitionStagger: PropTypes$1.number,
+  type: PropTypes$1.string,
+  className: PropTypes$1.string
+};
+var defaultProps = {
+  id: null,
+  layout: 'middle',
+  introLayout: null,
+  title: null,
+  description: null,
+  questions: null,
+  results: null,
+  buttonsStyle: null,
+  goodAnswerColor: null,
+  badAnswerColor: null,
+  spacing: 20,
+  background: null,
+  introBackground: null,
+  callToAction: null,
+  current: true,
+  active: true,
+  transitions: null,
+  transitionStagger: 100,
+  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,
+      goodAnswerColor = _ref.goodAnswerColor,
+      badAnswerColor = _ref.badAnswerColor,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      introBackground = _ref.introBackground,
+      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 = useTrackScreenEvent(type);
+
+  var _useScreenSize = useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useViewer = useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var screenState = useScreenState();
+
+  var _ref2 = screenState !== null ? screenState.split('.') : [],
+      _ref3 = _slicedToArray(_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 || !isView; // Call to Action
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useResizeObserver = useResizeObserver(),
+      callToActionRef = _useResizeObserver.ref,
+      callToActionRect = _useResizeObserver.entry.contentRect;
+
+  var _ref4 = callToActionRect || {},
+      _ref4$height = _ref4.height,
+      callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+
+  var showInstantAnswer = isStatic || isCapture;
+  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      userAnswers = _useState2[0],
+      setUserAnswers = _useState2[1];
+
+  var initialQuestionIndex = stateId === 'questions' ? parseInt(stateIndex, 10) : stateId;
+
+  var _useState3 = useState(initialQuestionIndex !== null || !hasIntro || isPlaceholder ? initialQuestionIndex || 0 : 'intro'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      questionIndex = _useState4[0],
+      setQuestionIndex = _useState4[1];
+
+  var onAnswerClick = useCallback(function (answer, answerIndex) {
+    setUserAnswers(_objectSpread(_objectSpread({}, userAnswers), {}, _defineProperty({}, questionIndex, answerIndex)));
+    trackScreenEvent('click_answer', "Question #".concat(questionIndex + 1, " ").concat(answerIndex + 1, ": ").concat(answer.label.body), {
+      question: questions[questionIndex],
+      questionIndex: questionIndex,
+      answer: answer,
+      answerIndex: answerIndex
+    });
+  }, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
+  var onAnswerTransitionEnd = useCallback(function () {
+    var nextIndex = questionIndex + 1;
+    var questionsCount = questions.length;
+
+    if (nextIndex < questionsCount) {
+      setQuestionIndex(nextIndex);
+    } else if (nextIndex === questionsCount) {
+      setQuestionIndex('results');
+    }
+  }, [questions, questionIndex, setQuestionIndex]);
+  useEffect(function () {
+    if (!current && isEdit && userAnswers !== null) {
+      setUserAnswers(null);
+    }
+  }, [isEdit, current, userAnswers, setUserAnswers]);
+  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;
+  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
+  var currentPoints = useMemo(function () {
+    return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
+      var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
+          _ref5$answers = _ref5.answers,
+          questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
+
+      var answerIndex = userAnswers[answerQuestionIndex];
+
+      var _ref6 = questionAnswers[answerIndex] || {},
+          _ref6$points = _ref6.points,
+          points = _ref6$points === void 0 ? 0 : _ref6$points;
+
+      return points + totalPoints;
+    }, 0) : 0;
+  }, [userAnswers, questions]);
+  var isIntro = hasIntro && questionIndex === 'intro';
+  var isResults = questionIndex === 'results';
+  var isQuestion = !isIntro && !isResults;
+  var currentResult = useMemo(function () {
+    if (!isResults) {
+      return null;
+    }
+
+    if (stateId === 'results') {
+      return (results || [])[parseInt(stateIndex, 10)] || null;
+    }
+
+    return (results || []).sort(function (_ref7, _ref8) {
+      var _ref7$points = _ref7.points,
+          pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
+      var _ref8$points = _ref8.points,
+          pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
+
+      if (pointsA === pointsB) {
+        return 0;
+      }
 
-  if (isSplitted) {
-    items.push( /*#__PURE__*/React.createElement(Spacer, {
-      key: "spacer"
-    }));
-  } // Answer
+      return pointsA > pointsB ? 1 : -1;
+    }).reduce(function (lastResult, result) {
+      var _ref9 = lastResult || {},
+          _ref9$points = _ref9.points,
+          lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
 
+      var _ref10 = result || {},
+          _ref10$points = _ref10.points,
+          points = _ref10$points === void 0 ? 0 : _ref10$points;
 
-  items.push( /*#__PURE__*/React.createElement("div", {
-    key: "answers",
-    className: styles.answers,
-    ref: answerRef,
-    style: answered && !answerTransitionComplete && (isView || isEdit) ? {
-      transitionDuration: "".concat(resultsTransitionDuration, "ms"),
-      height: !showResults ? answerHeight : rightAnswerHeight + resultHeight
-    } : null
-  }, answers !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: styles.items
-  }, (isPlaceholder ? _toConsumableArray(new Array(2)) : answers).map(function (answer, answerI) {
-    var _ref12;
+      return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
+    }, null);
+  }, [isResults, results, currentPoints, stateId, stateIndex]);
 
-    var userAnswer = answerI === userAnswerIndex;
+  var _ref11 = currentResult || {},
+      _ref11$background = _ref11.background,
+      resultBackground = _ref11$background === void 0 ? null : _ref11$background,
+      _ref11$layout = _ref11.layout,
+      resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
 
-    var _ref9 = answer || {},
-        _ref9$good = _ref9.good,
-        rightAnswer = _ref9$good === void 0 ? false : _ref9$good,
-        _ref9$label = _ref9.label,
-        label = _ref9$label === void 0 ? null : _ref9$label,
-        _ref9$buttonStyle = _ref9.buttonStyle,
-        answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle;
+  var _useQuizCreate = useQuizCreate({
+    screenId: screenId
+  }),
+      submitQuiz = _useQuizCreate.create;
 
-    var _ref10 = label || {},
-        _ref10$textStyle = _ref10.textStyle,
-        textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
+  useEffect(function () {
+    if (!isResults || isEdit) {
+      return;
+    }
 
-    var _ref11 = textStyle || {};
-        _ref11.color;
+    submitQuiz({
+      choice: userAnswers,
+      value: currentPoints
+    });
+  }, [isResults, userAnswers, submitQuiz]); // Switch state
 
-    var hasAnswer = isTextFilled(label);
-    return answerTransitionComplete && !rightAnswer ? null : /*#__PURE__*/React.createElement("div", {
-      key: "answer-".concat(answerI),
-      ref: rightAnswer ? rightAnswerRef : null,
-      className: classNames([styles.item, (_ref12 = {}, _defineProperty(_ref12, styles.rightAnswer, rightAnswer), _defineProperty(_ref12, styles.userAnswer, userAnswer), _ref12)]),
-      style: showResults && rightAnswer && !answerTransitionComplete ? {
-        transform: "translateY(".concat(-rightAnswerTop, "px)"),
-        transitionDuration: "".concat(resultsTransitionDuration, "ms")
-      } : null
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.itemContent
-    }, /*#__PURE__*/React.createElement(ScreenElement, {
-      placeholder: "quizAnswer",
-      placeholderProps: {
-        good: answerI === 0
-      },
-      emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "+Ok+7S",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Answer"
-        }]
-      }),
-      emptyClassName: styles.emptyAnswer,
-      isEmpty: !hasAnswer
-    }, hasAnswer ? /*#__PURE__*/React.createElement(Transitions, {
-      transitions: transitions,
-      playing: transitionPlaying,
-      delay: (answerI + 1) * transitionStagger,
-      disabled: transitionDisabled
-    }, /*#__PURE__*/React.createElement(Button, {
-      className: styles.button,
-      onClick: function onClick() {
-        return onAnswerClick(answerI);
-      },
-      disabled: isPreview,
-      focusable: current && isView,
-      buttonStyle: _objectSpread(_objectSpread({}, getStyleFromButton(buttonsStyle)), getStyleFromButton(answerButtonStyle))
-    }, rightAnswer ? /*#__PURE__*/React.createElement("span", {
-      className: styles.resultIcon,
-      style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles.faIcon,
-      icon: faCheck
-    })) : null, answered && !hasUserAnsweredRight && userAnswer ? /*#__PURE__*/React.createElement("span", {
-      className: styles.resultIcon,
-      style: getStyleFromColor(badAnswerColor, 'backgroundColor')
-    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      className: styles.faIcon,
-      icon: faTimes
-    })) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
-      className: styles.optionLabel
-    })))) : null)));
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.result,
-    ref: resultRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.resultContent
-  }, /*#__PURE__*/React.createElement(ScreenElement, {
-    emptyLabel: answered ? /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "li7ADr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Result"
-      }]
-    }) : null,
-    isEmpty: answered && !hasResult,
-    emptyClassName: styles.emptyResult
-  }, hasResult && answers !== null ? /*#__PURE__*/React.createElement(Transitions, {
-    transitions: transitions,
-    playing: transitionPlaying,
-    delay: (1 + answers.length) * transitionStagger,
-    disabled: transitionDisabled
-  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, result, {
-    className: styles.resultText
-  })), hasCallToAction ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: callToActionHeight
+  useEffect(function () {
+    if (!isEdit && !isPreview) {
+      return;
+    }
+
+    if (stateId === 'questions') {
+      setQuestionIndex(parseInt(stateIndex, 10));
+    } else if (stateId === 'results') {
+      setQuestionIndex('results');
+    } else if (stateId === 'intro') {
+      setQuestionIndex('intro');
+    }
+  }, [stateId, stateIndex, isEdit, setQuestionIndex]);
+  var finalBackground = background;
+  var backgroundKey = 'background';
+
+  if (isIntro && introBackground !== null) {
+    finalBackground = introBackground;
+    backgroundKey = 'results';
+  } else if (isResults && resultBackground !== null) {
+    finalBackground = resultBackground;
+    backgroundKey = 'results';
+  } else if (isQuestion && questionBackground !== null) {
+    finalBackground = questionBackground;
+    backgroundKey = "question_".concat(questionIndex);
+  } // Transition direction
+
+
+  var lastQuestionIndexRef = useRef(questionIndex);
+  var direction = useMemo(function () {
+    if (questionIndex === lastQuestionIndexRef.current) {
+      return null;
+    }
+
+    var lastQuestionIndex = lastQuestionIndexRef.current;
+    lastQuestionIndexRef.current = questionIndex;
+
+    if (questionIndex === 'intro' || lastQuestionIndex === 'results' || lastQuestionIndex > questionIndex) {
+      return 'left';
     }
-  }) : null) : null)))));
+
+    lastQuestionIndexRef.current = questionIndex;
+    return 'right';
+  }, [questionIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref13 = {}, _defineProperty(_ref13, className, className !== null), _defineProperty(_ref13, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref13, styles.answered, answered), _defineProperty(_ref13, styles.showResults, showResults), _defineProperty(_ref13, styles.answerTransitionComplete, answerTransitionComplete), _ref13)]),
+    className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
     "data-screen-ready": true
-  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
+    key: backgroundKey,
+    classNames: styles$2,
+    timeout: 1000
+  }, /*#__PURE__*/React.createElement(Background, {
+    background: finalBackground,
     width: width,
     height: height,
     playing: backgroundPlaying,
-    shouldLoad: backgroundShouldLoad
-  }) : null, /*#__PURE__*/React.createElement(Container, {
+    shouldLoad: backgroundShouldLoad,
+    className: styles$2.background
+  }))) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    fullscreen: true,
-    verticalAlign: verticalAlign,
+  }, /*#__PURE__*/React.createElement(TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(CSSTransition, {
+    key: "intro",
+    classNames: styles$2,
+    timeout: 1000
+  }, /*#__PURE__*/React.createElement(Title, {
+    title: title,
+    description: description,
+    layout: introLayout || layout,
+    transitions: transitions,
+    transitionPlaying: transitionPlaying,
+    transitionStagger: transitionStagger,
+    transitionDisabled: transitionDisabled,
+    className: styles$2.intro,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
     } : null
-  }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
+  })) : null, isQuestion ? /*#__PURE__*/React.createElement(CSSTransition, {
+    key: "question-".concat(questionIndex),
+    classNames: styles$2,
+    timeout: 1000
+  }, /*#__PURE__*/React.createElement(Question, {
+    index: questionIndex,
+    totalCount: (questions || []).length,
+    question: text,
+    answers: answers,
+    answeredIndex: currentAnsweredIndex,
+    buttonsStyle: buttonsStyle,
+    goodAnswerColor: goodAnswerColor,
+    badAnswerColor: badAnswerColor,
+    focusable: current && isView,
+    showInstantAnswer: showInstantAnswer,
+    layout: questionLayout || layout,
+    withoutGoodAnswer: true,
+    callToActionHeight: callToActionHeight,
+    transitions: transitions,
+    transitionPlaying: transitionPlaying,
+    transitionStagger: transitionStagger,
+    transitionDisabled: transitionDisabled,
+    onAnswerClick: onAnswerClick,
+    onAnswerTransitionEnd: onAnswerTransitionEnd,
+    className: styles$2.question,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
+    key: "results",
+    classNames: styles$2,
+    timeout: 2000
+  }, /*#__PURE__*/React.createElement(Results, Object.assign({}, currentResult, {
+    layout: resultLayout || layout,
+    transitions: transitions,
+    transitionPlaying: transitionPlaying,
+    transitionStagger: transitionStagger,
+    transitionDisabled: transitionDisabled,
+    className: styles$2.results,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
     ref: callToActionRef,
-    className: styles.callToAction,
+    className: styles$2.callToAction,
     callToAction: callToAction,
-    disabled: !answerTransitionComplete,
     animationDisabled: isPreview,
     focusable: current && isView
   }) : null));
 };
 
-QuizScreen.propTypes = propTypes;
-QuizScreen.defaultProps = defaultProps;
+QuizMultipleScreen.propTypes = propTypes;
+QuizMultipleScreen.defaultProps = defaultProps;
 
-var definition = {
+var definition = [{
   id: 'quiz',
   type: 'screen',
   group: {
     label: defineMessage({
-      id: "ZqwBOx",
+      id: "ZiWlL6",
       defaultMessage: [{
         "type": 0,
         "value": "Questions"
@@ -528,7 +1292,7 @@ var definition = {
         }]
       }),
       field: {
-        type: 'button-style'
+        type: 'box-style'
       }
     }, {
       name: 'goodAnswerColor',
@@ -570,6 +1334,258 @@ var definition = {
       }
     }
   }]
-};
+}, {
+  id: 'quiz-multiple',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      id: "ZiWlL6",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Questions"
+      }]
+    }),
+    order: 7
+  },
+  title: defineMessage({
+    id: "ACkeH6",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Quiz with multiple questions"
+    }]
+  }),
+  component: QuizMultipleScreen,
+  layouts: ['top', 'middle', 'bottom', 'split'],
+  states: [{
+    id: 'intro',
+    label: defineMessage({
+      id: "BgrRxZ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Intro"
+      }]
+    }),
+    fields: [{
+      name: 'introLayout',
+      type: 'screen-layout',
+      defaultValue: 'middle',
+      screenState: 'intro',
+      label: defineMessage({
+        id: "4iBXj2",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Layout"
+        }]
+      })
+    }, {
+      name: 'title',
+      type: 'heading-element',
+      theme: {
+        textStyle: 'heading2'
+      },
+      label: defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'description',
+      type: 'text-element',
+      theme: {
+        textStyle: 'text'
+      },
+      label: defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'introBackground',
+      type: 'background',
+      label: defineMessage({
+        id: "cDj1mZ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Background"
+        }]
+      })
+    }]
+  }, {
+    id: 'questions',
+    label: defineMessage({
+      id: "VMd1oG",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Questions"
+      }]
+    }),
+    repeatable: true,
+    fieldName: 'questions',
+    fields: [{
+      name: 'text',
+      type: 'heading-element',
+      theme: {
+        textStyle: 'heading2'
+      },
+      label: defineMessage({
+        id: "hVE7TA",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Question"
+        }]
+      })
+    }, {
+      name: 'answers',
+      type: 'quiz-points-answers',
+      theme: {
+        label: {
+          textStyle: 'button'
+        }
+      },
+      label: defineMessage({
+        id: "KHWeV7",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Answers"
+        }]
+      })
+    }, {
+      name: 'background',
+      type: 'background',
+      label: defineMessage({
+        id: "cDj1mZ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Background"
+        }]
+      })
+    }]
+  }, {
+    id: 'results',
+    label: defineMessage({
+      id: "uiTxd7",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Results"
+      }]
+    }),
+    repeatable: true,
+    fields: [{
+      name: 'layout',
+      type: 'screen-layout',
+      defaultValue: 'top',
+      screenState: 'results',
+      label: defineMessage({
+        id: "4iBXj2",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Layout"
+        }]
+      })
+    }, {
+      name: 'title',
+      type: 'heading-element',
+      theme: {
+        textStyle: 'heading2'
+      },
+      label: defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'description',
+      type: 'text-element',
+      theme: {
+        textStyle: 'text'
+      },
+      label: defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'points',
+      type: 'number',
+      isHorizontal: true,
+      label: defineMessage({
+        id: "jWAJW4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Points"
+        }]
+      })
+    }, {
+      name: 'background',
+      type: 'background',
+      label: defineMessage({
+        id: "cDj1mZ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Background"
+        }]
+      })
+    }]
+  }],
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'top',
+    label: defineMessage({
+      id: "OPxJx/",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    type: 'fields',
+    label: defineMessage({
+      id: "LOknw0",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Styles"
+      }]
+    }),
+    isList: true,
+    fields: [{
+      name: 'buttonsStyle',
+      type: 'box-style',
+      label: defineMessage({
+        id: "l5uLMd",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Buttons"
+        }]
+      })
+    }]
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      id: "cDj1mZ",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+}];
 
 export { QuizScreen, definition as default };