Merge pull request #2351 from pie-framework/feat/PD-3843

feat(multiple-choice): add min/max selection possibility PD-3843 PD-4518
pie-framework · Dec 20, 2024 · 1bf85f1 · 1bf85f1
2 parents c54c641 + 0048652
commit 1bf85f1
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 290 deletions.
diff --git a/packages/multiple-choice/controller/src/index.js b/packages/multiple-choice/controller/src/index.js
@@ -91,6 +91,8 @@ export async function model(question, session, env, updateSession) {
     extraCSSRules: normalizedQuestion.extraCSSRules,
     fontSizeFactor: normalizedQuestion.fontSizeFactor,
     isSelectionButtonBelow: normalizedQuestion.isSelectionButtonBelow,
+    minSelections: normalizedQuestion.minSelections,
+    maxSelections: normalizedQuestion.maxSelections,
   };
 
   const { role, mode } = env || {};

diff --git a/packages/multiple-choice/docs/demo/generate.js b/packages/multiple-choice/docs/demo/generate.js
@@ -56,7 +56,7 @@ exports.model = (id, element) => ({
       .blue {
         color: blue !important;
       }
-    `
+    `,
   },
   prompt: '',
   promptEnabled: true,

diff --git a/packages/multiple-choice/docs/pie-schema.json b/packages/multiple-choice/docs/pie-schema.json
@@ -129,6 +129,16 @@
       "type": "boolean",
       "title": "lockChoiceOrder"
     },
