@micromag/screen-quiz 0.3.150 → 0.3.154

package/es/index.js

@@ -5,12 +5,13 @@ 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 { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useVisitor, useScreenState } from '@micromag/core/contexts';
+import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
 import { useQuizCreate } from '@micromag/data';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
 import Container from '@micromag/element-container';
+import Scroll from '@micromag/element-scroll';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { ScreenElement, Transitions } from '@micromag/core/components';
 import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
@@ -24,7 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Button from '@micromag/element-button';
 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","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","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 styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","answerToSlide":"micromag-screen-quiz-answers-answerToSlide","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","userAnswer":"micromag-screen-quiz-answers-userAnswer","willCollapse":"micromag-screen-quiz-answers-willCollapse","didCollapsed":"micromag-screen-quiz-answers-didCollapsed","withoutGoodAnswer":"micromag-screen-quiz-answers-withoutGoodAnswer","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","withGoodAnswer":"micromag-screen-quiz-answers-withGoodAnswer","resultIcon":"micromag-screen-quiz-answers-resultIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
 
 var propTypes$5 = {
   items: PropTypes.quizAnswers.isRequired,
@@ -73,7 +74,7 @@ var defaultProps$5 = {
 };
 
 var Answers = function Answers(_ref) {
-  var _ref5;
+  var _ref4;
 
   var items = _ref.items,
       answeredIndex = _ref.answeredIndex,
@@ -111,24 +112,24 @@ var Answers = function Answers(_ref) {
   // 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 _useDimensionObserver = useDimensionObserver(),
+      answerRef = _useDimensionObserver.ref,
+      answerHeight = _useDimensionObserver.height;
 
-  var _useResizeObserver2 = useResizeObserver(),
-      rightAnswerRef = _useResizeObserver2.ref,
-      rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
-
-  var _ref4 = rightAnswerContentRect || {},
-      rightAnswerHeight = _ref4.height;
+  var _useDimensionObserver2 = useDimensionObserver(),
+      rightAnswerRef = _useDimensionObserver2.ref,
+      rightAnswerHeight = _useDimensionObserver2.height;
 
   var rightAnswerTop = useMemo(function () {
     return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
   }, [rightAnswerHeight]);
-  var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
+  var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, _ref3) {
+    var _ref3$good = _ref3.good,
+        good = _ref3$good === void 0 ? false : _ref3$good;
+    return hasGood || good;
+  }, false) : false;
+  var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
+  var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
 
   var _useState = useState(answeredIndex !== null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -150,7 +151,7 @@ var Answers = function Answers(_ref) {
         if (onCollapse !== null) {
           onCollapse();
         }
-      }, hasAnsweredRight || showUserAnswer ? 500 : answersCollapseDelay);
+      }, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
     }
 
     return function () {
@@ -158,7 +159,7 @@ var Answers = function Answers(_ref) {
         clearTimeout(timeout);
       }
     };
-  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, showUserAnswer]);
+  }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
   var onAnswerTransitionEnd = useCallback(function () {
     if (onTransitionEnd !== null) {
       onTransitionEnd();
@@ -173,7 +174,7 @@ var Answers = function Answers(_ref) {
     }
   }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
   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)]),
