@micromag/screen-quiz 0.3.84 → 0.3.89

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +50 -20
  3. package/lib/index.js +50 -20
  4. package/package.json +12 -12
package/assets/css/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- .micromag-screen-quiz-answers-emptyAnswer{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{width:100%;height:40px;margin:0 auto;font-size:.75em}.micromag-screen-quiz-answers-item{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item{opacity:.3}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer,.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:.99}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item,.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;opacity:0}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;opacity:1}.micromag-screen-quiz-answers-didCollapsed .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition:none;-o-transition:none;transition:none}.micromag-screen-quiz-answers-withoutGoodAnswer .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-button{position:relative;width:100%;padding:10px;border-radius:10px;color:#fff}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withGoodAnswer .micromag-screen-quiz-answers-button{padding-right:42px!important;padding-left:42px!important}.micromag-screen-quiz-answers-resultIcon{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:50%;left:5px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:5px;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;border:2px solid #1c1c1c;border-radius:50%;opacity:0;background-color:#ff2945}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
1
+ .micromag-screen-quiz-answers-emptyAnswer{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-answers-button:focus-visible{outline:3px solid #a13dff}.micromag-screen-quiz-answers-container,.micromag-screen-quiz-answers-items{position:relative}.micromag-screen-quiz-answers-emptyAnswer{width:100%;height:40px;margin:0 auto;font-size:.75em}.micromag-screen-quiz-answers-item{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-isUserAnswer{opacity:1!important}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item{opacity:.3}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer,.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{opacity:.99}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item,.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;opacity:0}.micromag-screen-quiz-answers-willCollapse .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;opacity:1}.micromag-screen-quiz-answers-didCollapsed .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-rightAnswer{-webkit-transition:none;-o-transition:none;transition:none}.micromag-screen-quiz-answers-withoutGoodAnswer .micromag-screen-quiz-answers-item.micromag-screen-quiz-answers-userAnswer{-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s}.micromag-screen-quiz-answers-isPlaceholder .micromag-screen-quiz-answers-item{padding:1px 0}.micromag-screen-quiz-answers-button{position:relative;width:100%;padding:10px;border-radius:10px;color:#fff}.micromag-screen-quiz-answers-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-answers-withGoodAnswer .micromag-screen-quiz-answers-button{padding-right:42px;padding-left:42px}.micromag-screen-quiz-answers-resultIcon{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:50%;left:5px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:5px;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;border:2px solid #1c1c1c;border-radius:50%;opacity:0;background-color:#ff2945}.micromag-screen-quiz-answers-answered .micromag-screen-quiz-answers-resultIcon{opacity:1}.micromag-screen-quiz-answers-rightAnswer .micromag-screen-quiz-answers-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-answers-itemContent{padding:5px 0}
2
2
  .micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-question{margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-index{display:block;width:100%;margin-bottom:1em;text-align:center}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-result{position:absolute;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.3s;-o-transition-delay:.3s;transition-delay:.3s;opacity:0;pointer-events:none}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-resultContent{padding:20px 0}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion,.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{width:100%;margin:0 auto}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyQuestion{height:60px;margin-bottom:10px}.micromag-screen-quiz-question-container .micromag-screen-quiz-question-emptyResult{height:100px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-resultVisible .micromag-screen-quiz-question-result{position:relative;opacity:1;pointer-events:all}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder{padding:10px}.micromag-screen-quiz-question-container.micromag-screen-quiz-question-isPlaceholder .micromag-screen-quiz-question-index{color:hsla(0,0%,100%,.6);mix-blend-mode:difference;font-size:8px}
3
3
  .micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{position:relative;padding:6px}.micromag-screen-quiz-layout{top:0;right:0}.micromag-screen-quiz-callToAction,.micromag-screen-quiz-layout{position:absolute;bottom:0;left:0}.micromag-screen-quiz-callToAction{width:100%}.micromag-screen-quiz-transition{position:absolute;top:0;right:0;bottom:0;left:0}.micromag-screen-quiz-intro,.micromag-screen-quiz-question,.micromag-screen-quiz-results{overflow:hidden}.micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enter,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enter{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-enterActive,.micromag-screen-quiz-question.micromag-screen-quiz-enterActive,.micromag-screen-quiz-results.micromag-screen-quiz-enterActive{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease}.micromag-screen-quiz-intro.micromag-screen-quiz-exit,.micromag-screen-quiz-question.micromag-screen-quiz-exit,.micromag-screen-quiz-results.micromag-screen-quiz-exit{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;-o-transition:transform 1s ease;transition:transform 1s ease;transition:transform 1s ease, -webkit-transform 1s ease}.micromag-screen-quiz-left .micromag-screen-quiz-intro.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-question.micromag-screen-quiz-exitActive,.micromag-screen-quiz-left .micromag-screen-quiz-results.micromag-screen-quiz-exitActive{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.micromag-screen-quiz-background.micromag-screen-quiz-enter{opacity:0}.micromag-screen-quiz-background.micromag-screen-quiz-enterActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exit{opacity:1}.micromag-screen-quiz-background.micromag-screen-quiz-exitActive{-webkit-transition:opacity 1s ease;-o-transition:opacity 1s ease;transition:opacity 1s ease;opacity:0}
4
4
  .micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-title{margin-bottom:10px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription,.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{width:100%;margin:0 auto}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyTitle{height:60px}.micromag-screen-quiz-results-container .micromag-screen-quiz-results-emptyDescription{height:100px}.micromag-screen-quiz-results-container.micromag-screen-quiz-results-isPlaceholder{padding:10px}
package/es/index.js CHANGED
@@ -23,7 +23,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
23
23
  import Button from '@micromag/element-button';
24
24
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
25
25
 
26
- 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"};
26
+ 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","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","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"};
27
27
 
28
28
  var propTypes$5 = {
29
29
  items: PropTypes.quizAnswers.isRequired,
@@ -33,7 +33,9 @@ var propTypes$5 = {
33
33
  buttonsTextStyle: PropTypes.textStyle,
34
34
  goodAnswerColor: PropTypes.color,
35
35
  badAnswerColor: PropTypes.color,
36
+ showUserAnswer: PropTypes$1.bool,
36
37
  withoutGoodAnswer: PropTypes$1.bool,
38
+ withoutIcon: PropTypes$1.bool,
37
39
  focusable: PropTypes$1.bool,
38
40
  collapsed: PropTypes$1.bool,
39
41
  transitions: PropTypes.transitions,
@@ -53,7 +55,9 @@ var defaultProps$5 = {
53
55
  buttonsTextStyle: null,
54
56
  goodAnswerColor: null,
55
57
  badAnswerColor: null,
58
+ showUserAnswer: false,
56
59
  withoutGoodAnswer: false,
60
+ withoutIcon: false,
57
61
  focusable: false,
58
62
  collapsed: false,
59
63
  transitions: null,
@@ -77,7 +81,9 @@ var Answers = function Answers(_ref) {
77
81
  buttonsTextStyle = _ref.buttonsTextStyle,
78
82
  goodAnswerColor = _ref.goodAnswerColor,
79
83
  badAnswerColor = _ref.badAnswerColor,
84
+ showUserAnswer = _ref.showUserAnswer,
80
85
  withoutGoodAnswer = _ref.withoutGoodAnswer,
86
+ withoutIcon = _ref.withoutIcon,
81
87
  focusable = _ref.focusable,
82
88
  initialCollapsed = _ref.collapsed,
83
89
  transitions = _ref.transitions,
@@ -121,7 +127,7 @@ var Answers = function Answers(_ref) {
121
127
  var rightAnswerTop = useMemo(function () {
122
128
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
123
129
  }, [rightAnswerHeight]);
124
- var shouldCollapse = !withoutGoodAnswer;
130
+ var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
125
131
 
126
132
  var _useState = useState(answeredIndex !== null),
127
133
  _useState2 = _slicedToArray(_useState, 2),
@@ -143,7 +149,7 @@ var Answers = function Answers(_ref) {
143
149
  if (onCollapse !== null) {
144
150
  onCollapse();
145
151
  }
146
- }, hasAnsweredRight ? 500 : answersCollapseDelay);
152
+ }, hasAnsweredRight || showUserAnswer ? 500 : answersCollapseDelay);
147
153
  }
148
154
 
149
155
  return function () {
@@ -151,7 +157,7 @@ var Answers = function Answers(_ref) {
151
157
  clearTimeout(timeout);
152
158
  }
153
159
  };
154
- }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight]);
160
+ }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, showUserAnswer]);
155
161
  var onAnswerTransitionEnd = useCallback(function () {
156
162
  if (onTransitionEnd !== null) {
157
163
  onTransitionEnd();
@@ -191,19 +197,25 @@ var Answers = function Answers(_ref) {
191
197
  textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
192
198
 
193
199
  var hasAnswer = isTextFilled(label);
200
+ var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
194
201
 
195
- if (answersDidCollapsed && !rightAnswer) {
202
+ if (!showUserAnswer && answersDidCollapsed && !rightAnswer) {
203
+ return null;
204
+ } // Only show user answer
205
+
206
+
207
+ if (hasFinalUserAnswer && answersCollapsed && !userAnswer) {
196
208
  return null;
197
209
  }
198
210
 
199
211
  return /*#__PURE__*/React.createElement("div", {
200
212
  key: "answer-".concat(answerI),
201
213
  ref: rightAnswer ? rightAnswerRef : null,
202
- className: classNames([styles$4.item, (_ref8 = {}, _defineProperty(_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref8, styles$4.userAnswer, userAnswer), _ref8)]),
214
+ className: classNames([styles$4.item, (_ref8 = {}, _defineProperty(_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty(_ref8, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty(_ref8, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref8)]),
203
215
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
204
216
  transform: "translateY(".concat(-rightAnswerTop, "px)")
205
217
  } : null,
206
- onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer ? onAnswerTransitionEnd : null
218
+ onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer || showUserAnswer && userAnswer ? onAnswerTransitionEnd : null
207
219
  }, /*#__PURE__*/React.createElement("div", {
208
220
  className: styles$4.itemContent
209
221
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -233,13 +245,13 @@ var Answers = function Answers(_ref) {
233
245
  disabled: isPreview || answered,
234
246
  focusable: focusable,
235
247
  buttonStyle: _objectSpread(_objectSpread({}, getStyleFromBox(buttonsStyle)), getStyleFromBox(answerButtonStyle))
236
- }, !withoutGoodAnswer && rightAnswer ? /*#__PURE__*/React.createElement("span", {
248
+ }, !withoutGoodAnswer && !withoutIcon && rightAnswer ? /*#__PURE__*/React.createElement("span", {
237
249
  className: styles$4.resultIcon,
238
250
  style: getStyleFromColor(goodAnswerColor, 'backgroundColor')
239
251
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
240
252
  className: styles$4.faIcon,
241
253
  icon: faCheck
242
- })) : null, !withoutGoodAnswer && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React.createElement("span", {
254
+ })) : null, !withoutGoodAnswer && !withoutIcon && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React.createElement("span", {
243
255
  className: styles$4.resultIcon,
244
256
  style: getStyleFromColor(badAnswerColor, 'backgroundColor')
245
257
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -278,6 +290,7 @@ var propTypes$4 = {
278
290
  showInstantAnswer: PropTypes$1.bool,
279
291
  withResult: PropTypes$1.bool,
280
292
  withoutGoodAnswer: PropTypes$1.bool,
293
+ withoutTrueFalse: PropTypes$1.bool,
281
294
  withoutIndex: PropTypes$1.bool,
282
295
  transitions: PropTypes.transitions,
283
296
  transitionPlaying: PropTypes$1.bool,
@@ -306,6 +319,7 @@ var defaultProps$4 = {
306
319
  showInstantAnswer: false,
307
320
  withResult: false,
308
321
  withoutGoodAnswer: false,
322
+ withoutTrueFalse: false,
309
323
  withoutIndex: false,
310
324
  transitions: null,
311
325
  transitionPlaying: false,
@@ -335,6 +349,7 @@ var Question = function Question(_ref) {
335
349
  showInstantAnswer = _ref.showInstantAnswer,
336
350
  withResult = _ref.withResult,
337
351
  withoutGoodAnswer = _ref.withoutGoodAnswer,
352
+ withoutTrueFalse = _ref.withoutTrueFalse,
338
353
  withoutIndex = _ref.withoutIndex,
339
354
  layout = _ref.layout,
340
355
  callToActionHeight = _ref.callToActionHeight,
@@ -423,6 +438,8 @@ var Question = function Question(_ref) {
423
438
  goodAnswerColor: goodAnswerColor,
424
439
  badAnswerColor: badAnswerColor,
425
440
  withoutGoodAnswer: withoutGoodAnswer,
441
+ withoutIcon: withoutTrueFalse,
442
+ showUserAnswer: withoutTrueFalse,
426
443
  buttonsStyle: buttonsStyle,
427
444
  buttonsTextStyle: buttonsTextStyle,
428
445
  focusable: focusable,
@@ -481,6 +498,7 @@ var propTypes$3 = {
481
498
  buttonsTextStyle: PropTypes.textStyle,
482
499
  goodAnswerColor: PropTypes.color,
483
500
  badAnswerColor: PropTypes.color,
501
+ withoutTrueFalse: PropTypes$1.bool,
484
502
  spacing: PropTypes$1.number,
485
503
  background: PropTypes.backgroundElement,
486
504
  callToAction: PropTypes.callToAction,
@@ -489,6 +507,8 @@ var propTypes$3 = {
489
507
  transitions: PropTypes.transitions,
490
508
  transitionStagger: PropTypes$1.number,
491
509
  type: PropTypes$1.string,
510
+ enableInteraction: PropTypes$1.func,
511
+ disableInteraction: PropTypes$1.func,
492
512
  className: PropTypes$1.string
493
513
  };
494
514
  var defaultProps$3 = {
@@ -501,6 +521,7 @@ var defaultProps$3 = {
501
521
  buttonsTextStyle: null,
502
522
  goodAnswerColor: null,
503
523
  badAnswerColor: null,
524
+ withoutTrueFalse: false,
504
525
  spacing: 20,
505
526
  background: null,
506
527
  callToAction: null,
@@ -509,6 +530,8 @@ var defaultProps$3 = {
509
530
  transitions: null,
510
531
  transitionStagger: 100,
511
532
  type: null,
533
+ enableInteraction: null,
534
+ disableInteraction: null,
512
535
  className: null
513
536
  };
514
537
 
@@ -522,6 +545,7 @@ var QuizScreen = function QuizScreen(_ref) {
522
545
  buttonsTextStyle = _ref.buttonsTextStyle,
523
546
  goodAnswerColor = _ref.goodAnswerColor,
524
547
  badAnswerColor = _ref.badAnswerColor,
548
+ withoutTrueFalse = _ref.withoutTrueFalse,
525
549
  spacing = _ref.spacing,
526
550
  background = _ref.background,
527
551
  callToAction = _ref.callToAction,
@@ -530,6 +554,8 @@ var QuizScreen = function QuizScreen(_ref) {
530
554
  transitions = _ref.transitions,
531
555
  transitionStagger = _ref.transitionStagger,
532
556
  type = _ref.type,
557
+ enableInteraction = _ref.enableInteraction,
558
+ disableInteraction = _ref.disableInteraction,
533
559
  className = _ref.className;
534
560
  var screenId = id || 'screen-id';
535
561
  var trackScreenEvent = useTrackScreenEvent(type);
@@ -637,6 +663,7 @@ var QuizScreen = function QuizScreen(_ref) {
637
663
  buttonsTextStyle: buttonsTextStyle,
638
664
  goodAnswerColor: goodAnswerColor,
639
665
  badAnswerColor: badAnswerColor,
666
+ withoutTrueFalse: withoutTrueFalse,
640
667
  focusable: current && isView,
641
668
  showInstantAnswer: showInstantAnswer,
642
669
  withResult: true,
@@ -661,7 +688,9 @@ var QuizScreen = function QuizScreen(_ref) {
661
688
  screenSize: {
662
689
  width: width,
663
690
  height: height
664
- }
691
+ },
692
+ enableInteraction: enableInteraction,
693
+ disableInteraction: disableInteraction
665
694
  }) : null));
666
695
  };
667
696
 
@@ -1378,16 +1407,17 @@ var definition = [{
1378
1407
  "value": "Answers"
1379
1408
  }]
1380
1409
  })
1381
- }, // {
1382
- // name: 'withoutResultsValue',
1383
- // type: 'toggle',
1384
- // defaultValue: false,
1385
- // label: defineMessage({
1386
- // defaultMessage: 'Without results value',
1387
- // description: 'Field label',
1388
- // }),
1389
- // },
1390
- {
1410
+ }, {
1411
+ name: 'withoutTrueFalse',
1412
+ type: 'toggle',
1413
+ label: defineMessage({
1414
+ id: "Wk/o9B",
1415
+ defaultMessage: [{
1416
+ "type": 0,
1417
+ "value": "Without true/false"
1418
+ }]
1419
+ })
1420
+ }, {
1391
1421
  name: 'result',
1392
1422
  type: 'text-element',
1393
1423
  theme: {
package/lib/index.js CHANGED
@@ -44,7 +44,7 @@ var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
44
44
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
45
45
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
46
46
 
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
+ 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","isUserAnswer":"micromag-screen-quiz-answers-isUserAnswer","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"};
48
48
 
49
49
  var propTypes$5 = {
50
50
  items: core.PropTypes.quizAnswers.isRequired,
@@ -54,7 +54,9 @@ var propTypes$5 = {
54
54
  buttonsTextStyle: core.PropTypes.textStyle,
55
55
  goodAnswerColor: core.PropTypes.color,
56
56
  badAnswerColor: core.PropTypes.color,
57
+ showUserAnswer: PropTypes__default["default"].bool,
57
58
  withoutGoodAnswer: PropTypes__default["default"].bool,
59
+ withoutIcon: PropTypes__default["default"].bool,
58
60
  focusable: PropTypes__default["default"].bool,
59
61
  collapsed: PropTypes__default["default"].bool,
60
62
  transitions: core.PropTypes.transitions,
@@ -74,7 +76,9 @@ var defaultProps$5 = {
74
76
  buttonsTextStyle: null,
75
77
  goodAnswerColor: null,
76
78
  badAnswerColor: null,
79
+ showUserAnswer: false,
77
80
  withoutGoodAnswer: false,
81
+ withoutIcon: false,
78
82
  focusable: false,
79
83
  collapsed: false,
80
84
  transitions: null,
@@ -98,7 +102,9 @@ var Answers = function Answers(_ref) {
98
102
  buttonsTextStyle = _ref.buttonsTextStyle,
99
103
  goodAnswerColor = _ref.goodAnswerColor,
100
104
  badAnswerColor = _ref.badAnswerColor,
105
+ showUserAnswer = _ref.showUserAnswer,
101
106
  withoutGoodAnswer = _ref.withoutGoodAnswer,
107
+ withoutIcon = _ref.withoutIcon,
102
108
  focusable = _ref.focusable,
103
109
  initialCollapsed = _ref.collapsed,
104
110
  transitions = _ref.transitions,
@@ -142,7 +148,7 @@ var Answers = function Answers(_ref) {
142
148
  var rightAnswerTop = React.useMemo(function () {
143
149
  return rightAnswerRef.current !== null ? rightAnswerRef.current.offsetTop : 0;
144
150
  }, [rightAnswerHeight]);
145
- var shouldCollapse = !withoutGoodAnswer;
151
+ var shouldCollapse = !withoutGoodAnswer || showUserAnswer && answeredIndex !== null;
146
152
 
147
153
  var _useState = React.useState(answeredIndex !== null),
148
154
  _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -164,7 +170,7 @@ var Answers = function Answers(_ref) {
164
170
  if (onCollapse !== null) {
165
171
  onCollapse();
166
172
  }
167
- }, hasAnsweredRight ? 500 : answersCollapseDelay);
173
+ }, hasAnsweredRight || showUserAnswer ? 500 : answersCollapseDelay);
168
174
  }
169
175
 
170
176
  return function () {
@@ -172,7 +178,7 @@ var Answers = function Answers(_ref) {
172
178
  clearTimeout(timeout);
173
179
  }
174
180
  };
175
- }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight]);
181
+ }, [answeredIndex, withoutGoodAnswer, setAnswersCollapsed, onCollapse, answersCollapseDelay, hasAnsweredRight, showUserAnswer]);
176
182
  var onAnswerTransitionEnd = React.useCallback(function () {
177
183
  if (onTransitionEnd !== null) {
178
184
  onTransitionEnd();
@@ -212,19 +218,25 @@ var Answers = function Answers(_ref) {
212
218
  textStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
213
219
 
214
220
  var hasAnswer = utils.isTextFilled(label);
221
+ var hasFinalUserAnswer = showUserAnswer && answeredIndex !== null; // Hide bad answers
215
222
 
216
- if (answersDidCollapsed && !rightAnswer) {
223
+ if (!showUserAnswer && answersDidCollapsed && !rightAnswer) {
224
+ return null;
225
+ } // Only show user answer
226
+
227
+
228
+ if (hasFinalUserAnswer && answersCollapsed && !userAnswer) {
217
229
  return null;
218
230
  }
219
231
 
220
232
  return /*#__PURE__*/React__default["default"].createElement("div", {
221
233
  key: "answer-".concat(answerI),
222
234
  ref: rightAnswer ? rightAnswerRef : null,
223
- className: classNames__default["default"]([styles$4.item, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref8, styles$4.userAnswer, userAnswer), _ref8)]),
235
+ className: classNames__default["default"]([styles$4.item, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.rightAnswer, rightAnswer && !withoutGoodAnswer), _defineProperty__default["default"](_ref8, styles$4.userAnswer, userAnswer && !showUserAnswer), _defineProperty__default["default"](_ref8, styles$4.isUserAnswer, userAnswer && hasFinalUserAnswer), _ref8)]),
224
236
  style: answersCollapsed && rightAnswer && !answersDidCollapsed && shouldCollapse ? {
225
237
  transform: "translateY(".concat(-rightAnswerTop, "px)")
226
238
  } : null,
227
- onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer ? onAnswerTransitionEnd : null
239
+ onTransitionEnd: rightAnswer || withoutGoodAnswer && userAnswer || showUserAnswer && userAnswer ? onAnswerTransitionEnd : null
228
240
  }, /*#__PURE__*/React__default["default"].createElement("div", {
229
241
  className: styles$4.itemContent
230
242
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -254,13 +266,13 @@ var Answers = function Answers(_ref) {
254
266
  disabled: isPreview || answered,
255
267
  focusable: focusable,
256
268
  buttonStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonsStyle)), utils.getStyleFromBox(answerButtonStyle))
257
- }, !withoutGoodAnswer && rightAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
269
+ }, !withoutGoodAnswer && !withoutIcon && rightAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
258
270
  className: styles$4.resultIcon,
259
271
  style: utils.getStyleFromColor(goodAnswerColor, 'backgroundColor')
260
272
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
261
273
  className: styles$4.faIcon,
262
274
  icon: freeSolidSvgIcons.faCheck
263
- })) : null, !withoutGoodAnswer && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
275
+ })) : null, !withoutGoodAnswer && !withoutIcon && answered && !hasAnsweredRight && userAnswer ? /*#__PURE__*/React__default["default"].createElement("span", {
264
276
  className: styles$4.resultIcon,
265
277
  style: utils.getStyleFromColor(badAnswerColor, 'backgroundColor')
266
278
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
@@ -299,6 +311,7 @@ var propTypes$4 = {
299
311
  showInstantAnswer: PropTypes__default["default"].bool,
300
312
  withResult: PropTypes__default["default"].bool,
301
313
  withoutGoodAnswer: PropTypes__default["default"].bool,
314
+ withoutTrueFalse: PropTypes__default["default"].bool,
302
315
  withoutIndex: PropTypes__default["default"].bool,
303
316
  transitions: core.PropTypes.transitions,
304
317
  transitionPlaying: PropTypes__default["default"].bool,
@@ -327,6 +340,7 @@ var defaultProps$4 = {
327
340
  showInstantAnswer: false,
328
341
  withResult: false,
329
342
  withoutGoodAnswer: false,
343
+ withoutTrueFalse: false,
330
344
  withoutIndex: false,
331
345
  transitions: null,
332
346
  transitionPlaying: false,
@@ -356,6 +370,7 @@ var Question = function Question(_ref) {
356
370
  showInstantAnswer = _ref.showInstantAnswer,
357
371
  withResult = _ref.withResult,
358
372
  withoutGoodAnswer = _ref.withoutGoodAnswer,
373
+ withoutTrueFalse = _ref.withoutTrueFalse,
359
374
  withoutIndex = _ref.withoutIndex,
360
375
  layout = _ref.layout,
361
376
  callToActionHeight = _ref.callToActionHeight,
@@ -444,6 +459,8 @@ var Question = function Question(_ref) {
444
459
  goodAnswerColor: goodAnswerColor,
445
460
  badAnswerColor: badAnswerColor,
446
461
  withoutGoodAnswer: withoutGoodAnswer,
462
+ withoutIcon: withoutTrueFalse,
463
+ showUserAnswer: withoutTrueFalse,
447
464
  buttonsStyle: buttonsStyle,
448
465
  buttonsTextStyle: buttonsTextStyle,
449
466
  focusable: focusable,
@@ -502,6 +519,7 @@ var propTypes$3 = {
502
519
  buttonsTextStyle: core.PropTypes.textStyle,
503
520
  goodAnswerColor: core.PropTypes.color,
504
521
  badAnswerColor: core.PropTypes.color,
522
+ withoutTrueFalse: PropTypes__default["default"].bool,
505
523
  spacing: PropTypes__default["default"].number,
506
524
  background: core.PropTypes.backgroundElement,
507
525
  callToAction: core.PropTypes.callToAction,
@@ -510,6 +528,8 @@ var propTypes$3 = {
510
528
  transitions: core.PropTypes.transitions,
511
529
  transitionStagger: PropTypes__default["default"].number,
512
530
  type: PropTypes__default["default"].string,
531
+ enableInteraction: PropTypes__default["default"].func,
532
+ disableInteraction: PropTypes__default["default"].func,
513
533
  className: PropTypes__default["default"].string
514
534
  };
515
535
  var defaultProps$3 = {
@@ -522,6 +542,7 @@ var defaultProps$3 = {
522
542
  buttonsTextStyle: null,
523
543
  goodAnswerColor: null,
524
544
  badAnswerColor: null,
545
+ withoutTrueFalse: false,
525
546
  spacing: 20,
526
547
  background: null,
527
548
  callToAction: null,
@@ -530,6 +551,8 @@ var defaultProps$3 = {
530
551
  transitions: null,
531
552
  transitionStagger: 100,
532
553
  type: null,
554
+ enableInteraction: null,
555
+ disableInteraction: null,
533
556
  className: null
534
557
  };
535
558
 
@@ -543,6 +566,7 @@ var QuizScreen = function QuizScreen(_ref) {
543
566
  buttonsTextStyle = _ref.buttonsTextStyle,
544
567
  goodAnswerColor = _ref.goodAnswerColor,
545
568
  badAnswerColor = _ref.badAnswerColor,
569
+ withoutTrueFalse = _ref.withoutTrueFalse,
546
570
  spacing = _ref.spacing,
547
571
  background = _ref.background,
548
572
  callToAction = _ref.callToAction,
@@ -551,6 +575,8 @@ var QuizScreen = function QuizScreen(_ref) {
551
575
  transitions = _ref.transitions,
552
576
  transitionStagger = _ref.transitionStagger,
553
577
  type = _ref.type,
578
+ enableInteraction = _ref.enableInteraction,
579
+ disableInteraction = _ref.disableInteraction,
554
580
  className = _ref.className;
555
581
  var screenId = id || 'screen-id';
556
582
  var trackScreenEvent = hooks.useTrackScreenEvent(type);
@@ -658,6 +684,7 @@ var QuizScreen = function QuizScreen(_ref) {
658
684
  buttonsTextStyle: buttonsTextStyle,
659
685
  goodAnswerColor: goodAnswerColor,
660
686
  badAnswerColor: badAnswerColor,
687
+ withoutTrueFalse: withoutTrueFalse,
661
688
  focusable: current && isView,
662
689
  showInstantAnswer: showInstantAnswer,
663
690
  withResult: true,
@@ -682,7 +709,9 @@ var QuizScreen = function QuizScreen(_ref) {
682
709
  screenSize: {
683
710
  width: width,
684
711
  height: height
685
- }
712
+ },
713
+ enableInteraction: enableInteraction,
714
+ disableInteraction: disableInteraction
686
715
  }) : null));
687
716
  };
688
717
 
@@ -1399,16 +1428,17 @@ var definition = [{
1399
1428
  "value": "Answers"
1400
1429
  }]
1401
1430
  })
1402
- }, // {
1403
- // name: 'withoutResultsValue',
1404
- // type: 'toggle',
1405
- // defaultValue: false,
1406
- // label: defineMessage({
1407
- // defaultMessage: 'Without results value',
1408
- // description: 'Field label',
1409
- // }),
1410
- // },
1411
- {
1431
+ }, {
1432
+ name: 'withoutTrueFalse',
1433
+ type: 'toggle',
1434
+ label: reactIntl.defineMessage({
1435
+ id: "Wk/o9B",
1436
+ defaultMessage: [{
1437
+ "type": 0,
1438
+ "value": "Without true/false"
1439
+ }]
1440
+ })
1441
+ }, {
1412
1442
  name: 'result',
1413
1443
  type: 'text-element',
1414
1444
  theme: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.84",
3
+ "version": "0.3.89",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,16 +52,16 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.81",
56
- "@micromag/data": "^0.3.81",
57
- "@micromag/element-background": "^0.3.81",
58
- "@micromag/element-button": "^0.3.81",
59
- "@micromag/element-call-to-action": "^0.3.81",
60
- "@micromag/element-container": "^0.3.81",
61
- "@micromag/element-heading": "^0.3.81",
62
- "@micromag/element-layout": "^0.3.81",
63
- "@micromag/element-text": "^0.3.81",
64
- "@micromag/transforms": "^0.3.81",
55
+ "@micromag/core": "^0.3.88",
56
+ "@micromag/data": "^0.3.88",
57
+ "@micromag/element-background": "^0.3.88",
58
+ "@micromag/element-button": "^0.3.88",
59
+ "@micromag/element-call-to-action": "^0.3.89",
60
+ "@micromag/element-container": "^0.3.88",
61
+ "@micromag/element-heading": "^0.3.88",
62
+ "@micromag/element-layout": "^0.3.88",
63
+ "@micromag/element-text": "^0.3.88",
64
+ "@micromag/transforms": "^0.3.88",
65
65
  "classnames": "^2.2.6",
66
66
  "lodash": "^4.17.21",
67
67
  "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
72
72
  "publishConfig": {
73
73
  "access": "public"
74
74
  },
75
- "gitHead": "0368383e7699c0223de5344ec861cc6ff6318393"
75
+ "gitHead": "b79d346163c149050ed713e8162675f11b8baf4b"
76
76
  }