@micromag/screen-quiz 0.3.251 → 0.3.262

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 +54 -63
  3. package/lib/index.js +53 -62
  4. package/package.json +13 -13
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;outline-offset:4px}.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-answerToSlide{-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-answerToSlide{-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-answerToSlide{-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%;-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}
3
+ .micromag-screen-quiz-container .micromag-screen-quiz-background{position:absolute;top:0;left:0;width:100%;height:100%}.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-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.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{z-index:1;-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{z-index:0;-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,7 +5,7 @@ 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, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useVisitor, useScreenState } from '@micromag/core/contexts';
8
+ import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenState } from '@micromag/core/contexts';
9
9
  import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
10
10
  import { useQuizCreate } from '@micromag/data';
11
11
  import Background from '@micromag/element-background';
@@ -466,7 +466,7 @@ var Question = function Question(_ref) {
466
466
  Question.propTypes = propTypes$4;
467
467
  Question.defaultProps = defaultProps$4;
468
468
 
469
- var styles$2 = {"container":"micromag-screen-quiz-container","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","intro":"micromag-screen-quiz-intro","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive","background":"micromag-screen-quiz-background"};
469
+ var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","intro":"micromag-screen-quiz-intro","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
470
470
 
471
471
  var propTypes$3 = {
472
472
  id: PropTypes$1.string,
@@ -586,15 +586,8 @@ var QuizScreen = function QuizScreen(_ref) {
586
586
  userAnswerIndex = _useState2[0],
587
587
  setUserAnswerIndex = _useState2[1];
588
588
 
589
- var visitor = useVisitor();
590
-
591
- var _ref3 = visitor || {},
592
- _ref3$id = _ref3.id,
593
- visitorId = _ref3$id === void 0 ? null : _ref3$id;
594
-
595
589
  var _useQuizCreate = useQuizCreate({
596
- screenId: screenId,
597
- visitorId: visitorId
590
+ screenId: screenId
598
591
  }),
599
592
  submitQuiz = _useQuizCreate.create;
600
593
 
@@ -616,15 +609,15 @@ var QuizScreen = function QuizScreen(_ref) {
616
609
  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
617
610
  useEffect(function () {
618
611
  if (userAnswerIndex !== null) {
619
- var _ref4 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
620
- _ref4$good = _ref4.good,
621
- isGood = _ref4$good === void 0 ? false : _ref4$good,
622
- _ref4$label = _ref4.label,
623
- label = _ref4$label === void 0 ? {} : _ref4$label;
612
+ var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
613
+ _ref3$good = _ref3.good,
614
+ isGood = _ref3$good === void 0 ? false : _ref3$good,
615
+ _ref3$label = _ref3.label,
616
+ label = _ref3$label === void 0 ? {} : _ref3$label;
624
617
 
625
- var _ref5 = label || {},
626
- _ref5$body = _ref5.body,
627
- body = _ref5$body === void 0 ? '' : _ref5$body;
618
+ var _ref4 = label || {},
619
+ _ref4$body = _ref4.body,
620
+ body = _ref4$body === void 0 ? '' : _ref4$body;
628
621
 
629
622
  submitQuiz({
630
623
  choice: body || userAnswerIndex,
@@ -639,8 +632,8 @@ var QuizScreen = function QuizScreen(_ref) {
639
632
  scrolledBottom = _useState4[0],
640
633
  setScrolledBottom = _useState4[1];
641
634
 
642
- var onScrolledBottom = useCallback(function (_ref6) {
643
- var initial = _ref6.initial;
635
+ var onScrolledBottom = useCallback(function (_ref5) {
636
+ var initial = _ref5.initial;
644
637
 
645
638
  if (initial) {
646
639
  trackScreenEvent('scroll', 'Screen');
@@ -656,18 +649,10 @@ var QuizScreen = function QuizScreen(_ref) {
656
649
  return /*#__PURE__*/React.createElement("div", {
657
650
  className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
658
651
  "data-screen-ready": true
659
- }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
660
- background: background,
652
+ }, /*#__PURE__*/React.createElement(Container, {
661
653
  width: width,
662
654
  height: height,
663
- resolution: resolution,
664
- playing: backgroundPlaying,
665
- muted: muted,
666
- shouldLoad: mediaShouldLoad,
667
- mediaRef: mediaRef
668
- }) : null, /*#__PURE__*/React.createElement(Container, {
669
- width: width,
670
- height: height
655
+ className: styles$2.content
671
656
  }, /*#__PURE__*/React.createElement(Scroll, {
672
657
  verticalAlign: verticalAlign,
673
658
  disabled: scrollingDisabled,
@@ -695,7 +680,7 @@ var QuizScreen = function QuizScreen(_ref) {
695
680
  className: styles$2.question,
696
681
  style: !isPlaceholder ? {
697
682
  padding: spacing,
698
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
683
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
699
684
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
700
685
  } : null
701
686
  })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
@@ -712,7 +697,18 @@ var QuizScreen = function QuizScreen(_ref) {
712
697
  animationDisabled: isPreview,
713
698
  focusable: current && isView,
714
699
  openWebView: openWebView
715
- }))) : null));
700
+ }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
701
+ background: background,
702
+ width: width,
703
+ height: height,
704
+ resolution: resolution,
705
+ playing: backgroundPlaying,
706
+ muted: muted,
707
+ shouldLoad: mediaShouldLoad,
708
+ mediaRef: mediaRef,
709
+ withoutVideo: isPreview,
710
+ className: styles$2.background
711
+ }) : null);
716
712
  };
717
713
 
718
714
  QuizScreen.propTypes = propTypes$3;
@@ -1013,7 +1009,7 @@ var defaultProps = {
1013
1009
  };
1014
1010
 
1015
1011
  var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1016
- var _ref13;
1012
+ var _ref12;
1017
1013
 
1018
1014
  var id = _ref.id,
1019
1015
  layout = _ref.layout,
@@ -1211,15 +1207,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1211
1207
  _ref10$layout = _ref10.layout,
1212
1208
  resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1213
1209
 
1214
- var visitor = useVisitor();
1215
-
1216
- var _ref11 = visitor || {},
1217
- _ref11$id = _ref11.id,
1218
- visitorId = _ref11$id === void 0 ? null : _ref11$id;
1219
-
1220
1210
  var _useQuizCreate = useQuizCreate({
1221
- screenId: screenId,
1222
- visitorId: visitorId
1211
+ screenId: screenId
1223
1212
  }),
1224
1213
  submitQuiz = _useQuizCreate.create;
1225
1214
 
@@ -1285,8 +1274,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1285
1274
  scrolledBottom = _useState6[0],
1286
1275
  setScrolledBottom = _useState6[1];
1287
1276
 
1288
- var onScrolledBottom = useCallback(function (_ref12) {
1289
- var initial = _ref12.initial;
1277
+ var onScrolledBottom = useCallback(function (_ref11) {
1278
+ var initial = _ref11.initial;
1290
1279
 
1291
1280
  if (initial) {
1292
1281
  trackScreenEvent('scroll', 'Screen');
@@ -1308,25 +1297,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1308
1297
  }
1309
1298
 
1310
1299
  return /*#__PURE__*/React.createElement("div", {
1311
- className: classNames([styles$2.container, (_ref13 = {}, _defineProperty(_ref13, styles$2[direction], direction !== null), _defineProperty(_ref13, className, className !== null), _ref13)]),
1300
+ className: classNames([styles$2.container, (_ref12 = {}, _defineProperty(_ref12, styles$2[direction], direction !== null), _defineProperty(_ref12, className, className !== null), _ref12)]),
1312
1301
  "data-screen-ready": true
1313
- }, !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
1314
- key: backgroundKey,
1315
- classNames: styles$2,
1316
- timeout: 1000
1317
- }, /*#__PURE__*/React.createElement(Background, {
1318
- background: finalBackground,
1302
+ }, /*#__PURE__*/React.createElement(Container, {
1319
1303
  width: width,
1320
1304
  height: height,
1321
- resolution: resolution,
1322
- playing: backgroundPlaying,
1323
- muted: muted,
1324
- shouldLoad: backgroundShouldLoad,
1325
- mediaRef: mediaRef,
1326
- className: styles$2.background
1327
- }))) : null, /*#__PURE__*/React.createElement(Container, {
1328
- width: width,
1329
- height: height
1305
+ className: styles$2.content
1330
1306
  }, /*#__PURE__*/React.createElement(Scroll, {
1331
1307
  verticalAlign: verticalAlign,
1332
1308
  disabled: scrollingDisabled,
@@ -1349,7 +1325,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1349
1325
  className: styles$2.intro,
1350
1326
  style: !isPlaceholder ? {
1351
1327
  padding: spacing,
1352
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
1328
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1353
1329
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1354
1330
  } : null,
1355
1331
  onClickButton: onClickIntroButton
@@ -1381,7 +1357,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1381
1357
  className: styles$2.question,
1382
1358
  style: !isPlaceholder ? {
1383
1359
  padding: spacing,
1384
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
1360
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1385
1361
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1386
1362
  } : null
1387
1363
  })) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
@@ -1399,7 +1375,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1399
1375
  className: styles$2.results,
1400
1376
  style: !isPlaceholder ? {
1401
1377
  padding: spacing,
1402
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
1378
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1403
1379
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1404
1380
  } : null
1405
1381
  }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
@@ -1416,7 +1392,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1416
1392
  animationDisabled: isPreview,
1417
1393
  focusable: current && isView,
1418
1394
  openWebView: openWebView
1419
- }))) : null));
1395
+ }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
1396
+ key: backgroundKey,
1397
+ classNames: styles$2,
1398
+ timeout: 1000
1399
+ }, /*#__PURE__*/React.createElement(Background, {
1400
+ background: finalBackground,
1401
+ width: width,
1402
+ height: height,
1403
+ resolution: resolution,
1404
+ playing: backgroundPlaying,
1405
+ muted: muted,
1406
+ shouldLoad: backgroundShouldLoad,
1407
+ mediaRef: mediaRef,
1408
+ className: styles$2.background,
1409
+ withoutVideo: isPreview
1410
+ }))) : null);
1420
1411
  };
