@micromag/screen-quiz 0.3.148 → 0.3.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +189 -128
  3. package/lib/index.js +188 -125
  4. package/package.json +13 -12
package/assets/css/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .micromag-screen-quiz-answers-emptyAnswer{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{width:100%;height:40px;margin:0 auto;font-size:.75em}.micromag-screen-quiz-answers-item{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-isUserAnswer{opacity:1!important}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item{opacity:.3}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer,.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:.99}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item,.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;opacity:0}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;opacity:1}.micromag-screen-quiz-answers-didCollapsed .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition:none;-o-transition:none;transition:none}.micromag-screen-quiz-answers-withoutGoodAnswer .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-button{position:relative;width:100%;padding:10px;color:#fff}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withGoodAnswer .micromag-screen-quiz-answers-button{padding-right:42px;padding-left:42px}.micromag-screen-quiz-answers-resultIcon{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:50%;left:5px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:5px;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;border:2px solid #1c1c1c;border-radius:50%;opacity:0;background-color:#ff2945}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
2
2
  .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;width:100%;margin-bottom:1em;text-align:center}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{position:absolute;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;opacity:0;pointer-events:none}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{width:100%;margin:0 auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{position:relative;opacity:1;pointer-events:all}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);mix-blend-mode:difference;font-size:8px}
3
- .micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{position:relative;padding:6px}.micromag-screen-quiz-layout{top:0;right:0}.micromag-screen-quiz-callToAction,.micromag-screen-quiz-layout{position:absolute;bottom:0;left:0}.micromag-screen-quiz-callToAction{width:100%}.micromag-screen-quiz-transition{position:absolute;top:0;right:0;bottom:0;left:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:0}
3
+ .micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{position:relative;padding:6px}.micromag-screen-quiz-layout{top:0;right:0}.micromag-screen-quiz-callToAction,.micromag-screen-quiz-layout{position:absolute;bottom:0;left:0}.micromag-screen-quiz-callToAction{width:100%;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-quiz-callToAction a{padding:0}.micromag-screen-quiz-callToAction.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{position:absolute;top:0;right:0;bottom:0;left:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease;position:absolute;top:0;left:0;width:100%;min-height:100%}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease;position:absolute;top:0;left:0;width:100%;min-height:100%}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:0}
4
4
  .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{width:100%;margin:0 auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}
5
5
  .micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-description,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-title{margin-bottom:10px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription,.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{width:100%;margin:0 auto 10px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyTitle{height:60px}.micromag-screen-quiz-title-container .micromag-screen-quiz-title-emptyDescription{height:100px}.micromag-screen-quiz-title-container.micromag-screen-quiz-title-isPlaceholder{padding:10px}
package/es/index.js CHANGED
@@ -5,12 +5,13 @@ import classNames from 'classnames';
5
5
  import PropTypes$1 from 'prop-types';
6
6
  import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
7
7
  import { PropTypes } from '@micromag/core';
8
- import { useScreenRenderContext, useScreenSize, useViewer, useScreenState } from '@micromag/core/contexts';
9
- import { useResizeObserver, useTrackScreenEvent } from '@micromag/core/hooks';
8
+ import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
9
+ import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
10
10
  import { useQuizCreate } from '@micromag/data';
11
11
  import Background from '@micromag/element-background';
12
12
  import CallToAction from '@micromag/element-call-to-action';
13
13
  import Container from '@micromag/element-container';
14
+ import Scroll from '@micromag/element-scroll';
14
15
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
15
16
  import { ScreenElement, Transitions } from '@micromag/core/components';
16
17
  import { isTextFilled, getStyleFromColor } from '@micromag/core/utils';
@@ -73,7 +74,7 @@ var defaultProps$5 = {
73
74
  };
74
75
 
75
76
  var Answers = function Answers(_ref) {
76
- var _ref5;
77
+ var _ref4;
77
78
 
78
79
  var items = _ref.items,
79
80
  answeredIndex = _ref.answeredIndex,
@@ -111,23 +112,22 @@ var Answers = function Answers(_ref) {
111
112
  // we also get the right answer's Y to animate its position
112
113
 
113
114
 
114
- var _useResizeObserver = useResizeObserver(),
115
- answerRef = _useResizeObserver.ref,
116
- answerContentRect = _useResizeObserver.entry.contentRect;
117
-
118
- var _ref3 = answerContentRect || {},
119
- answerHeight = _ref3.height;
120
-
121
- var _useResizeObserver2 = useResizeObserver(),
122
- rightAnswerRef = _useResizeObserver2.ref,
123
- rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
115
+ var _useDimensionObserver = useDimensionObserver(),
116
+ answerRef = _useDimensionObserver.ref,
117
+ answerHeight = _useDimensionObserver.height;
124
118
 
125
- var _ref4 = rightAnswerContentRect || {},
126
- rightAnswerHeight = _ref4.height;
119
+ var _useDimensionObserver2 = useDimensionObserver(),
120
+ rightAnswerRef = _useDimensionObserver2.ref,
121
+ rightAnswerHeight = _useDimensionObserver2.height;
127
122
 
128
123
  var rightAnswerTop = useMemo(function () {
129
124
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
130
125
  }, [rightAnswerHeight]);
126
+ var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, _ref3) {
127
+ var _ref3$good = _ref3.good,
128
+ good = _ref3$good === void 0 ? false : _ref3$good;
129
+ return hasGood || good;
130
+ }, false) : false;
131
131
  var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
132
132
 
133
133
  var _useState = useState(answeredIndex !== null),
@@ -173,7 +173,7 @@ var Answers = function Answers(_ref) {
173
173
  }
174
174
  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
175
175
  return /*#__PURE__*/React.createElement("div", {
176
- 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)]),
176
+ className: classNames([styles$4.container, (_ref4 = {}, _defineProperty(_ref4, styles$4.answered, answered), _defineProperty(_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer), _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)]),
177
177
  ref: answerRef,
178
178
  style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
179
179
  height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -181,23 +181,23 @@ var Answers = function Answers(_ref) {
181
181
  }, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
182
182
  className: styles$4.items
183
183
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
184
- var _ref8;
184
+ var _ref7;
185
185
 
186
186
  var userAnswer = answerI === answeredIndex;
187
187
 
188
- var _ref6 = answer || {},
189
- _ref6$good = _ref6.good,
190
- rightAnswer = _ref6$good === void 0 ? false : _ref6$good,
191
- _ref6$label = _ref6.label,
192
- label = _ref6$label === void 0 ? null : _ref6$label,
193
- _ref6$buttonStyle = _ref6.buttonStyle,
194
- answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle,
188
+ var _ref5 = answer || {},
189
+ _ref5$good = _ref5.good,
190
+ rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
191
+ _ref5$label = _ref5.label,
192
+ label = _ref5$label === void 0 ? null : _ref5$label,
193
+ _ref5$buttonStyle = _ref5.buttonStyle,
194
+ answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
195
+ _ref5$textStyle = _ref5.textStyle,
196
+ answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
197
+
198
+ var _ref6 = label || {},
195
199
  _ref6$textStyle = _ref6.textStyle,
196
- answerButtonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
197
-
198
- var _ref7 = label || {},
199
- _ref7$textStyle = _ref7.textStyle,
200
- textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
200
+ textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
201
201
 
202
202
  var hasAnswer = isTextFilled(label);
203
203
  var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
@@ -213,8 +213,8 @@ var Answers = function Answers(_ref) {
213
213
 
214
214
  return /*#__PURE__*/React.createElement("div", {
215
215
  key: "answer-".concat(answerI),
216
- ref: rightAnswer ? rightAnswerRef : null,
217
- 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)]),
216
+ ref: rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer ? rightAnswerRef : null,
217
+ className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref7)]),
218
218
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
219
219
  transform: "translateY(".concat(-rightAnswerTop, "px)")
