@micromag/screen-quiz 0.3.425 → 0.3.429
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 +3 -3
- package/es/index.js +6 -11
- package/lib/index.js +180 -205
- package/package.json +23 -15
package/assets/css/styles.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.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{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .15s ease-out
|
|
2
|
-
.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.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;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease
|
|
3
|
-
.micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out
|
|
1
|
+
.micromag-screen-quiz-answers-emptyAnswer{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-quiz-answers-button.micromag-screen-quiz-answers-focus-visible{outline:3px solid #a13dff;outline-offset:4px}.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{font-size:.75em;height:40px;margin:0 auto;width:100%}.micromag-screen-quiz-answers-item{margin:0;padding:0;position:relative;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:1!important}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-otherAnswer{opacity:.7!important}.micromag-screen-quiz-answers-button{color:#fff;padding:10px;position:relative;width:100%}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withIcon .micromag-screen-quiz-answers-button{padding-left:42px;padding-right:42px}.micromag-screen-quiz-answers-resultIcon{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#ff2945;border:2px solid #1c1c1c;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;height:32px;justify-content:center;left:5px;margin-top:-16px;opacity:0;padding:5px;position:absolute;top:50%;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;width:32px}.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-resultIcon .micromag-screen-quiz-answers-faIcon{display:block}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
|
|
2
|
+
.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{border:2px dashed #343434;color:#343434;margin:5px auto}.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;margin-bottom:1em;text-align:center;width:100%}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{opacity:0;pointer-events:none;position:absolute;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;transition-delay:.3s}.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{margin:0 auto;width:100%}.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{opacity:1;pointer-events:all;position:relative}.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);font-size:8px;mix-blend-mode:difference}
|
|
3
|
+
.micromag-screen-quiz-container .micromag-screen-quiz-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-quiz-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-background{z-index:0}.micromag-screen-quiz-container .micromag-screen-quiz-content{z-index:2}.micromag-screen-quiz-container.micromag-screen-quiz-disabled{pointer-events:none}.micromag-screen-quiz-reset{border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-quiz-reset:hover{border:0;opacity:.8}.micromag-screen-quiz-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.micromag-screen-quiz-points{color:#fff;left:0;padding:10px;position:absolute;top:0;z-index:1000}.micromag-screen-quiz-layout{bottom:0;left:0;position:absolute;right:0;top:0}.micromag-screen-quiz-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-header.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-quiz-footer a{padding:0}.micromag-screen-quiz-footer.micromag-screen-quiz-disabled{opacity:0;pointer-events:none}.micromag-screen-quiz-transition{bottom:0;left:0;position:absolute;right:0;top: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{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width: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{left:0;min-height:100%;position:absolute;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;width: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{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{opacity:0;-webkit-transition:opacity 1s ease;transition:opacity 1s ease;z-index:0}
|
|
4
4
|
.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.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{margin:0 auto;width:100%}.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{border:2px dashed #343434;color:#343434;margin:5px auto}.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{margin:0 auto 10px;width:100%}.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
|
@@ -29,7 +29,7 @@ import { animated, useTransition, easings } from '@react-spring/web';
|
|
|
29
29
|
import Button from '@micromag/element-button';
|
|
30
30
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
31
31
|
|
|
32
|
-
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","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
|
|
32
|
+
var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","focus-visible":"micromag-screen-quiz-answers-focus-visible","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
|
|
33
33
|
|
|
34
34
|
var propTypes$5 = {
|
|
35
35
|
items: PropTypes.quizAnswers.isRequired,
|
|
@@ -71,7 +71,6 @@ var defaultProps$5 = {
|
|
|
71
71
|
className: null
|
|
72
72
|
};
|
|
73
73
|
var Answers = function Answers(_ref) {
|
|
74
|
-
var _ref8;
|
|
75
74
|
var items = _ref.items,
|
|
76
75
|
answeredIndex = _ref.answeredIndex,
|
|
77
76
|
answersCollapseDelay = _ref.answersCollapseDelay,
|
|
@@ -231,11 +230,10 @@ var Answers = function Answers(_ref) {
|
|
|
231
230
|
}
|
|
232
231
|
});
|
|
233
232
|
return /*#__PURE__*/React.createElement("div", {
|
|
234
|
-
className: classNames([styles$4.container, (
|
|
233
|
+
className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
|
|
235
234
|
}, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
236
235
|
className: styles$4.items
|
|
237
236
|
}, transitions(function (style, answer, t, answerI) {
|
|
238
|
-
var _ref11;
|
|
239
237
|
var userAnswer = answerI === answeredIndex;
|
|
240
238
|
var _ref9 = answer || {},
|
|
241
239
|
_ref9$good = _ref9.good,
|
|
@@ -252,7 +250,7 @@ var Answers = function Answers(_ref) {
|
|
|
252
250
|
var hasAnswer = isTextFilled(label);
|
|
253
251
|
return /*#__PURE__*/React.createElement(animated.div, {
|
|
254
252
|
key: "answer-".concat(answerI),
|
|
255
|
-
className: classNames([styles$4.item, (
|
|
253
|
+
className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, withoutGoodAnswer && userAnswer), styles$4.otherAnswer, withoutGoodAnswer && !userAnswer)]),
|
|
256
254
|
style: _objectSpread({}, style)
|
|
257
255
|
}, /*#__PURE__*/React.createElement("div", {
|
|
258
256
|
className: styles$4.itemContent,
|
|
@@ -372,7 +370,6 @@ var defaultProps$4 = {
|
|
|
372
370
|
style: null
|
|
373
371
|
};
|
|
374
372
|
var Question = function Question(_ref) {
|
|
375
|
-
var _ref4;
|
|
376
373
|
var question = _ref.question,
|
|
377
374
|
answers = _ref.answers,
|
|
378
375
|
result = _ref.result,
|
|
@@ -429,7 +426,7 @@ var Question = function Question(_ref) {
|
|
|
429
426
|
}, [setResultVisible]);
|
|
430
427
|
var hasIndex = index !== null && totalCount !== null;
|
|
431
428
|
return /*#__PURE__*/React.createElement(Layout, {
|
|
432
|
-
className: classNames([styles$3.container, (
|
|
429
|
+
className: classNames([styles$3.container, _defineProperty(_defineProperty(_defineProperty({}, styles$3.isPlaceholder, isPlaceholder), styles$3.resultVisible, resultVisible), className, className !== null)]),
|
|
433
430
|
verticalAlign: verticalAlign,
|
|
434
431
|
style: style
|
|
435
432
|
}, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -569,7 +566,6 @@ var defaultProps$3 = {
|
|
|
569
566
|
className: null
|
|
570
567
|
};
|
|
571
568
|
var QuizScreen = function QuizScreen(_ref) {
|
|
572
|
-
var _ref6;
|
|
573
569
|
var id = _ref.id,
|
|
574
570
|
layout = _ref.layout,
|
|
575
571
|
question = _ref.question,
|
|
@@ -717,7 +713,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
717
713
|
var verticalAlign = isSplitted ? null : layout;
|
|
718
714
|
var showReset = isEdit;
|
|
719
715
|
return /*#__PURE__*/React.createElement("div", {
|
|
720
|
-
className: classNames([styles$2.container, (
|
|
716
|
+
className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2.disabled, clickDisabled), className, className !== null)]),
|
|
721
717
|
"data-screen-ready": true
|
|
722
718
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
723
719
|
width: width,
|
|
@@ -1063,7 +1059,6 @@ var defaultProps = {
|
|
|
1063
1059
|
className: null
|
|
1064
1060
|
};
|
|
1065
1061
|
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
1066
|
-
var _ref13;
|
|
1067
1062
|
var id = _ref.id,
|
|
1068
1063
|
layout = _ref.layout,
|
|
1069
1064
|
introLayout = _ref.introLayout,
|
|
@@ -1341,7 +1336,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1341
1336
|
var showPoints = isEdit;
|
|
1342
1337
|
var showReset = isEdit;
|
|
1343
1338
|
return /*#__PURE__*/React.createElement("div", {
|
|
1344
|
-
className: classNames([styles$2.container, (
|
|
1339
|
+
className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2[direction], direction !== null), className, className !== null)]),
|
|
1345
1340
|
"data-screen-ready": true
|
|
1346
1341
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
1347
1342
|
width: width,
|
package/lib/index.js
CHANGED
|
@@ -33,47 +33,27 @@ var web = require('@react-spring/web');
|
|
|
33
33
|
var Button = require('@micromag/element-button');
|
|
34
34
|
var reactTransitionGroup = require('react-transition-group');
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
39
|
-
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
40
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
41
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
42
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
43
|
-
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
44
|
-
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
45
|
-
var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
|
|
46
|
-
var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
|
|
47
|
-
var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
|
|
48
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
49
|
-
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
50
|
-
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
51
|
-
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
52
|
-
var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
|
|
53
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
54
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
55
|
-
|
|
56
|
-
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","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
|
|
36
|
+
var styles$4 = {"emptyAnswer":"micromag-screen-quiz-answers-emptyAnswer","button":"micromag-screen-quiz-answers-button","focus-visible":"micromag-screen-quiz-answers-focus-visible","container":"micromag-screen-quiz-answers-container","items":"micromag-screen-quiz-answers-items","item":"micromag-screen-quiz-answers-item","isPlaceholder":"micromag-screen-quiz-answers-isPlaceholder","userAnswer":"micromag-screen-quiz-answers-userAnswer","otherAnswer":"micromag-screen-quiz-answers-otherAnswer","withIcon":"micromag-screen-quiz-answers-withIcon","resultIcon":"micromag-screen-quiz-answers-resultIcon","answered":"micromag-screen-quiz-answers-answered","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","faIcon":"micromag-screen-quiz-answers-faIcon","itemContent":"micromag-screen-quiz-answers-itemContent"};
|
|
57
37
|
|
|
58
38
|
var propTypes$5 = {
|
|
59
39
|
items: core.PropTypes.quizAnswers.isRequired,
|
|
60
|
-
answeredIndex:
|
|
61
|
-
answersCollapseDelay:
|
|
40
|
+
answeredIndex: PropTypes.number,
|
|
41
|
+
answersCollapseDelay: PropTypes.number,
|
|
62
42
|
buttonsStyle: core.PropTypes.boxStyle,
|
|
63
43
|
buttonsTextStyle: core.PropTypes.textStyle,
|
|
64
44
|
goodAnswerColor: core.PropTypes.color,
|
|
65
45
|
badAnswerColor: core.PropTypes.color,
|
|
66
|
-
showUserAnswer:
|
|
67
|
-
withoutGoodAnswer:
|
|
68
|
-
withoutIcon:
|
|
69
|
-
focusable:
|
|
70
|
-
animated:
|
|
71
|
-
collapsed:
|
|
72
|
-
onClick:
|
|
73
|
-
onCollapse:
|
|
74
|
-
onCollapsed:
|
|
75
|
-
onTransitionEnd:
|
|
76
|
-
className:
|
|
46
|
+
showUserAnswer: PropTypes.bool,
|
|
47
|
+
withoutGoodAnswer: PropTypes.bool,
|
|
48
|
+
withoutIcon: PropTypes.bool,
|
|
49
|
+
focusable: PropTypes.bool,
|
|
50
|
+
animated: PropTypes.bool,
|
|
51
|
+
collapsed: PropTypes.bool,
|
|
52
|
+
onClick: PropTypes.func,
|
|
53
|
+
onCollapse: PropTypes.func,
|
|
54
|
+
onCollapsed: PropTypes.func,
|
|
55
|
+
onTransitionEnd: PropTypes.func,
|
|
56
|
+
className: PropTypes.string
|
|
77
57
|
};
|
|
78
58
|
var defaultProps$5 = {
|
|
79
59
|
answeredIndex: null,
|
|
@@ -95,7 +75,6 @@ var defaultProps$5 = {
|
|
|
95
75
|
className: null
|
|
96
76
|
};
|
|
97
77
|
var Answers = function Answers(_ref) {
|
|
98
|
-
var _ref8;
|
|
99
78
|
var items = _ref.items,
|
|
100
79
|
answeredIndex = _ref.answeredIndex,
|
|
101
80
|
answersCollapseDelay = _ref.answersCollapseDelay,
|
|
@@ -124,7 +103,7 @@ var Answers = function Answers(_ref) {
|
|
|
124
103
|
_ref2$good = _ref2.good,
|
|
125
104
|
hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
|
|
126
105
|
var _useState = React.useState(true),
|
|
127
|
-
_useState2 =
|
|
106
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
128
107
|
visible = _useState2[0];
|
|
129
108
|
var hasRightAnswer = items !== null && !isPlaceholder ? items.reduce(function (hasGood, answer) {
|
|
130
109
|
var _ref3 = answer || {},
|
|
@@ -135,15 +114,15 @@ var Answers = function Answers(_ref) {
|
|
|
135
114
|
var finalShowUserAnswer = showUserAnswer || !hasRightAnswer;
|
|
136
115
|
var shouldCollapse = !withoutGoodAnswer || finalShowUserAnswer && answeredIndex !== null;
|
|
137
116
|
var _useState3 = React.useState(answeredIndex !== null),
|
|
138
|
-
_useState4 =
|
|
117
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
139
118
|
answersCollapsed = _useState4[0],
|
|
140
119
|
setAnswersCollapsed = _useState4[1];
|
|
141
120
|
var _useState5 = React.useState(initialCollapsed || answeredIndex !== null),
|
|
142
|
-
_useState6 =
|
|
121
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
143
122
|
answersDidCollapse = _useState6[0],
|
|
144
123
|
setAnswersDidCollapse = _useState6[1];
|
|
145
124
|
var _useState7 = React.useState(initialCollapsed || answeredIndex !== null),
|
|
146
|
-
_useState8 =
|
|
125
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
147
126
|
answersFinalCollapse = _useState8[0],
|
|
148
127
|
setAnswersFinalCollapse = _useState8[1];
|
|
149
128
|
React.useEffect(function () {
|
|
@@ -189,7 +168,7 @@ var Answers = function Answers(_ref) {
|
|
|
189
168
|
}
|
|
190
169
|
}, [shouldCollapse, answersCollapsed, answersDidCollapse, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
|
|
191
170
|
var itemsRefs = React.useRef([]);
|
|
192
|
-
var listOfItems = isPlaceholder || isEdit && items.length === 0 ?
|
|
171
|
+
var listOfItems = isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray(new Array(2)) : items;
|
|
193
172
|
var heights = React.useMemo(function () {
|
|
194
173
|
if (web.animated) {
|
|
195
174
|
var allHeights = listOfItems.reduce(function (acc, it, i) {
|
|
@@ -219,7 +198,7 @@ var Answers = function Answers(_ref) {
|
|
|
219
198
|
if (answeredIndex !== null && showAnimation && answersCollapsed && !rightAnswer) {
|
|
220
199
|
hidden = true;
|
|
221
200
|
}
|
|
222
|
-
return
|
|
201
|
+
return _objectSpread(_objectSpread({}, answer), {}, {
|
|
223
202
|
hidden: hidden,
|
|
224
203
|
userAnswer: userAnswer,
|
|
225
204
|
index: answerI,
|
|
@@ -254,12 +233,11 @@ var Answers = function Answers(_ref) {
|
|
|
254
233
|
easing: web.easings.easeOutSine
|
|
255
234
|
}
|
|
256
235
|
});
|
|
257
|
-
return /*#__PURE__*/
|
|
258
|
-
className:
|
|
259
|
-
}, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/
|
|
236
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
237
|
+
className: classNames([styles$4.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$4.answered, answered), styles$4.withIcon, !withoutIcon), styles$4.isPlaceholder, isPlaceholder), className, className !== null)])
|
|
238
|
+
}, filteredListOfItems !== null || isPlaceholder ? /*#__PURE__*/React.createElement("div", {
|
|
260
239
|
className: styles$4.items
|
|
261
240
|
}, transitions(function (style, answer, t, answerI) {
|
|
262
|
-
var _ref11;
|
|
263
241
|
var userAnswer = answerI === answeredIndex;
|
|
264
242
|
var _ref9 = answer || {},
|
|
265
243
|
_ref9$good = _ref9.good,
|
|
@@ -274,21 +252,21 @@ var Answers = function Answers(_ref) {
|
|
|
274
252
|
_ref10$textStyle = _ref10.textStyle,
|
|
275
253
|
textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
|
|
276
254
|
var hasAnswer = utils.isTextFilled(label);
|
|
277
|
-
return /*#__PURE__*/
|
|
255
|
+
return /*#__PURE__*/React.createElement(web.animated.div, {
|
|
278
256
|
key: "answer-".concat(answerI),
|
|
279
|
-
className:
|
|
280
|
-
style:
|
|
281
|
-
}, /*#__PURE__*/
|
|
257
|
+
className: classNames([styles$4.item, _defineProperty(_defineProperty(_defineProperty({}, styles$4.rightAnswer, !withoutGoodAnswer && rightAnswer === true), styles$4.userAnswer, withoutGoodAnswer && userAnswer), styles$4.otherAnswer, withoutGoodAnswer && !userAnswer)]),
|
|
258
|
+
style: _objectSpread({}, style)
|
|
259
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
282
260
|
className: styles$4.itemContent,
|
|
283
261
|
ref: function ref(el) {
|
|
284
262
|
itemsRefs.current[answerI] = el;
|
|
285
263
|
}
|
|
286
|
-
}, /*#__PURE__*/
|
|
264
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
287
265
|
placeholder: "quizAnswer",
|
|
288
266
|
placeholderProps: {
|
|
289
267
|
good: answerI === 0
|
|
290
268
|
},
|
|
291
|
-
emptyLabel: /*#__PURE__*/
|
|
269
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
292
270
|
id: "+Ok+7S",
|
|
293
271
|
defaultMessage: [{
|
|
294
272
|
"type": 0,
|
|
@@ -297,7 +275,7 @@ var Answers = function Answers(_ref) {
|
|
|
297
275
|
}),
|
|
298
276
|
emptyClassName: styles$4.emptyAnswer,
|
|
299
277
|
isEmpty: !hasAnswer
|
|
300
|
-
}, hasAnswer ? /*#__PURE__*/
|
|
278
|
+
}, hasAnswer ? /*#__PURE__*/React.createElement(Button, {
|
|
301
279
|
className: styles$4.button,
|
|
302
280
|
onPointerUp: function onPointerUp(e) {
|
|
303
281
|
if (e.pointerType !== 'mouse' || e.button === 0) {
|
|
@@ -307,23 +285,23 @@ var Answers = function Answers(_ref) {
|
|
|
307
285
|
},
|
|
308
286
|
disabled: !visible || isPreview || answered,
|
|
309
287
|
focusable: focusable,
|
|
310
|
-
buttonStyle:
|
|
311
|
-
textStyle:
|
|
312
|
-
}, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/
|
|
288
|
+
buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle),
|
|
289
|
+
textStyle: _objectSpread(_objectSpread({}, buttonsTextStyle), answerButtonTextStyle)
|
|
290
|
+
}, answered && !withoutIcon && rightAnswer === true ? /*#__PURE__*/React.createElement("span", {
|
|
313
291
|
className: styles$4.resultIcon,
|
|
314
292
|
style: utils.getStyleFromColor(goodAnswerColor, 'backgroundColor')
|
|
315
|
-
}, /*#__PURE__*/
|
|
293
|
+
}, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
|
|
316
294
|
className: styles$4.faIcon,
|
|
317
295
|
icon: faCheck.faCheck
|
|
318
|
-
})) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/
|
|
296
|
+
})) : null, !withoutIcon && answered && rightAnswer === false ? /*#__PURE__*/React.createElement("span", {
|
|
319
297
|
className: styles$4.resultIcon,
|
|
320
298
|
style: utils.getStyleFromColor(badAnswerColor, 'backgroundColor')
|
|
321
|
-
}, /*#__PURE__*/
|
|
299
|
+
}, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
|
|
322
300
|
className: styles$4.faIcon,
|
|
323
301
|
icon: faTimes.faTimes
|
|
324
|
-
})) : null, /*#__PURE__*/
|
|
302
|
+
})) : null, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
|
|
325
303
|
className: styles$4.optionLabel,
|
|
326
|
-
textStyle:
|
|
304
|
+
textStyle: _objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), answerButtonTextStyle)
|
|
327
305
|
}))) : null)));
|
|
328
306
|
})) : null);
|
|
329
307
|
};
|
|
@@ -335,35 +313,35 @@ var styles$3 = {"container":"micromag-screen-quiz-question-container","emptyQues
|
|
|
335
313
|
var propTypes$4 = {
|
|
336
314
|
question: core.PropTypes.textElement,
|
|
337
315
|
answers: core.PropTypes.quizAnswers,
|
|
338
|
-
result:
|
|
316
|
+
result: PropTypes.shape({
|
|
339
317
|
image: core.PropTypes.imageElement,
|
|
340
318
|
text: core.PropTypes.textElement
|
|
341
319
|
}),
|
|
342
320
|
resultImage: core.PropTypes.visualElement,
|
|
343
|
-
index:
|
|
344
|
-
totalCount:
|
|
345
|
-
answeredIndex:
|
|
321
|
+
index: PropTypes.number,
|
|
322
|
+
totalCount: PropTypes.number,
|
|
323
|
+
answeredIndex: PropTypes.number,
|
|
346
324
|
buttonsStyle: core.PropTypes.boxStyle,
|
|
347
325
|
buttonsTextStyle: core.PropTypes.textStyle,
|
|
348
326
|
questionsHeadingStyle: core.PropTypes.textStyle,
|
|
349
327
|
goodAnswerColor: core.PropTypes.color,
|
|
350
328
|
badAnswerColor: core.PropTypes.color,
|
|
351
|
-
focusable:
|
|
352
|
-
animated:
|
|
353
|
-
layout:
|
|
354
|
-
showInstantAnswer:
|
|
355
|
-
withResult:
|
|
356
|
-
withoutGoodAnswer:
|
|
357
|
-
withoutTrueFalse:
|
|
358
|
-
withoutIndex:
|
|
329
|
+
focusable: PropTypes.bool,
|
|
330
|
+
animated: PropTypes.bool,
|
|
331
|
+
layout: PropTypes.string,
|
|
332
|
+
showInstantAnswer: PropTypes.bool,
|
|
333
|
+
withResult: PropTypes.bool,
|
|
334
|
+
withoutGoodAnswer: PropTypes.bool,
|
|
335
|
+
withoutTrueFalse: PropTypes.bool,
|
|
336
|
+
withoutIndex: PropTypes.bool,
|
|
359
337
|
transitions: core.PropTypes.transitions,
|
|
360
|
-
transitionPlaying:
|
|
361
|
-
transitionStagger:
|
|
362
|
-
transitionDisabled:
|
|
363
|
-
onAnswerClick:
|
|
364
|
-
onAnswerTransitionEnd:
|
|
365
|
-
className:
|
|
366
|
-
style:
|
|
338
|
+
transitionPlaying: PropTypes.bool,
|
|
339
|
+
transitionStagger: PropTypes.number,
|
|
340
|
+
transitionDisabled: PropTypes.bool,
|
|
341
|
+
onAnswerClick: PropTypes.func,
|
|
342
|
+
onAnswerTransitionEnd: PropTypes.func,
|
|
343
|
+
className: PropTypes.string,
|
|
344
|
+
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
|
|
367
345
|
};
|
|
368
346
|
var defaultProps$4 = {
|
|
369
347
|
question: null,
|
|
@@ -396,7 +374,6 @@ var defaultProps$4 = {
|
|
|
396
374
|
style: null
|
|
397
375
|
};
|
|
398
376
|
var Question = function Question(_ref) {
|
|
399
|
-
var _ref4;
|
|
400
377
|
var question = _ref.question,
|
|
401
378
|
answers = _ref.answers,
|
|
402
379
|
result = _ref.result,
|
|
@@ -434,7 +411,7 @@ var Question = function Question(_ref) {
|
|
|
434
411
|
_ref2$textStyle = _ref2.textStyle,
|
|
435
412
|
questionTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
|
|
436
413
|
var _useState = React.useState(showInstantAnswer),
|
|
437
|
-
_useState2 =
|
|
414
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
438
415
|
resultVisible = _useState2[0],
|
|
439
416
|
setResultVisible = _useState2[1];
|
|
440
417
|
var answered = answeredIndex !== null;
|
|
@@ -452,25 +429,25 @@ var Question = function Question(_ref) {
|
|
|
452
429
|
setResultVisible(true);
|
|
453
430
|
}, [setResultVisible]);
|
|
454
431
|
var hasIndex = index !== null && totalCount !== null;
|
|
455
|
-
return /*#__PURE__*/
|
|
456
|
-
className:
|
|
432
|
+
return /*#__PURE__*/React.createElement(Layout, {
|
|
433
|
+
className: classNames([styles$3.container, _defineProperty(_defineProperty(_defineProperty({}, styles$3.isPlaceholder, isPlaceholder), styles$3.resultVisible, resultVisible), className, className !== null)]),
|
|
457
434
|
verticalAlign: verticalAlign,
|
|
458
435
|
style: style
|
|
459
|
-
}, [!withoutIndex && hasIndex ? /*#__PURE__*/
|
|
436
|
+
}, [!withoutIndex && hasIndex ? /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
460
437
|
key: "stats",
|
|
461
|
-
placeholder: /*#__PURE__*/
|
|
438
|
+
placeholder: /*#__PURE__*/React.createElement("div", {
|
|
462
439
|
className: styles$3.index
|
|
463
440
|
}, "1 / 10")
|
|
464
|
-
}, totalCount > 1 ? /*#__PURE__*/
|
|
441
|
+
}, totalCount > 1 ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
465
442
|
transitions: transitions,
|
|
466
443
|
playing: transitionPlaying,
|
|
467
444
|
disabled: transitionDisabled
|
|
468
|
-
}, /*#__PURE__*/
|
|
445
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
469
446
|
className: styles$3.index
|
|
470
|
-
}, index + 1, " / ", totalCount)) : null) : null, /*#__PURE__*/
|
|
447
|
+
}, index + 1, " / ", totalCount)) : null) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
471
448
|
key: "question",
|
|
472
449
|
placeholder: "title",
|
|
473
|
-
emptyLabel: /*#__PURE__*/
|
|
450
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
474
451
|
id: "FOmgqv",
|
|
475
452
|
defaultMessage: [{
|
|
476
453
|
"type": 0,
|
|
@@ -479,16 +456,16 @@ var Question = function Question(_ref) {
|
|
|
479
456
|
}),
|
|
480
457
|
emptyClassName: styles$3.emptyQuestion,
|
|
481
458
|
isEmpty: !hasQuestion
|
|
482
|
-
}, hasQuestion ? /*#__PURE__*/
|
|
459
|
+
}, hasQuestion ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
483
460
|
transitions: transitions,
|
|
484
461
|
playing: transitionPlaying,
|
|
485
462
|
disabled: transitionDisabled
|
|
486
|
-
}, /*#__PURE__*/
|
|
463
|
+
}, /*#__PURE__*/React.createElement(Heading, Object.assign({}, question, {
|
|
487
464
|
className: styles$3.question,
|
|
488
|
-
textStyle:
|
|
489
|
-
}))) : null), isSplitted ? /*#__PURE__*/
|
|
465
|
+
textStyle: _objectSpread(_objectSpread({}, questionsHeadingStyle), questionTextStyle)
|
|
466
|
+
}))) : null), isSplitted ? /*#__PURE__*/React.createElement(Layout.Spacer, {
|
|
490
467
|
key: "spacer"
|
|
491
|
-
}) : null, /*#__PURE__*/
|
|
468
|
+
}) : null, /*#__PURE__*/React.createElement(Answers, {
|
|
492
469
|
key: "answers",
|
|
493
470
|
items: answers || [],
|
|
494
471
|
answeredIndex: answeredIndex,
|
|
@@ -508,13 +485,13 @@ var Question = function Question(_ref) {
|
|
|
508
485
|
onClick: onAnswerClick,
|
|
509
486
|
onCollapse: onAnswersCollapse,
|
|
510
487
|
onTransitionEnd: onAnswerTransitionEnd
|
|
511
|
-
}), withResult ? /*#__PURE__*/
|
|
488
|
+
}), withResult ? /*#__PURE__*/React.createElement("div", {
|
|
512
489
|
className: styles$3.result,
|
|
513
490
|
key: "results"
|
|
514
|
-
}, /*#__PURE__*/
|
|
491
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
515
492
|
className: styles$3.resultContent
|
|
516
|
-
}, /*#__PURE__*/
|
|
517
|
-
emptyLabel: answered ? /*#__PURE__*/
|
|
493
|
+
}, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
494
|
+
emptyLabel: answered ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
518
495
|
id: "li7ADr",
|
|
519
496
|
defaultMessage: [{
|
|
520
497
|
"type": 0,
|
|
@@ -523,14 +500,14 @@ var Question = function Question(_ref) {
|
|
|
523
500
|
}) : null,
|
|
524
501
|
isEmpty: answered && !hasResult,
|
|
525
502
|
emptyClassName: styles$3.emptyResult
|
|
526
|
-
}, (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/
|
|
503
|
+
}, (hasResult || hasResultVisual) && answers !== null ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
527
504
|
transitions: transitions,
|
|
528
505
|
playing: transitionPlaying,
|
|
529
506
|
delay: (1 + answers.length) * transitionStagger,
|
|
530
507
|
disabled: transitionDisabled
|
|
531
|
-
}, hasResult ? /*#__PURE__*/
|
|
508
|
+
}, hasResult ? /*#__PURE__*/React.createElement(Text, Object.assign({}, customResult || defaultResult, {
|
|
532
509
|
className: styles$3.resultText
|
|
533
|
-
})) : null, hasResultVisual ? /*#__PURE__*/
|
|
510
|
+
})) : null, hasResultVisual ? /*#__PURE__*/React.createElement(Visual, {
|
|
534
511
|
media: answerImage || resultImage,
|
|
535
512
|
width: "100%",
|
|
536
513
|
height: "auto"
|
|
@@ -542,11 +519,11 @@ Question.defaultProps = defaultProps$4;
|
|
|
542
519
|
var styles$2 = {"container":"micromag-screen-quiz-container","background":"micromag-screen-quiz-background","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","reset":"micromag-screen-quiz-reset","points":"micromag-screen-quiz-points","layout":"micromag-screen-quiz-layout","header":"micromag-screen-quiz-header","footer":"micromag-screen-quiz-footer","transition":"micromag-screen-quiz-transition","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","intro":"micromag-screen-quiz-intro","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"};
|
|
543
520
|
|
|
544
521
|
var propTypes$3 = {
|
|
545
|
-
id:
|
|
546
|
-
layout:
|
|
522
|
+
id: PropTypes.string,
|
|
523
|
+
layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
|
|
547
524
|
question: core.PropTypes.textElement,
|
|
548
525
|
answers: core.PropTypes.quizAnswers,
|
|
549
|
-
result:
|
|
526
|
+
result: PropTypes.shape({
|
|
550
527
|
image: core.PropTypes.imageElement,
|
|
551
528
|
text: core.PropTypes.textElement
|
|
552
529
|
}),
|
|
@@ -555,18 +532,18 @@ var propTypes$3 = {
|
|
|
555
532
|
buttonsTextStyle: core.PropTypes.textStyle,
|
|
556
533
|
goodAnswerColor: core.PropTypes.color,
|
|
557
534
|
badAnswerColor: core.PropTypes.color,
|
|
558
|
-
withoutTrueFalse:
|
|
559
|
-
spacing:
|
|
535
|
+
withoutTrueFalse: PropTypes.bool,
|
|
536
|
+
spacing: PropTypes.number,
|
|
560
537
|
background: core.PropTypes.backgroundElement,
|
|
561
538
|
header: core.PropTypes.header,
|
|
562
539
|
footer: core.PropTypes.footer,
|
|
563
|
-
current:
|
|
564
|
-
active:
|
|
565
|
-
ready:
|
|
540
|
+
current: PropTypes.bool,
|
|
541
|
+
active: PropTypes.bool,
|
|
542
|
+
ready: PropTypes.bool,
|
|
566
543
|
transitions: core.PropTypes.transitions,
|
|
567
|
-
transitionStagger:
|
|
568
|
-
type:
|
|
569
|
-
className:
|
|
544
|
+
transitionStagger: PropTypes.number,
|
|
545
|
+
type: PropTypes.string,
|
|
546
|
+
className: PropTypes.string
|
|
570
547
|
};
|
|
571
548
|
var defaultProps$3 = {
|
|
572
549
|
id: null,
|
|
@@ -593,7 +570,6 @@ var defaultProps$3 = {
|
|
|
593
570
|
className: null
|
|
594
571
|
};
|
|
595
572
|
var QuizScreen = function QuizScreen(_ref) {
|
|
596
|
-
var _ref6;
|
|
597
573
|
var id = _ref.id,
|
|
598
574
|
layout = _ref.layout,
|
|
599
575
|
question = _ref.question,
|
|
@@ -665,7 +641,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
665
641
|
}) : null;
|
|
666
642
|
var withoutGoodAnswer = goodAnswerIndex === null || goodAnswerIndex === -1;
|
|
667
643
|
var _useState = React.useState(showInstantAnswer ? goodAnswerIndex : null),
|
|
668
|
-
_useState2 =
|
|
644
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
669
645
|
userAnswerIndex = _useState2[0],
|
|
670
646
|
setUserAnswerIndex = _useState2[1];
|
|
671
647
|
var _useQuizCreate = data.useQuizCreate({
|
|
@@ -708,7 +684,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
708
684
|
}, [isView, userAnswerIndex, answers, submitQuiz]);
|
|
709
685
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
710
686
|
var _useState3 = React.useState(false),
|
|
711
|
-
_useState4 =
|
|
687
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
712
688
|
scrolledBottom = _useState4[0],
|
|
713
689
|
setScrolledBottom = _useState4[1];
|
|
714
690
|
var onScrolledBottom = React.useCallback(function (_ref4) {
|
|
@@ -722,7 +698,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
722
698
|
setScrolledBottom(false);
|
|
723
699
|
}, [setScrolledBottom]);
|
|
724
700
|
var _useState5 = React.useState(false),
|
|
725
|
-
_useState6 =
|
|
701
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
726
702
|
hasScroll = _useState6[0],
|
|
727
703
|
setHasScroll = _useState6[1];
|
|
728
704
|
var onScrollHeightChange = React.useCallback(function (_ref5) {
|
|
@@ -740,21 +716,21 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
740
716
|
var isSplitted = layout === 'split';
|
|
741
717
|
var verticalAlign = isSplitted ? null : layout;
|
|
742
718
|
var showReset = isEdit;
|
|
743
|
-
return /*#__PURE__*/
|
|
744
|
-
className:
|
|
719
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
720
|
+
className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2.disabled, clickDisabled), className, className !== null)]),
|
|
745
721
|
"data-screen-ready": true
|
|
746
|
-
}, /*#__PURE__*/
|
|
722
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
747
723
|
width: width,
|
|
748
724
|
height: height,
|
|
749
725
|
className: styles$2.content
|
|
750
|
-
}, showReset ? /*#__PURE__*/
|
|
726
|
+
}, showReset ? /*#__PURE__*/React.createElement(components.Button, {
|
|
751
727
|
className: styles$2.reset,
|
|
752
|
-
icon: /*#__PURE__*/
|
|
728
|
+
icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
|
|
753
729
|
icon: faRedo.faRedo,
|
|
754
730
|
size: "md"
|
|
755
731
|
}),
|
|
756
732
|
onClick: onQuizReset
|
|
757
|
-
}) : null, /*#__PURE__*/
|
|
733
|
+
}) : null, /*#__PURE__*/React.createElement(Scroll, {
|
|
758
734
|
verticalAlign: verticalAlign
|
|
759
735
|
// disabled={scrollingDisabled || userAnswerIndex !== null}
|
|
760
736
|
,
|
|
@@ -762,8 +738,8 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
762
738
|
onScrolledBottom: onScrolledBottom,
|
|
763
739
|
onScrolledNotBottom: onScrolledNotBottom,
|
|
764
740
|
onScrollHeightChange: onScrollHeightChange
|
|
765
|
-
}, !isPlaceholder && hasHeader ? /*#__PURE__*/
|
|
766
|
-
className:
|
|
741
|
+
}, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
742
|
+
className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, userAnswerIndex !== null || scrolledBottom && !scrollingDisabled && hasScroll)]),
|
|
767
743
|
ref: headerRef,
|
|
768
744
|
style: {
|
|
769
745
|
paddingTop: spacing / 2,
|
|
@@ -772,7 +748,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
772
748
|
paddingBottom: spacing,
|
|
773
749
|
transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
|
|
774
750
|
}
|
|
775
|
-
}, /*#__PURE__*/
|
|
751
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Question, {
|
|
776
752
|
question: question,
|
|
777
753
|
answers: answers,
|
|
778
754
|
result: result,
|
|
@@ -800,9 +776,9 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
800
776
|
paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
801
777
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
|
|
802
778
|
} : null
|
|
803
|
-
})), !isPlaceholder && hasFooter ? /*#__PURE__*/
|
|
779
|
+
})), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
804
780
|
ref: footerRef,
|
|
805
|
-
className:
|
|
781
|
+
className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom && hasScroll)]),
|
|
806
782
|
style: {
|
|
807
783
|
transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
|
|
808
784
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -810,7 +786,7 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
810
786
|
paddingTop: spacing / 2,
|
|
811
787
|
paddingBottom: spacing / 2
|
|
812
788
|
}
|
|
813
|
-
}, /*#__PURE__*/
|
|
789
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
814
790
|
background: background,
|
|
815
791
|
width: width,
|
|
816
792
|
height: height,
|
|
@@ -833,13 +809,13 @@ var propTypes$2 = {
|
|
|
833
809
|
description: core.PropTypes.textElement,
|
|
834
810
|
resultsHeadingStyle: core.PropTypes.textStyle,
|
|
835
811
|
resultsTextStyle: core.PropTypes.textStyle,
|
|
836
|
-
layout:
|
|
812
|
+
layout: PropTypes.string,
|
|
837
813
|
transitions: core.PropTypes.transitions,
|
|
838
|
-
transitionPlaying:
|
|
839
|
-
transitionStagger:
|
|
840
|
-
transitionDisabled:
|
|
841
|
-
className:
|
|
842
|
-
style:
|
|
814
|
+
transitionPlaying: PropTypes.bool,
|
|
815
|
+
transitionStagger: PropTypes.number,
|
|
816
|
+
transitionDisabled: PropTypes.bool,
|
|
817
|
+
className: PropTypes.string,
|
|
818
|
+
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
|
|
843
819
|
};
|
|
844
820
|
var defaultProps$2 = {
|
|
845
821
|
title: null,
|
|
@@ -876,15 +852,15 @@ var Results = function Results(_ref) {
|
|
|
876
852
|
var _ref3 = description || {},
|
|
877
853
|
_ref3$textStyle = _ref3.textStyle,
|
|
878
854
|
descriptionTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
|
|
879
|
-
return /*#__PURE__*/
|
|
880
|
-
className:
|
|
855
|
+
return /*#__PURE__*/React.createElement(Layout, {
|
|
856
|
+
className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
|
|
881
857
|
fullscreen: true,
|
|
882
858
|
verticalAlign: verticalAlign,
|
|
883
859
|
style: style
|
|
884
|
-
}, [/*#__PURE__*/
|
|
860
|
+
}, [/*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
885
861
|
key: "title",
|
|
886
862
|
placeholder: "title",
|
|
887
|
-
emptyLabel: /*#__PURE__*/
|
|
863
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
888
864
|
id: "BSTWf8",
|
|
889
865
|
defaultMessage: [{
|
|
890
866
|
"type": 0,
|
|
@@ -893,19 +869,19 @@ var Results = function Results(_ref) {
|
|
|
893
869
|
}),
|
|
894
870
|
emptyClassName: styles$1.emptyTitle,
|
|
895
871
|
isEmpty: !hasTitle
|
|
896
|
-
}, hasTitle ? /*#__PURE__*/
|
|
872
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
897
873
|
transitions: transitions,
|
|
898
874
|
playing: transitionPlaying,
|
|
899
875
|
disabled: transitionDisabled
|
|
900
|
-
}, /*#__PURE__*/
|
|
876
|
+
}, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
|
|
901
877
|
className: styles$1.title,
|
|
902
|
-
textStyle:
|
|
903
|
-
}))) : null), isSplitted ? /*#__PURE__*/
|
|
878
|
+
textStyle: _objectSpread(_objectSpread({}, resultsHeadingStyle), titleTextStyle)
|
|
879
|
+
}))) : null), isSplitted ? /*#__PURE__*/React.createElement(Layout.Spacer, {
|
|
904
880
|
key: "spacer"
|
|
905
|
-
}) : null, /*#__PURE__*/
|
|
881
|
+
}) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
906
882
|
key: "description",
|
|
907
883
|
placeholder: "text",
|
|
908
|
-
emptyLabel: /*#__PURE__*/
|
|
884
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
909
885
|
id: "hoDz0O",
|
|
910
886
|
defaultMessage: [{
|
|
911
887
|
"type": 0,
|
|
@@ -914,14 +890,14 @@ var Results = function Results(_ref) {
|
|
|
914
890
|
}),
|
|
915
891
|
emptyClassName: styles$1.emptyDescription,
|
|
916
892
|
isEmpty: !hasDescription
|
|
917
|
-
}, hasTitle ? /*#__PURE__*/
|
|
893
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(components.Transitions, {
|
|
918
894
|
transitions: transitions,
|
|
919
895
|
playing: transitionPlaying,
|
|
920
896
|
disabled: transitionDisabled,
|
|
921
897
|
delay: transitionStagger
|
|
922
|
-
}, /*#__PURE__*/
|
|
898
|
+
}, /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
|
|
923
899
|
className: styles$1.description,
|
|
924
|
-
textStyle:
|
|
900
|
+
textStyle: _objectSpread(_objectSpread({}, resultsTextStyle), descriptionTextStyle)
|
|
925
901
|
}))) : null)]);
|
|
926
902
|
};
|
|
927
903
|
Results.propTypes = propTypes$2;
|
|
@@ -933,12 +909,12 @@ var propTypes$1 = {
|
|
|
933
909
|
title: core.PropTypes.textElement,
|
|
934
910
|
description: core.PropTypes.textElement,
|
|
935
911
|
button: core.PropTypes.textElement,
|
|
936
|
-
layout:
|
|
937
|
-
focusable:
|
|
938
|
-
buttonDisabled:
|
|
939
|
-
className:
|
|
940
|
-
style:
|
|
941
|
-
onClickButton:
|
|
912
|
+
layout: PropTypes.string,
|
|
913
|
+
focusable: PropTypes.bool,
|
|
914
|
+
buttonDisabled: PropTypes.bool,
|
|
915
|
+
className: PropTypes.string,
|
|
916
|
+
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
|
917
|
+
onClickButton: PropTypes.func
|
|
942
918
|
};
|
|
943
919
|
var defaultProps$1 = {
|
|
944
920
|
title: null,
|
|
@@ -967,15 +943,15 @@ var Title = function Title(_ref) {
|
|
|
967
943
|
var hasTitle = utils.isTextFilled(title);
|
|
968
944
|
var hasDescription = utils.isTextFilled(description);
|
|
969
945
|
var hasButton = utils.isTextFilled(button);
|
|
970
|
-
return /*#__PURE__*/
|
|
971
|
-
className:
|
|
946
|
+
return /*#__PURE__*/React.createElement(Layout, {
|
|
947
|
+
className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
|
|
972
948
|
fullscreen: true,
|
|
973
949
|
verticalAlign: verticalAlign,
|
|
974
950
|
style: style
|
|
975
|
-
}, [/*#__PURE__*/
|
|
951
|
+
}, [/*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
976
952
|
key: "title",
|
|
977
953
|
placeholder: "title",
|
|
978
|
-
emptyLabel: /*#__PURE__*/
|
|
954
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
979
955
|
id: "BSTWf8",
|
|
980
956
|
defaultMessage: [{
|
|
981
957
|
"type": 0,
|
|
@@ -984,12 +960,12 @@ var Title = function Title(_ref) {
|
|
|
984
960
|
}),
|
|
985
961
|
emptyClassName: styles.emptyTitle,
|
|
986
962
|
isEmpty: !hasTitle
|
|
987
|
-
}, hasTitle ? /*#__PURE__*/
|
|
963
|
+
}, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
|
|
988
964
|
className: styles.title
|
|
989
|
-
})) : null), /*#__PURE__*/
|
|
965
|
+
})) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
990
966
|
key: "description",
|
|
991
967
|
placeholder: "text",
|
|
992
|
-
emptyLabel: /*#__PURE__*/
|
|
968
|
+
emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
993
969
|
id: "hoDz0O",
|
|
994
970
|
defaultMessage: [{
|
|
995
971
|
"type": 0,
|
|
@@ -998,22 +974,22 @@ var Title = function Title(_ref) {
|
|
|
998
974
|
}),
|
|
999
975
|
emptyClassName: styles.emptyDescription,
|
|
1000
976
|
isEmpty: !hasDescription
|
|
1001
|
-
}, hasDescription ? /*#__PURE__*/
|
|
977
|
+
}, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
|
|
1002
978
|
className: styles.description
|
|
1003
|
-
})) : null), isSplitted ? /*#__PURE__*/
|
|
979
|
+
})) : null), isSplitted ? /*#__PURE__*/React.createElement(Layout.Spacer, {
|
|
1004
980
|
key: "spacer"
|
|
1005
|
-
}) : null, /*#__PURE__*/
|
|
981
|
+
}) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
|
|
1006
982
|
key: "button",
|
|
1007
983
|
placeholder: "button"
|
|
1008
|
-
}, /*#__PURE__*/
|
|
984
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
1009
985
|
disabled: buttonDisabled,
|
|
1010
986
|
focusable: focusable,
|
|
1011
987
|
buttonStyle: button !== null ? button.buttonStyle : null,
|
|
1012
988
|
className: styles.button,
|
|
1013
989
|
onClick: onClickButton
|
|
1014
|
-
}, hasButton ? /*#__PURE__*/
|
|
990
|
+
}, hasButton ? /*#__PURE__*/React.createElement(Text, Object.assign({}, button, {
|
|
1015
991
|
className: styles.label
|
|
1016
|
-
})) : /*#__PURE__*/
|
|
992
|
+
})) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
1017
993
|
id: "D7LIZQ",
|
|
1018
994
|
defaultMessage: [{
|
|
1019
995
|
"type": 0,
|
|
@@ -1025,16 +1001,16 @@ Title.propTypes = propTypes$1;
|
|
|
1025
1001
|
Title.defaultProps = defaultProps$1;
|
|
1026
1002
|
|
|
1027
1003
|
var propTypes = {
|
|
1028
|
-
id:
|
|
1029
|
-
layout:
|
|
1030
|
-
introLayout:
|
|
1004
|
+
id: PropTypes.string,
|
|
1005
|
+
layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
|
|
1006
|
+
introLayout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
|
|
1031
1007
|
title: core.PropTypes.textElement,
|
|
1032
1008
|
description: core.PropTypes.textElement,
|
|
1033
|
-
questions:
|
|
1009
|
+
questions: PropTypes.arrayOf(PropTypes.shape({
|
|
1034
1010
|
text: core.PropTypes.textElement,
|
|
1035
1011
|
answers: core.PropTypes.quizAnswers
|
|
1036
1012
|
})),
|
|
1037
|
-
results:
|
|
1013
|
+
results: PropTypes.arrayOf(PropTypes.shape({
|
|
1038
1014
|
title: core.PropTypes.textElement,
|
|
1039
1015
|
description: core.PropTypes.textElement
|
|
1040
1016
|
})),
|
|
@@ -1045,18 +1021,18 @@ var propTypes = {
|
|
|
1045
1021
|
resultsTextStyle: core.PropTypes.textStyle,
|
|
1046
1022
|
goodAnswerColor: core.PropTypes.color,
|
|
1047
1023
|
badAnswerColor: core.PropTypes.color,
|
|
1048
|
-
spacing:
|
|
1024
|
+
spacing: PropTypes.number,
|
|
1049
1025
|
background: core.PropTypes.backgroundElement,
|
|
1050
1026
|
introButton: core.PropTypes.textElement,
|
|
1051
1027
|
introBackground: core.PropTypes.backgroundElement,
|
|
1052
1028
|
header: core.PropTypes.header,
|
|
1053
1029
|
footer: core.PropTypes.footer,
|
|
1054
|
-
current:
|
|
1055
|
-
active:
|
|
1030
|
+
current: PropTypes.bool,
|
|
1031
|
+
active: PropTypes.bool,
|
|
1056
1032
|
transitions: core.PropTypes.transitions,
|
|
1057
|
-
transitionStagger:
|
|
1058
|
-
type:
|
|
1059
|
-
className:
|
|
1033
|
+
transitionStagger: PropTypes.number,
|
|
1034
|
+
type: PropTypes.string,
|
|
1035
|
+
className: PropTypes.string
|
|
1060
1036
|
};
|
|
1061
1037
|
var defaultProps = {
|
|
1062
1038
|
id: null,
|
|
@@ -1087,7 +1063,6 @@ var defaultProps = {
|
|
|
1087
1063
|
className: null
|
|
1088
1064
|
};
|
|
1089
1065
|
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
1090
|
-
var _ref13;
|
|
1091
1066
|
var id = _ref.id,
|
|
1092
1067
|
layout = _ref.layout,
|
|
1093
1068
|
introLayout = _ref.introLayout,
|
|
@@ -1138,7 +1113,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1138
1113
|
openWebView = _useViewerWebView.open;
|
|
1139
1114
|
var screenState = contexts.useScreenState();
|
|
1140
1115
|
var _ref2 = screenState !== null ? screenState.split('.') : [],
|
|
1141
|
-
_ref3 =
|
|
1116
|
+
_ref3 = _slicedToArray(_ref2, 2),
|
|
1142
1117
|
_ref3$ = _ref3[0],
|
|
1143
1118
|
stateId = _ref3$ === void 0 ? null : _ref3$,
|
|
1144
1119
|
_ref3$2 = _ref3[1],
|
|
@@ -1169,7 +1144,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1169
1144
|
var showInstantAnswer = isStatic || isCapture;
|
|
1170
1145
|
var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
|
|
1171
1146
|
var _useState = React.useState(null),
|
|
1172
|
-
_useState2 =
|
|
1147
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1173
1148
|
userAnswers = _useState2[0],
|
|
1174
1149
|
setUserAnswers = _useState2[1];
|
|
1175
1150
|
var initialQuestionIndex = 'intro';
|
|
@@ -1179,7 +1154,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1179
1154
|
initialQuestionIndex = 0;
|
|
1180
1155
|
}
|
|
1181
1156
|
var _useState3 = React.useState(initialQuestionIndex),
|
|
1182
|
-
_useState4 =
|
|
1157
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1183
1158
|
questionIndex = _useState4[0],
|
|
1184
1159
|
setQuestionIndex = _useState4[1];
|
|
1185
1160
|
React.useEffect(function () {
|
|
@@ -1188,7 +1163,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1188
1163
|
}
|
|
1189
1164
|
}, [isPreview, hasIntro, questionIndex, setQuestionIndex]);
|
|
1190
1165
|
var onAnswerClick = React.useCallback(function (answer, answerIndex) {
|
|
1191
|
-
setUserAnswers(
|
|
1166
|
+
setUserAnswers(_objectSpread(_objectSpread({}, userAnswers), {}, _defineProperty({}, questionIndex, answerIndex)));
|
|
1192
1167
|
trackScreenEvent('click_answer', "Question #".concat(questionIndex + 1, " ").concat(answerIndex + 1, ": ").concat(answer.label.body), {
|
|
1193
1168
|
question: questions[questionIndex],
|
|
1194
1169
|
questionIndex: questionIndex,
|
|
@@ -1329,7 +1304,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1329
1304
|
}, [questionIndex]);
|
|
1330
1305
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
1331
1306
|
var _useState5 = React.useState(false),
|
|
1332
|
-
_useState6 =
|
|
1307
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
1333
1308
|
scrolledBottom = _useState6[0],
|
|
1334
1309
|
setScrolledBottom = _useState6[1];
|
|
1335
1310
|
var onScrolledBottom = React.useCallback(function (_ref11) {
|
|
@@ -1343,7 +1318,7 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1343
1318
|
setScrolledBottom(false);
|
|
1344
1319
|
}, [setScrolledBottom]);
|
|
1345
1320
|
var _useState7 = React.useState(false),
|
|
1346
|
-
_useState8 =
|
|
1321
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
1347
1322
|
hasScroll = _useState8[0],
|
|
1348
1323
|
setHasScroll = _useState8[1];
|
|
1349
1324
|
var onScrollHeightChange = React.useCallback(function (_ref12) {
|
|
@@ -1364,30 +1339,30 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1364
1339
|
}
|
|
1365
1340
|
var showPoints = isEdit;
|
|
1366
1341
|
var showReset = isEdit;
|
|
1367
|
-
return /*#__PURE__*/
|
|
1368
|
-
className:
|
|
1342
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1343
|
+
className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2[direction], direction !== null), className, className !== null)]),
|
|
1369
1344
|
"data-screen-ready": true
|
|
1370
|
-
}, /*#__PURE__*/
|
|
1345
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
1371
1346
|
width: width,
|
|
1372
1347
|
height: height,
|
|
1373
1348
|
className: styles$2.content
|
|
1374
|
-
}, showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/
|
|
1349
|
+
}, showPoints && currentPoints !== null && currentPoints > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
1375
1350
|
className: styles$2.points
|
|
1376
|
-
}, "".concat(currentPoints, " "), /*#__PURE__*/
|
|
1351
|
+
}, "".concat(currentPoints, " "), /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
|
|
1377
1352
|
id: "Xr1v8l",
|
|
1378
1353
|
defaultMessage: [{
|
|
1379
1354
|
"type": 0,
|
|
1380
1355
|
"value": "points gained"
|
|
1381
1356
|
}]
|
|
1382
|
-
})) : null, showReset ? /*#__PURE__*/
|
|
1357
|
+
})) : null, showReset ? /*#__PURE__*/React.createElement(components.Button, {
|
|
1383
1358
|
className: styles$2.reset,
|
|
1384
|
-
icon: /*#__PURE__*/
|
|
1359
|
+
icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
|
|
1385
1360
|
icon: faRedo.faRedo,
|
|
1386
1361
|
size: "md"
|
|
1387
1362
|
}),
|
|
1388
1363
|
onClick: onQuizReset
|
|
1389
|
-
}) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/
|
|
1390
|
-
className:
|
|
1364
|
+
}) : null, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|
1365
|
+
className: classNames([styles$2.header, _defineProperty({}, styles$2.disabled, scrolledBottom && !scrollingDisabled && hasScroll)]),
|
|
1391
1366
|
ref: headerRef,
|
|
1392
1367
|
style: {
|
|
1393
1368
|
paddingTop: spacing / 2,
|
|
@@ -1396,17 +1371,17 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1396
1371
|
paddingBottom: spacing,
|
|
1397
1372
|
transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
|
|
1398
1373
|
}
|
|
1399
|
-
}, /*#__PURE__*/
|
|
1374
|
+
}, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Scroll, {
|
|
1400
1375
|
verticalAlign: verticalAlign,
|
|
1401
1376
|
disabled: scrollingDisabled,
|
|
1402
1377
|
onScrolledBottom: onScrolledBottom,
|
|
1403
1378
|
onScrolledNotBottom: onScrolledNotBottom,
|
|
1404
1379
|
onScrollHeightChange: onScrollHeightChange
|
|
1405
|
-
}, /*#__PURE__*/
|
|
1380
|
+
}, /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, null, [isIntro ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
|
|
1406
1381
|
key: "intro",
|
|
1407
1382
|
classNames: styles$2,
|
|
1408
1383
|
timeout: 1000
|
|
1409
|
-
}, /*#__PURE__*/
|
|
1384
|
+
}, /*#__PURE__*/React.createElement(Title, {
|
|
1410
1385
|
title: title,
|
|
1411
1386
|
description: description,
|
|
1412
1387
|
layout: introLayout || layout,
|
|
@@ -1425,11 +1400,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1425
1400
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1426
1401
|
} : null,
|
|
1427
1402
|
onClickButton: onClickIntroButton
|
|
1428
|
-
})) : null, isQuestion ? /*#__PURE__*/
|
|
1403
|
+
})) : null, isQuestion ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
|
|
1429
1404
|
key: "question-".concat(questionIndex),
|
|
1430
1405
|
classNames: styles$2,
|
|
1431
1406
|
timeout: 1000
|
|
1432
|
-
}, /*#__PURE__*/
|
|
1407
|
+
}, /*#__PURE__*/React.createElement(Question, {
|
|
1433
1408
|
index: questionIndex,
|
|
1434
1409
|
totalCount: (questions || []).length,
|
|
1435
1410
|
question: text,
|
|
@@ -1457,11 +1432,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1457
1432
|
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
1458
1433
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1459
1434
|
} : null
|
|
1460
|
-
})) : null, isResults ? /*#__PURE__*/
|
|
1435
|
+
})) : null, isResults ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
|
|
1461
1436
|
key: "results",
|
|
1462
1437
|
classNames: styles$2,
|
|
1463
1438
|
timeout: 2000
|
|
1464
|
-
}, /*#__PURE__*/
|
|
1439
|
+
}, /*#__PURE__*/React.createElement(Results, Object.assign({}, currentResult, {
|
|
1465
1440
|
resultsHeadingStyle: resultsHeadingStyle,
|
|
1466
1441
|
resultsTextStyle: resultsTextStyle,
|
|
1467
1442
|
layout: resultLayout || layout,
|
|
@@ -1475,9 +1450,9 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1475
1450
|
paddingTop: (current && !isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
|
|
1476
1451
|
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
|
|
1477
1452
|
} : null
|
|
1478
|
-
}))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/
|
|
1453
|
+
}))) : null])), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
|
|
1479
1454
|
ref: footerRef,
|
|
1480
|
-
className:
|
|
1455
|
+
className: classNames([styles$2.footer, _defineProperty({}, styles$2.disabled, !scrolledBottom)]),
|
|
1481
1456
|
style: {
|
|
1482
1457
|
paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
1483
1458
|
paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
|
|
@@ -1485,11 +1460,11 @@ var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
|
1485
1460
|
paddingBottom: spacing / 2,
|
|
1486
1461
|
transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
|
|
1487
1462
|
}
|
|
1488
|
-
}, /*#__PURE__*/
|
|
1463
|
+
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), !isPlaceholder ? /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
|
|
1489
1464
|
key: backgroundKey,
|
|
1490
1465
|
classNames: styles$2,
|
|
1491
1466
|
timeout: 1000
|
|
1492
|
-
}, /*#__PURE__*/
|
|
1467
|
+
}, /*#__PURE__*/React.createElement(Background, {
|
|
1493
1468
|
background: finalBackground,
|
|
1494
1469
|
width: width,
|
|
1495
1470
|
height: height,
|
|
@@ -2041,4 +2016,4 @@ var definition = [{
|
|
|
2041
2016
|
|
|
2042
2017
|
exports.QuizMultipleScreen = QuizMultipleScreen;
|
|
2043
2018
|
exports.QuizScreen = QuizScreen;
|
|
2044
|
-
exports
|
|
2019
|
+
exports.default = definition;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-quiz",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.429",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"main": "lib/index.js",
|
|
34
34
|
"module": "es/index.js",
|
|
35
|
+
"style": "assets/css/styles.css",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"require": "./lib/index.js",
|
|
39
|
+
"import": "./es/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./assets/css/*.css": "./assets/css/*.css"
|
|
42
|
+
},
|
|
35
43
|
"files": [
|
|
36
44
|
"lib",
|
|
37
45
|
"es",
|
|
@@ -53,19 +61,19 @@
|
|
|
53
61
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
54
62
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
55
63
|
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
56
|
-
"@micromag/core": "^0.3.
|
|
57
|
-
"@micromag/data": "^0.3.
|
|
58
|
-
"@micromag/element-background": "^0.3.
|
|
59
|
-
"@micromag/element-button": "^0.3.
|
|
60
|
-
"@micromag/element-container": "^0.3.
|
|
61
|
-
"@micromag/element-footer": "^0.3.
|
|
62
|
-
"@micromag/element-header": "^0.3.
|
|
63
|
-
"@micromag/element-heading": "^0.3.
|
|
64
|
-
"@micromag/element-layout": "^0.3.
|
|
65
|
-
"@micromag/element-scroll": "^0.3.
|
|
66
|
-
"@micromag/element-text": "^0.3.
|
|
67
|
-
"@micromag/element-visual": "^0.3.
|
|
68
|
-
"@micromag/transforms": "^0.3.
|
|
64
|
+
"@micromag/core": "^0.3.429",
|
|
65
|
+
"@micromag/data": "^0.3.429",
|
|
66
|
+
"@micromag/element-background": "^0.3.429",
|
|
67
|
+
"@micromag/element-button": "^0.3.429",
|
|
68
|
+
"@micromag/element-container": "^0.3.429",
|
|
69
|
+
"@micromag/element-footer": "^0.3.429",
|
|
70
|
+
"@micromag/element-header": "^0.3.429",
|
|
71
|
+
"@micromag/element-heading": "^0.3.429",
|
|
72
|
+
"@micromag/element-layout": "^0.3.429",
|
|
73
|
+
"@micromag/element-scroll": "^0.3.429",
|
|
74
|
+
"@micromag/element-text": "^0.3.429",
|
|
75
|
+
"@micromag/element-visual": "^0.3.429",
|
|
76
|
+
"@micromag/transforms": "^0.3.429",
|
|
69
77
|
"@react-spring/core": "^9.6.1",
|
|
70
78
|
"@react-spring/web": "^9.6.1",
|
|
71
79
|
"classnames": "^2.2.6",
|
|
@@ -79,5 +87,5 @@
|
|
|
79
87
|
"access": "public",
|
|
80
88
|
"registry": "https://registry.npmjs.org/"
|
|
81
89
|
},
|
|
82
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
|
|
83
91
|
}
|