1421
1412
 
1422
1413
  QuizMultipleScreen.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -488,7 +488,7 @@ var Question = function Question(_ref) {
488
488
  Question.propTypes = propTypes$4;
489
489
  Question.defaultProps = defaultProps$4;
490
490
 
491
- var styles$2 = {"container":"micromag-screen-quiz-container","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","intro":"micromag-screen-quiz-intro","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive","background":"micromag-screen-quiz-background"};
491
+ var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","intro":"micromag-screen-quiz-intro","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive"};
492
492
 
493
493
  var propTypes$3 = {
494
494
  id: PropTypes__default["default"].string,
@@ -608,15 +608,8 @@ var QuizScreen = function QuizScreen(_ref) {
608
608
  userAnswerIndex = _useState2[0],
609
609
  setUserAnswerIndex = _useState2[1];
610
610
 
611
- var visitor = contexts.useVisitor();
612
-
613
- var _ref3 = visitor || {},
614
- _ref3$id = _ref3.id,
615
- visitorId = _ref3$id === void 0 ? null : _ref3$id;
616
-
617
611
  var _useQuizCreate = data.useQuizCreate({
618
- screenId: screenId,
619
- visitorId: visitorId
612
+ screenId: screenId
620
613
  }),
621
614
  submitQuiz = _useQuizCreate.create;
622
615
 
@@ -638,15 +631,15 @@ var QuizScreen = function QuizScreen(_ref) {
638
631
  }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
639
632
  React.useEffect(function () {
640
633
  if (userAnswerIndex !== null) {
641
- var _ref4 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
642
- _ref4$good = _ref4.good,
643
- isGood = _ref4$good === void 0 ? false : _ref4$good,
644
- _ref4$label = _ref4.label,
645
- label = _ref4$label === void 0 ? {} : _ref4$label;
634
+ var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
635
+ _ref3$good = _ref3.good,
636
+ isGood = _ref3$good === void 0 ? false : _ref3$good,
637
+ _ref3$label = _ref3.label,
638
+ label = _ref3$label === void 0 ? {} : _ref3$label;
646
639
 
647
- var _ref5 = label || {},
648
- _ref5$body = _ref5.body,
649
- body = _ref5$body === void 0 ? '' : _ref5$body;
640
+ var _ref4 = label || {},
641
+ _ref4$body = _ref4.body,
642
+ body = _ref4$body === void 0 ? '' : _ref4$body;
650
643
 
651
644
  submitQuiz({
652
645
  choice: body || userAnswerIndex,
@@ -661,8 +654,8 @@ var QuizScreen = function QuizScreen(_ref) {
661
654
  scrolledBottom = _useState4[0],
662
655
  setScrolledBottom = _useState4[1];
663
656
 
664
- var onScrolledBottom = React.useCallback(function (_ref6) {
665
- var initial = _ref6.initial;
657
+ var onScrolledBottom = React.useCallback(function (_ref5) {
658
+ var initial = _ref5.initial;
666
659
 
667
660
  if (initial) {
668
661
  trackScreenEvent('scroll', 'Screen');
@@ -678,18 +671,10 @@ var QuizScreen = function QuizScreen(_ref) {
678
671
  return /*#__PURE__*/React__default["default"].createElement("div", {
679
672
  className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
680
673
  "data-screen-ready": true
681
- }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
682
- background: background,
674
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
683
675
  width: width,
684
676
  height: height,
685
- resolution: resolution,
686
- playing: backgroundPlaying,
687
- muted: muted,
688
- shouldLoad: mediaShouldLoad,
689
- mediaRef: mediaRef
690
- }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
691
- width: width,
692
- height: height
677
+ className: styles$2.content
693
678
  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
694
679
  verticalAlign: verticalAlign,
695
680
  disabled: scrollingDisabled,
@@ -717,7 +702,7 @@ var QuizScreen = function QuizScreen(_ref) {
717
702
  className: styles$2.question,
718
703
  style: !isPlaceholder ? {
719
704
  padding: spacing,
720
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
705
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
721
706
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
722
707
  } : null
723
708
  })), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -734,7 +719,18 @@ var QuizScreen = function QuizScreen(_ref) {
734
719
  animationDisabled: isPreview,
735
720
  focusable: current && isView,
736
721
  openWebView: openWebView
737
- }))) : null));
722
+ }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
723
+ background: background,
724
+ width: width,
725
+ height: height,
726
+ resolution: resolution,
727
+ playing: backgroundPlaying,
728
+ muted: muted,
729
+ shouldLoad: mediaShouldLoad,
730
+ mediaRef: mediaRef,
731
+ withoutVideo: isPreview,
732
+ className: styles$2.background
733
+ }) : null);
738
734
  };
739
735
 
740
736
  QuizScreen.propTypes = propTypes$3;
@@ -1035,7 +1031,7 @@ var defaultProps = {
1035
1031
  };
1036
1032
 
1037
1033
  var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1038
- var _ref13;
1034
+ var _ref12;
1039
1035
 
1040
1036
  var id = _ref.id,
1041
1037
  layout = _ref.layout,
@@ -1233,15 +1229,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1233
1229
  _ref10$layout = _ref10.layout,
1234
1230
  resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
1235
1231
 
1236
- var visitor = contexts.useVisitor();
1237
-
1238
- var _ref11 = visitor || {},
1239
- _ref11$id = _ref11.id,
1240
- visitorId = _ref11$id === void 0 ? null : _ref11$id;
1241
-
1242
1232
  var _useQuizCreate = data.useQuizCreate({
1243
- screenId: screenId,
1244
- visitorId: visitorId
1233
+ screenId: screenId
1245
1234
  }),
1246
1235
  submitQuiz = _useQuizCreate.create;
1247
1236
 
@@ -1307,8 +1296,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1307
1296
  scrolledBottom = _useState6[0],
1308
1297
  setScrolledBottom = _useState6[1];
1309
1298
 
1310
- var onScrolledBottom = React.useCallback(function (_ref12) {
1311
- var initial = _ref12.initial;
1299
+ var onScrolledBottom = React.useCallback(function (_ref11) {
1300
+ var initial = _ref11.initial;
1312
1301
 
1313
1302
  if (initial) {
1314
1303
  trackScreenEvent('scroll', 'Screen');
@@ -1330,25 +1319,12 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1330
1319
  }
1331
1320
 
1332
1321
  return /*#__PURE__*/React__default["default"].createElement("div", {
1333
- className: classNames__default["default"]([styles$2.container, (_ref13 = {}, _defineProperty__default["default"](_ref13, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref13, className, className !== null), _ref13)]),
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)]),
1334
1323
  "data-screen-ready": true
1335
- }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1336
- key: backgroundKey,
1337
- classNames: styles$2,
1338
- timeout: 1000
1339
- }, /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
1340
- background: finalBackground,
1324
+ }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
1341
1325
  width: width,
1342
1326
  height: height,
1343
- resolution: resolution,
1344
- playing: backgroundPlaying,
1345
- muted: muted,
1346
- shouldLoad: backgroundShouldLoad,
1347
- mediaRef: mediaRef,
1348
- className: styles$2.background
1349
- }))) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
1350
- width: width,
1351
- height: height
1327
+ className: styles$2.content
1352
1328
  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1353
