@micromag/screen-quiz 0.3.86 → 0.3.88

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 +41 -19
  3. package/lib/index.js +41 -19
  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,
@@ -501,6 +519,7 @@ var defaultProps$3 = {
501
519
  buttonsTextStyle: null,
502
520
  goodAnswerColor: null,
503
521
  badAnswerColor: null,
522
+ withoutTrueFalse: false,
504
523
  spacing: 20,
505
524
  background: null,
506
525
  callToAction: null,
@@ -522,6 +541,7 @@ var QuizScreen = function QuizScreen(_ref) {
522
541
  buttonsTextStyle = _ref.buttonsTextStyle,
523
542
  goodAnswerColor = _ref.goodAnswerColor,
524
543
  badAnswerColor = _ref.badAnswerColor,
544
+ withoutTrueFalse = _ref.withoutTrueFalse,
525
545
  spacing = _ref.spacing,
526
546
  background = _ref.background,
527
547
  callToAction = _ref.callToAction,
@@ -637,6 +657,7 @@ var QuizScreen = function QuizScreen(_ref) {
637
657
  buttonsTextStyle: buttonsTextStyle,
638
658
  goodAnswerColor: goodAnswerColor,
639
659
  badAnswerColor: badAnswerColor,
660
+ withoutTrueFalse: withoutTrueFalse,
640
661
  focusable: current && isView,
641
662
  showInstantAnswer: showInstantAnswer,
642
663
  withResult: true,
@@ -1378,16 +1399,17 @@ var definition = [{
1378
1399
  "value": "Answers"
1379
1400
  }]
1380
1401
  })
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
- {
1402
+ }, {
1403
+ name: 'withoutTrueFalse',
1404
+ type: 'toggle',
1405
+ label: defineMessage({
1406
+ id: "Wk/o9B",
1407
+ defaultMessage: [{
1408
+ "type": 0,
1409
+ "value": "Without true/false"
1410
+ }]
1411
+ })
1412
+ }, {
1391
1413
  name: 'result',
1392
1414
  type: 'text-element',
1393
1415
  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,
@@ -522,6 +540,7 @@ var defaultProps$3 = {
522
540
  buttonsTextStyle: null,
523
541
  goodAnswerColor: null,
524
542
  badAnswerColor: null,
543
+ withoutTrueFalse: false,
525
544
  spacing: 20,
526
545
  background: null,
527
546
  callToAction: null,
@@ -543,6 +562,7 @@ var QuizScreen = function QuizScreen(_ref) {
543
562
  buttonsTextStyle = _ref.buttonsTextStyle,
544
563
  goodAnswerColor = _ref.goodAnswerColor,
545
564
  badAnswerColor = _ref.badAnswerColor,
565
+ withoutTrueFalse = _ref.withoutTrueFalse,
546
566
  spacing = _ref.spacing,
547
567
  background = _ref.background,
548
568
  callToAction = _ref.callToAction,
@@ -658,6 +678,7 @@ var QuizScreen = function QuizScreen(_ref) {
658
678
  buttonsTextStyle: buttonsTextStyle,
659
679
  goodAnswerColor: goodAnswerColor,
660
680
  badAnswerColor: badAnswerColor,
681
+ withoutTrueFalse: withoutTrueFalse,
661
682
  focusable: current && isView,
662
683
  showInstantAnswer: showInstantAnswer,
663
684
  withResult: true,
@@ -1399,16 +1420,17 @@ var definition = [{
1399
1420
  "value": "Answers"
1400
1421
  }]
1401
1422
  })
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
- {
1423
+ }, {
1424
+ name: 'withoutTrueFalse',
1425
+ type: 'toggle',
1426
+ label: reactIntl.defineMessage({
1427
+ id: "Wk/o9B",
1428
+ defaultMessage: [{
1429
+ "type": 0,
1430
+ "value": "Without true/false"
1431
+ }]
1432
+ })
1433
+ }, {
1412
1434
  name: 'result',
1413
1435
  type: 'text-element',
1414
1436
  theme: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quiz",
3
- "version": "0.3.86",
3
+ "version": "0.3.88",
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.86",
56
- "@micromag/data": "^0.3.86",
57
- "@micromag/element-background": "^0.3.86",
58
- "@micromag/element-button": "^0.3.86",
59
- "@micromag/element-call-to-action": "^0.3.86",
60
- "@micromag/element-container": "^0.3.86",
61
- "@micromag/element-heading": "^0.3.86",
62
- "@micromag/element-layout": "^0.3.86",
63
- "@micromag/element-text": "^0.3.86",
64
- "@micromag/transforms": "^0.3.86",
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.88",
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": "063af274982885b7696d265e6567ab8d44c8b9ad"
75
+ "gitHead": "d0fb1f7d4ae6bfa1fd07dc856307c1c4225ab889"
76
76
  }