+    "minSelections": {
+      "description": "Indicates that minimum selections that should be made (only for choice mode 'checkbox')",
+      "type": "number",
+      "title": "minSelections"
+    },
+    "maxSelections": {
+      "description": "Indicates that maximum selections that should be made (only for choice mode 'checkbox')",
+      "type": "number",
+      "title": "maxSelections"
+    },
     "partialScoring": {
       "description": "Indicates that the item should use partial scoring",
       "type": "boolean",

diff --git a/packages/multiple-choice/docs/pie-schema.json.md b/packages/multiple-choice/docs/pie-schema.json.md
@@ -115,6 +115,14 @@ Indicates the order of choices presented to user
 if true, answer choices will be presented in the order they are defined in the model
 If false, answer choices may be presented in a random order (depending upon the value of the lockChoiceOrder environment variable)
 
+# `minSelections` (number)
+
+Indicates that minimum selections that should be made (only for choice mode 'checkbox')
+
+# `maxSelections` (number)
+
+Indicates that maximum selections that should be made (only for choice mode 'checkbox')
+
 # `partialScoring` (boolean)
 
 Indicates that the item should use partial scoring

diff --git a/packages/multiple-choice/src/choice-input.jsx b/packages/multiple-choice/src/choice-input.jsx
@@ -24,9 +24,9 @@ const styleSheet = (theme) => ({
     flex: 1,
     '& label': {
       color: color.text(),
-      '& > span':{
+      '& > span': {
         fontSize: 'inherit',
-      }
+      },
     },
   },
   horizontalLayout: {
@@ -36,45 +36,42 @@ const styleSheet = (theme) => ({
   },
   belowLayout: {
     '& > label': {
-      alignItems: 'flex-start'
-    }
+      alignItems: 'flex-start',
+    },
   },
   belowLayoutCenter: {
     justifyContent: 'center',
     '& > label': {
-      alignItems: 'center'
-    }
+      alignItems: 'center',
+    },
   },
   belowSelectionComponent: {
     display: 'flex',
     alignItems: 'center',
     '& > span': {
-      paddingLeft: 0
-    }
-  }
+      paddingLeft: 0,
+    },
+  },
 });
 
 const formStyleSheet = {
   label: {
     color: `${color.text()} !important`, //'var(--choice-input-color, black)'
     backgroundColor: color.background(),
-    letterSpacing: 'normal'
+    letterSpacing: 'normal',
   },
   disabled: {
     // apply to all children
     '& *': {
       cursor: 'not-allowed !important',
-    }
-  }
+    },
+  },
 };
 
 export const StyledFormControlLabel = withStyles(formStyleSheet, {
   name: 'FormControlLabel',
 })((props) => (
-  <FormControlLabel
-    {...props}
-    classes={{ label: props.classes.label, disabled: props.classes.disabled }}
-  />
+  <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />
 ));
 
 const colorStyle = (varName, fallback) => ({
@@ -177,8 +174,7 @@ export class ChoiceInput extends React.Component {
     hideTick: PropTypes.bool,
     isEvaluateMode: PropTypes.bool,
     choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
-    updateSession: PropTypes.func,
-    isSelectionButtonBelow: PropTypes.bool
+    isSelectionButtonBelow: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -196,10 +192,6 @@ export class ChoiceInput extends React.Component {
 
   onToggleChoice(event) {
     this.props.onChange(event);
-    this.props.updateSession({
-      value: this.props.value,
-      selected: !this.props.checked,
-    });
   }
 
   generateChoiceId() {
@@ -223,7 +215,7 @@ export class ChoiceInput extends React.Component {
       choicesLayout,
       value,
       checked,
-      isSelectionButtonBelow
+      isSelectionButtonBelow,
     } = this.props;
 
     const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
@@ -233,7 +225,6 @@ export class ChoiceInput extends React.Component {
       [classes.horizontalLayout]: choicesLayout === 'horizontal',
       [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',
       [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',
-
     });
 
     const choicelabel = (
@@ -252,7 +243,7 @@ export class ChoiceInput extends React.Component {
     return (
       <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>
         <div className={classes.row}>
-          {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness}/>}
+          {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}
           <div className={classNames(holderClassNames, 'checkbox-holder')}>
             {isSelectionButtonBelow ? (
               <StyledFormControlLabel
@@ -290,12 +281,14 @@ export class ChoiceInput extends React.Component {
                     value={value}
                     id={this.choiceId}
                     onChange={this.onToggleChoice}
-                  />}
-              />)}
+                  />
+                }
+              />
+            )}
           </div>
         </div>
-        {rationale && <PreviewPrompt className="rationale" defaultClassName="rationale" prompt={rationale}/>}
-        <Feedback feedback={feedback} correctness={correctness}/>
+        {rationale && <PreviewPrompt className="rationale" defaultClassName="rationale" prompt={rationale} />}
+        <Feedback feedback={feedback} correctness={correctness} />
       </div>
     );
   }

diff --git a/packages/multiple-choice/src/choice.jsx b/packages/multiple-choice/src/choice.jsx
@@ -6,9 +6,7 @@ import classNames from 'classnames';
 import ChoiceInput from './choice-input';
 
 export class Choice extends React.Component {
-  static propTypes = {
-   updateSession: PropTypes.func,
-  };
+  static propTypes = {};
 
   onChange = (choice) => {
     const { disabled, onChoiceChanged } = this.props;
@@ -33,8 +31,7 @@ export class Choice extends React.Component {
       classes,
       choicesLayout,
       gridColumns,
-      updateSession,
-      isSelectionButtonBelow
+      isSelectionButtonBelow,
     } = this.props;
     const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
 
@@ -51,10 +48,9 @@ export class Choice extends React.Component {
       index,
       choicesLayout,
       gridColumns,
-      updateSession,
       onChange: this.onChange,
       isEvaluateMode,
-      isSelectionButtonBelow
+      isSelectionButtonBelow,
     };
 
     const names = classNames(classes.choice, {
@@ -85,7 +81,7 @@ Choice.propTypes = {
   displayKey: PropTypes.string,
   choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
   gridColumns: PropTypes.string,
-  isSelectionButtonBelow: PropTypes.bool
+  isSelectionButtonBelow: PropTypes.bool,
 };
 
 export default withStyles((theme) => ({

diff --git a/packages/multiple-choice/src/index.js b/packages/multiple-choice/src/index.js
@@ -8,7 +8,26 @@ import { updateSessionValue } from './session-updater';
 
 const log = debug('pie-ui:multiple-choice');
 
-export const isComplete = (session) => !!(session && session.value && session.value.length);
+export const isComplete = (session, model) => {
+  if (!session || !session.value) {
+    return false;
+  }
+
+  const { choiceMode, minSelections, maxSelections } = model || {};
+  const selections = session.value.length || 0;
+
+  if (choiceMode === 'radio') {
+    return !!selections;
+  }
+
+  if (selections < minSelections || selections > maxSelections) {
+    return false;
+  }
+
+  return true;
+
+  // !!(session && session.value && session.value.length);
+};
 
 export default class MultipleChoice extends HTMLElement {
   constructor() {
@@ -32,7 +51,6 @@ export default class MultipleChoice extends HTMLElement {
             this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',
           );
           this.setAttribute('role', 'region');
-
           this.setLangAttribute();
 
           ReactDOM.render(element, this, () => {
@@ -52,7 +70,7 @@ export default class MultipleChoice extends HTMLElement {
         bubbles: true,
         composed: true,
         detail: {
-          complete: isComplete(this._session),
+          complete: isComplete(this._session, this._model),
           component: this.tagName.toLowerCase(),
         },
       });
@@ -67,7 +85,7 @@ export default class MultipleChoice extends HTMLElement {
             bubbles: true,
             composed: true,
             detail: {
-              complete: isComplete(this._session),
+              complete: isComplete(this._session, this._model),
               component: this.tagName.toLowerCase(),
               hasModel: this._model !== undefined,
             },
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,7 @@ exports.model = (id, element) => ({ @@
           .blue {
             color: blue !important;
           }
-        `
+        `,
       },
       prompt: '',
       promptEnabled: true,
@@ Expand Down @@