1329
  verticalAlign: verticalAlign,
1354
1330
  disabled: scrollingDisabled,
@@ -1371,7 +1347,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1371
1347
  className: styles$2.intro,
1372
1348
  style: !isPlaceholder ? {
1373
1349
  padding: spacing,
1374
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
1350
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1375
1351
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1376
1352
  } : null,
1377
1353
  onClickButton: onClickIntroButton
@@ -1403,7 +1379,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1403
1379
  className: styles$2.question,
1404
1380
  style: !isPlaceholder ? {
1405
1381
  padding: spacing,
1406
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
1382
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1407
1383
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1408
1384
  } : null
1409
1385
  })) : null, isResults ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -1421,7 +1397,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1421
1397
  className: styles$2.results,
1422
1398
  style: !isPlaceholder ? {
1423
1399
  padding: spacing,
1424
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
1400
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
1425
1401
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
1426
1402
  } : null
1427
1403
  }))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1438,7 +1414,22 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
1438
1414
  animationDisabled: isPreview,
1439
1415
  focusable: current && isView,
1440
1416
  openWebView: openWebView
1441
- }))) : null));
1417
+ }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
1418
+ key: backgroundKey,
1419
+ classNames: styles$2,
1420
+ timeout: 1000
1421
+ }, /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
1422
+ background: finalBackground,
1423
+ width: width,
1424
+ height: height,
1425
+ resolution: resolution,
1426
+ playing: backgroundPlaying,
1427
+ muted: muted,
1428
+ shouldLoad: backgroundShouldLoad,
1429
+ mediaRef: mediaRef,
1430
+ className: styles$2.background,
1431
+ withoutVideo: isPreview
1432
+ }))) : null);
1442
1433
  };