220
220
  } : null,
@@ -290,7 +290,6 @@ var propTypes$4 = {
290
290
  badAnswerColor: PropTypes.color,
291
291
  focusable: PropTypes$1.bool,
292
292
  layout: PropTypes$1.string,
293
- callToActionHeight: PropTypes$1.number,
294
293
  showInstantAnswer: PropTypes$1.bool,
295
294
  withResult: PropTypes$1.bool,
296
295
  withoutGoodAnswer: PropTypes$1.bool,
@@ -319,7 +318,6 @@ var defaultProps$4 = {
319
318
  badAnswerColor: null,
320
319
  focusable: false,
321
320
  layout: null,
322
- callToActionHeight: null,
323
321
  showInstantAnswer: false,
324
322
  withResult: false,
325
323
  withoutGoodAnswer: false,
@@ -336,7 +334,7 @@ var defaultProps$4 = {
336
334
  };
337
335
 
338
336
  var Question = function Question(_ref) {
339
- var _ref4;
337
+ var _ref3;
340
338
 
341
339
  var question = _ref.question,
342
340
  answers = _ref.answers,
@@ -356,7 +354,6 @@ var Question = function Question(_ref) {
356
354
  withoutTrueFalse = _ref.withoutTrueFalse,
357
355
  withoutIndex = _ref.withoutIndex,
358
356
  layout = _ref.layout,
359
- callToActionHeight = _ref.callToActionHeight,
360
357
  transitions = _ref.transitions,
361
358
  transitionPlaying = _ref.transitionPlaying,
362
359
  transitionStagger = _ref.transitionStagger,
@@ -385,22 +382,12 @@ var Question = function Question(_ref) {
385
382
  setResultVisible = _useState2[1];
386
383
 
387
384
  var answered = answeredIndex !== null;
388
-
389
- var _useResizeObserver = useResizeObserver(),
390
- resultRef = _useResizeObserver.ref,
391
- resultContentRect = _useResizeObserver.entry.contentRect;
392
-
393
- var _ref3 = resultContentRect || {};
394
- _ref3.height; // eslint-disable-line
395
-
396
-
397
385
  var onAnswersCollapse = useCallback(function () {
398
386
  setResultVisible(true);
399
387
  }, [setResultVisible]);
400
388
  var hasIndex = index !== null && totalCount !== null;
401
389
  return /*#__PURE__*/React.createElement(Layout, {
402
- className: classNames([styles$3.container, (_ref4 = {}, _defineProperty(_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles$3.resultVisible, resultVisible), _defineProperty(_ref4, className, className !== null), _ref4)]),
403
- fullscreen: true,
390
+ className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles$3.resultVisible, resultVisible), _defineProperty(_ref3, className, className !== null), _ref3)]),
404
391
  verticalAlign: verticalAlign,
405
392
  style: style
406
393
  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
@@ -456,8 +443,7 @@ var Question = function Question(_ref) {
456
443
  onTransitionEnd: onAnswerTransitionEnd
457
444
  }), withResult ? /*#__PURE__*/React.createElement("div", {
458
445
  className: styles$3.result,
459
- key: "results",
460
- ref: resultRef
446
+ key: "results"
461
447
  }, /*#__PURE__*/React.createElement("div", {
462
448
  className: styles$3.resultContent
463
449
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -477,11 +463,7 @@ var Question = function Question(_ref) {
477
463
  disabled: transitionDisabled
478
464
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, result, {
479
465
  className: styles$3.resultText
480
- })), callToActionHeight !== null ? /*#__PURE__*/React.createElement("div", {
481
- style: {
482
- height: callToActionHeight
483
- }
484
- }) : null) : null))) : null]);
466
+ }))) : null))) : null]);
485
467
  };
486
468
 
487
469
  Question.propTypes = propTypes$4;
@@ -511,8 +493,6 @@ var propTypes$3 = {
511
493
  transitions: PropTypes.transitions,
512
494
  transitionStagger: PropTypes$1.number,
513
495
  type: PropTypes$1.string,
514
- enableInteraction: PropTypes$1.func,
515
- disableInteraction: PropTypes$1.func,
516
496
  className: PropTypes$1.string
517
497
  };
518
498
  var defaultProps$3 = {
@@ -534,8 +514,6 @@ var defaultProps$3 = {
534
514
  transitions: null,
535
515
  transitionStagger: 100,
536
516
  type: null,
537
- enableInteraction: null,
538
- disableInteraction: null,
539
517
  className: null
540
518
  };
541
519
 
@@ -558,8 +536,6 @@ var QuizScreen = function QuizScreen(_ref) {
558
536
  transitions = _ref.transitions,
559
537
  transitionStagger = _ref.transitionStagger,
560
538
  type = _ref.type,
561
- enableInteraction = _ref.enableInteraction,
562
- disableInteraction = _ref.disableInteraction,
563
539
  className = _ref.className;
564
540
  var screenId = id || 'screen-id';
565
541
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -567,12 +543,8 @@ var QuizScreen = function QuizScreen(_ref) {
567
543
  var _useScreenSize = useScreenSize(),
568
544
  width = _useScreenSize.width,
569
545
  height = _useScreenSize.height,
570
- menuOverScreen = _useScreenSize.menuOverScreen,
571
546
  resolution = _useScreenSize.resolution;
572
547
 
573
- var _useViewer = useViewer(),
574
- menuSize = _useViewer.menuSize;
575
-
576
548
  var _useScreenRenderConte = useScreenRenderContext(),
577
549
  isView = _useScreenRenderConte.isView,
578
550
  isPreview = _useScreenRenderConte.isPreview,
@@ -581,20 +553,31 @@ var QuizScreen = function QuizScreen(_ref) {
581
553
  isStatic = _useScreenRenderConte.isStatic,
582
554
  isCapture = _useScreenRenderConte.isCapture;
583
555
 
556
+ var _useViewerContext = useViewerContext(),
557
+ viewerTopHeight = _useViewerContext.topHeight,
558
+ viewerBottomHeight = _useViewerContext.bottomHeight,
559
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
560
+
561
+ var _useViewerWebView = useViewerWebView(),
562
+ openWebView = _useViewerWebView.open;
563
+
564
+ var _usePlaybackContext = usePlaybackContext(),
565
+ muted = _usePlaybackContext.muted;
566
+
567
+ var mediaRef = usePlaybackMediaRef(current);
584
568
  var transitionPlaying = current;
585
569
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
586
570
  var backgroundPlaying = current && (isView || isEdit);
587
571
  var mediaShouldLoad = current || active; // Call to Action
588
572
 
589
- var hasCallToAction = callToAction !== null && callToAction.active === true;
590
-
591
- var _useResizeObserver = useResizeObserver(),
592
- callToActionRef = _useResizeObserver.ref,
593
- callToActionRect = _useResizeObserver.entry.contentRect;
573
+ var _ref2 = callToAction || {},
574
+ _ref2$active = _ref2.active,
575
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
594
576
 
595
- var _ref2 = callToActionRect || {},
596
- _ref2$height = _ref2.height,
597
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
577
+ var _useDimensionObserver = useDimensionObserver(),
578
+ callToActionRef = _useDimensionObserver.ref,
579
+ _useDimensionObserver2 = _useDimensionObserver.height,
580
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
598
581
 
599
582
  var showInstantAnswer = isStatic || isCapture;
600
583
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
@@ -645,6 +628,27 @@ var QuizScreen = function QuizScreen(_ref) {
645
628
  });
646
629
  }
647
630
  }, [userAnswerIndex, answers, submitQuiz]);