+    className: classNames([styles$4.container, (_ref4 = {}, _defineProperty(_ref4, styles$4.answered, answered), _defineProperty(_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty(_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty(_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref4, className, className !== null), _ref4)]),
     ref: answerRef,
     style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
       height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -181,44 +182,40 @@ var Answers = function Answers(_ref) {
   }, 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 _ref8;
+    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 _ref5 = answer || {},
+        _ref5$good = _ref5.good,
+        rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
+        _ref5$label = _ref5.label,
+        label = _ref5$label === void 0 ? null : _ref5$label,
+        _ref5$buttonStyle = _ref5.buttonStyle,
+        answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
+        _ref5$textStyle = _ref5.textStyle,
+        answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
+
+    var _ref6 = label || {},
         _ref6$textStyle = _ref6.textStyle,
-        answerButtonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
-
-    var _ref7 = label || {},
-        _ref7$textStyle = _ref7.textStyle,
-        textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
+        textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
 
     var hasAnswer = isTextFilled(label);
-    var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
-
-    if (!showUserAnswer && answersDidCollapsed && !rightAnswer) {
-      return null;
-    } // Only show user answer
-
+    var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
 
-    if (hasFinalUserAnswer && answersCollapsed && !userAnswer) {
+    if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
       return null;
     }
 
+    var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
     return /*#__PURE__*/React.createElement("div", {
       key: "answer-".concat(answerI),
-      ref: rightAnswer ? rightAnswerRef : null,
-      className: classNames([styles$4.item, (_ref8 = {}, _defineProperty(_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref8, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref8, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref8)]),
-      style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
+      ref: answerToShow ? rightAnswerRef : null,
+      className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer && !finalShowUserAnswer), _defineProperty(_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _defineProperty(_ref7, styles$4.answerToSlide, answerToShow), _ref7)]),
+      style: answersCollapsed && answerToShow && !answersDidCollapsed && shouldCollapse ? {
         transform: "translateY(".concat(-rightAnswerTop, "px)")
       } : null,
-      onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer || showUserAnswer && userAnswer ? onAnswerTransitionEnd : null
+      onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$4.itemContent
     }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -290,7 +287,6 @@ var propTypes$4 = {
   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,
@@ -319,7 +315,6 @@ var defaultProps$4 = {
   badAnswerColor: null,
   focusable: false,
   layout: null,
-  callToActionHeight: null,
   showInstantAnswer: false,
   withResult: false,
   withoutGoodAnswer: false,
@@ -336,7 +331,7 @@ var defaultProps$4 = {
 };
 
 var Question = function Question(_ref) {
-  var _ref4;
+  var _ref3;
 
   var question = _ref.question,
       answers = _ref.answers,
@@ -356,7 +351,6 @@ var Question = function Question(_ref) {
       withoutTrueFalse = _ref.withoutTrueFalse,
       withoutIndex = _ref.withoutIndex,
       layout = _ref.layout,
-      callToActionHeight = _ref.callToActionHeight,
       transitions = _ref.transitions,
       transitionPlaying = _ref.transitionPlaying,
       transitionStagger = _ref.transitionStagger,
@@ -385,22 +379,12 @@ var Question = function Question(_ref) {
       setResultVisible = _useState2[1];
 
   var answered = answeredIndex !== null;
-
-  var _useResizeObserver = useResizeObserver(),
-      resultRef = _useResizeObserver.ref,
-      resultContentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = resultContentRect || {};
-      _ref3.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, (_ref4 = {}, _defineProperty(_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles$3.resultVisible, resultVisible), _defineProperty(_ref4, className, className !== null), _ref4)]),
-    fullscreen: true,
+    className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles$3.resultVisible, resultVisible), _defineProperty(_ref3, className, className !== null), _ref3)]),
     verticalAlign: verticalAlign,
     style: style
   }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
@@ -456,8 +440,7 @@ var Question = function Question(_ref) {
     onTransitionEnd: onAnswerTransitionEnd
   }), withResult ? /*#__PURE__*/React.createElement("div", {
     className: styles$3.result,
-    key: "results",
-    ref: resultRef
+    key: "results"
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.resultContent
   }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -477,11 +460,7 @@ var Question = function Question(_ref) {
     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]);
+  }))) : null))) : null]);
 };
 
 Question.propTypes = propTypes$4;
