@micromag/screen-quiz 0.3.152 → 0.3.156
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 +64 -56
- package/lib/index.js +63 -55
- package/package.json +13 -12
package/assets/css/styles.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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-
|
|
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-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
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}
|
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';
|
|
@@ -25,7 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
25
25
|
import Button from '@micromag/element-button';
|
|
26
26
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
27
27
|
|
|
28
|
-
var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","
|
|
28
|
+
var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","answerToSlide":"micromag-screen-quiz-answers-answerToSlide","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","userAnswer":"micromag-screen-quiz-answers-userAnswer","willCollapse":"micromag-screen-quiz-answers-willCollapse","didCollapsed":"micromag-screen-quiz-answers-didCollapsed","withoutGoodAnswer":"micromag-screen-quiz-answers-withoutGoodAnswer","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","withGoodAnswer":"micromag-screen-quiz-answers-withGoodAnswer","resultIcon":"micromag-screen-quiz-answers-resultIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
|
|
29
29
|
|
|
30
30
|
var propTypes$5 = {
|
|
31
31
|
items: PropTypes.quizAnswers.isRequired,
|
|
@@ -74,7 +74,7 @@ var defaultProps$5 = {
|
|
|
74
74
|
};
|
|
75
75
|
|
|
76
76
|
var Answers = function Answers(_ref) {
|
|
77
|
-
var
|
|
77
|
+
var _ref4;
|
|
78
78
|
|
|
79
79
|
var items = _ref.items,
|
|
80
80
|
answeredIndex = _ref.answeredIndex,
|
|
@@ -123,7 +123,13 @@ var Answers = function Answers(_ref) {
|
|
|
123
123
|
var rightAnswerTop = useMemo(function () {
|
|
124
124
|
return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
|
|
125
125
|
}, [rightAnswerHeight]);
|
|
126
|
-
var
|
|
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
|
+
var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
|
|
132
|
+
var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
|
|
127
133
|
|
|
128
134
|
var _useState = useState(answeredIndex !== null),
|
|
129
135
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -145,7 +151,7 @@ var Answers = function Answers(_ref) {
|
|
|
145
151
|
if (onCollapse !== null) {
|
|
146
152
|
onCollapse();
|
|
147
153
|
}
|
|
148
|
-
}, hasAnsweredRight ||
|
|
154
|
+
}, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
|
|
149
155
|
}
|
|
150
156
|
|
|
151
157
|
return function () {
|
|
@@ -153,7 +159,7 @@ var Answers = function Answers(_ref) {
|
|
|
153
159
|
clearTimeout(timeout);
|
|
154
160
|
}
|
|
155
161
|
};
|
|
156
|
-
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight,
|
|
162
|
+
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
|
|
157
163
|
var onAnswerTransitionEnd = useCallback(function () {
|
|
158
164
|
if (onTransitionEnd !== null) {
|
|
159
165
|
onTransitionEnd();
|
|
@@ -168,7 +174,7 @@ var Answers = function Answers(_ref) {
|
|
|
168
174
|
}
|
|
169
175
|
}, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
|
|
170
176
|
return /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
className: classNames([styles$4.container, (
|
|
177
|
+
className: classNames([styles$4.container, (_ref4 = {}, _defineProperty(_ref4, styles$4.answered, answered), _defineProperty(_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty(_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _defineProperty(_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref4, className, className !== null), _ref4)]),
|
|
172
178
|
ref: answerRef,
|
|
173
179
|
style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
|
|
174
180
|
height: answersCollapsed ? rightAnswerHeight : answerHeight
|
|
@@ -176,44 +182,40 @@ var Answers = function Answers(_ref) {
|
|
|
176
182
|
}, items !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
177
183
|
className: styles$4.items
|
|
178
184
|
}, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items).map(function (answer, answerI) {
|
|
179
|
-
var
|
|
185
|
+
var _ref7;
|
|
180
186
|
|
|
181
187
|
var userAnswer = answerI === answeredIndex;
|
|
182
188
|
|
|
183
|
-
var
|
|
184
|
-
|
|
185
|
-
rightAnswer =
|
|
186
|
-
|
|
187
|
-
label =
|
|
188
|
-
|
|
189
|
-
answerButtonStyle =
|
|
190
|
-
_ref4$textStyle = _ref4.textStyle,
|
|
191
|
-
answerButtonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
|
|
192
|
-
|
|
193
|
-
var _ref5 = label || {},
|
|
189
|
+
var _ref5 = answer || {},
|
|
190
|
+
_ref5$good = _ref5.good,
|
|
191
|
+
rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
|
|
192
|
+
_ref5$label = _ref5.label,
|
|
193
|
+
label = _ref5$label === void 0 ? null : _ref5$label,
|
|
194
|
+
_ref5$buttonStyle = _ref5.buttonStyle,
|
|
195
|
+
answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
|
|
194
196
|
_ref5$textStyle = _ref5.textStyle,
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
var hasAnswer = isTextFilled(label);
|
|
198
|
-
var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
|
|
197
|
+
answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
|
|
199
198
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
199
|
+
var _ref6 = label || {},
|
|
200
|
+
_ref6$textStyle = _ref6.textStyle,
|
|
201
|
+
textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
|
|
203
202
|
|
|
203
|
+
var hasAnswer = isTextFilled(label);
|
|
204
|
+
var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
|
|
204
205
|
|
|
205
|
-
if (
|
|
206
|
+
if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
|
|
206
207
|
return null;
|
|
207
208
|
}
|
|
208
209
|
|
|
210
|
+
var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
|
|
209
211
|
return /*#__PURE__*/React.createElement("div", {
|
|
210
212
|
key: "answer-".concat(answerI),
|
|
211
|
-
ref:
|
|
212
|
-
className: classNames([styles$4.item, (
|
|
213
|
-
style: answersCollapsed &&
|
|
213
|
+
ref: answerToShow ? rightAnswerRef : null,
|
|
214
|
+
className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer && !finalShowUserAnswer), _defineProperty(_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _defineProperty(_ref7, styles$4.answerToSlide, answerToShow), _ref7)]),
|
|
215
|
+
style: answersCollapsed && answerToShow && !answersDidCollapsed && shouldCollapse ? {
|
|
214
216
|
transform: "translateY(".concat(-rightAnswerTop, "px)")
|
|
215
217
|
} : null,
|
|
216
|
-
onTransitionEnd:
|
|
218
|
+
onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
|
|
217
219
|
}, /*#__PURE__*/React.createElement("div", {
|
|
218
220
|
className: styles$4.itemContent
|
|
219
221
|
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -285,7 +287,6 @@ var propTypes$4 = {
|
|
|
285
287
|
badAnswerColor: PropTypes.color,
|
|
286
288
|
focusable: PropTypes$1.bool,
|
|
287
289
|
layout: PropTypes$1.string,
|
|
288
|
-
callToActionHeight: PropTypes$1.number,
|
|
289
290
|
showInstantAnswer: PropTypes$1.bool,
|
|
290
291
|
withResult: PropTypes$1.bool,
|
|
291
292
|
withoutGoodAnswer: PropTypes$1.bool,
|
|
@@ -314,7 +315,6 @@ var defaultProps$4 = {
|
|
|
314
315
|
badAnswerColor: null,
|
|
315
316
|
focusable: false,
|
|
316
317
|
layout: null,
|
|
317
|
-
callToActionHeight: null,
|
|
318
318
|
showInstantAnswer: false,
|
|
319
319
|
withResult: false,
|
|
320
320
|
withoutGoodAnswer: false,
|
|
@@ -351,7 +351,6 @@ var Question = function Question(_ref) {
|
|
|
351
351
|
withoutTrueFalse = _ref.withoutTrueFalse,
|
|
352
352
|
withoutIndex = _ref.withoutIndex,
|
|
353
353
|
layout = _ref.layout,
|
|
354
|
-
callToActionHeight = _ref.callToActionHeight,
|
|
355
354
|
transitions = _ref.transitions,
|
|
356
355
|
transitionPlaying = _ref.transitionPlaying,
|
|
357
356
|
transitionStagger = _ref.transitionStagger,
|
|
@@ -461,11 +460,7 @@ var Question = function Question(_ref) {
|
|
|
461
460
|
disabled: transitionDisabled
|
|
462
461
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, result, {
|
|
463
462
|
className: styles$3.resultText
|
|
464
|
-
}))
|
|
465
|
-
style: {
|
|
466
|
-
height: callToActionHeight
|
|
467
|
-
}
|
|
468
|
-
}) : null) : null))) : null]);
|
|
463
|
+
}))) : null))) : null]);
|
|
469
464
|
};
|
|
470
465
|
|
|
471
466
|
Question.propTypes = propTypes$4;
|
|
@@ -591,8 +586,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
591
586
|
userAnswerIndex = _useState2[0],
|
|
592
587
|
setUserAnswerIndex = _useState2[1];
|
|
593
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
|
+
|
|
594
595
|
var _useQuizCreate = useQuizCreate({
|
|
595
|
-
screenId: screenId
|
|
596
|
+
screenId: screenId,
|
|
597
|
+
visitorId: visitorId
|
|
596
598
|
}),
|
|
597
599
|
submitQuiz = _useQuizCreate.create;
|
|
598
600
|
|
|
@@ -614,15 +616,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
614
616
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
615
617
|
useEffect(function () {
|
|
616
618
|
if (userAnswerIndex !== null) {
|
|
617
|
-
var
|
|
618
|
-
|
|
619
|
-
isGood =
|
|
620
|
-
|
|
621
|
-
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;
|
|
622
624
|
|
|
623
|
-
var
|
|
624
|
-
|
|
625
|
-
body =
|
|
625
|
+
var _ref5 = label || {},
|
|
626
|
+
_ref5$body = _ref5.body,
|
|
627
|
+
body = _ref5$body === void 0 ? '' : _ref5$body;
|
|
626
628
|
|
|
627
629
|
submitQuiz({
|
|
628
630
|
choice: body || userAnswerIndex,
|
|
@@ -637,8 +639,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
637
639
|
scrolledBottom = _useState4[0],
|
|
638
640
|
setScrolledBottom = _useState4[1];
|
|
639
641
|
|
|
640
|
-
var onScrolledBottom = useCallback(function (
|
|
641
|
-
var initial =
|
|
642
|
+
var onScrolledBottom = useCallback(function (_ref6) {
|
|
643
|
+
var initial = _ref6.initial;
|
|
642
644
|
|
|
643
645
|
if (initial) {
|
|
644
646
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -1011,7 +1013,7 @@ var defaultProps = {
|
|
|
1011
1013
|
};
|
|
1012
1014
|
|
|
1013
1015
|
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
1014
|
-
var
|
|
1016
|
+
var _ref13;
|
|
1015
1017
|
|
|
1016
1018
|
var id = _ref.id,
|
|
1017
1019
|
layout = _ref.layout,
|
|
@@ -1209,8 +1211,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1209
1211
|
_ref10$layout = _ref10.layout,
|
|
1210
1212
|
resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
|
|
1211
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
|
+
|
|
1212
1220
|
var _useQuizCreate = useQuizCreate({
|
|
1213
|
-
screenId: screenId
|
|
1221
|
+
screenId: screenId,
|
|
1222
|
+
visitorId: visitorId
|
|
1214
1223
|
}),
|
|
1215
1224
|
submitQuiz = _useQuizCreate.create;
|
|
1216
1225
|
|
|
@@ -1276,8 +1285,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1276
1285
|
scrolledBottom = _useState6[0],
|
|
1277
1286
|
setScrolledBottom = _useState6[1];
|
|
1278
1287
|
|
|
1279
|
-
var onScrolledBottom = useCallback(function (
|
|
1280
|
-
var initial =
|
|
1288
|
+
var onScrolledBottom = useCallback(function (_ref12) {
|
|
1289
|
+
var initial = _ref12.initial;
|
|
1281
1290
|
|
|
1282
1291
|
if (initial) {
|
|
1283
1292
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -1299,7 +1308,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1299
1308
|
}
|
|
1300
1309
|
|
|
1301
1310
|
return /*#__PURE__*/React.createElement("div", {
|
|
1302
|
-
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)]),
|
|
1303
1312
|
"data-screen-ready": true
|
|
1304
1313
|
}, !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
|
|
1305
1314
|
key: backgroundKey,
|
|
@@ -1363,7 +1372,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1363
1372
|
showInstantAnswer: showInstantAnswer,
|
|
1364
1373
|
layout: questionLayout || layout,
|
|
1365
1374
|
withoutGoodAnswer: true,
|
|
1366
|
-
callToActionHeight: callToActionHeight,
|
|
1367
1375
|
transitions: transitions,
|
|
1368
1376
|
transitionPlaying: transitionPlaying,
|
|
1369
1377
|
transitionStagger: transitionStagger,
|
package/lib/index.js
CHANGED
|
@@ -47,7 +47,7 @@ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
|
47
47
|
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
48
48
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
49
49
|
|
|
50
|
-
var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","
|
|
50
|
+
var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","answerToSlide":"micromag-screen-quiz-answers-answerToSlide","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","userAnswer":"micromag-screen-quiz-answers-userAnswer","willCollapse":"micromag-screen-quiz-answers-willCollapse","didCollapsed":"micromag-screen-quiz-answers-didCollapsed","withoutGoodAnswer":"micromag-screen-quiz-answers-withoutGoodAnswer","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","withGoodAnswer":"micromag-screen-quiz-answers-withGoodAnswer","resultIcon":"micromag-screen-quiz-answers-resultIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
|
|
51
51
|
|
|
52
52
|
var propTypes$5 = {
|
|
53
53
|
items: core.PropTypes.quizAnswers.isRequired,
|
|
@@ -96,7 +96,7 @@ var defaultProps$5 = {
|
|
|
96
96
|
};
|
|
97
97
|
|
|
98
98
|
var Answers = function Answers(_ref) {
|
|
99
|
-
var
|
|
99
|
+
var _ref4;
|
|
100
100
|
|
|
101
101
|
var items = _ref.items,
|
|
102
102
|
answeredIndex = _ref.answeredIndex,
|
|
@@ -145,7 +145,13 @@ var Answers = function Answers(_ref) {
|
|
|
145
145
|
var rightAnswerTop = React.useMemo(function () {
|
|
146
146
|
return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
|
|
147
147
|
}, [rightAnswerHeight]);
|
|
148
|
-
var
|
|
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;
|
|
153
|
+
var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
|
|
154
|
+
var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
|
|
149
155
|
|
|
150
156
|
var _useState = React.useState(answeredIndex !== null),
|
|
151
157
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
@@ -167,7 +173,7 @@ var Answers = function Answers(_ref) {
|
|
|
167
173
|
if (onCollapse !== null) {
|
|
168
174
|
onCollapse();
|
|
169
175
|
}
|
|
170
|
-
}, hasAnsweredRight ||
|
|
176
|
+
}, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
|
|
171
177
|
}
|
|
172
178
|
|
|
173
179
|
return function () {
|
|
@@ -175,7 +181,7 @@ var Answers = function Answers(_ref) {
|
|
|
175
181
|
clearTimeout(timeout);
|
|
176
182
|
}
|
|
177
183
|
};
|
|
178
|
-
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight,
|
|
184
|
+
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
|
|
179
185
|
var onAnswerTransitionEnd = React.useCallback(function () {
|
|
180
186
|
if (onTransitionEnd !== null) {
|
|
181
187
|
onTransitionEnd();
|
|
@@ -190,7 +196,7 @@ var Answers = function Answers(_ref) {
|
|
|
190
196
|
}
|
|
191
197
|
}, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
|
|
192
198
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
193
|
-
className: classNames__default["default"]([styles$4.container, (
|
|
199
|
+
className: classNames__default["default"]([styles$4.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$4.answered, answered), _defineProperty__default["default"](_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer || !hasRightAnswer), _defineProperty__default["default"](_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer && hasRightAnswer), _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)]),
|
|
194
200
|
ref: answerRef,
|
|
195
201
|
style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
|
|
196
202
|
height: answersCollapsed ? rightAnswerHeight : answerHeight
|
|
@@ -198,44 +204,40 @@ var Answers = function Answers(_ref) {
|
|
|
198
204
|
}, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
199
205
|
className: styles$4.items
|
|
200
206
|
}, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
|
|
201
|
-
var
|
|
207
|
+
var _ref7;
|
|
202
208
|
|
|
203
209
|
var userAnswer = answerI === answeredIndex;
|
|
204
210
|
|
|
205
|
-
var
|
|
206
|
-
|
|
207
|
-
rightAnswer =
|
|
208
|
-
|
|
209
|
-
label =
|
|
210
|
-
|
|
211
|
-
answerButtonStyle =
|
|
212
|
-
_ref4$textStyle = _ref4.textStyle,
|
|
213
|
-
answerButtonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
|
|
214
|
-
|
|
215
|
-
var _ref5 = label || {},
|
|
211
|
+
var _ref5 = answer || {},
|
|
212
|
+
_ref5$good = _ref5.good,
|
|
213
|
+
rightAnswer = _ref5$good === void 0 ? false : _ref5$good,
|
|
214
|
+
_ref5$label = _ref5.label,
|
|
215
|
+
label = _ref5$label === void 0 ? null : _ref5$label,
|
|
216
|
+
_ref5$buttonStyle = _ref5.buttonStyle,
|
|
217
|
+
answerButtonStyle = _ref5$buttonStyle === void 0 ? null : _ref5$buttonStyle,
|
|
216
218
|
_ref5$textStyle = _ref5.textStyle,
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
var hasAnswer = utils.isTextFilled(label);
|
|
220
|
-
var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
|
|
219
|
+
answerButtonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle;
|
|
221
220
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
221
|
+
var _ref6 = label || {},
|
|
222
|
+
_ref6$textStyle = _ref6.textStyle,
|
|
223
|
+
textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
|
|
225
224
|
|
|
225
|
+
var hasAnswer = utils.isTextFilled(label);
|
|
226
|
+
var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
|
|
226
227
|
|
|
227
|
-
if (
|
|
228
|
+
if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
|
|
228
229
|
return null;
|
|
229
230
|
}
|
|
230
231
|
|
|
232
|
+
var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
|
|
231
233
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
232
234
|
key: "answer-".concat(answerI),
|
|
233
|
-
ref:
|
|
234
|
-
className: classNames__default["default"]([styles$4.item, (
|
|
235
|
-
style: answersCollapsed &&
|
|
235
|
+
ref: answerToShow ? rightAnswerRef : null,
|
|
236
|
+
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 && !finalShowUserAnswer), _defineProperty__default["default"](_ref7, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _defineProperty__default["default"](_ref7, styles$4.answerToSlide, answerToShow), _ref7)]),
|
|
237
|
+
style: answersCollapsed && answerToShow && !answersDidCollapsed && shouldCollapse ? {
|
|
236
238
|
transform: "translateY(".concat(-rightAnswerTop, "px)")
|
|
237
239
|
} : null,
|
|
238
|
-
onTransitionEnd:
|
|
240
|
+
onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
|
|
239
241
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
240
242
|
className: styles$4.itemContent
|
|
241
243
|
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
@@ -307,7 +309,6 @@ var propTypes$4 = {
|
|
|
307
309
|
badAnswerColor: core.PropTypes.color,
|
|
308
310
|
focusable: PropTypes__default["default"].bool,
|
|
309
311
|
layout: PropTypes__default["default"].string,
|
|
310
|
-
callToActionHeight: PropTypes__default["default"].number,
|
|
311
312
|
showInstantAnswer: PropTypes__default["default"].bool,
|
|
312
313
|
withResult: PropTypes__default["default"].bool,
|
|
313
314
|
withoutGoodAnswer: PropTypes__default["default"].bool,
|
|
@@ -336,7 +337,6 @@ var defaultProps$4 = {
|
|
|
336
337
|
badAnswerColor: null,
|
|
337
338
|
focusable: false,
|
|
338
339
|
layout: null,
|
|
339
|
-
callToActionHeight: null,
|
|
340
340
|
showInstantAnswer: false,
|
|
341
341
|
withResult: false,
|
|
342
342
|
withoutGoodAnswer: false,
|
|
@@ -373,7 +373,6 @@ var Question = function Question(_ref) {
|
|
|
373
373
|
withoutTrueFalse = _ref.withoutTrueFalse,
|
|
374
374
|
withoutIndex = _ref.withoutIndex,
|
|
375
375
|
layout = _ref.layout,
|
|
376
|
-
callToActionHeight = _ref.callToActionHeight,
|
|
377
376
|
transitions = _ref.transitions,
|
|
378
377
|
transitionPlaying = _ref.transitionPlaying,
|
|
379
378
|
transitionStagger = _ref.transitionStagger,
|
|
@@ -483,11 +482,7 @@ var Question = function Question(_ref) {
|
|
|
483
482
|
disabled: transitionDisabled
|
|
484
483
|
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, result, {
|
|
485
484
|
className: styles$3.resultText
|
|
486
|
-
}))
|
|
487
|
-
style: {
|
|
488
|
-
height: callToActionHeight
|
|
489
|
-
}
|
|
490
|
-
}) : null) : null))) : null]);
|
|
485
|
+
}))) : null))) : null]);
|
|
491
486
|
};
|
|
492
487
|
|
|
493
488
|
Question.propTypes = propTypes$4;
|
|
@@ -613,8 +608,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
613
608
|
userAnswerIndex = _useState2[0],
|
|
614
609
|
setUserAnswerIndex = _useState2[1];
|
|
615
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
|
+
|
|
616
617
|
var _useQuizCreate = data.useQuizCreate({
|
|
617
|
-
screenId: screenId
|
|
618
|
+
screenId: screenId,
|
|
619
|
+
visitorId: visitorId
|
|
618
620
|
}),
|
|
619
621
|
submitQuiz = _useQuizCreate.create;
|
|
620
622
|
|
|
@@ -636,15 +638,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
636
638
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
637
639
|
React.useEffect(function () {
|
|
638
640
|
if (userAnswerIndex !== null) {
|
|
639
|
-
var
|
|
640
|
-
|
|
641
|
-
isGood =
|
|
642
|
-
|
|
643
|
-
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;
|
|
644
646
|
|
|
645
|
-
var
|
|
646
|
-
|
|
647
|
-
body =
|
|
647
|
+
var _ref5 = label || {},
|
|
648
|
+
_ref5$body = _ref5.body,
|
|
649
|
+
body = _ref5$body === void 0 ? '' : _ref5$body;
|
|
648
650
|
|
|
649
651
|
submitQuiz({
|
|
650
652
|
choice: body || userAnswerIndex,
|
|
@@ -659,8 +661,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
659
661
|
scrolledBottom = _useState4[0],
|
|
660
662
|
setScrolledBottom = _useState4[1];
|
|
661
663
|
|
|
662
|
-
var onScrolledBottom = React.useCallback(function (
|
|
663
|
-
var initial =
|
|
664
|
+
var onScrolledBottom = React.useCallback(function (_ref6) {
|
|
665
|
+
var initial = _ref6.initial;
|
|
664
666
|
|
|
665
667
|
if (initial) {
|
|
666
668
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -1033,7 +1035,7 @@ var defaultProps = {
|
|
|
1033
1035
|
};
|
|
1034
1036
|
|
|
1035
1037
|
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
1036
|
-
var
|
|
1038
|
+
var _ref13;
|
|
1037
1039
|
|
|
1038
1040
|
var id = _ref.id,
|
|
1039
1041
|
layout = _ref.layout,
|
|
@@ -1231,8 +1233,15 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1231
1233
|
_ref10$layout = _ref10.layout,
|
|
1232
1234
|
resultLayout = _ref10$layout === void 0 ? null : _ref10$layout;
|
|
1233
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
|
+
|
|
1234
1242
|
var _useQuizCreate = data.useQuizCreate({
|
|
1235
|
-
screenId: screenId
|
|
1243
|
+
screenId: screenId,
|
|
1244
|
+
visitorId: visitorId
|
|
1236
1245
|
}),
|
|
1237
1246
|
submitQuiz = _useQuizCreate.create;
|
|
1238
1247
|
|
|
@@ -1298,8 +1307,8 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1298
1307
|
scrolledBottom = _useState6[0],
|
|
1299
1308
|
setScrolledBottom = _useState6[1];
|
|
1300
1309
|
|
|
1301
|
-
var onScrolledBottom = React.useCallback(function (
|
|
1302
|
-
var initial =
|
|
1310
|
+
var onScrolledBottom = React.useCallback(function (_ref12) {
|
|
1311
|
+
var initial = _ref12.initial;
|
|
1303
1312
|
|
|
1304
1313
|
if (initial) {
|
|
1305
1314
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -1321,7 +1330,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1321
1330
|
}
|
|
1322
1331
|
|
|
1323
1332
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1324
|
-
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)]),
|
|
1325
1334
|
"data-screen-ready": true
|
|
1326
1335
|
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
1327
1336
|
key: backgroundKey,
|
|
@@ -1385,7 +1394,6 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1385
1394
|
showInstantAnswer: showInstantAnswer,
|
|
1386
1395
|
layout: questionLayout || layout,
|
|
1387
1396
|
withoutGoodAnswer: true,
|
|
1388
|
-
callToActionHeight: callToActionHeight,
|
|
1389
1397
|
transitions: transitions,
|
|
1390
1398
|
transitionPlaying: transitionPlaying,
|
|
1391
1399
|
transitionStagger: transitionStagger,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-quiz",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.156",
|
|
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.
|
|
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-
|
|
64
|
-
"@micromag/
|
|
55
|
+
"@micromag/core": "^0.3.156",
|
|
56
|
+
"@micromag/data": "^0.3.156",
|
|
57
|
+
"@micromag/element-background": "^0.3.156",
|
|
58
|
+
"@micromag/element-button": "^0.3.156",
|
|
59
|
+
"@micromag/element-call-to-action": "^0.3.156",
|
|
60
|
+
"@micromag/element-container": "^0.3.156",
|
|
61
|
+
"@micromag/element-heading": "^0.3.156",
|
|
62
|
+
"@micromag/element-layout": "^0.3.156",
|
|
63
|
+
"@micromag/element-scroll": "^0.3.156",
|
|
64
|
+
"@micromag/element-text": "^0.3.156",
|
|
65
|
+
"@micromag/transforms": "^0.3.156",
|
|
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": "
|
|
76
|
+
"gitHead": "026d0eb445367f824d3d07a04a0fa90cc00d49f2"
|
|
76
77
|
}
|