631
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
632
+
633
+ var _useState3 = useState(false),
634
+ _useState4 = _slicedToArray(_useState3, 2),
635
+ scrolledBottom = _useState4[0],
636
+ setScrolledBottom = _useState4[1];
637
+
638
+ var onScrolledBottom = useCallback(function (_ref5) {
639
+ var initial = _ref5.initial;
640
+
641
+ if (initial) {
642
+ trackScreenEvent('scroll', 'Screen');
643
+ }
644
+
645
+ setScrolledBottom(true);
646
+ }, [trackScreenEvent]);
647
+ var onScrolledNotBottom = useCallback(function () {
648
+ setScrolledBottom(false);
649
+ }, [setScrolledBottom]);
650
+ var isSplitted = layout === 'split';
651
+ var verticalAlign = isSplitted ? null : layout;
648
652
  return /*#__PURE__*/React.createElement("div", {
649
653
  className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
650
654
  "data-screen-ready": true
@@ -654,10 +658,17 @@ var QuizScreen = function QuizScreen(_ref) {
654
658
  height: height,
655
659
  resolution: resolution,
656
660
  playing: backgroundPlaying,
657
- shouldLoad: mediaShouldLoad
661
+ muted: muted,
662
+ shouldLoad: mediaShouldLoad,
663
+ mediaRef: mediaRef
658
664
  }) : null, /*#__PURE__*/React.createElement(Container, {
659
665
  width: width,
660
666
  height: height
667
+ }, /*#__PURE__*/React.createElement(Scroll, {
668
+ verticalAlign: verticalAlign,
669
+ disabled: scrollingDisabled,
670
+ onScrolledBottom: onScrolledBottom,
671
+ onScrolledNotBottom: onScrolledNotBottom
661
672
  }, /*#__PURE__*/React.createElement(Question, {
662
673
  question: question,
663
674
  answers: answers,
@@ -672,7 +683,6 @@ var QuizScreen = function QuizScreen(_ref) {
672
683
  showInstantAnswer: showInstantAnswer,
673
684
  withResult: true,
674
685
  layout: layout,
675
- callToActionHeight: callToActionHeight,
676
686
  transitions: transitions,
677
687
  transitionPlaying: transitionPlaying,
678
688
  transitionStagger: transitionStagger,
@@ -681,21 +691,24 @@ var QuizScreen = function QuizScreen(_ref) {
681
691
  className: styles$2.question,
682
692
  style: !isPlaceholder ? {
683
693
  padding: spacing,
684
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
694
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
695
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
685
696
  } : null
686
- }), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
697
+ })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
687
698
  ref: callToActionRef,
688
- className: styles$2.callToAction,
689
- callToAction: callToAction,
699
+ className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
700
+ style: {
701
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
702
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
703
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
704
+ paddingTop: spacing / 2,
705
+ paddingBottom: spacing / 2
706
+ }
707
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
690
708
  animationDisabled: isPreview,
691
709
  focusable: current && isView,
692
- screenSize: {
693
- width: width,
694
- height: height
695
- },
696
- enableInteraction: enableInteraction,
697
- disableInteraction: disableInteraction
698
- }) : null));
710
+ openWebView: openWebView
711
+ }))) : null));
699
712
  };
700
713
 
701
714
  QuizScreen.propTypes = propTypes$3;
@@ -1029,11 +1042,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1029
1042
  var _useScreenSize = useScreenSize(),
1030
1043
  width = _useScreenSize.width,
1031
1044
  height = _useScreenSize.height,
1032
- menuOverScreen = _useScreenSize.menuOverScreen,
1033
1045
  resolution = _useScreenSize.resolution;
1034
1046
 
1035
- var _useViewer = useViewer(),
1036
- menuSize = _useViewer.menuSize;
1047
+ var _useViewerContext = useViewerContext(),
1048
+ viewerTopHeight = _useViewerContext.topHeight,
1049
+ viewerBottomHeight = _useViewerContext.bottomHeight,
1050
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1037
1051
 
1038
1052
  var _useScreenRenderConte = useScreenRenderContext(),
1039
1053
  isView = _useScreenRenderConte.isView,
@@ -1043,6 +1057,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1043
1057
  isStatic = _useScreenRenderConte.isStatic,
1044
1058
  isCapture = _useScreenRenderConte.isCapture;
1045
1059
 
1060
+ var _usePlaybackContext = usePlaybackContext(),
1061
+ muted = _usePlaybackContext.muted;
1062
+
1063
+ var mediaRef = usePlaybackMediaRef(current);
1064
+
1065
+ var _useViewerWebView = useViewerWebView(),
1066
+ openWebView = _useViewerWebView.open;
1067
+
1046
1068
  var screenState = useScreenState();
1047
1069
 
1048
1070
  var _ref2 = screenState !== null ? screenState.split('.') : [],
@@ -1059,13 +1081,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1059
1081
 
1060
1082
  var hasCallToAction = callToAction !== null && callToAction.active === true;
1061
1083
 
1062
- var _useResizeObserver = useResizeObserver(),
1063
- callToActionRef = _useResizeObserver.ref,
1064
- callToActionRect = _useResizeObserver.entry.contentRect;
1065
-
1066
- var _ref4 = callToActionRect || {},
1067
- _ref4$height = _ref4.height,
1068
- callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
1084
+ var _useDimensionObserver = useDimensionObserver(),
1085
+ callToActionRef = _useDimensionObserver.ref,
1086
+ _useDimensionObserver2 = _useDimensionObserver.height,
1087
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1069
1088
 
1070
1089
  var showInstantAnswer = isStatic || isCapture;
1071
1090
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
@@ -1133,15 +1152,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1133
1152
  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