@@ -511,8 +490,6 @@ var propTypes$3 = {
   transitions: PropTypes.transitions,
   transitionStagger: PropTypes$1.number,
   type: PropTypes$1.string,
-  enableInteraction: PropTypes$1.func,
-  disableInteraction: PropTypes$1.func,
   className: PropTypes$1.string
 };
 var defaultProps$3 = {
@@ -534,8 +511,6 @@ var defaultProps$3 = {
   transitions: null,
   transitionStagger: 100,
   type: null,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
@@ -558,8 +533,6 @@ var QuizScreen = function QuizScreen(_ref) {
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
       type = _ref.type,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
   var screenId = id || 'screen-id';
   var trackScreenEvent = useTrackScreenEvent(type);
@@ -567,12 +540,8 @@ var QuizScreen = function QuizScreen(_ref) {
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = useViewer(),
-      menuSize = _useViewer.menuSize;
-
   var _useScreenRenderConte = useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
       isPreview = _useScreenRenderConte.isPreview,
@@ -581,20 +550,31 @@ var QuizScreen = function QuizScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _useViewerContext = useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
   var transitionPlaying = current;
   var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = current || active; // Call to Action
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
-
-  var _useResizeObserver = useResizeObserver(),
-      callToActionRef = _useResizeObserver.ref,
-      callToActionRect = _useResizeObserver.entry.contentRect;
+  var _ref2 = callToAction || {},
+      _ref2$active = _ref2.active,
+      hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
 
-  var _ref2 = callToActionRect || {},
-      _ref2$height = _ref2.height,
-      callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
+  var _useDimensionObserver = useDimensionObserver(),
+      callToActionRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
   var showInstantAnswer = isStatic || isCapture;
   var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
@@ -606,8 +586,15 @@ var QuizScreen = function QuizScreen(_ref) {
       userAnswerIndex = _useState2[0],
       setUserAnswerIndex = _useState2[1];
 
+  var visitor = useVisitor();
+
+  var _ref3 = visitor || {},
+      _ref3$id = _ref3.id,
+      visitorId = _ref3$id === void 0 ? null : _ref3$id;
+
   var _useQuizCreate = useQuizCreate({
-    screenId: screenId
+    screenId: screenId,
+    visitorId: visitorId
   }),
       submitQuiz = _useQuizCreate.create;
 
@@ -629,15 +616,15 @@ var QuizScreen = function QuizScreen(_ref) {
   }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
   useEffect(function () {
     if (userAnswerIndex !== null) {
-      var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
-          _ref3$good = _ref3.good,
-          isGood = _ref3$good === void 0 ? false : _ref3$good,
-          _ref3$label = _ref3.label,
-          label = _ref3$label === void 0 ? {} : _ref3$label;
+      var _ref4 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
+          _ref4$good = _ref4.good,
+          isGood = _ref4$good === void 0 ? false : _ref4$good,
+          _ref4$label = _ref4.label,
+          label = _ref4$label === void 0 ? {} : _ref4$label;
 
-      var _ref4 = label || {},
-          _ref4$body = _ref4.body,
-          body = _ref4$body === void 0 ? '' : _ref4$body;
+      var _ref5 = label || {},
+          _ref5$body = _ref5.body,
+          body = _ref5$body === void 0 ? '' : _ref5$body;
 
       submitQuiz({
         choice: body || userAnswerIndex,
@@ -645,6 +632,27 @@ var QuizScreen = function QuizScreen(_ref) {
       });
     }
   }, [userAnswerIndex, answers, submitQuiz]);
+  var scrollingDisabled = !isEdit && transitionDisabled || !current;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrolledBottom = _useState4[0],
+      setScrolledBottom = _useState4[1];
+
+  var onScrolledBottom = useCallback(function (_ref6) {
+    var initial = _ref6.initial;
+
+    if (initial) {
+      trackScreenEvent('scroll', 'Screen');
+    }
+
+    setScrolledBottom(true);
+  }, [trackScreenEvent]);
+  var onScrolledNotBottom = useCallback(function () {
+    setScrolledBottom(false);
+  }, [setScrolledBottom]);
+  var isSplitted = layout === 'split';
+  var verticalAlign = isSplitted ? null : layout;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
     "data-screen-ready": true
@@ -654,10 +662,17 @@ var QuizScreen = function QuizScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
+  }, /*#__PURE__*/React.createElement(Scroll, {
+    verticalAlign: verticalAlign,
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom,
+    onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React.createElement(Question, {
     question: question,
     answers: answers,
@@ -672,7 +687,6 @@ var QuizScreen = function QuizScreen(_ref) {
     showInstantAnswer: showInstantAnswer,
     withResult: true,
     layout: layout,
-    callToActionHeight: callToActionHeight,
     transitions: transitions,
     transitionPlaying: transitionPlaying,
     transitionStagger: transitionStagger,
@@ -681,21 +695,24 @@ var QuizScreen = function QuizScreen(_ref) {
     className: styles$2.question,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
+  })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
     ref: callToActionRef,
-    className: styles$2.callToAction,
-    callToAction: callToAction,
+    className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
+    style: {
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingTop: spacing / 2,
+      paddingBottom: spacing / 2
+    }
+  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  }) : null));
+    openWebView: openWebView
+  }))) : null));
 };
 
 QuizScreen.propTypes = propTypes$3;
@@ -996,7 +1013,7 @@ var defaultProps = {
 };
 
 var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
-  var _ref12;
+  var _ref13;
 
   var id = _ref.id,
       layout = _ref.layout,
@@ -1029,11 +1046,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = useViewer(),
-      menuSize = _useViewer.menuSize;
+  var _useViewerContext = useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
 
   var _useScreenRenderConte = useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
@@ -1043,6 +1061,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       isStatic = _useScreenRenderConte.isStatic,
       isCapture = _useScreenRenderConte.isCapture;
 
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
+
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
   var screenState = useScreenState();
 
   var _ref2 = screenState !== null ? screenState.split('.') : [],
@@ -1059,13 +1085,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
 
   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 _useDimensionObserver = useDimensionObserver(),
+      callToActionRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
 
   var showInstantAnswer = isStatic || isCapture;
   var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
@@ -1133,15 +1156,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
   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 _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
+          _ref4$answers = _ref4.answers,
+          questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
 
       var answerIndex = userAnswers[answerQuestionIndex];
 
-      var _ref6 = questionAnswers[answerIndex] || {},
-          _ref6$points = _ref6.points,
-          points = _ref6$points === void 0 ? 0 : _ref6$points;
+      var _ref5 = questionAnswers[answerIndex] || {},
+          _ref5$points = _ref5.points,
+          points = _ref5$points === void 0 ? 0 : _ref5$points;
 
       return points + totalPoints;
     }, 0) : 0;
