@micromag/screen-quiz 0.3.246 → 0.3.251
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.
- package/assets/css/styles.css +1 -1
- package/es/index.js +63 -54
- package/lib/index.js +62 -53
- 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
|
|
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,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, useScreenState } from '@micromag/core/contexts';
|
|
8
|
+
import { useScreenRenderContext, useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useVisitor, 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","
|
|
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"};
|
|
470
470
|
|
|
471
471
|
var propTypes$3 = {
|
|
472
472
|
id: PropTypes$1.string,
|
|
@@ -586,8 +586,15 @@ 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
|
+
|
|
589
595
|
var _useQuizCreate = useQuizCreate({
|
|
590
|
-
screenId: screenId
|
|
596
|
+
screenId: screenId,
|
|
597
|
+
visitorId: visitorId
|
|
591
598
|
}),
|
|
592
599
|
submitQuiz = _useQuizCreate.create;
|
|
593
600
|
|
|
@@ -609,15 +616,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
609
616
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
610
617
|
useEffect(function () {
|
|
611
618
|
if (userAnswerIndex !== null) {
|
|
612
|
-
var
|
|
613
|
-
|
|
614
|
-
isGood =
|
|
615
|
-
|
|
616
|
-
label =
|
|
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;
|
|
617
624
|
|
|
618
|
-
var
|
|
619
|
-
|
|
620
|
-
body =
|
|
625
|
+
var _ref5 = label || {},
|
|
626
|
+
_ref5$body = _ref5.body,
|
|
627
|
+
body = _ref5$body === void 0 ? '' : _ref5$body;
|
|
621
628
|
|
|
622
629
|
submitQuiz({
|
|
623
630
|
choice: body || userAnswerIndex,
|
|
@@ -632,8 +639,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
632
639
|
scrolledBottom = _useState4[0],
|
|
633
640
|
setScrolledBottom = _useState4[1];
|
|
634
641
|
|
|
635
|
-
var onScrolledBottom = useCallback(function (
|
|
636
|
-
var initial =
|
|
642
|
+
var onScrolledBottom = useCallback(function (_ref6) {
|
|
643
|
+
var initial = _ref6.initial;
|
|
637
644
|
|
|
638
645
|
if (initial) {
|
|
639
646
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -649,10 +656,18 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
649
656
|
return /*#__PURE__*/React.createElement("div", {
|
|
650
657
|
className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
|
|
651
658
|
"data-screen-ready": true
|
|
652
|
-
}, /*#__PURE__*/React.createElement(
|
|
659
|
+
}, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
660
|
+
background: background,
|
|
653
661
|
width: width,
|
|
654
662
|
height: height,
|
|
655
|
-
|
|
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
|
|
656
671
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
657
672
|
verticalAlign: verticalAlign,
|
|
658
673
|
disabled: scrollingDisabled,
|
|
@@ -680,7 +695,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
680
695
|
className: styles$2.question,
|
|
681
696
|
style: !isPlaceholder ? {
|
|
682
697
|
padding: spacing,
|
|
683
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
698
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
684
699
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
685
700
|
} : null
|
|
686
701
|
})), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -697,18 +712,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
697
712
|
animationDisabled: isPreview,
|
|
698
713
|
focusable: current && isView,
|
|
699
714
|
openWebView: openWebView
|
|
700
|
-
}))) : null)
|
|
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);
|
|
715
|
+
}))) : null));
|
|
712
716
|
};
|
|
713
717
|
|
|
714
718
|
QuizScreen.propTypes = propTypes$3;
|
|
@@ -1009,7 +1013,7 @@ var defaultProps = {
|
|
|
1009
1013
|
};
|
|
1010
1014
|
|
|
1011
1015
|
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
1012
|
-
var
|
|
1016
|
+
var _ref13;
|
|
1013
1017
|
|
|
1014
1018
|
var id = _ref.id,
|
|
1015
1019
|
layout = _ref.layout,
|
|
@@ -1207,8 +1211,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1207
1211
|
_ref10$layout = _ref10.layout,
|
|
1208
1212
|
resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
|
|
1209
1213
|
|
|
1214
|
+
var visitor = useVisitor();
|
|
1215
|
+
|
|
1216
|
+
var _ref11 = visitor || {},
|
|
1217
|
+
_ref11$id = _ref11.id,
|
|
1218
|
+
visitorId = _ref11$id === void 0 ? null : _ref11$id;
|
|
1219
|
+
|
|
1210
1220
|
var _useQuizCreate = useQuizCreate({
|
|
1211
|
-
screenId: screenId
|
|
1221
|
+
screenId: screenId,
|
|
1222
|
+
visitorId: visitorId
|
|
1212
1223
|
}),
|
|
1213
1224
|
submitQuiz = _useQuizCreate.create;
|
|
1214
1225
|
|
|
@@ -1274,8 +1285,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1274
1285
|
scrolledBottom = _useState6[0],
|
|
1275
1286
|
setScrolledBottom = _useState6[1];
|
|
1276
1287
|
|
|
1277
|
-
var onScrolledBottom = useCallback(function (
|
|
1278
|
-
var initial =
|
|
1288
|
+
var onScrolledBottom = useCallback(function (_ref12) {
|
|
1289
|
+
var initial = _ref12.initial;
|
|
1279
1290
|
|
|
1280
1291
|
if (initial) {
|
|
1281
1292
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -1297,12 +1308,25 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1297
1308
|
}
|
|
1298
1309
|
|
|
1299
1310
|
return /*#__PURE__*/React.createElement("div", {
|
|
1300
|
-
className: classNames([styles$2.container, (
|
|
1311
|
+
className: classNames([styles$2.container, (_ref13 = {}, _defineProperty(_ref13, styles$2[direction], direction !== null), _defineProperty(_ref13, className, className !== null), _ref13)]),
|
|
1301
1312
|
"data-screen-ready": true
|
|
1302
|
-
}, /*#__PURE__*/React.createElement(
|
|
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,
|
|
1303
1319
|
width: width,
|
|
1304
1320
|
height: height,
|
|
1305
|
-
|
|
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
|
|
1306
1330
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
1307
1331
|
verticalAlign: verticalAlign,
|
|
1308
1332
|
disabled: scrollingDisabled,
|
|
@@ -1325,7 +1349,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1325
1349
|
className: styles$2.intro,
|
|
1326
1350
|
style: !isPlaceholder ? {
|
|
1327
1351
|
padding: spacing,
|
|
1328
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
1352
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
1329
1353
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1330
1354
|
} : null,
|
|
1331
1355
|
onClickButton: onClickIntroButton
|
|
@@ -1357,7 +1381,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1357
1381
|
className: styles$2.question,
|
|
1358
1382
|
style: !isPlaceholder ? {
|
|
1359
1383
|
padding: spacing,
|
|
1360
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
1384
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
1361
1385
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1362
1386
|
} : null
|
|
1363
1387
|
})) : null, isResults ? /*#__PURE__*/React.createElement(CSSTransition, {
|
|
@@ -1375,7 +1399,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1375
1399
|
className: styles$2.results,
|
|
1376
1400
|
style: !isPlaceholder ? {
|
|
1377
1401
|
padding: spacing,
|
|
1378
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
1402
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
1379
1403
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1380
1404
|
} : null
|
|
1381
1405
|
}))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -1392,22 +1416,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1392
1416
|
animationDisabled: isPreview,
|
|
1393
1417
|
focusable: current && isView,
|
|
1394
1418
|
openWebView: openWebView
|
|
1395
|
-
}))) : null)
|
|
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);
|
|
1419
|
+
}))) : null));
|
|
1411
1420
|
};
|
|
1412
1421
|
|
|
1413
1422
|
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","
|
|
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"};
|
|
492
492
|
|
|
493
493
|
var propTypes$3 = {
|
|
494
494
|
id: PropTypes__default["default"].string,
|
|
@@ -608,8 +608,15 @@ 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
|
+
|
|
611
617
|
var _useQuizCreate = data.useQuizCreate({
|
|
612
|
-
screenId: screenId
|
|
618
|
+
screenId: screenId,
|
|
619
|
+
visitorId: visitorId
|
|
613
620
|
}),
|
|
614
621
|
submitQuiz = _useQuizCreate.create;
|
|
615
622
|
|
|
@@ -631,15 +638,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
631
638
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
632
639
|
React.useEffect(function () {
|
|
633
640
|
if (userAnswerIndex !== null) {
|
|
634
|
-
var
|
|
635
|
-
|
|
636
|
-
isGood =
|
|
637
|
-
|
|
638
|
-
label =
|
|
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;
|
|
639
646
|
|
|
640
|
-
var
|
|
641
|
-
|
|
642
|
-
body =
|
|
647
|
+
var _ref5 = label || {},
|
|
648
|
+
_ref5$body = _ref5.body,
|
|
649
|
+
body = _ref5$body === void 0 ? '' : _ref5$body;
|
|
643
650
|
|
|
644
651
|
submitQuiz({
|
|
645
652
|
choice: body || userAnswerIndex,
|
|
@@ -654,8 +661,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
654
661
|
scrolledBottom = _useState4[0],
|
|
655
662
|
setScrolledBottom = _useState4[1];
|
|
656
663
|
|
|
657
|
-
var onScrolledBottom = React.useCallback(function (
|
|
658
|
-
var initial =
|
|
664
|
+
var onScrolledBottom = React.useCallback(function (_ref6) {
|
|
665
|
+
var initial = _ref6.initial;
|
|
659
666
|
|
|
660
667
|
if (initial) {
|
|
661
668
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -671,10 +678,18 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
671
678
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
672
679
|
className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
673
680
|
"data-screen-ready": true
|
|
674
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
681
|
+
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
682
|
+
background: background,
|
|
675
683
|
width: width,
|
|
676
684
|
height: height,
|
|
677
|
-
|
|
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
|
|
678
693
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
679
694
|
verticalAlign: verticalAlign,
|
|
680
695
|
disabled: scrollingDisabled,
|
|
@@ -702,7 +717,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
702
717
|
className: styles$2.question,
|
|
703
718
|
style: !isPlaceholder ? {
|
|
704
719
|
padding: spacing,
|
|
705
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
720
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
706
721
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
707
722
|
} : null
|
|
708
723
|
})), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -719,18 +734,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
719
734
|
animationDisabled: isPreview,
|
|
720
735
|
focusable: current && isView,
|
|
721
736
|
openWebView: openWebView
|
|
722
|
-
}))) : null)
|
|
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);
|
|
737
|
+
}))) : null));
|
|
734
738
|
};
|
|
735
739
|
|
|
736
740
|
QuizScreen.propTypes = propTypes$3;
|
|
@@ -1031,7 +1035,7 @@ var defaultProps = {
|
|
|
1031
1035
|
};
|
|
1032
1036
|
|
|
1033
1037
|
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
1034
|
-
var
|
|
1038
|
+
var _ref13;
|
|
1035
1039
|
|
|
1036
1040
|
var id = _ref.id,
|
|
1037
1041
|
layout = _ref.layout,
|
|
@@ -1229,8 +1233,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1229
1233
|
_ref10$layout = _ref10.layout,
|
|
1230
1234
|
resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
|
|
1231
1235
|
|
|
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
|
+
|
|
1232
1242
|
var _useQuizCreate = data.useQuizCreate({
|
|
1233
|
-
screenId: screenId
|
|
1243
|
+
screenId: screenId,
|
|
1244
|
+
visitorId: visitorId
|
|
1234
1245
|
}),
|
|
1235
1246
|
submitQuiz = _useQuizCreate.create;
|
|
1236
1247
|
|
|
@@ -1296,8 +1307,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1296
1307
|
scrolledBottom = _useState6[0],
|
|
1297
1308
|
setScrolledBottom = _useState6[1];
|
|
1298
1309
|
|
|
1299
|
-
var onScrolledBottom = React.useCallback(function (
|
|
1300
|
-
var initial =
|
|
1310
|
+
var onScrolledBottom = React.useCallback(function (_ref12) {
|
|
1311
|
+
var initial = _ref12.initial;
|
|
1301
1312
|
|
|
1302
1313
|
if (initial) {
|
|
1303
1314
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -1319,12 +1330,25 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1319
1330
|
}
|
|
1320
1331
|
|
|
1321
1332
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1322
|
-
className: classNames__default["default"]([styles$2.container, (
|
|
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)]),
|
|
1323
1334
|
"data-screen-ready": true
|
|
1324
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
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,
|
|
1325
1341
|
width: width,
|
|
1326
1342
|
height: height,
|
|
1327
|
-
|
|
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
|
|
1328
1352
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
1329
1353
|
verticalAlign: verticalAlign,
|
|
1330
1354
|
disabled: scrollingDisabled,
|
|
@@ -1347,7 +1371,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1347
1371
|
className: styles$2.intro,
|
|
1348
1372
|
style: !isPlaceholder ? {
|
|
1349
1373
|
padding: spacing,
|
|
1350
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
1374
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
1351
1375
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1352
1376
|
} : null,
|
|
1353
1377
|
onClickButton: onClickIntroButton
|
|
@@ -1379,7 +1403,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1379
1403
|
className: styles$2.question,
|
|
1380
1404
|
style: !isPlaceholder ? {
|
|
1381
1405
|
padding: spacing,
|
|
1382
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
1406
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
1383
1407
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1384
1408
|
} : null
|
|
1385
1409
|
})) : null, isResults ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
@@ -1397,7 +1421,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1397
1421
|
className: styles$2.results,
|
|
1398
1422
|
style: !isPlaceholder ? {
|
|
1399
1423
|
padding: spacing,
|
|
1400
|
-
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
1424
|
+
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
|
|
1401
1425
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1402
1426
|
} : null
|
|
1403
1427
|
}))) : null])), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -1414,22 +1438,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1414
1438
|
animationDisabled: isPreview,
|
|
1415
1439
|
focusable: current && isView,
|
|
1416
1440
|
openWebView: openWebView
|
|
1417
|
-
}))) : null)
|
|
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);
|
|
1441
|
+
}))) : null));
|
|
1433
1442
|
};
|
|
1434
1443
|
|
|
1435
1444
|
QuizMultipleScreen.propTypes = propTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-quiz",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.251",
|
|
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.
|
|
56
|
-
"@micromag/data": "^0.3.
|
|
57
|
-
"@micromag/element-background": "^0.3.
|
|
58
|
-
"@micromag/element-button": "^0.3.
|
|
59
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
60
|
-
"@micromag/element-container": "^0.3.
|
|
61
|
-
"@micromag/element-heading": "^0.3.
|
|
62
|
-
"@micromag/element-layout": "^0.3.
|
|
63
|
-
"@micromag/element-scroll": "^0.3.
|
|
64
|
-
"@micromag/element-text": "^0.3.
|
|
65
|
-
"@micromag/transforms": "^0.3.
|
|
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",
|
|
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": "
|
|
76
|
+
"gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
|
|
77
77
|
}
|