1134
1153
  var currentPoints = useMemo(function () {
1135
1154
  return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
1136
- var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1137
- _ref5$answers = _ref5.answers,
1138
- questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
1155
+ var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1156
+ _ref4$answers = _ref4.answers,
1157
+ questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
1139
1158
 
1140
1159
  var answerIndex = userAnswers[answerQuestionIndex];
1141
1160
 
1142
- var _ref6 = questionAnswers[answerIndex] || {},
1143
- _ref6$points = _ref6.points,
1144
- points = _ref6$points === void 0 ? 0 : _ref6$points;
1161
+ var _ref5 = questionAnswers[answerIndex] || {},
1162
+ _ref5$points = _ref5.points,
1163
+ points = _ref5$points === void 0 ? 0 : _ref5$points;
1145
1164
 
1146
1165
  return points + totalPoints;
1147
1166
  }, 0) : 0;
@@ -1158,11 +1177,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1158
1177
  return (results || [])[parseInt(stateIndex, 10)] || null;
1159
1178
  }
1160
1179
 
1161
- return (results || []).sort(function (_ref7, _ref8) {
1180
+ return (results || []).sort(function (_ref6, _ref7) {
1181
+ var _ref6$points = _ref6.points,
1182
+ pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
1162
1183
  var _ref7$points = _ref7.points,
1163
- pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
1164
- var _ref8$points = _ref8.points,
1165
- pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
1184
+ pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
1166
1185
 
1167
1186
  if (pointsA === pointsB) {
1168
1187
  return 0;
@@ -1170,23 +1189,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1170
1189
 
1171
1190
  return pointsA > pointsB ? 1 : -1;
1172
1191
  }).reduce(function (lastResult, result) {
1173
- var _ref9 = lastResult || {},
1174
- _ref9$points = _ref9.points,
1175
- lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
1192
+ var _ref8 = lastResult || {},
1193
+ _ref8$points = _ref8.points,
1194
+ lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
1176
1195
 
1177
- var _ref10 = result || {},
1178
- _ref10$points = _ref10.points,
1179
- points = _ref10$points === void 0 ? 0 : _ref10$points;
1196
+ var _ref9 = result || {},
1197
+ _ref9$points = _ref9.points,
1198
+ points = _ref9$points === void 0 ? 0 : _ref9$points;
1180
1199
 
1181
1200
  return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
1182
1201
  }, null);
1183
1202
  }, [isResults, results, currentPoints, stateId, stateIndex]);
1184
1203
 
1185
- var _ref11 = currentResult || {},
1186
- _ref11$background = _ref11.background,
1187
- resultBackground = _ref11$background === void 0 ? null : _ref11$background,
1188
- _ref11$layout = _ref11.layout,
1189
- resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
1204
+ var _ref10 = currentResult || {},
1205
+ _ref10$background = _ref10.background,
1206
+ resultBackground = _ref10$background === void 0 ? null : _ref10$background,
1207
+ _ref10$layout = _ref10.layout,
1208
+ resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1190
1209
 
1191
1210
  var _useQuizCreate = useQuizCreate({
1192
1211
  screenId: screenId
@@ -1248,6 +1267,35 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1248
1267
  lastQuestionIndexRef.current = questionIndex;
1249
1268
  return 'right';
1250
1269
  }, [questionIndex]);
1270
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
1271
+
1272
+ var _useState5 = useState(false),
1273
+ _useState6 = _slicedToArray(_useState5, 2),
1274
+ scrolledBottom = _useState6[0],
1275
+ setScrolledBottom = _useState6[1];
1276
+
1277
+ var onScrolledBottom = useCallback(function (_ref11) {
1278
+ var initial = _ref11.initial;
1279
+
1280
+ if (initial) {
1281
+ trackScreenEvent('scroll', 'Screen');
1282
+ }
1283
+
1284
+ setScrolledBottom(true);
1285
+ }, [trackScreenEvent]);
1286
+ var onScrolledNotBottom = useCallback(function () {
1287
+ setScrolledBottom(false);
1288
+ }, [setScrolledBottom]);
1289
+ var verticalAlign = layout;
1290
+
1291
+ if (isIntro && introLayout !== null) {
1292
+ verticalAlign = introLayout;
1293
+ } else if (isQuestion && questionLayout !== null) {
1294
+ verticalAlign = questionLayout;
1295
+ } else if (isResults && resultLayout !== null) {
1296
+ verticalAlign = questionLayout;
1297
+ }
1298
+
1251
1299
  return /*#__PURE__*/React.createElement("div", {
1252
1300
  className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
1253
1301
  "data-screen-ready": true
@@ -1261,11 +1309,18 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1261
1309
  height: height,
1262
1310
  resolution: resolution,
1263
1311
  playing: backgroundPlaying,
1312
+ muted: muted,
1264
1313
  shouldLoad: backgroundShouldLoad,
1314
+ mediaRef: mediaRef,
1265
1315
  className: styles$2.background
1266
1316
  }))) : null, /*#__PURE__*/React.createElement(Container, {
1267
1317
  width: width,
1268
1318
  height: height
1319
+ }, /*#__PURE__*/React.createElement(Scroll, {
1320
+ verticalAlign: verticalAlign,
1321
+ disabled: scrollingDisabled,
1322
+ onScrolledBottom: onScrolledBottom,
1323
+ onScrolledNotBottom: onScrolledNotBottom
1269
1324
  }, /*#__PURE__*/React.createElement(TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(CSSTransition, {
1270
1325
  key: "intro",
1271
1326
  classNames: styles$2,
@@ -1283,7 +1338,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1283
1338
  className: styles$2.intro,
1284
1339
  style: !isPlaceholder ? {
1285
1340
  padding: spacing,
1286
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1341
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1342
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1287
1343
  } : null,
1288
1344
  onClickButton: onClickIntroButton
1289
1345
  })) : null, isQuestion ? /*#__PURE__*/React.createElement(CSSTransition, {
@@ -1305,7 +1361,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1305
1361
  showInstantAnswer: showInstantAnswer,
1306
1362
  layout: questionLayout || layout,
1307
1363
  withoutGoodAnswer: true,
1308
- callToActionHeight: callToActionHeight,
1309
1364
  transitions: transitions,
1310
1365
  transitionPlaying: transitionPlaying,
1311
1366
  transitionStagger: transitionStagger,
@@ -1315,7 +1370,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1315
1370
  className: styles$2.question,
1316
1371
  style: !isPlaceholder ? {
1317
1372
  padding: spacing,
1318
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1373
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1374
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1319
1375
  } : null
1320
1376
  })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
1321
1377
  key: "results",
@@ -1332,19 +1388,24 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1332
1388
  className: styles$2.results,
1333
1389
  style: !isPlaceholder ? {
1334
1390
  padding: spacing,
1335
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1391
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1392
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1336
1393
  } : null
1337
- }))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
1394
+ }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
1338
1395
  ref: callToActionRef,
1339
- className: styles$2.callToAction,
1340
- callToAction: callToAction,
1396
+ className: classNames([styles$2.callToAction, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
1397
+ style: {
1398
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
1399
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
1400
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
1401
+ paddingTop: spacing / 2,
1402
+ paddingBottom: spacing / 2
1403
+ }
1404
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
1341
1405
  animationDisabled: isPreview,
1342
1406
  focusable: current && isView,
1343
- screenSize: {
1344
- width: width,
1345
- height: height
1346
- }
1347
- }) : null));
1407
+ openWebView: openWebView
1408
+ }))) : null));
1348
1409
  };
