@micromag/screen-quiz 0.3.153 → 0.3.154
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 +44 -33
- package/lib/index.js +43 -32
- package/package.json +2 -2
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,
|
|
@@ -128,7 +128,8 @@ var Answers = function Answers(_ref) {
|
|
|
128
128
|
good = _ref3$good === void 0 ? false : _ref3$good;
|
|
129
129
|
return hasGood || good;
|
|
130
130
|
}, false) : false;
|
|
131
|
-
var
|
|
131
|
+
var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
|
|
132
|
+
var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
|
|
132
133
|
|
|
133
134
|
var _useState = useState(answeredIndex !== null),
|
|
134
135
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -150,7 +151,7 @@ var Answers = function Answers(_ref) {
|
|
|
150
151
|
if (onCollapse !== null) {
|
|
151
152
|
onCollapse();
|
|
152
153
|
}
|
|
153
|
-
}, hasAnsweredRight ||
|
|
154
|
+
}, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
|
|
154
155
|
}
|
|
155
156
|
|
|
156
157
|
return function () {
|
|
@@ -158,7 +159,7 @@ var Answers = function Answers(_ref) {
|
|
|
158
159
|
clearTimeout(timeout);
|
|
159
160
|
}
|
|
160
161
|
};
|
|
161
|
-
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight,
|
|
162
|
+
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
|
|
162
163
|
var onAnswerTransitionEnd = useCallback(function () {
|
|
163
164
|
if (onTransitionEnd !== null) {
|
|
164
165
|
onTransitionEnd();
|
|
@@ -173,7 +174,7 @@ var Answers = function Answers(_ref) {
|
|
|
173
174
|
}
|
|
174
175
|
}, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
|
|
175
176
|
return /*#__PURE__*/React.createElement("div", {
|
|
176
|
-
className: classNames([styles$4.container, (_ref4 = {}, _defineProperty(_ref4, styles$4.answered, answered), _defineProperty(_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty(_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty(_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty(_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty(_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty(_ref4, className, className !== null), _ref4)]),
|
|
177
|
+
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)]),
|
|
177
178
|
ref: answerRef,
|
|
178
179
|
style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
|
|
179
180
|
height: answersCollapsed ? rightAnswerHeight : answerHeight
|
|
@@ -200,25 +201,21 @@ var Answers = function Answers(_ref) {
|
|
|
200
201
|
textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
|
|
201
202
|
|
|
202
203
|
var hasAnswer = isTextFilled(label);
|
|
203
|
-
var hasFinalUserAnswer =
|
|
204
|
+
var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
|
|
204
205
|
|
|
205
|
-
if (
|
|
206
|
-
return null;
|
|
207
|
-
} // Only show user answer
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
if (hasFinalUserAnswer && answersCollapsed && !userAnswer) {
|
|
206
|
+
if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
|
|
211
207
|
return null;
|
|
212
208
|
}
|
|
213
209
|
|
|
210
|
+
var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
|
|
214
211
|
return /*#__PURE__*/React.createElement("div", {
|
|
215
212
|
key: "answer-".concat(answerI),
|
|
216
|
-
ref:
|
|
217
|
-
className: classNames([styles$4.item, (_ref7 = {}, _defineProperty(_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref7, styles$4.userAnswer, userAnswer && !
|
|
218
|
-
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 ? {
|
|
219
216
|
transform: "translateY(".concat(-rightAnswerTop, "px)")
|
|
220
217
|
} : null,
|
|
221
|
-
onTransitionEnd:
|
|
218
|
+
onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
|
|
222
219
|
}, /*#__PURE__*/React.createElement("div", {
|
|
223
220
|
className: styles$4.itemContent
|
|
224
221
|
}, /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -589,8 +586,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
589
586
|
userAnswerIndex = _useState2[0],
|
|
590
587
|
setUserAnswerIndex = _useState2[1];
|
|
591
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
|
+
|
|
592
595
|
var _useQuizCreate = useQuizCreate({
|
|
593
|
-
screenId: screenId
|
|
596
|
+
screenId: screenId,
|
|
597
|
+
visitorId: visitorId
|
|
594
598
|
}),
|
|
595
599
|
submitQuiz = _useQuizCreate.create;
|
|
596
600
|
|
|
@@ -612,15 +616,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
612
616
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
613
617
|
useEffect(function () {
|
|
614
618
|
if (userAnswerIndex !== null) {
|
|
615
|
-
var
|
|
616
|
-
|
|
617
|
-
isGood =
|
|
618
|
-
|
|
619
|
-
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;
|
|
620
624
|
|
|
621
|
-
var
|
|
622
|
-
|
|
623
|
-
body =
|
|
625
|
+
var _ref5 = label || {},
|
|
626
|
+
_ref5$body = _ref5.body,
|
|
627
|
+
body = _ref5$body === void 0 ? '' : _ref5$body;
|
|
624
628
|
|
|
625
629
|
submitQuiz({
|
|
626
630
|
choice: body || userAnswerIndex,
|
|
@@ -635,8 +639,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
635
639
|
scrolledBottom = _useState4[0],
|
|
636
640
|
setScrolledBottom = _useState4[1];
|
|
637
641
|
|
|
638
|
-
var onScrolledBottom = useCallback(function (
|
|
639
|
-
var initial =
|
|
642
|
+
var onScrolledBottom = useCallback(function (_ref6) {
|
|
643
|
+
var initial = _ref6.initial;
|
|
640
644
|
|
|
641
645
|
if (initial) {
|
|
642
646
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -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,7 +1308,7 @@ 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
1313
|
}, !isPlaceholder ? /*#__PURE__*/React.createElement(TransitionGroup, null, /*#__PURE__*/React.createElement(CSSTransition, {
|
|
1303
1314
|
key: backgroundKey,
|
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,
|
|
@@ -150,7 +150,8 @@ var Answers = function Answers(_ref) {
|
|
|
150
150
|
good = _ref3$good === void 0 ? false : _ref3$good;
|
|
151
151
|
return hasGood || good;
|
|
152
152
|
}, false) : false;
|
|
153
|
-
var
|
|
153
|
+
var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
|
|
154
|
+
var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
|
|
154
155
|
|
|
155
156
|
var _useState = React.useState(answeredIndex !== null),
|
|
156
157
|
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
@@ -172,7 +173,7 @@ var Answers = function Answers(_ref) {
|
|
|
172
173
|
if (onCollapse !== null) {
|
|
173
174
|
onCollapse();
|
|
174
175
|
}
|
|
175
|
-
}, hasAnsweredRight ||
|
|
176
|
+
}, hasAnsweredRight || finalShowUserAnswer ? 500 : answersCollapseDelay);
|
|
176
177
|
}
|
|
177
178
|
|
|
178
179
|
return function () {
|
|
@@ -180,7 +181,7 @@ var Answers = function Answers(_ref) {
|
|
|
180
181
|
clearTimeout(timeout);
|
|
181
182
|
}
|
|
182
183
|
};
|
|
183
|
-
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight,
|
|
184
|
+
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, finalShowUserAnswer]);
|
|
184
185
|
var onAnswerTransitionEnd = React.useCallback(function () {
|
|
185
186
|
if (onTransitionEnd !== null) {
|
|
186
187
|
onTransitionEnd();
|
|
@@ -195,7 +196,7 @@ var Answers = function Answers(_ref) {
|
|
|
195
196
|
}
|
|
196
197
|
}, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
|
|
197
198
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
198
|
-
className: classNames__default["default"]([styles$4.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$4.answered, answered), _defineProperty__default["default"](_ref4, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref4, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref4, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref4, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref4, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, className, className !== null), _ref4)]),
|
|
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)]),
|
|
199
200
|
ref: answerRef,
|
|
200
201
|
style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
|
|
201
202
|
height: answersCollapsed ? rightAnswerHeight : answerHeight
|
|
@@ -222,25 +223,21 @@ var Answers = function Answers(_ref) {
|
|
|
222
223
|
textStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle;
|
|
223
224
|
|
|
224
225
|
var hasAnswer = utils.isTextFilled(label);
|
|
225
|
-
var hasFinalUserAnswer =
|
|
226
|
+
var hasFinalUserAnswer = finalShowUserAnswer && answeredIndex !== null; // Hide bad answers
|
|
226
227
|
|
|
227
|
-
if (
|
|
228
|
-
return null;
|
|
229
|
-
} // Only show user answer
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
if (hasFinalUserAnswer && answersCollapsed && !userAnswer) {
|
|
228
|
+
if (answersDidCollapsed && !rightAnswer && (hasRightAnswer || !userAnswer)) {
|
|
233
229
|
return null;
|
|
234
230
|
}
|
|
235
231
|
|
|
232
|
+
var answerToShow = rightAnswer && hasRightAnswer || !hasRightAnswer && userAnswer && finalShowUserAnswer;
|
|
236
233
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
237
234
|
key: "answer-".concat(answerI),
|
|
238
|
-
ref:
|
|
239
|
-
className: classNames__default["default"]([styles$4.item, (_ref7 = {}, _defineProperty__default["default"](_ref7, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref7, styles$4.userAnswer, userAnswer && !
|
|
240
|
-
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 ? {
|
|
241
238
|
transform: "translateY(".concat(-rightAnswerTop, "px)")
|
|
242
239
|
} : null,
|
|
243
|
-
onTransitionEnd:
|
|
240
|
+
onTransitionEnd: answerToShow ? onAnswerTransitionEnd : null
|
|
244
241
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
245
242
|
className: styles$4.itemContent
|
|
246
243
|
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
@@ -611,8 +608,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
611
608
|
userAnswerIndex = _useState2[0],
|
|
612
609
|
setUserAnswerIndex = _useState2[1];
|
|
613
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
|
+
|
|
614
617
|
var _useQuizCreate = data.useQuizCreate({
|
|
615
|
-
screenId: screenId
|
|
618
|
+
screenId: screenId,
|
|
619
|
+
visitorId: visitorId
|
|
616
620
|
}),
|
|
617
621
|
submitQuiz = _useQuizCreate.create;
|
|
618
622
|
|
|
@@ -634,15 +638,15 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
634
638
|
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
635
639
|
React.useEffect(function () {
|
|
636
640
|
if (userAnswerIndex !== null) {
|
|
637
|
-
var
|
|
638
|
-
|
|
639
|
-
isGood =
|
|
640
|
-
|
|
641
|
-
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;
|
|
642
646
|
|
|
643
|
-
var
|
|
644
|
-
|
|
645
|
-
body =
|
|
647
|
+
var _ref5 = label || {},
|
|
648
|
+
_ref5$body = _ref5.body,
|
|
649
|
+
body = _ref5$body === void 0 ? '' : _ref5$body;
|
|
646
650
|
|
|
647
651
|
submitQuiz({
|
|
648
652
|
choice: body || userAnswerIndex,
|
|
@@ -657,8 +661,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
657
661
|
scrolledBottom = _useState4[0],
|
|
658
662
|
setScrolledBottom = _useState4[1];
|
|
659
663
|
|
|
660
|
-
var onScrolledBottom = React.useCallback(function (
|
|
661
|
-
var initial =
|
|
664
|
+
var onScrolledBottom = React.useCallback(function (_ref6) {
|
|
665
|
+
var initial = _ref6.initial;
|
|
662
666
|
|
|
663
667
|
if (initial) {
|
|
664
668
|
trackScreenEvent('scroll', 'Screen');
|
|
@@ -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,7 +1330,7 @@ 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
1335
|
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
1325
1336
|
key: backgroundKey,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-quiz",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.154",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "334e86f5f89e7fae922eddbd68352c7865e234d8"
|
|
77
77
|
}
|