1443
1434
 
1444
1435
  QuizMultipleScreen.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.251",
3
+ "version": "0.3.262",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,17 +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.251",
56
- "@micromag/data": "^0.3.251",
57
- "@micromag/element-background": "^0.3.251",
58
- "@micromag/element-button": "^0.3.251",
59
- "@micromag/element-call-to-action": "^0.3.251",
60
- "@micromag/element-container": "^0.3.251",
61
- "@micromag/element-heading": "^0.3.251",
62
- "@micromag/element-layout": "^0.3.251",
63
- "@micromag/element-scroll": "^0.3.251",
64
- "@micromag/element-text": "^0.3.251",
65
- "@micromag/transforms": "^0.3.251",
55
+ "@micromag/core": "^0.3.262",
56
+ "@micromag/data": "^0.3.262",
57
+ "@micromag/element-background": "^0.3.262",
58
+ "@micromag/element-button": "^0.3.262",
59
+ "@micromag/element-call-to-action": "^0.3.262",
60
+ "@micromag/element-container": "^0.3.262",
61
+ "@micromag/element-heading": "^0.3.262",
62
+ "@micromag/element-layout": "^0.3.262",
63
+ "@micromag/element-scroll": "^0.3.262",
64
+ "@micromag/element-text": "^0.3.262",
65
+ "@micromag/transforms": "^0.3.262",
66
66
  "classnames": "^2.2.6",
67
67
  "lodash": "^4.17.21",
68
68
  "prop-types": "^15.7.2",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
76
+ "gitHead": "2299eaeb150cfdd14b4da321bf9089ab1e6383c2"
77
77
  }