1349
1410
 
1350
1411
  QuizMultipleScreen.propTypes = propTypes;
@@ -1813,4 +1874,4 @@ var definition = [{
1813
1874
  }]
1814
1875
  }];
1815
1876
 
1816
- export { QuizScreen, definition as default };
1877
+ export { QuizMultipleScreen, QuizScreen, definition as default };
package/lib/index.js CHANGED
@@ -15,6 +15,7 @@ var data = require('@micromag/data');
15
15
  var Background = require('@micromag/element-background');
16
16
  var CallToAction = require('@micromag/element-call-to-action');
17
17
  var Container = require('@micromag/element-container');
18
+ var Scroll = require('@micromag/element-scroll');
18
19
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
19
20
  var components = require('@micromag/core/components');
20
21
  var utils = require('@micromag/core/utils');
@@ -38,6 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
38
39
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
39
40
  var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
40
41
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
42
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
41
43
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
42
44
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
43
45
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
@@ -94,7 +96,7 @@ var defaultProps$5 = {
94
96
  };
95
97
 
96
98
  var Answers = function Answers(_ref) {
97
- var _ref5;
99
+ var _ref4;
98
100
 
99
101
  var items = _ref.items,
100
102
  answeredIndex = _ref.answeredIndex,
@@ -132,23 +134,22 @@ var Answers = function Answers(_ref) {
132
134
  // we also get the right answer's Y to animate its position
133
135
 
134
136
 
135
- var _useResizeObserver = hooks.useResizeObserver(),
136
- answerRef = _useResizeObserver.ref,
137
- answerContentRect = _useResizeObserver.entry.contentRect;
138
-
139
- var _ref3 = answerContentRect || {},
140
- answerHeight = _ref3.height;
141
-
142
- var _useResizeObserver2 = hooks.useResizeObserver(),
143
- rightAnswerRef = _useResizeObserver2.ref,
144
- rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
137
+ var _useDimensionObserver = hooks.useDimensionObserver(),
138
+ answerRef = _useDimensionObserver.ref,
139
+ answerHeight = _useDimensionObserver.height;
145
140
 
146
- var _ref4 = rightAnswerContentRect || {},
147
- rightAnswerHeight = _ref4.height;
141
+ var _useDimensionObserver2 = hooks.useDimensionObserver(),
142
+ rightAnswerRef = _useDimensionObserver2.ref,
143
+ rightAnswerHeight = _useDimensionObserver2.height;
148
144
 
149
145
  var rightAnswerTop = React.useMemo(function () {
150
146
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
151
147
  }, [rightAnswerHeight]);
148
+ var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, _ref3) {
149
+ var _ref3$good = _ref3.good,
150
+ good = _ref3$good === void 0 ? false : _ref3$good;
151
+ return hasGood || good;
152
+ }, false) : false;
152
153
  var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
153
154
 
154
155
  var _useState = React.useState(answeredIndex !== null),
@@ -194,7 +195,7 @@ var Answers = function Answers(_ref) {
194
195
  }
195
196
  }, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
196
197
  return /*#__PURE__*/React__default["default"].createElement("div", {
197
- className: classNames__default["default"]([styles$4.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$4.answered, answered), _defineProperty__default["default"](_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, className, className !== null), _ref5)]),
198
+ className: classNames__default["default"]([styles$4.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$4.answered, answered), _defineProperty__default["default"](_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
198
199
  ref: answerRef,
199
200
  style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
200
201
  height: answersCollapsed ? rightAnswerHeight : answerHeight
@@ -202,23 +203,23 @@ var Answers = function Answers(_ref) {
202
203
  }, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
203
204
  className: styles$4.items
204
205
  }, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
205
- var _ref8;
206
+ var _ref7;
206
207
 
207
208
  var userAnswer = answerI === answeredIndex;
208
209
 
209
- var _ref6 = answer || {},
210
- _ref6$good = _ref6.good,
211
- rightAnswer = _ref6$good === void 0 ? false : _ref6$good,
212
- _ref6$label = _ref6.label,
213
- label = _ref6$label === void 0 ? null : _ref6$label,
214
- _ref6$buttonStyle = _ref6.buttonStyle,
215
- answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle,
210
+ var _ref5 = answer || {},
211
+ _ref5$good = _ref5.good,
212
+ rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
213
+ _ref5$label = _ref5.label,
214
+ label = _ref5$label === void 0 ? null : _ref5$label,
215
+ _ref5$buttonStyle = _ref5.buttonStyle,
216
+ answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
217
+ _ref5$textStyle = _ref5.textStyle,
218
+ answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
219
+
220
+ var _ref6 = label || {},
216
221
  _ref6$textStyle = _ref6.textStyle,
217
- answerButtonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
218
-
219
- var _ref7 = label || {},
220
- _ref7$textStyle = _ref7.textStyle,
221
- textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
222
+ textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
222
223
 
223
224
  var hasAnswer = utils.isTextFilled(label);
224
225
  var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
@@ -234,8 +235,8 @@ var Answers = function Answers(_ref) {
234
235
 
235
236
  return /*#__PURE__*/React__default["default"].createElement("div", {
236
237
  key: "answer-".concat(answerI),
237
- ref: rightAnswer ? rightAnswerRef : null,
238
- className: classNames__default["default"]([styles$4.item, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref8, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref8, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref8)]),
238
+ ref: rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer ? rightAnswerRef : null,
239
+ className: classNames__default["default"]([styles$4.item, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref7, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref7)]),
239
240
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
240
241
  transform: "translateY(".concat(-rightAnswerTop, "px)")
241
242
  } : null,
@@ -311,7 +312,6 @@ var propTypes$4 = {
311
312
  badAnswerColor: core.PropTypes.color,
312
313
  focusable: PropTypes__default["default"].bool,
313
314
  layout: PropTypes__default["default"].string,
314
- callToActionHeight: PropTypes__default["default"].number,
315
315
  showInstantAnswer: PropTypes__default["default"].bool,
316
316
  withResult: PropTypes__default["default"].bool,
317
317
  withoutGoodAnswer: PropTypes__default["default"].bool,
@@ -340,7 +340,6 @@ var defaultProps$4 = {
340
340
  badAnswerColor: null,
341
341
  focusable: false,
342
342
  layout: null,
343
- callToActionHeight: null,
344
343
  showInstantAnswer: false,
345
344
  withResult: false,
346
345
  withoutGoodAnswer: false,
@@ -357,7 +356,7 @@ var defaultProps$4 = {
357
356
  };
358
357
 
359
358
  var Question = function Question(_ref) {
360
- var _ref4;
359
+ var _ref3;
361
360
 
362
361
  var question = _ref.question,
363
362
  answers = _ref.answers,
@@ -377,7 +376,6 @@ var Question = function Question(_ref) {
377
376
  withoutTrueFalse = _ref.withoutTrueFalse,
378
377
  withoutIndex = _ref.withoutIndex,
379
378
  layout = _ref.layout,
380
- callToActionHeight = _ref.callToActionHeight,
381
379
  transitions = _ref.transitions,
382
380
  transitionPlaying = _ref.transitionPlaying,
383
381
  transitionStagger = _ref.transitionStagger,
@@ -406,22 +404,12 @@ var Question = function Question(_ref) {
406
404
  setResultVisible = _useState2[1];
407
405
 
408
406
  var answered = answeredIndex !== null;
409
-
410
- var _useResizeObserver = hooks.useResizeObserver(),
411
- resultRef = _useResizeObserver.ref,
412
- resultContentRect = _useResizeObserver.entry.contentRect;
413
-
414
- var _ref3 = resultContentRect || {};
415
- _ref3.height; // eslint-disable-line
416
-
417
-
418
407
  var onAnswersCollapse = React.useCallback(function () {
419
408
  setResultVisible(true);
420
409
  }, [setResultVisible]);
421
410
  var hasIndex = index !== null && totalCount !== null;
422
411
  return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
423
- className: classNames__default["default"]([styles$3.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
424
- fullscreen: true,
412
+ className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
425
413
  verticalAlign: verticalAlign,
426
414
  style: style
427
415
  }, [!withoutIndex && hasIndex ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -477,8 +465,7 @@ var Question = function Question(_ref) {
477
465
  onTransitionEnd: onAnswerTransitionEnd
478
466
  }), withResult ? /*#__PURE__*/React__default["default"].createElement("div", {
479
467
  className: styles$3.result,
480
- key: "results",
481
- ref: resultRef
468
+ key: "results"
482
469
  }, /*#__PURE__*/React__default["default"].createElement("div", {
483
470
  className: styles$3.resultContent
484
471
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -498,11 +485,7 @@ var Question = function Question(_ref) {
498
485
  disabled: transitionDisabled
499
486
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, result, {
500
487
  className: styles$3.resultText
501
- })), callToActionHeight !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
502
- style: {
503
- height: callToActionHeight
504
- }
505
- }) : null) : null))) : null]);
488
+ }))) : null))) : null]);
506
489
  };
