@micromag/screen-quiz 0.2.408 → 0.3.0
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 +5 -1
- package/es/index.js +1307 -291
- package/lib/index.js +1292 -276
- package/package.json +13 -12
package/lib/index.js
CHANGED
|
@@ -3,49 +3,473 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var reactIntl = require('react-intl');
|
|
6
|
-
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
7
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
8
|
-
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
9
7
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
10
|
-
var
|
|
11
|
-
var
|
|
8
|
+
var classNames = require('classnames');
|
|
9
|
+
var PropTypes = require('prop-types');
|
|
10
|
+
var React = require('react');
|
|
12
11
|
var core = require('@micromag/core');
|
|
13
|
-
var components = require('@micromag/core/components');
|
|
14
12
|
var contexts = require('@micromag/core/contexts');
|
|
15
13
|
var hooks = require('@micromag/core/hooks');
|
|
16
|
-
var utils = require('@micromag/core/utils');
|
|
17
14
|
var data = require('@micromag/data');
|
|
18
15
|
var Background = require('@micromag/element-background');
|
|
19
|
-
var Button = require('@micromag/element-button');
|
|
20
16
|
var CallToAction = require('@micromag/element-call-to-action');
|
|
21
17
|
var Container = require('@micromag/element-container');
|
|
18
|
+
var components = require('@micromag/core/components');
|
|
19
|
+
var utils = require('@micromag/core/utils');
|
|
22
20
|
var Heading = require('@micromag/element-heading');
|
|
23
21
|
var Layout = require('@micromag/element-layout');
|
|
24
22
|
var Text = require('@micromag/element-text');
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
23
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
24
|
+
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
|
|
25
|
+
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
26
|
+
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
27
|
+
var Button = require('@micromag/element-button');
|
|
28
|
+
var reactTransitionGroup = require('react-transition-group');
|
|
28
29
|
|
|
29
30
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
30
31
|
|
|
31
|
-
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
32
32
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
33
|
-
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
34
33
|
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
34
|
+
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
35
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
36
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
35
37
|
var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
|
|
36
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
37
38
|
var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
|
|
38
39
|
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
|
|
39
40
|
var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
|
|
40
41
|
var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
|
|
41
42
|
var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
43
|
+
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
44
|
+
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
|
|
45
|
+
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
45
46
|
|
|
46
|
-
var styles = {"
|
|
47
|
+
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","rightAnswer":"micromag-screen-quiz-answers-rightAnswer","answered":"micromag-screen-quiz-answers-answered","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"};
|
|
47
48
|
|
|
48
|
-
var propTypes = {
|
|
49
|
+
var propTypes$5 = {
|
|
50
|
+
items: core.PropTypes.quizAnswers.isRequired,
|
|
51
|
+
answeredIndex: PropTypes__default["default"].number,
|
|
52
|
+
answersCollapseDelay: PropTypes__default["default"].number,
|
|
53
|
+
buttonsStyle: core.PropTypes.boxStyle,
|
|
54
|
+
goodAnswerColor: core.PropTypes.color,
|
|
55
|
+
badAnswerColor: core.PropTypes.color,
|
|
56
|
+
withoutGoodAnswer: PropTypes__default["default"].bool,
|
|
57
|
+
focusable: PropTypes__default["default"].bool,
|
|
58
|
+
collapsed: PropTypes__default["default"].bool,
|
|
59
|
+
transitions: core.PropTypes.transitions,
|
|
60
|
+
transitionPlaying: PropTypes__default["default"].bool,
|
|
61
|
+
transitionStagger: PropTypes__default["default"].number,
|
|
62
|
+
transitionDisabled: PropTypes__default["default"].bool,
|
|
63
|
+
onClick: PropTypes__default["default"].func,
|
|
64
|
+
onCollapse: PropTypes__default["default"].func,
|
|
65
|
+
onCollapsed: PropTypes__default["default"].func,
|
|
66
|
+
onTransitionEnd: PropTypes__default["default"].func,
|
|
67
|
+
className: PropTypes__default["default"].string
|
|
68
|
+
};
|
|
69
|
+
var defaultProps$5 = {
|
|
70
|
+
answeredIndex: null,
|
|
71
|
+
answersCollapseDelay: 2000,
|
|
72
|
+
buttonsStyle: null,
|
|
73
|
+
goodAnswerColor: null,
|
|
74
|
+
badAnswerColor: null,
|
|
75
|
+
withoutGoodAnswer: false,
|
|
76
|
+
focusable: false,
|
|
77
|
+
collapsed: false,
|
|
78
|
+
transitions: null,
|
|
79
|
+
transitionPlaying: false,
|
|
80
|
+
transitionStagger: 100,
|
|
81
|
+
transitionDisabled: false,
|
|
82
|
+
onClick: null,
|
|
83
|
+
onCollapse: null,
|
|
84
|
+
onCollapsed: null,
|
|
85
|
+
onTransitionEnd: null,
|
|
86
|
+
className: null
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
var Answers = function Answers(_ref) {
|
|
90
|
+
var _ref5;
|
|
91
|
+
|
|
92
|
+
var items = _ref.items,
|
|
93
|
+
answeredIndex = _ref.answeredIndex,
|
|
94
|
+
answersCollapseDelay = _ref.answersCollapseDelay,
|
|
95
|
+
buttonsStyle = _ref.buttonsStyle,
|
|
96
|
+
goodAnswerColor = _ref.goodAnswerColor,
|
|
97
|
+
badAnswerColor = _ref.badAnswerColor,
|
|
98
|
+
withoutGoodAnswer = _ref.withoutGoodAnswer,
|
|
99
|
+
focusable = _ref.focusable,
|
|
100
|
+
initialCollapsed = _ref.collapsed,
|
|
101
|
+
transitions = _ref.transitions,
|
|
102
|
+
transitionPlaying = _ref.transitionPlaying,
|
|
103
|
+
transitionStagger = _ref.transitionStagger,
|
|
104
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
105
|
+
_onClick = _ref.onClick,
|
|
106
|
+
onCollapse = _ref.onCollapse,
|
|
107
|
+
onCollapsed = _ref.onCollapsed,
|
|
108
|
+
onTransitionEnd = _ref.onTransitionEnd,
|
|
109
|
+
className = _ref.className;
|
|
110
|
+
|
|
111
|
+
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
112
|
+
isView = _useScreenRenderConte.isView,
|
|
113
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
114
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
115
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
116
|
+
|
|
117
|
+
var answered = answeredIndex !== null;
|
|
118
|
+
|
|
119
|
+
var _ref2 = answeredIndex !== null ? items[answeredIndex] : {},
|
|
120
|
+
_ref2$good = _ref2.good,
|
|
121
|
+
hasAnsweredRight = _ref2$good === void 0 ? false : _ref2$good; // we get .answer's current and future height to animate its height
|
|
122
|
+
// we also get the right answer's Y to animate its position
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
var _useResizeObserver = hooks.useResizeObserver(),
|
|
126
|
+
answerRef = _useResizeObserver.ref,
|
|
127
|
+
answerContentRect = _useResizeObserver.entry.contentRect;
|
|
128
|
+
|
|
129
|
+
var _ref3 = answerContentRect || {},
|
|
130
|
+
answerHeight = _ref3.height;
|
|
131
|
+
|
|
132
|
+
var _useResizeObserver2 = hooks.useResizeObserver(),
|
|
133
|
+
rightAnswerRef = _useResizeObserver2.ref,
|
|
134
|
+
rightAnswerContentRect = _useResizeObserver2.entry.contentRect;
|
|
135
|
+
|
|
136
|
+
var _ref4 = rightAnswerContentRect || {},
|
|
137
|
+
rightAnswerHeight = _ref4.height;
|
|
138
|
+
|
|
139
|
+
var rightAnswerTop = React.useMemo(function () {
|
|
140
|
+
return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
|
|
141
|
+
}, [rightAnswerHeight]);
|
|
142
|
+
var shouldCollapse = !withoutGoodAnswer;
|
|
143
|
+
|
|
144
|
+
var _useState = React.useState(answeredIndex !== null),
|
|
145
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
146
|
+
answersCollapsed = _useState2[0],
|
|
147
|
+
setAnswersCollapsed = _useState2[1];
|
|
148
|
+
|
|
149
|
+
var _useState3 = React.useState(initialCollapsed || answeredIndex !== null),
|
|
150
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
151
|
+
answersDidCollapsed = _useState4[0],
|
|
152
|
+
setAnswersDidCollapsed = _useState4[1];
|
|
153
|
+
|
|
154
|
+
React.useEffect(function () {
|
|
155
|
+
var timeout = null;
|
|
156
|
+
|
|
157
|
+
if (answeredIndex !== null && shouldCollapse) {
|
|
158
|
+
timeout = setTimeout(function () {
|
|
159
|
+
setAnswersCollapsed(true);
|
|
160
|
+
|
|
161
|
+
if (onCollapse !== null) {
|
|
162
|
+
onCollapse();
|
|
163
|
+
}
|
|
164
|
+
}, hasAnsweredRight ? 500 : answersCollapseDelay);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
return function () {
|
|
168
|
+
if (timeout !== null) {
|
|
169
|
+
clearTimeout(timeout);
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
}, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight]);
|
|
173
|
+
var onAnswerTransitionEnd = React.useCallback(function () {
|
|
174
|
+
if (onTransitionEnd !== null) {
|
|
175
|
+
onTransitionEnd();
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
if (shouldCollapse && answersCollapsed && !answersDidCollapsed) {
|
|
179
|
+
setAnswersDidCollapsed(true);
|
|
180
|
+
|
|
181
|
+
if (onCollapsed !== null) {
|
|
182
|
+
onCollapsed();
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}, [shouldCollapse, answersCollapsed, answersDidCollapsed, setAnswersCollapsed, onCollapsed, onTransitionEnd]);
|
|
186
|
+
console.log(items);
|
|
187
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
188
|
+
className: classNames__default["default"]([styles$4.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$4.answered, answered), _defineProperty__default["default"](_ref5, styles$4.withoutGoodAnswer, withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.withGoodAnswer, !withoutGoodAnswer), _defineProperty__default["default"](_ref5, styles$4.willCollapse, shouldCollapse && answersCollapsed), _defineProperty__default["default"](_ref5, styles$4.didCollapsed, shouldCollapse && answersDidCollapsed), _defineProperty__default["default"](_ref5, styles$4.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref5, className, className !== null), _ref5)]),
|
|
189
|
+
ref: answerRef,
|
|
190
|
+
style: answered && !answersDidCollapsed && (isView || isEdit) && shouldCollapse ? {
|
|
191
|
+
height: answersCollapsed ? rightAnswerHeight : answerHeight
|
|
192
|
+
} : null
|
|
193
|
+
}, items !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
194
|
+
className: styles$4.items
|
|
195
|
+
}, (isPlaceholder || isEdit && items.length === 0 ? _toConsumableArray__default["default"](new Array(2)) : items).map(function (answer, answerI) {
|
|
196
|
+
var _ref7;
|
|
197
|
+
|
|
198
|
+
var userAnswer = answerI === answeredIndex;
|
|
199
|
+
|
|
200
|
+
var _ref6 = answer || {},
|
|
201
|
+
_ref6$good = _ref6.good,
|
|
202
|
+
rightAnswer = _ref6$good === void 0 ? false : _ref6$good,
|
|
203
|
+
_ref6$label = _ref6.label,
|
|
204
|
+
label = _ref6$label === void 0 ? null : _ref6$label,
|
|
205
|
+
_ref6$buttonStyle = _ref6.buttonStyle,
|
|
206
|
+
answerButtonStyle = _ref6$buttonStyle === void 0 ? null : _ref6$buttonStyle;
|
|
207
|
+
|
|
208
|
+
var hasAnswer = utils.isTextFilled(label);
|
|
209
|
+
|
|
210
|
+
if (answersDidCollapsed && !rightAnswer) {
|
|
211
|
+
return null;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
215
|
+
key: "answer-".concat(answerI),
|
|
216
|
+
ref: rightAnswer ? rightAnswerRef : null,
|
|
217
|
+
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), _ref7)]),
|
|
218
|
+
style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
|
|
219
|
+
transform: "translateY(".concat(-rightAnswerTop, "px)")
|
|
220
|
+
} : null,
|
|
221
|
+
onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer ? onAnswerTransitionEnd : null
|
|
222
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
223
|
+
className: styles$4.itemContent
|
|
224
|
+
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
225
|
+
placeholder: "quizAnswer",
|
|
226
|
+
placeholderProps: {
|
|
227
|
+
good: answerI === 0
|
|
228
|
+
},
|
|
229
|
+
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
230
|
+
id: "+Ok+7S",
|
|
231
|
+
defaultMessage: [{
|
|
232
|
+
"type": 0,
|
|
233
|
+
"value": "Answer"
|
|
234
|
+
}]
|
|
235
|
+
}),
|
|
236
|
+
emptyClassName: styles$4.emptyAnswer,
|
|
237
|
+
isEmpty: !hasAnswer
|
|
238
|
+
}, hasAnswer ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
239
|
+
transitions: transitions,
|
|
240
|
+
playing: transitionPlaying,
|
|
241
|
+
delay: (answerI + 1) * transitionStagger,
|
|
242
|
+
disabled: transitionDisabled
|
|
243
|
+
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
244
|
+
className: styles$4.button,
|
|
245
|
+
onClick: function onClick() {
|
|
246
|
+
return _onClick(answer, answerI);
|
|
247
|
+
},
|
|
248
|
+
disabled: isPreview || answered,
|
|
249
|
+
focusable: focusable,
|
|
250
|
+
buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonsStyle)), utils.getStyleFromBox(answerButtonStyle))
|
|
251
|
+
}, !withoutGoodAnswer && rightAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
252
|
+
className: styles$4.resultIcon,
|
|
253
|
+
style: utils.getStyleFromColor(goodAnswerColor, 'backgroundColor')
|
|
254
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
255
|
+
className: styles$4.faIcon,
|
|
256
|
+
icon: freeSolidSvgIcons.faCheck
|
|
257
|
+
})) : null, !withoutGoodAnswer && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
258
|
+
className: styles$4.resultIcon,
|
|
259
|
+
style: utils.getStyleFromColor(badAnswerColor, 'backgroundColor')
|
|
260
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
261
|
+
className: styles$4.faIcon,
|
|
262
|
+
icon: freeSolidSvgIcons.faTimes
|
|
263
|
+
})) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
|
|
264
|
+
className: styles$4.optionLabel
|
|
265
|
+
})))) : null)));
|
|
266
|
+
})) : null);
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
Answers.propTypes = propTypes$5;
|
|
270
|
+
Answers.defaultProps = defaultProps$5;
|
|
271
|
+
|
|
272
|
+
var styles$3 = {"container":"micromag-screen-quiz-question-container","emptyQuestion":"micromag-screen-quiz-question-emptyQuestion","emptyResult":"micromag-screen-quiz-question-emptyResult","question":"micromag-screen-quiz-question-question","index":"micromag-screen-quiz-question-index","result":"micromag-screen-quiz-question-result","resultContent":"micromag-screen-quiz-question-resultContent","resultVisible":"micromag-screen-quiz-question-resultVisible","isPlaceholder":"micromag-screen-quiz-question-isPlaceholder"};
|
|
273
|
+
|
|
274
|
+
var propTypes$4 = {
|
|
275
|
+
question: core.PropTypes.textElement,
|
|
276
|
+
answers: core.PropTypes.quizAnswers,
|
|
277
|
+
result: PropTypes__default["default"].shape({
|
|
278
|
+
image: core.PropTypes.imageElement,
|
|
279
|
+
text: core.PropTypes.textElement
|
|
280
|
+
}),
|
|
281
|
+
index: PropTypes__default["default"].number,
|
|
282
|
+
totalCount: PropTypes__default["default"].number,
|
|
283
|
+
answeredIndex: PropTypes__default["default"].number,
|
|
284
|
+
buttonsStyle: core.PropTypes.boxStyle,
|
|
285
|
+
goodAnswerColor: core.PropTypes.color,
|
|
286
|
+
badAnswerColor: core.PropTypes.color,
|
|
287
|
+
focusable: PropTypes__default["default"].bool,
|
|
288
|
+
layout: PropTypes__default["default"].string,
|
|
289
|
+
callToActionHeight: PropTypes__default["default"].number,
|
|
290
|
+
showInstantAnswer: PropTypes__default["default"].bool,
|
|
291
|
+
withResult: PropTypes__default["default"].bool,
|
|
292
|
+
withoutGoodAnswer: PropTypes__default["default"].bool,
|
|
293
|
+
withoutIndex: PropTypes__default["default"].bool,
|
|
294
|
+
transitions: core.PropTypes.transitions,
|
|
295
|
+
transitionPlaying: PropTypes__default["default"].bool,
|
|
296
|
+
transitionStagger: PropTypes__default["default"].number,
|
|
297
|
+
transitionDisabled: PropTypes__default["default"].bool,
|
|
298
|
+
onAnswerClick: PropTypes__default["default"].func,
|
|
299
|
+
onAnswerTransitionEnd: PropTypes__default["default"].func,
|
|
300
|
+
className: PropTypes__default["default"].string,
|
|
301
|
+
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
|
|
302
|
+
};
|
|
303
|
+
var defaultProps$4 = {
|
|
304
|
+
question: null,
|
|
305
|
+
answers: null,
|
|
306
|
+
result: null,
|
|
307
|
+
index: null,
|
|
308
|
+
totalCount: null,
|
|
309
|
+
answeredIndex: null,
|
|
310
|
+
buttonsStyle: null,
|
|
311
|
+
goodAnswerColor: null,
|
|
312
|
+
badAnswerColor: null,
|
|
313
|
+
focusable: false,
|
|
314
|
+
layout: null,
|
|
315
|
+
callToActionHeight: null,
|
|
316
|
+
showInstantAnswer: false,
|
|
317
|
+
withResult: false,
|
|
318
|
+
withoutGoodAnswer: false,
|
|
319
|
+
withoutIndex: false,
|
|
320
|
+
transitions: null,
|
|
321
|
+
transitionPlaying: false,
|
|
322
|
+
transitionStagger: 100,
|
|
323
|
+
transitionDisabled: false,
|
|
324
|
+
onAnswerClick: null,
|
|
325
|
+
onAnswerTransitionEnd: null,
|
|
326
|
+
className: null,
|
|
327
|
+
style: null
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
var Question = function Question(_ref) {
|
|
331
|
+
var _ref3;
|
|
332
|
+
|
|
333
|
+
var question = _ref.question,
|
|
334
|
+
answers = _ref.answers,
|
|
335
|
+
result = _ref.result,
|
|
336
|
+
index = _ref.index,
|
|
337
|
+
totalCount = _ref.totalCount,
|
|
338
|
+
answeredIndex = _ref.answeredIndex,
|
|
339
|
+
buttonsStyle = _ref.buttonsStyle,
|
|
340
|
+
goodAnswerColor = _ref.goodAnswerColor,
|
|
341
|
+
badAnswerColor = _ref.badAnswerColor,
|
|
342
|
+
focusable = _ref.focusable,
|
|
343
|
+
showInstantAnswer = _ref.showInstantAnswer,
|
|
344
|
+
withResult = _ref.withResult,
|
|
345
|
+
withoutGoodAnswer = _ref.withoutGoodAnswer,
|
|
346
|
+
withoutIndex = _ref.withoutIndex,
|
|
347
|
+
layout = _ref.layout,
|
|
348
|
+
callToActionHeight = _ref.callToActionHeight,
|
|
349
|
+
transitions = _ref.transitions,
|
|
350
|
+
transitionPlaying = _ref.transitionPlaying,
|
|
351
|
+
transitionStagger = _ref.transitionStagger,
|
|
352
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
353
|
+
onAnswerClick = _ref.onAnswerClick,
|
|
354
|
+
onAnswerTransitionEnd = _ref.onAnswerTransitionEnd,
|
|
355
|
+
className = _ref.className,
|
|
356
|
+
style = _ref.style;
|
|
357
|
+
|
|
358
|
+
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
359
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder;
|
|
360
|
+
|
|
361
|
+
var isSplitted = layout === 'split';
|
|
362
|
+
var verticalAlign = isSplitted ? null : layout;
|
|
363
|
+
var hasQuestion = utils.isTextFilled(question);
|
|
364
|
+
var hasResult = utils.isTextFilled(result);
|
|
365
|
+
|
|
366
|
+
var _useState = React.useState(showInstantAnswer),
|
|
367
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
368
|
+
resultVisible = _useState2[0],
|
|
369
|
+
setResultVisible = _useState2[1];
|
|
370
|
+
|
|
371
|
+
var answered = answeredIndex !== null;
|
|
372
|
+
|
|
373
|
+
var _useResizeObserver = hooks.useResizeObserver(),
|
|
374
|
+
resultRef = _useResizeObserver.ref,
|
|
375
|
+
resultContentRect = _useResizeObserver.entry.contentRect;
|
|
376
|
+
|
|
377
|
+
var _ref2 = resultContentRect || {};
|
|
378
|
+
_ref2.height; // eslint-disable-line
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
var onAnswersCollapse = React.useCallback(function () {
|
|
382
|
+
setResultVisible(true);
|
|
383
|
+
}, [setResultVisible]);
|
|
384
|
+
var hasIndex = index !== null && totalCount !== null;
|
|
385
|
+
return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
386
|
+
className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$3.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles$3.resultVisible, resultVisible), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
|
|
387
|
+
fullscreen: true,
|
|
388
|
+
verticalAlign: verticalAlign,
|
|
389
|
+
style: style
|
|
390
|
+
}, [!withoutIndex && hasIndex ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
391
|
+
key: "stats",
|
|
392
|
+
placeholder: /*#__PURE__*/React__default["default"].createElement("div", {
|
|
393
|
+
className: styles$3.index
|
|
394
|
+
}, "1 / 10")
|
|
395
|
+
}, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
396
|
+
transitions: transitions,
|
|
397
|
+
playing: transitionPlaying,
|
|
398
|
+
disabled: transitionDisabled
|
|
399
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
400
|
+
className: styles$3.index
|
|
401
|
+
}, index + 1, " / ", totalCount))) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
402
|
+
key: "question",
|
|
403
|
+
placeholder: "title",
|
|
404
|
+
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
405
|
+
id: "FOmgqv",
|
|
406
|
+
defaultMessage: [{
|
|
407
|
+
"type": 0,
|
|
408
|
+
"value": "Question"
|
|
409
|
+
}]
|
|
410
|
+
}),
|
|
411
|
+
emptyClassName: styles$3.emptyQuestion,
|
|
412
|
+
isEmpty: !hasQuestion
|
|
413
|
+
}, hasQuestion ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
414
|
+
transitions: transitions,
|
|
415
|
+
playing: transitionPlaying,
|
|
416
|
+
disabled: transitionDisabled
|
|
417
|
+
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, question, {
|
|
418
|
+
className: styles$3.question
|
|
419
|
+
}))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
420
|
+
key: "spacer"
|
|
421
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(Answers, {
|
|
422
|
+
key: "answers",
|
|
423
|
+
items: answers || [],
|
|
424
|
+
answeredIndex: answeredIndex,
|
|
425
|
+
goodAnswerColor: goodAnswerColor,
|
|
426
|
+
badAnswerColor: badAnswerColor,
|
|
427
|
+
withoutGoodAnswer: withoutGoodAnswer,
|
|
428
|
+
buttonsStyle: buttonsStyle,
|
|
429
|
+
focusable: focusable,
|
|
430
|
+
transitions: transitions,
|
|
431
|
+
transitionStagger: transitionStagger,
|
|
432
|
+
transitionPlaying: transitionPlaying,
|
|
433
|
+
transitionDisabled: transitionDisabled,
|
|
434
|
+
onClick: onAnswerClick,
|
|
435
|
+
onCollapse: onAnswersCollapse,
|
|
436
|
+
onTransitionEnd: onAnswerTransitionEnd
|
|
437
|
+
}), withResult ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
438
|
+
className: styles$3.result,
|
|
439
|
+
key: "results",
|
|
440
|
+
ref: resultRef
|
|
441
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
442
|
+
className: styles$3.resultContent
|
|
443
|
+
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
444
|
+
emptyLabel: answered ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
445
|
+
id: "li7ADr",
|
|
446
|
+
defaultMessage: [{
|
|
447
|
+
"type": 0,
|
|
448
|
+
"value": "Result"
|
|
449
|
+
}]
|
|
450
|
+
}) : null,
|
|
451
|
+
isEmpty: answered && !hasResult,
|
|
452
|
+
emptyClassName: styles$3.emptyResult
|
|
453
|
+
}, hasResult && answers !== null ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
454
|
+
transitions: transitions,
|
|
455
|
+
playing: transitionPlaying,
|
|
456
|
+
delay: (1 + answers.length) * transitionStagger,
|
|
457
|
+
disabled: transitionDisabled
|
|
458
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, result, {
|
|
459
|
+
className: styles$3.resultText
|
|
460
|
+
})), callToActionHeight !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
461
|
+
style: {
|
|
462
|
+
height: callToActionHeight
|
|
463
|
+
}
|
|
464
|
+
}) : null) : null))) : null]);
|
|
465
|
+
};
|
|
466
|
+
|
|
467
|
+
Question.propTypes = propTypes$4;
|
|
468
|
+
Question.defaultProps = defaultProps$4;
|
|
469
|
+
|
|
470
|
+
var styles$2 = {"container":"micromag-screen-quiz-container","disabled":"micromag-screen-quiz-disabled","hidden":"micromag-screen-quiz-hidden","placeholder":"micromag-screen-quiz-placeholder","content":"micromag-screen-quiz-content","layout":"micromag-screen-quiz-layout","callToAction":"micromag-screen-quiz-callToAction","transition":"micromag-screen-quiz-transition","intro":"micromag-screen-quiz-intro","question":"micromag-screen-quiz-question","results":"micromag-screen-quiz-results","enter":"micromag-screen-quiz-enter","left":"micromag-screen-quiz-left","enterActive":"micromag-screen-quiz-enterActive","exit":"micromag-screen-quiz-exit","exitActive":"micromag-screen-quiz-exitActive","background":"micromag-screen-quiz-background"};
|
|
471
|
+
|
|
472
|
+
var propTypes$3 = {
|
|
49
473
|
id: PropTypes__default["default"].string,
|
|
50
474
|
layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom', 'split']),
|
|
51
475
|
question: core.PropTypes.textElement,
|
|
@@ -54,22 +478,20 @@ var propTypes = {
|
|
|
54
478
|
image: core.PropTypes.imageElement,
|
|
55
479
|
text: core.PropTypes.textElement
|
|
56
480
|
}),
|
|
57
|
-
buttonsStyle: core.PropTypes.
|
|
481
|
+
buttonsStyle: core.PropTypes.boxStyle,
|
|
58
482
|
goodAnswerColor: core.PropTypes.color,
|
|
59
483
|
badAnswerColor: core.PropTypes.color,
|
|
60
484
|
spacing: PropTypes__default["default"].number,
|
|
61
|
-
showResultsDelay: PropTypes__default["default"].number,
|
|
62
485
|
background: core.PropTypes.backgroundElement,
|
|
63
486
|
callToAction: core.PropTypes.callToAction,
|
|
64
487
|
current: PropTypes__default["default"].bool,
|
|
65
488
|
active: PropTypes__default["default"].bool,
|
|
66
489
|
transitions: core.PropTypes.transitions,
|
|
67
490
|
transitionStagger: PropTypes__default["default"].number,
|
|
68
|
-
resultsTransitionDuration: PropTypes__default["default"].number,
|
|
69
491
|
type: PropTypes__default["default"].string,
|
|
70
492
|
className: PropTypes__default["default"].string
|
|
71
493
|
};
|
|
72
|
-
var defaultProps = {
|
|
494
|
+
var defaultProps$3 = {
|
|
73
495
|
id: null,
|
|
74
496
|
layout: 'middle',
|
|
75
497
|
question: null,
|
|
@@ -79,21 +501,17 @@ var defaultProps = {
|
|
|
79
501
|
goodAnswerColor: null,
|
|
80
502
|
badAnswerColor: null,
|
|
81
503
|
spacing: 20,
|
|
82
|
-
showResultsDelay: 750,
|
|
83
504
|
background: null,
|
|
84
505
|
callToAction: null,
|
|
85
506
|
current: true,
|
|
86
507
|
active: true,
|
|
87
508
|
transitions: null,
|
|
88
509
|
transitionStagger: 100,
|
|
89
|
-
resultsTransitionDuration: 500,
|
|
90
510
|
type: null,
|
|
91
511
|
className: null
|
|
92
512
|
};
|
|
93
513
|
|
|
94
514
|
var QuizScreen = function QuizScreen(_ref) {
|
|
95
|
-
var _ref13;
|
|
96
|
-
|
|
97
515
|
var id = _ref.id,
|
|
98
516
|
layout = _ref.layout,
|
|
99
517
|
question = _ref.question,
|
|
@@ -103,14 +521,12 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
103
521
|
goodAnswerColor = _ref.goodAnswerColor,
|
|
104
522
|
badAnswerColor = _ref.badAnswerColor,
|
|
105
523
|
spacing = _ref.spacing,
|
|
106
|
-
showResultsDelay = _ref.showResultsDelay,
|
|
107
524
|
background = _ref.background,
|
|
108
525
|
callToAction = _ref.callToAction,
|
|
109
526
|
current = _ref.current,
|
|
110
527
|
active = _ref.active,
|
|
111
528
|
transitions = _ref.transitions,
|
|
112
529
|
transitionStagger = _ref.transitionStagger,
|
|
113
|
-
resultsTransitionDuration = _ref.resultsTransitionDuration,
|
|
114
530
|
type = _ref.type,
|
|
115
531
|
className = _ref.className;
|
|
116
532
|
var screenId = id || 'screen-id';
|
|
@@ -132,37 +548,6 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
132
548
|
isStatic = _useScreenRenderConte.isStatic,
|
|
133
549
|
isCapture = _useScreenRenderConte.isCapture;
|
|
134
550
|
|
|
135
|
-
var hasQuestion = utils.isTextFilled(question);
|
|
136
|
-
var hasResult = utils.isTextFilled(result);
|
|
137
|
-
var showInstantAnswer = isStatic || isCapture;
|
|
138
|
-
var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
|
|
139
|
-
return answer !== null && answer.good;
|
|
140
|
-
}) : null;
|
|
141
|
-
|
|
142
|
-
var _useState = React.useState(showInstantAnswer ? goodAnswerIndex : null),
|
|
143
|
-
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
144
|
-
userAnswerIndex = _useState2[0],
|
|
145
|
-
setUserAnswerIndex = _useState2[1];
|
|
146
|
-
|
|
147
|
-
var _useState3 = React.useState(showInstantAnswer),
|
|
148
|
-
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
149
|
-
showResults = _useState4[0],
|
|
150
|
-
setShowResults = _useState4[1]; // const [answerTransitionProps, setAnswerTransitionProps] = useState(null);
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
var _useState5 = React.useState(showInstantAnswer),
|
|
154
|
-
_useState6 = _slicedToArray__default["default"](_useState5, 2),
|
|
155
|
-
answerTransitionComplete = _useState6[0],
|
|
156
|
-
setAnswerTransitionComplete = _useState6[1];
|
|
157
|
-
|
|
158
|
-
var answered = userAnswerIndex !== null;
|
|
159
|
-
|
|
160
|
-
var _ref2 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
|
|
161
|
-
_ref2$good = _ref2.good,
|
|
162
|
-
hasUserAnsweredRight = _ref2$good === void 0 ? false : _ref2$good;
|
|
163
|
-
|
|
164
|
-
var isSplitted = layout === 'split';
|
|
165
|
-
var verticalAlign = isSplitted ? null : layout;
|
|
166
551
|
var transitionPlaying = current;
|
|
167
552
|
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
168
553
|
var backgroundPlaying = current && (isView || isEdit);
|
|
@@ -174,285 +559,664 @@ var QuizScreen = function QuizScreen(_ref) {
|
|
|
174
559
|
callToActionRef = _useResizeObserver.ref,
|
|
175
560
|
callToActionRect = _useResizeObserver.entry.contentRect;
|
|
176
561
|
|
|
177
|
-
var
|
|
178
|
-
|
|
179
|
-
callToActionHeight =
|
|
562
|
+
var _ref2 = callToActionRect || {},
|
|
563
|
+
_ref2$height = _ref2.height,
|
|
564
|
+
callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
|
|
565
|
+
|
|
566
|
+
var showInstantAnswer = isStatic || isCapture;
|
|
567
|
+
var goodAnswerIndex = answers !== null ? answers.findIndex(function (answer) {
|
|
568
|
+
return answer !== null && answer.good;
|
|
569
|
+
}) : null;
|
|
570
|
+
|
|
571
|
+
var _useState = React.useState(showInstantAnswer ? goodAnswerIndex : null),
|
|
572
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
573
|
+
userAnswerIndex = _useState2[0],
|
|
574
|
+
setUserAnswerIndex = _useState2[1];
|
|
180
575
|
|
|
181
576
|
var _useQuizCreate = data.useQuizCreate({
|
|
182
577
|
screenId: screenId
|
|
183
578
|
}),
|
|
184
579
|
submitQuiz = _useQuizCreate.create;
|
|
185
580
|
|
|
186
|
-
var onAnswerClick = React.useCallback(function (answerI) {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
if (userAnswerIndex === null) {
|
|
190
|
-
setUserAnswerIndex(answerI);
|
|
191
|
-
timeout = setTimeout(setShowResults, showResultsDelay, true);
|
|
192
|
-
var answer = answers[answerI];
|
|
193
|
-
trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
|
|
194
|
-
answer: answer,
|
|
195
|
-
answerIndex: answerI
|
|
196
|
-
});
|
|
581
|
+
var onAnswerClick = React.useCallback(function (answer, answerI) {
|
|
582
|
+
if (userAnswerIndex !== null) {
|
|
583
|
+
return;
|
|
197
584
|
}
|
|
198
585
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
};
|
|
204
|
-
}, [userAnswerIndex, setUserAnswerIndex,
|
|
586
|
+
setUserAnswerIndex(answerI);
|
|
587
|
+
trackScreenEvent('click_answer', "".concat(userAnswerIndex + 1, ": ").concat(answer.label.body), {
|
|
588
|
+
answer: answer,
|
|
589
|
+
answerIndex: answerI
|
|
590
|
+
});
|
|
591
|
+
}, [userAnswerIndex, setUserAnswerIndex, trackScreenEvent, answers]);
|
|
205
592
|
React.useEffect(function () {
|
|
206
593
|
if (!current && isEdit && userAnswerIndex !== null) {
|
|
207
594
|
setUserAnswerIndex(null);
|
|
208
|
-
setShowResults(false);
|
|
209
|
-
setAnswerTransitionComplete(false);
|
|
210
|
-
}
|
|
211
|
-
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex, setShowResults, setAnswerTransitionComplete]); // we get .answer's current and future height to animate its height
|
|
212
|
-
// we also get the right answer's Y to animate its position
|
|
213
|
-
|
|
214
|
-
var _useResizeObserver2 = hooks.useResizeObserver(),
|
|
215
|
-
answerRef = _useResizeObserver2.ref,
|
|
216
|
-
answerContentRect = _useResizeObserver2.entry.contentRect;
|
|
217
|
-
|
|
218
|
-
var _ref4 = answerContentRect || {},
|
|
219
|
-
answerHeight = _ref4.height;
|
|
220
|
-
|
|
221
|
-
var _useResizeObserver3 = hooks.useResizeObserver(),
|
|
222
|
-
rightAnswerRef = _useResizeObserver3.ref,
|
|
223
|
-
rightAnswerContentRect = _useResizeObserver3.entry.contentRect;
|
|
224
|
-
|
|
225
|
-
var _ref5 = rightAnswerContentRect || {},
|
|
226
|
-
rightAnswerHeight = _ref5.height;
|
|
227
|
-
|
|
228
|
-
var _useResizeObserver4 = hooks.useResizeObserver(),
|
|
229
|
-
resultRef = _useResizeObserver4.ref,
|
|
230
|
-
resultContentRect = _useResizeObserver4.entry.contentRect;
|
|
231
|
-
|
|
232
|
-
var _ref6 = resultContentRect || {},
|
|
233
|
-
resultHeight = _ref6.height;
|
|
234
|
-
|
|
235
|
-
var _useState7 = React.useState(0),
|
|
236
|
-
_useState8 = _slicedToArray__default["default"](_useState7, 2),
|
|
237
|
-
rightAnswerTop = _useState8[0],
|
|
238
|
-
setRightAnswerTop = _useState8[1];
|
|
239
|
-
|
|
240
|
-
React.useEffect(function () {
|
|
241
|
-
if (rightAnswerRef.current !== null) {
|
|
242
|
-
setRightAnswerTop(rightAnswerRef.current.offsetTop);
|
|
243
|
-
}
|
|
244
|
-
}, [rightAnswerHeight]); // when the animation is done, we set a state to remove animations props
|
|
245
|
-
// .results' position changes from absolute to relative
|
|
246
|
-
// the wrong answers are removed from DOM
|
|
247
|
-
|
|
248
|
-
React.useEffect(function () {
|
|
249
|
-
var timeout = null;
|
|
250
|
-
|
|
251
|
-
if (!showInstantAnswer && showResults) {
|
|
252
|
-
timeout = setTimeout(setAnswerTransitionComplete, resultsTransitionDuration, true);
|
|
253
595
|
}
|
|
254
|
-
|
|
255
|
-
return function () {
|
|
256
|
-
if (timeout) {
|
|
257
|
-
clearTimeout(timeout);
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
}, [showResults, resultsTransitionDuration, setAnswerTransitionComplete, showInstantAnswer]);
|
|
596
|
+
}, [isEdit, current, userAnswerIndex, setUserAnswerIndex]);
|
|
261
597
|
React.useEffect(function () {
|
|
262
598
|
if (userAnswerIndex !== null) {
|
|
263
|
-
var
|
|
264
|
-
|
|
265
|
-
isGood =
|
|
266
|
-
|
|
267
|
-
label =
|
|
599
|
+
var _ref3 = userAnswerIndex !== null && answers ? answers[userAnswerIndex] : {},
|
|
600
|
+
_ref3$good = _ref3.good,
|
|
601
|
+
isGood = _ref3$good === void 0 ? false : _ref3$good,
|
|
602
|
+
_ref3$label = _ref3.label,
|
|
603
|
+
label = _ref3$label === void 0 ? {} : _ref3$label;
|
|
268
604
|
|
|
269
|
-
var
|
|
270
|
-
|
|
271
|
-
body =
|
|
605
|
+
var _ref4 = label || {},
|
|
606
|
+
_ref4$body = _ref4.body,
|
|
607
|
+
body = _ref4$body === void 0 ? '' : _ref4$body;
|
|
272
608
|
|
|
273
609
|
submitQuiz({
|
|
274
610
|
choice: body || userAnswerIndex,
|
|
275
611
|
value: isGood ? 1 : 0
|
|
276
612
|
});
|
|
277
613
|
}
|
|
278
|
-
}, [userAnswerIndex, answers, submitQuiz]);
|
|
614
|
+
}, [userAnswerIndex, answers, submitQuiz]);
|
|
615
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
616
|
+
className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
617
|
+
"data-screen-ready": true
|
|
618
|
+
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
619
|
+
background: background,
|
|
620
|
+
width: width,
|
|
621
|
+
height: height,
|
|
622
|
+
playing: backgroundPlaying,
|
|
623
|
+
shouldLoad: backgroundShouldLoad
|
|
624
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
625
|
+
width: width,
|
|
626
|
+
height: height
|
|
627
|
+
}, /*#__PURE__*/React__default["default"].createElement(Question, {
|
|
628
|
+
question: question,
|
|
629
|
+
answers: answers,
|
|
630
|
+
result: result,
|
|
631
|
+
answeredIndex: userAnswerIndex,
|
|
632
|
+
buttonsStyle: buttonsStyle,
|
|
633
|
+
goodAnswerColor: goodAnswerColor,
|
|
634
|
+
badAnswerColor: badAnswerColor,
|
|
635
|
+
focusable: current && isView,
|
|
636
|
+
showInstantAnswer: showInstantAnswer,
|
|
637
|
+
withResult: true,
|
|
638
|
+
layout: layout,
|
|
639
|
+
callToActionHeight: callToActionHeight,
|
|
640
|
+
transitions: transitions,
|
|
641
|
+
transitionPlaying: transitionPlaying,
|
|
642
|
+
transitionStagger: transitionStagger,
|
|
643
|
+
transitionDisabled: transitionDisabled,
|
|
644
|
+
onAnswerClick: onAnswerClick,
|
|
645
|
+
className: styles$2.question,
|
|
646
|
+
style: !isPlaceholder ? {
|
|
647
|
+
padding: spacing,
|
|
648
|
+
paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
|
|
649
|
+
} : null
|
|
650
|
+
}), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
|
|
651
|
+
ref: callToActionRef,
|
|
652
|
+
className: styles$2.callToAction,
|
|
653
|
+
callToAction: callToAction,
|
|
654
|
+
animationDisabled: isPreview,
|
|
655
|
+
focusable: current && isView
|
|
656
|
+
}) : null));
|
|
657
|
+
};
|
|
279
658
|
|
|
280
|
-
|
|
281
|
-
|
|
659
|
+
QuizScreen.propTypes = propTypes$3;
|
|
660
|
+
QuizScreen.defaultProps = defaultProps$3;
|
|
661
|
+
|
|
662
|
+
var styles$1 = {"container":"micromag-screen-quiz-title-container","emptyDescription":"micromag-screen-quiz-title-emptyDescription","emptyTitle":"micromag-screen-quiz-title-emptyTitle","title":"micromag-screen-quiz-title-title","isPlaceholder":"micromag-screen-quiz-title-isPlaceholder"};
|
|
663
|
+
|
|
664
|
+
var propTypes$2 = {
|
|
665
|
+
title: core.PropTypes.textElement,
|
|
666
|
+
description: core.PropTypes.textElement,
|
|
667
|
+
layout: PropTypes__default["default"].string,
|
|
668
|
+
transitions: core.PropTypes.transitions,
|
|
669
|
+
transitionPlaying: PropTypes__default["default"].bool,
|
|
670
|
+
transitionStagger: PropTypes__default["default"].number,
|
|
671
|
+
transitionDisabled: PropTypes__default["default"].bool,
|
|
672
|
+
className: PropTypes__default["default"].string,
|
|
673
|
+
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
|
|
674
|
+
};
|
|
675
|
+
var defaultProps$2 = {
|
|
676
|
+
title: null,
|
|
677
|
+
description: null,
|
|
678
|
+
layout: null,
|
|
679
|
+
transitions: null,
|
|
680
|
+
transitionPlaying: false,
|
|
681
|
+
transitionStagger: 100,
|
|
682
|
+
transitionDisabled: false,
|
|
683
|
+
className: null,
|
|
684
|
+
style: null
|
|
685
|
+
};
|
|
686
|
+
|
|
687
|
+
var Title = function Title(_ref) {
|
|
688
|
+
var layout = _ref.layout,
|
|
689
|
+
title = _ref.title,
|
|
690
|
+
description = _ref.description,
|
|
691
|
+
transitions = _ref.transitions,
|
|
692
|
+
transitionPlaying = _ref.transitionPlaying,
|
|
693
|
+
transitionStagger = _ref.transitionStagger,
|
|
694
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
695
|
+
className = _ref.className,
|
|
696
|
+
style = _ref.style;
|
|
697
|
+
var isSplitted = layout === 'split';
|
|
698
|
+
var verticalAlign = isSplitted ? null : layout;
|
|
699
|
+
var hasTitle = utils.isTextFilled(title);
|
|
700
|
+
var hasDescription = utils.isTextFilled(description);
|
|
701
|
+
return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
702
|
+
className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
703
|
+
fullscreen: true,
|
|
704
|
+
verticalAlign: verticalAlign,
|
|
705
|
+
style: style
|
|
706
|
+
}, [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
707
|
+
key: "title",
|
|
282
708
|
placeholder: "title",
|
|
283
709
|
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
284
|
-
id: "
|
|
710
|
+
id: "BSTWf8",
|
|
285
711
|
defaultMessage: [{
|
|
286
712
|
"type": 0,
|
|
287
|
-
"value": "
|
|
713
|
+
"value": "Title"
|
|
714
|
+
}]
|
|
715
|
+
}),
|
|
716
|
+
emptyClassName: styles$1.emptyTitle,
|
|
717
|
+
isEmpty: !hasTitle
|
|
718
|
+
}, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
719
|
+
transitions: transitions,
|
|
720
|
+
playing: transitionPlaying,
|
|
721
|
+
disabled: transitionDisabled
|
|
722
|
+
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
|
|
723
|
+
className: styles$1.title
|
|
724
|
+
}))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
725
|
+
key: "spacer"
|
|
726
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
727
|
+
key: "description",
|
|
728
|
+
placeholder: "text",
|
|
729
|
+
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
730
|
+
id: "hoDz0O",
|
|
731
|
+
defaultMessage: [{
|
|
732
|
+
"type": 0,
|
|
733
|
+
"value": "Description"
|
|
734
|
+
}]
|
|
735
|
+
}),
|
|
736
|
+
emptyClassName: styles$1.emptyDescription,
|
|
737
|
+
isEmpty: !hasDescription
|
|
738
|
+
}, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
739
|
+
transitions: transitions,
|
|
740
|
+
playing: transitionPlaying,
|
|
741
|
+
disabled: transitionDisabled,
|
|
742
|
+
delay: transitionStagger
|
|
743
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
|
|
744
|
+
className: styles$1.description
|
|
745
|
+
}))) : null)]);
|
|
746
|
+
};
|
|
747
|
+
|
|
748
|
+
Title.propTypes = propTypes$2;
|
|
749
|
+
Title.defaultProps = defaultProps$2;
|
|
750
|
+
|
|
751
|
+
var styles = {"container":"micromag-screen-quiz-results-container","emptyDescription":"micromag-screen-quiz-results-emptyDescription","emptyTitle":"micromag-screen-quiz-results-emptyTitle","title":"micromag-screen-quiz-results-title","isPlaceholder":"micromag-screen-quiz-results-isPlaceholder"};
|
|
752
|
+
|
|
753
|
+
var propTypes$1 = {
|
|
754
|
+
title: core.PropTypes.textElement,
|
|
755
|
+
description: core.PropTypes.textElement,
|
|
756
|
+
layout: PropTypes__default["default"].string,
|
|
757
|
+
transitions: core.PropTypes.transitions,
|
|
758
|
+
transitionPlaying: PropTypes__default["default"].bool,
|
|
759
|
+
transitionStagger: PropTypes__default["default"].number,
|
|
760
|
+
transitionDisabled: PropTypes__default["default"].bool,
|
|
761
|
+
className: PropTypes__default["default"].string,
|
|
762
|
+
style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
|
|
763
|
+
};
|
|
764
|
+
var defaultProps$1 = {
|
|
765
|
+
title: null,
|
|
766
|
+
description: null,
|
|
767
|
+
layout: null,
|
|
768
|
+
transitions: null,
|
|
769
|
+
transitionPlaying: false,
|
|
770
|
+
transitionStagger: 100,
|
|
771
|
+
transitionDisabled: false,
|
|
772
|
+
className: null,
|
|
773
|
+
style: null
|
|
774
|
+
};
|
|
775
|
+
|
|
776
|
+
var Results = function Results(_ref) {
|
|
777
|
+
var layout = _ref.layout,
|
|
778
|
+
title = _ref.title,
|
|
779
|
+
description = _ref.description,
|
|
780
|
+
transitions = _ref.transitions,
|
|
781
|
+
transitionPlaying = _ref.transitionPlaying,
|
|
782
|
+
transitionStagger = _ref.transitionStagger,
|
|
783
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
784
|
+
className = _ref.className,
|
|
785
|
+
style = _ref.style;
|
|
786
|
+
var isSplitted = layout === 'split';
|
|
787
|
+
var verticalAlign = isSplitted ? null : layout;
|
|
788
|
+
var hasTitle = utils.isTextFilled(title);
|
|
789
|
+
var hasDescription = utils.isTextFilled(description);
|
|
790
|
+
return /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
791
|
+
className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
|
|
792
|
+
fullscreen: true,
|
|
793
|
+
verticalAlign: verticalAlign,
|
|
794
|
+
style: style
|
|
795
|
+
}, [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
796
|
+
key: "title",
|
|
797
|
+
placeholder: "title",
|
|
798
|
+
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
799
|
+
id: "BSTWf8",
|
|
800
|
+
defaultMessage: [{
|
|
801
|
+
"type": 0,
|
|
802
|
+
"value": "Title"
|
|
288
803
|
}]
|
|
289
804
|
}),
|
|
290
805
|
emptyClassName: styles.emptyTitle,
|
|
291
|
-
isEmpty: !
|
|
292
|
-
},
|
|
806
|
+
isEmpty: !hasTitle
|
|
807
|
+
}, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
293
808
|
transitions: transitions,
|
|
294
809
|
playing: transitionPlaying,
|
|
295
810
|
disabled: transitionDisabled
|
|
296
|
-
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({},
|
|
297
|
-
className: styles.
|
|
298
|
-
}))) : null)]
|
|
811
|
+
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({}, title, {
|
|
812
|
+
className: styles.title
|
|
813
|
+
}))) : null), isSplitted ? /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
|
|
814
|
+
key: "spacer"
|
|
815
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
816
|
+
key: "description",
|
|
817
|
+
placeholder: "text",
|
|
818
|
+
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
819
|
+
id: "hoDz0O",
|
|
820
|
+
defaultMessage: [{
|
|
821
|
+
"type": 0,
|
|
822
|
+
"value": "Description"
|
|
823
|
+
}]
|
|
824
|
+
}),
|
|
825
|
+
emptyClassName: styles.emptyDescription,
|
|
826
|
+
isEmpty: !hasDescription
|
|
827
|
+
}, hasTitle ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
828
|
+
transitions: transitions,
|
|
829
|
+
playing: transitionPlaying,
|
|
830
|
+
disabled: transitionDisabled,
|
|
831
|
+
delay: transitionStagger
|
|
832
|
+
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, description, {
|
|
833
|
+
className: styles.description
|
|
834
|
+
}))) : null)]);
|
|
835
|
+
};
|
|
836
|
+
|
|
837
|
+
Results.propTypes = propTypes$1;
|
|
838
|
+
Results.defaultProps = defaultProps$1;
|
|
839
|
+
|
|
840
|
+
var propTypes = {
|
|
841
|
+
id: PropTypes__default["default"].string,
|
|
842
|
+
layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom', 'split']),
|
|
843
|
+
introLayout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom', 'split']),
|
|
844
|
+
title: core.PropTypes.textElement,
|
|
845
|
+
description: core.PropTypes.textElement,
|
|
846
|
+
questions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
847
|
+
text: core.PropTypes.textElement,
|
|
848
|
+
answers: core.PropTypes.quizAnswers
|
|
849
|
+
})),
|
|
850
|
+
results: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
851
|
+
title: core.PropTypes.textElement,
|
|
852
|
+
description: core.PropTypes.textElement
|
|
853
|
+
})),
|
|
854
|
+
buttonsStyle: core.PropTypes.boxStyle,
|
|
855
|
+
goodAnswerColor: core.PropTypes.color,
|
|
856
|
+
badAnswerColor: core.PropTypes.color,
|
|
857
|
+
spacing: PropTypes__default["default"].number,
|
|
858
|
+
background: core.PropTypes.backgroundElement,
|
|
859
|
+
introBackground: core.PropTypes.backgroundElement,
|
|
860
|
+
callToAction: core.PropTypes.callToAction,
|
|
861
|
+
current: PropTypes__default["default"].bool,
|
|
862
|
+
active: PropTypes__default["default"].bool,
|
|
863
|
+
transitions: core.PropTypes.transitions,
|
|
864
|
+
transitionStagger: PropTypes__default["default"].number,
|
|
865
|
+
type: PropTypes__default["default"].string,
|
|
866
|
+
className: PropTypes__default["default"].string
|
|
867
|
+
};
|
|
868
|
+
var defaultProps = {
|
|
869
|
+
id: null,
|
|
870
|
+
layout: 'middle',
|
|
871
|
+
introLayout: null,
|
|
872
|
+
title: null,
|
|
873
|
+
description: null,
|
|
874
|
+
questions: null,
|
|
875
|
+
results: null,
|
|
876
|
+
buttonsStyle: null,
|
|
877
|
+
goodAnswerColor: null,
|
|
878
|
+
badAnswerColor: null,
|
|
879
|
+
spacing: 20,
|
|
880
|
+
background: null,
|
|
881
|
+
introBackground: null,
|
|
882
|
+
callToAction: null,
|
|
883
|
+
current: true,
|
|
884
|
+
active: true,
|
|
885
|
+
transitions: null,
|
|
886
|
+
transitionStagger: 100,
|
|
887
|
+
type: null,
|
|
888
|
+
className: null
|
|
889
|
+
};
|
|
890
|
+
|
|
891
|
+
var QuizMultipleScreen = function QuizMultipleScreen(_ref) {
|
|
892
|
+
var _ref12;
|
|
893
|
+
|
|
894
|
+
var id = _ref.id,
|
|
895
|
+
layout = _ref.layout,
|
|
896
|
+
introLayout = _ref.introLayout,
|
|
897
|
+
title = _ref.title,
|
|
898
|
+
description = _ref.description,
|
|
899
|
+
questions = _ref.questions,
|
|
900
|
+
results = _ref.results,
|
|
901
|
+
buttonsStyle = _ref.buttonsStyle,
|
|
902
|
+
goodAnswerColor = _ref.goodAnswerColor,
|
|
903
|
+
badAnswerColor = _ref.badAnswerColor,
|
|
904
|
+
spacing = _ref.spacing,
|
|
905
|
+
background = _ref.background,
|
|
906
|
+
introBackground = _ref.introBackground,
|
|
907
|
+
callToAction = _ref.callToAction,
|
|
908
|
+
current = _ref.current,
|
|
909
|
+
active = _ref.active,
|
|
910
|
+
transitions = _ref.transitions,
|
|
911
|
+
transitionStagger = _ref.transitionStagger,
|
|
912
|
+
type = _ref.type,
|
|
913
|
+
className = _ref.className;
|
|
914
|
+
var screenId = id || 'screen-id';
|
|
915
|
+
var trackScreenEvent = hooks.useTrackScreenEvent(type);
|
|
916
|
+
|
|
917
|
+
var _useScreenSize = contexts.useScreenSize(),
|
|
918
|
+
width = _useScreenSize.width,
|
|
919
|
+
height = _useScreenSize.height,
|
|
920
|
+
menuOverScreen = _useScreenSize.menuOverScreen;
|
|
921
|
+
|
|
922
|
+
var _useViewer = contexts.useViewer(),
|
|
923
|
+
menuSize = _useViewer.menuSize;
|
|
924
|
+
|
|
925
|
+
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
926
|
+
isView = _useScreenRenderConte.isView,
|
|
927
|
+
isPreview = _useScreenRenderConte.isPreview,
|
|
928
|
+
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
929
|
+
isEdit = _useScreenRenderConte.isEdit,
|
|
930
|
+
isStatic = _useScreenRenderConte.isStatic,
|
|
931
|
+
isCapture = _useScreenRenderConte.isCapture;
|
|
932
|
+
|
|
933
|
+
var screenState = contexts.useScreenState();
|
|
934
|
+
|
|
935
|
+
var _ref2 = screenState !== null ? screenState.split('.') : [],
|
|
936
|
+
_ref3 = _slicedToArray__default["default"](_ref2, 2),
|
|
937
|
+
_ref3$ = _ref3[0],
|
|
938
|
+
stateId = _ref3$ === void 0 ? null : _ref3$,
|
|
939
|
+
_ref3$2 = _ref3[1],
|
|
940
|
+
stateIndex = _ref3$2 === void 0 ? 0 : _ref3$2;
|
|
941
|
+
|
|
942
|
+
var transitionPlaying = current;
|
|
943
|
+
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
944
|
+
var backgroundPlaying = current && (isView || isEdit);
|
|
945
|
+
var backgroundShouldLoad = current || active || !isView; // Call to Action
|
|
946
|
+
|
|
947
|
+
var hasCallToAction = callToAction !== null && callToAction.active === true;
|
|
948
|
+
|
|
949
|
+
var _useResizeObserver = hooks.useResizeObserver(),
|
|
950
|
+
callToActionRef = _useResizeObserver.ref,
|
|
951
|
+
callToActionRect = _useResizeObserver.entry.contentRect;
|
|
952
|
+
|
|
953
|
+
var _ref4 = callToActionRect || {},
|
|
954
|
+
_ref4$height = _ref4.height,
|
|
955
|
+
callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
|
|
956
|
+
|
|
957
|
+
var showInstantAnswer = isStatic || isCapture;
|
|
958
|
+
var hasIntro = title !== null || description !== null || isEdit || stateId === 'intro';
|
|
959
|
+
|
|
960
|
+
var _useState = React.useState(null),
|
|
961
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
962
|
+
userAnswers = _useState2[0],
|
|
963
|
+
setUserAnswers = _useState2[1];
|
|
964
|
+
|
|
965
|
+
var initialQuestionIndex = stateId === 'questions' ? parseInt(stateIndex, 10) : stateId;
|
|
966
|
+
|
|
967
|
+
var _useState3 = React.useState(initialQuestionIndex !== null || !hasIntro || isPlaceholder ? initialQuestionIndex || 0 : 'intro'),
|
|
968
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
969
|
+
questionIndex = _useState4[0],
|
|
970
|
+
setQuestionIndex = _useState4[1];
|
|
971
|
+
|
|
972
|
+
var onAnswerClick = React.useCallback(function (answer, answerIndex) {
|
|
973
|
+
setUserAnswers(_objectSpread__default["default"](_objectSpread__default["default"]({}, userAnswers), {}, _defineProperty__default["default"]({}, questionIndex, answerIndex)));
|
|
974
|
+
trackScreenEvent('click_answer', "Question #".concat(questionIndex + 1, " ").concat(answerIndex + 1, ": ").concat(answer.label.body), {
|
|
975
|
+
question: questions[questionIndex],
|
|
976
|
+
questionIndex: questionIndex,
|
|
977
|
+
answer: answer,
|
|
978
|
+
answerIndex: answerIndex
|
|
979
|
+
});
|
|
980
|
+
}, [userAnswers, setUserAnswers, trackScreenEvent, questions, questionIndex]);
|
|
981
|
+
var onAnswerTransitionEnd = React.useCallback(function () {
|
|
982
|
+
var nextIndex = questionIndex + 1;
|
|
983
|
+
var questionsCount = questions.length;
|
|
984
|
+
|
|
985
|
+
if (nextIndex < questionsCount) {
|
|
986
|
+
setQuestionIndex(nextIndex);
|
|
987
|
+
} else if (nextIndex === questionsCount) {
|
|
988
|
+
setQuestionIndex('results');
|
|
989
|
+
}
|
|
990
|
+
}, [questions, questionIndex, setQuestionIndex]);
|
|
991
|
+
React.useEffect(function () {
|
|
992
|
+
if (!current && isEdit && userAnswers !== null) {
|
|
993
|
+
setUserAnswers(null);
|
|
994
|
+
}
|
|
995
|
+
}, [isEdit, current, userAnswers, setUserAnswers]);
|
|
996
|
+
var hasQuestions = questions !== null && questions.length > 0;
|
|
997
|
+
var currentQuestion = hasQuestions ? questions[questionIndex] || {} : {};
|
|
998
|
+
var _currentQuestion$text = currentQuestion.text,
|
|
999
|
+
text = _currentQuestion$text === void 0 ? null : _currentQuestion$text,
|
|
1000
|
+
_currentQuestion$answ = currentQuestion.answers,
|
|
1001
|
+
answers = _currentQuestion$answ === void 0 ? [] : _currentQuestion$answ,
|
|
1002
|
+
_currentQuestion$back = currentQuestion.background,
|
|
1003
|
+
questionBackground = _currentQuestion$back === void 0 ? null : _currentQuestion$back,
|
|
1004
|
+
_currentQuestion$layo = currentQuestion.layout,
|
|
1005
|
+
questionLayout = _currentQuestion$layo === void 0 ? null : _currentQuestion$layo;
|
|
1006
|
+
var currentAnsweredIndex = userAnswers !== null && typeof userAnswers[questionIndex] !== 'undefined' ? userAnswers[questionIndex] : null;
|
|
1007
|
+
var currentPoints = React.useMemo(function () {
|
|
1008
|
+
return userAnswers !== null ? Object.keys(userAnswers).reduce(function (totalPoints, answerQuestionIndex) {
|
|
1009
|
+
var _ref5 = questions !== null ? questions[answerQuestionIndex] || {} : {},
|
|
1010
|
+
_ref5$answers = _ref5.answers,
|
|
1011
|
+
questionAnswers = _ref5$answers === void 0 ? [] : _ref5$answers;
|
|
1012
|
+
|
|
1013
|
+
var answerIndex = userAnswers[answerQuestionIndex];
|
|
1014
|
+
|
|
1015
|
+
var _ref6 = questionAnswers[answerIndex] || {},
|
|
1016
|
+
_ref6$points = _ref6.points,
|
|
1017
|
+
points = _ref6$points === void 0 ? 0 : _ref6$points;
|
|
1018
|
+
|
|
1019
|
+
return points + totalPoints;
|
|
1020
|
+
}, 0) : 0;
|
|
1021
|
+
}, [userAnswers, questions]);
|
|
1022
|
+
var isIntro = hasIntro && questionIndex === 'intro';
|
|
1023
|
+
var isResults = questionIndex === 'results';
|
|
1024
|
+
var isQuestion = !isIntro && !isResults;
|
|
1025
|
+
var currentResult = React.useMemo(function () {
|
|
1026
|
+
if (!isResults) {
|
|
1027
|
+
return null;
|
|
1028
|
+
}
|
|
1029
|
+
|
|
1030
|
+
if (stateId === 'results') {
|
|
1031
|
+
return (results || [])[parseInt(stateIndex, 10)] || null;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
return (results || []).sort(function (_ref7, _ref8) {
|
|
1035
|
+
var _ref7$points = _ref7.points,
|
|
1036
|
+
pointsA = _ref7$points === void 0 ? 0 : _ref7$points;
|
|
1037
|
+
var _ref8$points = _ref8.points,
|
|
1038
|
+
pointsB = _ref8$points === void 0 ? 0 : _ref8$points;
|
|
1039
|
+
|
|
1040
|
+
if (pointsA === pointsB) {
|
|
1041
|
+
return 0;
|
|
1042
|
+
}
|
|
299
1043
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
1044
|
+
return pointsA > pointsB ? 1 : -1;
|
|
1045
|
+
}).reduce(function (lastResult, result) {
|
|
1046
|
+
var _ref9 = lastResult || {},
|
|
1047
|
+
_ref9$points = _ref9.points,
|
|
1048
|
+
lastPoints = _ref9$points === void 0 ? 0 : _ref9$points;
|
|
305
1049
|
|
|
1050
|
+
var _ref10 = result || {},
|
|
1051
|
+
_ref10$points = _ref10.points,
|
|
1052
|
+
points = _ref10$points === void 0 ? 0 : _ref10$points;
|
|
306
1053
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
ref: answerRef,
|
|
311
|
-
style: answered && !answerTransitionComplete && (isView || isEdit) ? {
|
|
312
|
-
transitionDuration: "".concat(resultsTransitionDuration, "ms"),
|
|
313
|
-
height: !showResults ? answerHeight : rightAnswerHeight + resultHeight
|
|
314
|
-
} : null
|
|
315
|
-
}, answers !== null || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
316
|
-
className: styles.items
|
|
317
|
-
}, (isPlaceholder ? _toConsumableArray__default["default"](new Array(2)) : answers).map(function (answer, answerI) {
|
|
318
|
-
var _ref12;
|
|
1054
|
+
return currentPoints >= lastPoints && currentPoints <= points ? result : lastResult;
|
|
1055
|
+
}, null);
|
|
1056
|
+
}, [isResults, results, currentPoints, stateId, stateIndex]);
|
|
319
1057
|
|
|
320
|
-
|
|
1058
|
+
var _ref11 = currentResult || {},
|
|
1059
|
+
_ref11$background = _ref11.background,
|
|
1060
|
+
resultBackground = _ref11$background === void 0 ? null : _ref11$background,
|
|
1061
|
+
_ref11$layout = _ref11.layout,
|
|
1062
|
+
resultLayout = _ref11$layout === void 0 ? null : _ref11$layout;
|
|
321
1063
|
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
label = _ref9$label === void 0 ? null : _ref9$label,
|
|
327
|
-
_ref9$buttonStyle = _ref9.buttonStyle,
|
|
328
|
-
answerButtonStyle = _ref9$buttonStyle === void 0 ? null : _ref9$buttonStyle;
|
|
1064
|
+
var _useQuizCreate = data.useQuizCreate({
|
|
1065
|
+
screenId: screenId
|
|
1066
|
+
}),
|
|
1067
|
+
submitQuiz = _useQuizCreate.create;
|
|
329
1068
|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
1069
|
+
React.useEffect(function () {
|
|
1070
|
+
if (!isResults || isEdit) {
|
|
1071
|
+
return;
|
|
1072
|
+
}
|
|
333
1073
|
|
|
334
|
-
|
|
335
|
-
|
|
1074
|
+
submitQuiz({
|
|
1075
|
+
choice: userAnswers,
|
|
1076
|
+
value: currentPoints
|
|
1077
|
+
});
|
|
1078
|
+
}, [isResults, userAnswers, submitQuiz]); // Switch state
|
|
336
1079
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
className: styles.resultIcon,
|
|
377
|
-
style: utils.getStyleFromColor(goodAnswerColor, 'backgroundColor')
|
|
378
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
379
|
-
className: styles.faIcon,
|
|
380
|
-
icon: freeSolidSvgIcons.faCheck
|
|
381
|
-
})) : null, answered && !hasUserAnsweredRight && userAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
382
|
-
className: styles.resultIcon,
|
|
383
|
-
style: utils.getStyleFromColor(badAnswerColor, 'backgroundColor')
|
|
384
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
385
|
-
className: styles.faIcon,
|
|
386
|
-
icon: freeSolidSvgIcons.faTimes
|
|
387
|
-
})) : null, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
|
|
388
|
-
className: styles.optionLabel
|
|
389
|
-
})))) : null)));
|
|
390
|
-
})) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
391
|
-
className: styles.result,
|
|
392
|
-
ref: resultRef
|
|
393
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
394
|
-
className: styles.resultContent
|
|
395
|
-
}, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
396
|
-
emptyLabel: answered ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
397
|
-
id: "li7ADr",
|
|
398
|
-
defaultMessage: [{
|
|
399
|
-
"type": 0,
|
|
400
|
-
"value": "Result"
|
|
401
|
-
}]
|
|
402
|
-
}) : null,
|
|
403
|
-
isEmpty: answered && !hasResult,
|
|
404
|
-
emptyClassName: styles.emptyResult
|
|
405
|
-
}, hasResult && answers !== null ? /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
|
|
406
|
-
transitions: transitions,
|
|
407
|
-
playing: transitionPlaying,
|
|
408
|
-
delay: (1 + answers.length) * transitionStagger,
|
|
409
|
-
disabled: transitionDisabled
|
|
410
|
-
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, result, {
|
|
411
|
-
className: styles.resultText
|
|
412
|
-
})), hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
413
|
-
style: {
|
|
414
|
-
height: callToActionHeight
|
|
1080
|
+
React.useEffect(function () {
|
|
1081
|
+
if (!isEdit && !isPreview) {
|
|
1082
|
+
return;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
if (stateId === 'questions') {
|
|
1086
|
+
setQuestionIndex(parseInt(stateIndex, 10));
|
|
1087
|
+
} else if (stateId === 'results') {
|
|
1088
|
+
setQuestionIndex('results');
|
|
1089
|
+
} else if (stateId === 'intro') {
|
|
1090
|
+
setQuestionIndex('intro');
|
|
1091
|
+
}
|
|
1092
|
+
}, [stateId, stateIndex, isEdit, setQuestionIndex]);
|
|
1093
|
+
var finalBackground = background;
|
|
1094
|
+
var backgroundKey = 'background';
|
|
1095
|
+
|
|
1096
|
+
if (isIntro && introBackground !== null) {
|
|
1097
|
+
finalBackground = introBackground;
|
|
1098
|
+
backgroundKey = 'results';
|
|
1099
|
+
} else if (isResults && resultBackground !== null) {
|
|
1100
|
+
finalBackground = resultBackground;
|
|
1101
|
+
backgroundKey = 'results';
|
|
1102
|
+
} else if (isQuestion && questionBackground !== null) {
|
|
1103
|
+
finalBackground = questionBackground;
|
|
1104
|
+
backgroundKey = "question_".concat(questionIndex);
|
|
1105
|
+
} // Transition direction
|
|
1106
|
+
|
|
1107
|
+
|
|
1108
|
+
var lastQuestionIndexRef = React.useRef(questionIndex);
|
|
1109
|
+
var direction = React.useMemo(function () {
|
|
1110
|
+
if (questionIndex === lastQuestionIndexRef.current) {
|
|
1111
|
+
return null;
|
|
1112
|
+
}
|
|
1113
|
+
|
|
1114
|
+
var lastQuestionIndex = lastQuestionIndexRef.current;
|
|
1115
|
+
lastQuestionIndexRef.current = questionIndex;
|
|
1116
|
+
|
|
1117
|
+
if (questionIndex === 'intro' || lastQuestionIndex === 'results' || lastQuestionIndex > questionIndex) {
|
|
1118
|
+
return 'left';
|
|
415
1119
|
}
|
|
416
|
-
|
|
1120
|
+
|
|
1121
|
+
lastQuestionIndexRef.current = questionIndex;
|
|
1122
|
+
return 'right';
|
|
1123
|
+
}, [questionIndex]);
|
|
417
1124
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
418
|
-
className: classNames__default["default"]([styles.container, (
|
|
1125
|
+
className: classNames__default["default"]([styles$2.container, (_ref12 = {}, _defineProperty__default["default"](_ref12, styles$2[direction], direction !== null), _defineProperty__default["default"](_ref12, className, className !== null), _ref12)]),
|
|
419
1126
|
"data-screen-ready": true
|
|
420
|
-
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(
|
|
421
|
-
|
|
1127
|
+
}, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
1128
|
+
key: backgroundKey,
|
|
1129
|
+
classNames: styles$2,
|
|
1130
|
+
timeout: 1000
|
|
1131
|
+
}, /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
1132
|
+
background: finalBackground,
|
|
422
1133
|
width: width,
|
|
423
1134
|
height: height,
|
|
424
1135
|
playing: backgroundPlaying,
|
|
425
|
-
shouldLoad: backgroundShouldLoad
|
|
426
|
-
|
|
1136
|
+
shouldLoad: backgroundShouldLoad,
|
|
1137
|
+
className: styles$2.background
|
|
1138
|
+
}))) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
427
1139
|
width: width,
|
|
428
1140
|
height: height
|
|
429
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
1141
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, [isIntro ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
1142
|
+
key: "intro",
|
|
1143
|
+
classNames: styles$2,
|
|
1144
|
+
timeout: 1000
|
|
1145
|
+
}, /*#__PURE__*/React__default["default"].createElement(Title, {
|
|
1146
|
+
title: title,
|
|
1147
|
+
description: description,
|
|
1148
|
+
layout: introLayout || layout,
|
|
1149
|
+
transitions: transitions,
|
|
1150
|
+
transitionPlaying: transitionPlaying,
|
|
1151
|
+
transitionStagger: transitionStagger,
|
|
1152
|
+
transitionDisabled: transitionDisabled,
|
|
1153
|
+
className: styles$2.intro,
|
|
433
1154
|
style: !isPlaceholder ? {
|
|
434
1155
|
padding: spacing,
|
|
435
1156
|
paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
|
|
436
1157
|
} : null
|
|
437
|
-
}
|
|
1158
|
+
})) : null, isQuestion ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
1159
|
+
key: "question-".concat(questionIndex),
|
|
1160
|
+
classNames: styles$2,
|
|
1161
|
+
timeout: 1000
|
|
1162
|
+
}, /*#__PURE__*/React__default["default"].createElement(Question, {
|
|
1163
|
+
index: questionIndex,
|
|
1164
|
+
totalCount: (questions || []).length,
|
|
1165
|
+
question: text,
|
|
1166
|
+
answers: answers,
|
|
1167
|
+
answeredIndex: currentAnsweredIndex,
|
|
1168
|
+
buttonsStyle: buttonsStyle,
|
|
1169
|
+
goodAnswerColor: goodAnswerColor,
|
|
1170
|
+
badAnswerColor: badAnswerColor,
|
|
1171
|
+
focusable: current && isView,
|
|
1172
|
+
showInstantAnswer: showInstantAnswer,
|
|
1173
|
+
layout: questionLayout || layout,
|
|
1174
|
+
withoutGoodAnswer: true,
|
|
1175
|
+
callToActionHeight: callToActionHeight,
|
|
1176
|
+
transitions: transitions,
|
|
1177
|
+
transitionPlaying: transitionPlaying,
|
|
1178
|
+
transitionStagger: transitionStagger,
|
|
1179
|
+
transitionDisabled: transitionDisabled,
|
|
1180
|
+
onAnswerClick: onAnswerClick,
|
|
1181
|
+
onAnswerTransitionEnd: onAnswerTransitionEnd,
|
|
1182
|
+
className: styles$2.question,
|
|
1183
|
+
style: !isPlaceholder ? {
|
|
1184
|
+
padding: spacing,
|
|
1185
|
+
paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
|
|
1186
|
+
} : null
|
|
1187
|
+
})) : null, isResults ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
1188
|
+
key: "results",
|
|
1189
|
+
classNames: styles$2,
|
|
1190
|
+
timeout: 2000
|
|
1191
|
+
}, /*#__PURE__*/React__default["default"].createElement(Results, Object.assign({}, currentResult, {
|
|
1192
|
+
layout: resultLayout || layout,
|
|
1193
|
+
transitions: transitions,
|
|
1194
|
+
transitionPlaying: transitionPlaying,
|
|
1195
|
+
transitionStagger: transitionStagger,
|
|
1196
|
+
transitionDisabled: transitionDisabled,
|
|
1197
|
+
className: styles$2.results,
|
|
1198
|
+
style: !isPlaceholder ? {
|
|
1199
|
+
padding: spacing,
|
|
1200
|
+
paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
|
|
1201
|
+
} : null
|
|
1202
|
+
}))) : null]), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
|
|
438
1203
|
ref: callToActionRef,
|
|
439
|
-
className: styles.callToAction,
|
|
1204
|
+
className: styles$2.callToAction,
|
|
440
1205
|
callToAction: callToAction,
|
|
441
|
-
disabled: !answerTransitionComplete,
|
|
442
1206
|
animationDisabled: isPreview,
|
|
443
1207
|
focusable: current && isView
|
|
444
1208
|
}) : null));
|
|
445
1209
|
};
|
|
446
1210
|
|
|
447
|
-
|
|
448
|
-
|
|
1211
|
+
QuizMultipleScreen.propTypes = propTypes;
|
|
1212
|
+
QuizMultipleScreen.defaultProps = defaultProps;
|
|
449
1213
|
|
|
450
|
-
var definition = {
|
|
1214
|
+
var definition = [{
|
|
451
1215
|
id: 'quiz',
|
|
452
1216
|
type: 'screen',
|
|
453
1217
|
group: {
|
|
454
1218
|
label: reactIntl.defineMessage({
|
|
455
|
-
id: "
|
|
1219
|
+
id: "ZiWlL6",
|
|
456
1220
|
defaultMessage: [{
|
|
457
1221
|
"type": 0,
|
|
458
1222
|
"value": "Questions"
|
|
@@ -549,7 +1313,7 @@ var definition = {
|
|
|
549
1313
|
}]
|
|
550
1314
|
}),
|
|
551
1315
|
field: {
|
|
552
|
-
type: '
|
|
1316
|
+
type: 'box-style'
|
|
553
1317
|
}
|
|
554
1318
|
}, {
|
|
555
1319
|
name: 'goodAnswerColor',
|
|
@@ -591,7 +1355,259 @@ var definition = {
|
|
|
591
1355
|
}
|
|
592
1356
|
}
|
|
593
1357
|
}]
|
|
594
|
-
}
|
|
1358
|
+
}, {
|
|
1359
|
+
id: 'quiz-multiple',
|
|
1360
|
+
type: 'screen',
|
|
1361
|
+
group: {
|
|
1362
|
+
label: reactIntl.defineMessage({
|
|
1363
|
+
id: "ZiWlL6",
|
|
1364
|
+
defaultMessage: [{
|
|
1365
|
+
"type": 0,
|
|
1366
|
+
"value": "Questions"
|
|
1367
|
+
}]
|
|
1368
|
+
}),
|
|
1369
|
+
order: 7
|
|
1370
|
+
},
|
|
1371
|
+
title: reactIntl.defineMessage({
|
|
1372
|
+
id: "ACkeH6",
|
|
1373
|
+
defaultMessage: [{
|
|
1374
|
+
"type": 0,
|
|
1375
|
+
"value": "Quiz with multiple questions"
|
|
1376
|
+
}]
|
|
1377
|
+
}),
|
|
1378
|
+
component: QuizMultipleScreen,
|
|
1379
|
+
layouts: ['top', 'middle', 'bottom', 'split'],
|
|
1380
|
+
states: [{
|
|
1381
|
+
id: 'intro',
|
|
1382
|
+
label: reactIntl.defineMessage({
|
|
1383
|
+
id: "BgrRxZ",
|
|
1384
|
+
defaultMessage: [{
|
|
1385
|
+
"type": 0,
|
|
1386
|
+
"value": "Intro"
|
|
1387
|
+
}]
|
|
1388
|
+
}),
|
|
1389
|
+
fields: [{
|
|
1390
|
+
name: 'introLayout',
|
|
1391
|
+
type: 'screen-layout',
|
|
1392
|
+
defaultValue: 'middle',
|
|
1393
|
+
screenState: 'intro',
|
|
1394
|
+
label: reactIntl.defineMessage({
|
|
1395
|
+
id: "4iBXj2",
|
|
1396
|
+
defaultMessage: [{
|
|
1397
|
+
"type": 0,
|
|
1398
|
+
"value": "Layout"
|
|
1399
|
+
}]
|
|
1400
|
+
})
|
|
1401
|
+
}, {
|
|
1402
|
+
name: 'title',
|
|
1403
|
+
type: 'heading-element',
|
|
1404
|
+
theme: {
|
|
1405
|
+
textStyle: 'heading2'
|
|
1406
|
+
},
|
|
1407
|
+
label: reactIntl.defineMessage({
|
|
1408
|
+
id: "+AEVbJ",
|
|
1409
|
+
defaultMessage: [{
|
|
1410
|
+
"type": 0,
|
|
1411
|
+
"value": "Title"
|
|
1412
|
+
}]
|
|
1413
|
+
})
|
|
1414
|
+
}, {
|
|
1415
|
+
name: 'description',
|
|
1416
|
+
type: 'text-element',
|
|
1417
|
+
theme: {
|
|
1418
|
+
textStyle: 'text'
|
|
1419
|
+
},
|
|
1420
|
+
label: reactIntl.defineMessage({
|
|
1421
|
+
id: "ZCe0r4",
|
|
1422
|
+
defaultMessage: [{
|
|
1423
|
+
"type": 0,
|
|
1424
|
+
"value": "Description"
|
|
1425
|
+
}]
|
|
1426
|
+
})
|
|
1427
|
+
}, {
|
|
1428
|
+
name: 'introBackground',
|
|
1429
|
+
type: 'background',
|
|
1430
|
+
label: reactIntl.defineMessage({
|
|
1431
|
+
id: "cDj1mZ",
|
|
1432
|
+
defaultMessage: [{
|
|
1433
|
+
"type": 0,
|
|
1434
|
+
"value": "Background"
|
|
1435
|
+
}]
|
|
1436
|
+
})
|
|
1437
|
+
}]
|
|
1438
|
+
}, {
|
|
1439
|
+
id: 'questions',
|
|
1440
|
+
label: reactIntl.defineMessage({
|
|
1441
|
+
id: "VMd1oG",
|
|
1442
|
+
defaultMessage: [{
|
|
1443
|
+
"type": 0,
|
|
1444
|
+
"value": "Questions"
|
|
1445
|
+
}]
|
|
1446
|
+
}),
|
|
1447
|
+
repeatable: true,
|
|
1448
|
+
fieldName: 'questions',
|
|
1449
|
+
fields: [{
|
|
1450
|
+
name: 'text',
|
|
1451
|
+
type: 'heading-element',
|
|
1452
|
+
theme: {
|
|
1453
|
+
textStyle: 'heading2'
|
|
1454
|
+
},
|
|
1455
|
+
label: reactIntl.defineMessage({
|
|
1456
|
+
id: "hVE7TA",
|
|
1457
|
+
defaultMessage: [{
|
|
1458
|
+
"type": 0,
|
|
1459
|
+
"value": "Question"
|
|
1460
|
+
}]
|
|
1461
|
+
})
|
|
1462
|
+
}, {
|
|
1463
|
+
name: 'answers',
|
|
1464
|
+
type: 'quiz-points-answers',
|
|
1465
|
+
theme: {
|
|
1466
|
+
label: {
|
|
1467
|
+
textStyle: 'button'
|
|
1468
|
+
}
|
|
1469
|
+
},
|
|
1470
|
+
label: reactIntl.defineMessage({
|
|
1471
|
+
id: "KHWeV7",
|
|
1472
|
+
defaultMessage: [{
|
|
1473
|
+
"type": 0,
|
|
1474
|
+
"value": "Answers"
|
|
1475
|
+
}]
|
|
1476
|
+
})
|
|
1477
|
+
}, {
|
|
1478
|
+
name: 'background',
|
|
1479
|
+
type: 'background',
|
|
1480
|
+
label: reactIntl.defineMessage({
|
|
1481
|
+
id: "cDj1mZ",
|
|
1482
|
+
defaultMessage: [{
|
|
1483
|
+
"type": 0,
|
|
1484
|
+
"value": "Background"
|
|
1485
|
+
}]
|
|
1486
|
+
})
|
|
1487
|
+
}]
|
|
1488
|
+
}, {
|
|
1489
|
+
id: 'results',
|
|
1490
|
+
label: reactIntl.defineMessage({
|
|
1491
|
+
id: "uiTxd7",
|
|
1492
|
+
defaultMessage: [{
|
|
1493
|
+
"type": 0,
|
|
1494
|
+
"value": "Results"
|
|
1495
|
+
}]
|
|
1496
|
+
}),
|
|
1497
|
+
repeatable: true,
|
|
1498
|
+
fields: [{
|
|
1499
|
+
name: 'layout',
|
|
1500
|
+
type: 'screen-layout',
|
|
1501
|
+
defaultValue: 'top',
|
|
1502
|
+
screenState: 'results',
|
|
1503
|
+
label: reactIntl.defineMessage({
|
|
1504
|
+
id: "4iBXj2",
|
|
1505
|
+
defaultMessage: [{
|
|
1506
|
+
"type": 0,
|
|
1507
|
+
"value": "Layout"
|
|
1508
|
+
}]
|
|
1509
|
+
})
|
|
1510
|
+
}, {
|
|
1511
|
+
name: 'title',
|
|
1512
|
+
type: 'heading-element',
|
|
1513
|
+
theme: {
|
|
1514
|
+
textStyle: 'heading2'
|
|
1515
|
+
},
|
|
1516
|
+
label: reactIntl.defineMessage({
|
|
1517
|
+
id: "+AEVbJ",
|
|
1518
|
+
defaultMessage: [{
|
|
1519
|
+
"type": 0,
|
|
1520
|
+
"value": "Title"
|
|
1521
|
+
}]
|
|
1522
|
+
})
|
|
1523
|
+
}, {
|
|
1524
|
+
name: 'description',
|
|
1525
|
+
type: 'text-element',
|
|
1526
|
+
theme: {
|
|
1527
|
+
textStyle: 'text'
|
|
1528
|
+
},
|
|
1529
|
+
label: reactIntl.defineMessage({
|
|
1530
|
+
id: "ZCe0r4",
|
|
1531
|
+
defaultMessage: [{
|
|
1532
|
+
"type": 0,
|
|
1533
|
+
"value": "Description"
|
|
1534
|
+
}]
|
|
1535
|
+
})
|
|
1536
|
+
}, {
|
|
1537
|
+
name: 'points',
|
|
1538
|
+
type: 'number',
|
|
1539
|
+
isHorizontal: true,
|
|
1540
|
+
label: reactIntl.defineMessage({
|
|
1541
|
+
id: "jWAJW4",
|
|
1542
|
+
defaultMessage: [{
|
|
1543
|
+
"type": 0,
|
|
1544
|
+
"value": "Points"
|
|
1545
|
+
}]
|
|
1546
|
+
})
|
|
1547
|
+
}, {
|
|
1548
|
+
name: 'background',
|
|
1549
|
+
type: 'background',
|
|
1550
|
+
label: reactIntl.defineMessage({
|
|
1551
|
+
id: "cDj1mZ",
|
|
1552
|
+
defaultMessage: [{
|
|
1553
|
+
"type": 0,
|
|
1554
|
+
"value": "Background"
|
|
1555
|
+
}]
|
|
1556
|
+
})
|
|
1557
|
+
}]
|
|
1558
|
+
}],
|
|
1559
|
+
fields: [{
|
|
1560
|
+
name: 'layout',
|
|
1561
|
+
type: 'screen-layout',
|
|
1562
|
+
defaultValue: 'top',
|
|
1563
|
+
label: reactIntl.defineMessage({
|
|
1564
|
+
id: "OPxJx/",
|
|
1565
|
+
defaultMessage: [{
|
|
1566
|
+
"type": 0,
|
|
1567
|
+
"value": "Layout"
|
|
1568
|
+
}]
|
|
1569
|
+
})
|
|
1570
|
+
}, {
|
|
1571
|
+
type: 'fields',
|
|
1572
|
+
label: reactIntl.defineMessage({
|
|
1573
|
+
id: "LOknw0",
|
|
1574
|
+
defaultMessage: [{
|
|
1575
|
+
"type": 0,
|
|
1576
|
+
"value": "Styles"
|
|
1577
|
+
}]
|
|
1578
|
+
}),
|
|
1579
|
+
isList: true,
|
|
1580
|
+
fields: [{
|
|
1581
|
+
name: 'buttonsStyle',
|
|
1582
|
+
type: 'box-style',
|
|
1583
|
+
label: reactIntl.defineMessage({
|
|
1584
|
+
id: "l5uLMd",
|
|
1585
|
+
defaultMessage: [{
|
|
1586
|
+
"type": 0,
|
|
1587
|
+
"value": "Buttons"
|
|
1588
|
+
}]
|
|
1589
|
+
})
|
|
1590
|
+
}]
|
|
1591
|
+
}, {
|
|
1592
|
+
name: 'background',
|
|
1593
|
+
type: 'background',
|
|
1594
|
+
label: reactIntl.defineMessage({
|
|
1595
|
+
id: "cDj1mZ",
|
|
1596
|
+
defaultMessage: [{
|
|
1597
|
+
"type": 0,
|
|
1598
|
+
"value": "Background"
|
|
1599
|
+
}]
|
|
1600
|
+
})
|
|
1601
|
+
}, {
|
|
1602
|
+
name: 'callToAction',
|
|
1603
|
+
type: 'call-to-action',
|
|
1604
|
+
theme: {
|
|
1605
|
+
label: {
|
|
1606
|
+
textStyle: 'heading2'
|
|
1607
|
+
}
|
|
1608
|
+
}
|
|
1609
|
+
}]
|
|
1610
|
+
}];
|
|
595
1611
|
|
|
596
1612
|
exports.QuizScreen = QuizScreen;
|
|
597
1613
|
exports["default"] = definition;
|