Merge pull request #2348 from pie-framework/PD-3844

feat(multiple-choice): add background color for selected choices PD-3844
pie-framework · Dec 20, 2024 · bf2631f · bf2631f
2 parents 1bf85f1 + 2488fe1
commit bf2631f
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 2 deletions.
diff --git a/packages/multiple-choice/configure/src/__tests__/__snapshots__/root.test.jsx.snap b/packages/multiple-choice/configure/src/__tests__/__snapshots__/root.test.jsx.snap
@@ -62,6 +62,7 @@ exports[`Main snapshot renders with choicePrefix="letters" as default 1`] = `
         "rationale": "",
         "rationaleEnabled": true,
         "scoringType": "auto",
+        "selectedAnswerBackgroundColor": "initial",
         "studentInstructionsEnabled": true,
         "teacherInstructions": "",
         "teacherInstructionsEnabled": true,
@@ -142,6 +143,7 @@ exports[`Main snapshot renders with choicePrefix="numbers" 1`] = `
         "rationale": "",
         "rationaleEnabled": true,
         "scoringType": "auto",
+        "selectedAnswerBackgroundColor": "initial",
         "studentInstructionsEnabled": true,
         "teacherInstructions": "",
         "teacherInstructionsEnabled": true,

diff --git a/packages/multiple-choice/configure/src/defaults.js b/packages/multiple-choice/configure/src/defaults.js
@@ -22,6 +22,7 @@ export default {
     teacherInstructions: '',
     teacherInstructionsEnabled: true,
     toolbarEditorPosition: 'bottom',
+    selectedAnswerBackgroundColor: 'initial',
   },
   configuration: {
     baseInputConfiguration: {

diff --git a/packages/multiple-choice/controller/src/defaults.js b/packages/multiple-choice/controller/src/defaults.js
@@ -17,4 +17,5 @@ export default {
   teacherInstructions: '',
   teacherInstructionsEnabled: true,
   toolbarEditorPosition: 'bottom',
+  selectedAnswerBackgroundColor: 'initial',
 };
diff --git a/packages/multiple-choice/controller/src/index.js b/packages/multiple-choice/controller/src/index.js
@@ -91,6 +91,7 @@ export async function model(question, session, env, updateSession) {
     extraCSSRules: normalizedQuestion.extraCSSRules,
     fontSizeFactor: normalizedQuestion.fontSizeFactor,
     isSelectionButtonBelow: normalizedQuestion.isSelectionButtonBelow,
+    selectedAnswerBackgroundColor: normalizedQuestion.selectedAnswerBackgroundColor || 'initial',
     minSelections: normalizedQuestion.minSelections,
     maxSelections: normalizedQuestion.maxSelections,
   };

diff --git a/packages/multiple-choice/src/choice.jsx b/packages/multiple-choice/src/choice.jsx
@@ -32,6 +32,7 @@ export class Choice extends React.Component {
       choicesLayout,
       gridColumns,
       isSelectionButtonBelow,
+      selectedAnswerBackgroundColor
     } = this.props;
     const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
 
@@ -58,8 +59,10 @@ export class Choice extends React.Component {
       [classes.horizontalLayout]: choicesLayout === 'horizontal',
     });
 
+    const choiceBackground = selectedAnswerBackgroundColor && checked ? selectedAnswerBackgroundColor : 'initial';
+
     return (
-      <div className={choiceClass} key={index}>
+      <div className={choiceClass} key={index} style={{ backgroundColor: choiceBackground }}>
         <ChoiceInput {...choiceProps} className={names} />
       </div>
     );
@@ -81,13 +84,16 @@ Choice.propTypes = {
   displayKey: PropTypes.string,
   choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
   gridColumns: PropTypes.string,
-  isSelectionButtonBelow: PropTypes.bool,
+  selectedAnswerBackgroundColor: PropTypes.string,
+  isSelectionButtonBelow: PropTypes.bool
 };
 
 export default withStyles((theme) => ({
   choice: {
     paddingTop: theme.spacing.unit * 2.5,
     paddingBottom: theme.spacing.unit + 2,
+    paddingLeft: theme.spacing.unit + 2,
+    paddingRight: theme.spacing.unit + 2,
     borderBottom: `1px solid ${theme.palette.grey[300]}`,
   },
   noBorder: {

diff --git a/packages/multiple-choice/src/multiple-choice.jsx b/packages/multiple-choice/src/multiple-choice.jsx
@@ -80,6 +80,7 @@ export class MultipleChoice extends React.Component {
     alwaysShowCorrect: PropTypes.bool,
     animationsDisabled: PropTypes.bool,
     language: PropTypes.string,
+    selectedAnswerBackgroundColor: PropTypes.string,
     onShowCorrectToggle: PropTypes.func,
     isSelectionButtonBelow: PropTypes.bool,
     minSelections: PropTypes.number,
@@ -308,6 +309,7 @@ export class MultipleChoice extends React.Component {
             {choices.map((choice, index) => (
               <StyledChoice
                 choicesLayout={this.props.choicesLayout}
+                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}
                 gridColumns={gridColumns}
                 key={`choice-${index}`}
                 choice={choice}

diff --git a/packages/pie-models/src/pie/multiple-choice/index.ts b/packages/pie-models/src/pie/multiple-choice/index.ts
@@ -56,6 +56,11 @@ export interface MultipleChoicePie extends PieModel {
    */
   toolbarEditorPosition?: 'bottom' | 'top';
 
+  /** Indicates the background color for selected choices
+   * @default: 'initial'
+   */
+  selectedAnswerBackgroundColor?: string;
+
   /**
    * Indicates the order of choices presented to user
    * if true, answer choices will be presented in the order they are defined in the model