507
490
 
508
491
  Question.propTypes = propTypes$4;
@@ -532,8 +515,6 @@ var propTypes$3 = {
532
515
  transitions: core.PropTypes.transitions,
533
516
  transitionStagger: PropTypes__default["default"].number,
534
517
  type: PropTypes__default["default"].string,
535
- enableInteraction: PropTypes__default["default"].func,
536
- disableInteraction: PropTypes__default["default"].func,
537
518
  className: PropTypes__default["default"].string
538
519
  };
539
520
  var defaultProps$3 = {
@@ -555,8 +536,6 @@ var defaultProps$3 = {
555
536
  transitions: null,
556
537
  transitionStagger: 100,
557
538
  type: null,
558
- enableInteraction: null,
559
- disableInteraction: null,
560
539
  className: null
561
540
  };
562
541
 
@@ -579,8 +558,6 @@ var QuizScreen = function QuizScreen(_ref) {
579
558
  transitions = _ref.transitions,
580
559
  transitionStagger = _ref.transitionStagger,
581
560
  type = _ref.type,
582
- enableInteraction = _ref.enableInteraction,
583
- disableInteraction = _ref.disableInteraction,
584
561
  className = _ref.className;
585
562
  var screenId = id || 'screen-id';
586
563
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -588,12 +565,8 @@ var QuizScreen = function QuizScreen(_ref) {
588
565
  var _useScreenSize = contexts.useScreenSize(),
589
566
  width = _useScreenSize.width,
590
567
  height = _useScreenSize.height,
591
- menuOverScreen = _useScreenSize.menuOverScreen,
592
568
  resolution = _useScreenSize.resolution;
593
569
 
594
- var _useViewer = contexts.useViewer(),
595
- menuSize = _useViewer.menuSize;
596
-
597
570
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
598
571
  isView = _useScreenRenderConte.isView,
599
572
  isPreview = _useScreenRenderConte.isPreview,
@@ -602,20 +575,31 @@ var QuizScreen = function QuizScreen(_ref) {
602
575
  isStatic = _useScreenRenderConte.isStatic,
603
576
  isCapture = _useScreenRenderConte.isCapture;
604
577
 
578
+ var _useViewerContext = contexts.useViewerContext(),
579
+ viewerTopHeight = _useViewerContext.topHeight,
580
+ viewerBottomHeight = _useViewerContext.bottomHeight,
581
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
582
+
583
+ var _useViewerWebView = contexts.useViewerWebView(),
584
+ openWebView = _useViewerWebView.open;
585
+
586
+ var _usePlaybackContext = contexts.usePlaybackContext(),
587
+ muted = _usePlaybackContext.muted;
588
+
589
+ var mediaRef = contexts.usePlaybackMediaRef(current);
605
590
  var transitionPlaying = current;
606
591
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
607
592
  var backgroundPlaying = current && (isView || isEdit);
608
593
  var mediaShouldLoad = current || active; // Call to Action
609
594
 
610
- var hasCallToAction = callToAction !== null && callToAction.active === true;
611
-
612
- var _useResizeObserver = hooks.useResizeObserver(),
613
- callToActionRef = _useResizeObserver.ref,
614
- callToActionRect = _useResizeObserver.entry.contentRect;
595
+ var _ref2 = callToAction || {},
596
+ _ref2$active = _ref2.active,
597
+ hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
615
598
 
616
- var _ref2 = callToActionRect || {},
617
- _ref2$height = _ref2.height,
618
- callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
599
+ var _useDimensionObserver = hooks.useDimensionObserver(),
600
+ callToActionRef = _useDimensionObserver.ref,
601
+ _useDimensionObserver2 = _useDimensionObserver.height,
602
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
619
603
 
620
604
  var showInstantAnswer = isStatic || isCapture;
621
605
  var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
@@ -666,6 +650,27 @@ var QuizScreen = function QuizScreen(_ref) {
666
650
  });
667
651
  }
668
652
  }, [userAnswerIndex, answers, submitQuiz]);