@@ -1158,11 +1181,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
       return (results || [])[parseInt(stateIndex, 10)] || null;
     }
 
-    return (results || []).sort(function (_ref7, _ref8) {
+    return (results || []).sort(function (_ref6, _ref7) {
+      var _ref6$points = _ref6.points,
+          pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
       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;
+          pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
 
       if (pointsA === pointsB) {
         return 0;
@@ -1170,26 +1193,33 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
 
       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 _ref8 = lastResult || {},
+          _ref8$points = _ref8.points,
+          lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
 
-      var _ref10 = result || {},
-          _ref10$points = _ref10.points,
-          points = _ref10$points === void 0 ? 0 : _ref10$points;
+      var _ref9 = result || {},
+          _ref9$points = _ref9.points,
+          points = _ref9$points === void 0 ? 0 : _ref9$points;
 
       return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
     }, null);
   }, [isResults, results, currentPoints, stateId, stateIndex]);
 
-  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 _ref10 = currentResult || {},
+      _ref10$background = _ref10.background,
+      resultBackground = _ref10$background === void 0 ? null : _ref10$background,
+      _ref10$layout = _ref10.layout,
+      resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
+
+  var visitor = useVisitor();
+
+  var _ref11 = visitor || {},
+      _ref11$id = _ref11.id,
+      visitorId = _ref11$id === void 0 ? null : _ref11$id;
 
   var _useQuizCreate = useQuizCreate({
-    screenId: screenId
+    screenId: screenId,
+    visitorId: visitorId
   }),
       submitQuiz = _useQuizCreate.create;
 
@@ -1248,8 +1278,37 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     lastQuestionIndexRef.current = questionIndex;
     return 'right';
   }, [questionIndex]);
+  var scrollingDisabled = !isEdit && transitionDisabled || !current;
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      scrolledBottom = _useState6[0],
+      setScrolledBottom = _useState6[1];
+
+  var onScrolledBottom = useCallback(function (_ref12) {
+    var initial = _ref12.initial;
+
+    if (initial) {
+      trackScreenEvent('scroll', 'Screen');
+    }
+
+    setScrolledBottom(true);
+  }, [trackScreenEvent]);
+  var onScrolledNotBottom = useCallback(function () {
+    setScrolledBottom(false);
+  }, [setScrolledBottom]);
+  var verticalAlign = layout;
+
+  if (isIntro && introLayout !== null) {
+    verticalAlign = introLayout;
+  } else if (isQuestion && questionLayout !== null) {
+    verticalAlign = questionLayout;
+  } else if (isResults && resultLayout !== null) {
+    verticalAlign = questionLayout;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
+    className: classNames([styles$2.container, (_ref13 = {}, _defineProperty(_ref13, styles$2[direction], direction !== null), _defineProperty(_ref13, className, className !== null), _ref13)]),
     "data-screen-ready": true
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
     key: backgroundKey,
@@ -1261,11 +1320,18 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
+    muted: muted,
     shouldLoad: backgroundShouldLoad,
+    mediaRef: mediaRef,
     className: styles$2.background
   }))) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
+  }, /*#__PURE__*/React.createElement(Scroll, {
+    verticalAlign: verticalAlign,
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom,
+    onScrolledNotBottom: onScrolledNotBottom
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(CSSTransition, {
     key: "intro",
     classNames: styles$2,
@@ -1283,7 +1349,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     className: styles$2.intro,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null,
     onClickButton: onClickIntroButton
   })) : null, isQuestion ? /*#__PURE__*/React.createElement(CSSTransition, {
@@ -1305,7 +1372,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     showInstantAnswer: showInstantAnswer,
     layout: questionLayout || layout,
     withoutGoodAnswer: true,
-    callToActionHeight: callToActionHeight,
     transitions: transitions,
     transitionPlaying: transitionPlaying,
     transitionStagger: transitionStagger,
@@ -1315,7 +1381,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     className: styles$2.question,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
   })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
     key: "results",
@@ -1332,19 +1399,24 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
     className: styles$2.results,
     style: !isPlaceholder ? {
       padding: spacing,
-      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
     } : null
-  }))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
+  }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
     ref: callToActionRef,
-    className: styles$2.callToAction,
-    callToAction: callToAction,
+    className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
+    style: {
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+      paddingTop: spacing / 2,
+      paddingBottom: spacing / 2
+    }
+  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    }
-  }) : null));
+    openWebView: openWebView
+  }))) : null));
 };
 
 QuizMultipleScreen.propTypes = propTypes;
@@ -1813,4 +1885,4 @@ var definition = [{
   }]
 }];
 
-export { QuizScreen, definition as default };
+export { QuizMultipleScreen, QuizScreen, definition as default };