653
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
654
+
655
+ var _useState3 = React.useState(false),
656
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
657
+ scrolledBottom = _useState4[0],
658
+ setScrolledBottom = _useState4[1];
659
+
660
+ var onScrolledBottom = React.useCallback(function (_ref5) {
661
+ var initial = _ref5.initial;
662
+
663
+ if (initial) {
664
+ trackScreenEvent('scroll', 'Screen');
665
+ }
666
+
667
+ setScrolledBottom(true);
668
+ }, [trackScreenEvent]);
669
+ var onScrolledNotBottom = React.useCallback(function () {
670
+ setScrolledBottom(false);
671
+ }, [setScrolledBottom]);
672
+ var isSplitted = layout === 'split';
673
+ var verticalAlign = isSplitted ? null : layout;
669
674
  return /*#__PURE__*/React__default["default"].createElement("div", {
670
675
  className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
671
676
  "data-screen-ready": true
@@ -675,10 +680,17 @@ var QuizScreen = function QuizScreen(_ref) {
675
680
  height: height,
676
681
  resolution: resolution,
677
682
  playing: backgroundPlaying,
678
- shouldLoad: mediaShouldLoad
683
+ muted: muted,
684
+ shouldLoad: mediaShouldLoad,
685
+ mediaRef: mediaRef
679
686
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
680
687
  width: width,
681
688
  height: height
689
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
690
+ verticalAlign: verticalAlign,
691
+ disabled: scrollingDisabled,
692
+ onScrolledBottom: onScrolledBottom,
693
+ onScrolledNotBottom: onScrolledNotBottom
682
694
  }, /*#__PURE__*/React__default["default"].createElement(Question, {
683
695
  question: question,
684
696
  answers: answers,
@@ -693,7 +705,6 @@ var QuizScreen = function QuizScreen(_ref) {
693
705
  showInstantAnswer: showInstantAnswer,
694
706
  withResult: true,
695
707
  layout: layout,
696
- callToActionHeight: callToActionHeight,
697
708
  transitions: transitions,
698
709
  transitionPlaying: transitionPlaying,
699
710
  transitionStagger: transitionStagger,
@@ -702,21 +713,24 @@ var QuizScreen = function QuizScreen(_ref) {
702
713
  className: styles$2.question,
703
714
  style: !isPlaceholder ? {
704
715
  padding: spacing,
705
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
716
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
717
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
706
718
  } : null
707
- }), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
719
+ })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
708
720
  ref: callToActionRef,
709
- className: styles$2.callToAction,
710
- callToAction: callToAction,
721
+ className: classNames__default["default"]([styles$2.callToAction, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
722
+ style: {
723
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
724
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
725
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
726
+ paddingTop: spacing / 2,
727
+ paddingBottom: spacing / 2
728
+ }
729
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
711
730
  animationDisabled: isPreview,
712
731
  focusable: current && isView,
713
- screenSize: {
714
- width: width,
715
- height: height
716
- },
717
- enableInteraction: enableInteraction,
718
- disableInteraction: disableInteraction
719
- }) : null));
732
+ openWebView: openWebView
733
+ }))) : null));
720
734
  };
721
735
 
722
736
  QuizScreen.propTypes = propTypes$3;
@@ -1050,11 +1064,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1050
1064
  var _useScreenSize = contexts.useScreenSize(),
1051
1065
  width = _useScreenSize.width,
1052
1066
  height = _useScreenSize.height,
1053
- menuOverScreen = _useScreenSize.menuOverScreen,
1054
1067
  resolution = _useScreenSize.resolution;
1055
1068
 
1056
- var _useViewer = contexts.useViewer(),
1057
- menuSize = _useViewer.menuSize;
1069
+ var _useViewerContext = contexts.useViewerContext(),
1070
+ viewerTopHeight = _useViewerContext.topHeight,
1071
+ viewerBottomHeight = _useViewerContext.bottomHeight,
1072
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
1058
1073
 
1059
1074
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
1060
1075
  isView = _useScreenRenderConte.isView,
@@ -1064,6 +1079,14 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1064
1079
  isStatic = _useScreenRenderConte.isStatic,
1065
1080
  isCapture = _useScreenRenderConte.isCapture;
1066
1081
 
1082
+ var _usePlaybackContext = contexts.usePlaybackContext(),
1083
+ muted = _usePlaybackContext.muted;
1084
+
1085
+ var mediaRef = contexts.usePlaybackMediaRef(current);
1086
+
1087
+ var _useViewerWebView = contexts.useViewerWebView(),
1088
+ openWebView = _useViewerWebView.open;
1089
+
1067
1090
  var screenState = contexts.useScreenState();
1068
1091
 
1069
1092
  var _ref2 = screenState !== null ? screenState.split('.') : [],
@@ -1080,13 +1103,10 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1080
1103
 
1081
1104
  var hasCallToAction = callToAction !== null && callToAction.active === true;
1082
1105
 
1083
- var _useResizeObserver = hooks.useResizeObserver(),
1084
- callToActionRef = _useResizeObserver.ref,
1085
- callToActionRect = _useResizeObserver.entry.contentRect;
1086
-
1087
- var _ref4 = callToActionRect || {},
1088
- _ref4$height = _ref4.height,
1089
- callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
1106
+ var _useDimensionObserver = hooks.useDimensionObserver(),
1107
+ callToActionRef = _useDimensionObserver.ref,
1108
+ _useDimensionObserver2 = _useDimensionObserver.height,
1109
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
1090
1110
 
1091
1111
  var showInstantAnswer = isStatic || isCapture;
1092
1112
  var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
@@ -1154,15 +1174,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1154
1174
  var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
1155
1175
  var currentPoints = React.useMemo(function () {
1156
1176
  return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
1157
- var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1158
- _ref5$answers = _ref5.answers,
1159
- questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
1177
+ var _ref4 = questions !== null ? questions[answerQuestionIndex] || {} : {},
1178
+ _ref4$answers = _ref4.answers,
1179
+ questionAnswers = _ref4$answers === void 0 ? [] : _ref4$answers;
1160
1180
 
1161
1181
  var answerIndex = userAnswers[answerQuestionIndex];
1162
1182
 
1163
- var _ref6 = questionAnswers[answerIndex] || {},
1164
- _ref6$points = _ref6.points,
1165
- points = _ref6$points === void 0 ? 0 : _ref6$points;
1183
+ var _ref5 = questionAnswers[answerIndex] || {},
1184
+ _ref5$points = _ref5.points,
1185
+ points = _ref5$points === void 0 ? 0 : _ref5$points;
1166
1186
 
1167
1187
  return points + totalPoints;
1168
1188
  }, 0) : 0;
@@ -1179,11 +1199,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1179
1199
  return (results || [])[parseInt(stateIndex, 10)] || null;
1180
1200
  }
1181
1201
 
1182
- return (results || []).sort(function (_ref7, _ref8) {
1202
+ return (results || []).sort(function (_ref6, _ref7) {
1203
+ var _ref6$points = _ref6.points,
1204
+ pointsA = _ref6$points === void 0 ? 0 : _ref6$points;
1183
1205
  var _ref7$points = _ref7.points,
1184
- pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
1185
- var _ref8$points = _ref8.points,
1186
- pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
1206
+ pointsB = _ref7$points === void 0 ? 0 : _ref7$points;
1187
1207
 
1188
1208
  if (pointsA === pointsB) {
1189
1209
  return 0;
@@ -1191,23 +1211,23 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1191
1211
 
1192
1212
  return pointsA > pointsB ? 1 : -1;
1193
1213
  }).reduce(function (lastResult, result) {
1194
- var _ref9 = lastResult || {},
1195
- _ref9$points = _ref9.points,
1196
- lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
1214
+ var _ref8 = lastResult || {},
1215
+ _ref8$points = _ref8.points,
1216
+ lastPoints = _ref8$points === void 0 ? 0 : _ref8$points;
1197
1217
 
1198
- var _ref10 = result || {},
1199
- _ref10$points = _ref10.points,
1200
- points = _ref10$points === void 0 ? 0 : _ref10$points;
1218
+ var _ref9 = result || {},
1219
+ _ref9$points = _ref9.points,
1220
+ points = _ref9$points === void 0 ? 0 : _ref9$points;
1201
1221
 
1202
1222
  return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
1203
1223
  }, null);
1204
1224
  }, [isResults, results, currentPoints, stateId, stateIndex]);
1205
1225
 
1206
- var _ref11 = currentResult || {},
1207
- _ref11$background = _ref11.background,
1208
- resultBackground = _ref11$background === void 0 ? null : _ref11$background,
1209
- _ref11$layout = _ref11.layout,
1210
- resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
1226
+ var _ref10 = currentResult || {},
1227
+ _ref10$background = _ref10.background,
1228
+ resultBackground = _ref10$background === void 0 ? null : _ref10$background,
1229
+ _ref10$layout = _ref10.layout,
1230
+ resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1211
1231
 
1212
1232
  var _useQuizCreate = data.useQuizCreate({
1213
1233
  screenId: screenId
@@ -1269,6 +1289,35 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1269
1289
  lastQuestionIndexRef.current = questionIndex;
1270
1290
  return 'right';
1271
1291
  }, [questionIndex]);
1292
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
1293
+
1294
+ var _useState5 = React.useState(false),
1295
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
1296
+ scrolledBottom = _useState6[0],
1297
+ setScrolledBottom = _useState6[1];
1298
+
1299
+ var onScrolledBottom = React.useCallback(function (_ref11) {
1300
+ var initial = _ref11.initial;
1301
+
1302
+ if (initial) {
1303
+ trackScreenEvent('scroll', 'Screen');
1304
+ }
1305
+
1306
+ setScrolledBottom(true);
1307
+ }, [trackScreenEvent]);
1308
+ var onScrolledNotBottom = React.useCallback(function () {
1309
+ setScrolledBottom(false);
1310
+ }, [setScrolledBottom]);
1311
+ var verticalAlign = layout;
1312
+
1313
+ if (isIntro && introLayout !== null) {
1314
+ verticalAlign = introLayout;
1315
+ } else if (isQuestion && questionLayout !== null) {
1316
+ verticalAlign = questionLayout;
1317
+ } else if (isResults && resultLayout !== null) {
1318
+ verticalAlign = questionLayout;
1319
+ }
1320
+
1272
1321
  return /*#__PURE__*/React__default["default"].createElement("div", {
1273
1322
  className: classNames__default["default"]([styles$2.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref12, className, className !== null), _ref12)]),
1274
1323
  "data-screen-ready": true
@@ -1282,11 +1331,18 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1282
1331
  height: height,
1283
1332
  resolution: resolution,
1284
1333
  playing: backgroundPlaying,
1334
+ muted: muted,
1285
1335
  shouldLoad: backgroundShouldLoad,
1336
+ mediaRef: mediaRef,
1286
1337
  className: styles$2.background
1287
1338
  }))) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
1288
1339
  width: width,
1289
1340
  height: height
1341
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1342
+ verticalAlign: verticalAlign,
1343
+ disabled: scrollingDisabled,
1344
+ onScrolledBottom: onScrolledBottom,
1345
+ onScrolledNotBottom: onScrolledNotBottom
1290
1346
  }, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, [isIntro ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1291
1347
  key: "intro",
1292
1348
  classNames: styles$2,
@@ -1304,7 +1360,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1304
1360
  className: styles$2.intro,
1305
1361
  style: !isPlaceholder ? {
1306
1362
  padding: spacing,
1307
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1363
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1364
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1308
1365
  } : null,
1309
1366
  onClickButton: onClickIntroButton
1310
1367
  })) : null, isQuestion ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -1326,7 +1383,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1326
1383
  showInstantAnswer: showInstantAnswer,
1327
1384
  layout: questionLayout || layout,
1328
1385
  withoutGoodAnswer: true,
1329
- callToActionHeight: callToActionHeight,
1330
1386
  transitions: transitions,
1331
1387
  transitionPlaying: transitionPlaying,
1332
1388
  transitionStagger: transitionStagger,
@@ -1336,7 +1392,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1336
1392
  className: styles$2.question,
1337
1393
  style: !isPlaceholder ? {
1338
1394
  padding: spacing,
1339
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1395
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1396
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1340
1397
  } : null
1341
1398
  })) : null, isResults ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1342
1399
  key: "results",
@@ -1353,19 +1410,24 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1353
1410
  className: styles$2.results,
1354
1411
  style: !isPlaceholder ? {
1355
1412
  padding: spacing,
1356
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
1413
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1414
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1357
1415
  } : null
1358
- }))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
1416
+ }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
1359
1417
  ref: callToActionRef,
1360
- className: styles$2.callToAction,
1361
- callToAction: callToAction,
1418
+ className: classNames__default["default"]([styles$2.callToAction, _defineProperty__default["default"]({}, styles$2.disabled, !scrolledBottom)]),
1419
+ style: {
1420
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
1421
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
1422
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
1423
+ paddingTop: spacing / 2,
1424
+ paddingBottom: spacing / 2
1425
+ }
1426
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
1362
1427
  animationDisabled: isPreview,
1363
1428
  focusable: current && isView,
1364
- screenSize: {
1365
- width: width,
1366
- height: height
1367
- }
1368
- }) : null));
1429
+ openWebView: openWebView
1430
+ }))) : null));
1369
1431
  };
1370
1432
 
1371
1433
  QuizMultipleScreen.propTypes = propTypes;
@@ -1834,5 +1896,6 @@ var definition = [{
1834
1896
  }]
1835
1897
  }];
1836
1898
 
1899
+ exports.QuizMultipleScreen = QuizMultipleScreen;
1837
1900
  exports.QuizScreen = QuizScreen;
1838
1901
  exports["default"] = definition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.148",
3
+ "version": "0.3.153",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,16 +52,17 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.148",
56
- "@micromag/data": "^0.3.148",
57
- "@micromag/element-background": "^0.3.148",
58
- "@micromag/element-button": "^0.3.148",
59
- "@micromag/element-call-to-action": "^0.3.148",
60
- "@micromag/element-container": "^0.3.148",
61
- "@micromag/element-heading": "^0.3.148",
62
- "@micromag/element-layout": "^0.3.148",
63
- "@micromag/element-text": "^0.3.148",
64
- "@micromag/transforms": "^0.3.148",
55
+ "@micromag/core": "^0.3.153",
56
+ "@micromag/data": "^0.3.153",
57
+ "@micromag/element-background": "^0.3.153",
58
+ "@micromag/element-button": "^0.3.153",
59
+ "@micromag/element-call-to-action": "^0.3.153",
60
+ "@micromag/element-container": "^0.3.153",
61
+ "@micromag/element-heading": "^0.3.153",
62
+ "@micromag/element-layout": "^0.3.153",
63
+ "@micromag/element-scroll": "^0.3.153",
64
+ "@micromag/element-text": "^0.3.153",
65
+ "@micromag/transforms": "^0.3.153",
65
66
  "classnames": "^2.2.6",
66
67
  "lodash": "^4.17.21",
67
68
  "prop-types": "^15.7.2",
@@ -72,5 +73,5 @@
72
73
  "publishConfig": {
73
74
  "access": "public"
74
75
  },
75
- "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
76
+ "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
76
77
  }