fix: add grading method view

Author: irtazaakram

.env

@@ -45,7 +45,6 @@ HOTJAR_VERSION=6
 HOTJAR_DEBUG=false
 INVITE_STUDENTS_EMAIL_TO=''
 ENABLE_CHECKLIST_QUALITY=''
-ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 # Fallback in local style files

.env.development

@@ -48,7 +48,6 @@ HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_CHECKLIST_QUALITY=true
-ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 # Fallback in local style files

.env.test

@@ -40,7 +40,6 @@ ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_CHECKLIST_QUALITY=true
-ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
 LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content,itembank"
 PARAGON_THEME_URLS=

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -173,12 +173,18 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
     updateSettings({ scoring: { ...scoring, weight } });
   };
 
+  const handleGradingMethodChange = (event) => {
+    const { value } = event.target;
+    updateSettings({ scoring: { ...scoring, gradingMethod: value } });
+  };
+
   return {
     attemptDisplayValue,
     handleUnlimitedChange,
     handleMaxAttemptChange,
     handleOnChange,
     handleWeightChange,
+    handleGradingMethodChange,
   };
 };
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js

@@ -147,6 +147,7 @@ describe('Problem settings hooks', () => {
         unlimited: false,
         number: 5,
       },
+      gradingMethod: 'last_score',
     };
     const defaultValue = 1;
     test('test scoringCardHooks initializes display value when attempts.number is null', () => {
@@ -269,6 +270,11 @@ describe('Problem settings hooks', () => {
       output.handleWeightChange({ target: { value } });
       expect(updateSettings).toHaveBeenCalledWith({ scoring: { ...scoring, weight: parseFloat(value) } });
     });
+    test('test handleGradingMethodChange', () => {
+      const value = 'first_score';
+      output.handleGradingMethodChange({ target: { value } });
+      expect(updateSettings).toHaveBeenCalledWith({ scoring: { ...scoring, gradingMethod: value } });
+    });
   });
 
   describe('Show answer card hooks', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

@@ -203,6 +203,7 @@ SettingsWidget.propTypes = {
     showanswer: PropTypes.string,
     showResetButton: PropTypes.bool,
     rerandomize: PropTypes.string,
+    gradingMethod: PropTypes.string,
   }).isRequired,
   images: PropTypes.shape({}).isRequired,
   isLibrary: PropTypes.bool.isRequired,

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx

@@ -33,6 +33,7 @@ describe('SettingsWidget', () => {
       maxAttempts: 2,
       showanswer: 'finished',
       showResetButton: false,
+      gradingMethod: 'last_score',
     },
     images: {},
     isLibrary: false,

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.ts

@@ -82,6 +82,16 @@ const messages = defineMessages({
     defaultMessage: 'Points',
     description: 'Scoring weight input label',
   },
+  scoringGradingMethodInputLabel: {
+    id: 'authoring.problemeditor.settings.scoring.grading.method.inputLabel',
+    defaultMessage: 'Grading Method',
+    description: 'Grading method input label',
+  },
+  gradingMethodSummary: {
+    id: 'authoring.problemeditor.settings.scoring.grading.method',
+    defaultMessage: '{gradingMethod}',
+    description: 'Summary text for scoring grading method',
+  },
   unlimitedAttemptsSummary: {
     id: 'authoring.problemeditor.settings.scoring.unlimited',
     defaultMessage: 'Unlimited attempts',
@@ -107,6 +117,11 @@ const messages = defineMessages({
     defaultMessage: 'Specify point weight and the number of answer attempts',
     description: 'Descriptive text for scoring settings',
   },
+  scoringSettingsLabelWithGradingMethod: {
+    id: 'authoring.problemeditor.settings.scoring.label.withGradingMethod',
+    defaultMessage: 'Specify grading method, point weight and the number of answer attempts',
+    description: 'Descriptive text for scoring settings when grading method is enabled',
+  },
   attemptsHint: {
     id: 'authoring.problemeditor.settings.scoring.attempts.hint',
     defaultMessage: 'If a default value is not set in advanced settings, unlimited attempts are allowed',
@@ -117,6 +132,11 @@ const messages = defineMessages({
     defaultMessage: 'If a value is not set, the problem is worth one point',
     description: 'Summary text for scoring weight',
   },
+  gradingMethodHint: {
+    id: 'authoring.problemeditor.settings.scoring.grading.method.hint',
+    defaultMessage: 'Define the grading method for this problem. By default, it is the score of the last submission made by the student.',
+    description: 'Summary text for scoring grading method',
+  },
   showAnswerSettingsTitle: {
     id: 'authoring.problemeditor.settings.showAnswer.title',
     defaultMessage: 'Show answer',

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx

@@ -8,6 +8,7 @@ import { selectors } from '../../../../../../data/redux';
 import SettingsOption from '../SettingsOption';
 import messages from '../messages';
 import { scoringCardHooks } from '../hooks';
+import { GradingMethod, GradingMethodKeys } from '../../../../../../data/constants/problem';
 
 const ScoringCard = ({
   scoring,
@@ -23,28 +24,62 @@ const ScoringCard = ({
     handleUnlimitedChange,
     handleMaxAttemptChange,
     handleWeightChange,
+    handleGradingMethodChange,
     handleOnChange,
     attemptDisplayValue,
   } = scoringCardHooks(scoring, updateSettings, defaultValue);
 
-  const getScoringSummary = (weight, attempts, unlimited) => {
+  const getScoringSummary = (weight, attempts, unlimited, gradingMethod) => {
     let summary = intl.formatMessage(messages.weightSummary, { weight });
     summary += ` ${String.fromCharCode(183)} `;
     summary += unlimited
       ? intl.formatMessage(messages.unlimitedAttemptsSummary)
       : intl.formatMessage(messages.attemptsSummary, { attempts: attempts || defaultValue });
+
+    const methodMessage = gradingMethod ? GradingMethod[gradingMethod] : null;
+
+    if (methodMessage) {
+      summary += ` ${String.fromCharCode(183)} `;
+      summary += intl.formatMessage(messages.gradingMethodSummary, {
+        gradingMethod: intl.formatMessage(methodMessage),
+      });
+    }
+
     return summary;
   };
 
   return (
     <SettingsOption
       title={intl.formatMessage(messages.scoringSettingsTitle)}
-      summary={getScoringSummary(scoring.weight, scoring.attempts.number, scoring.attempts.unlimited)}
+      summary={getScoringSummary(scoring.weight, scoring.attempts.number, scoring.attempts.unlimited, scoring.gradingMethod)}
       className="scoringCard"
     >
       <div className="mb-4">
-        <FormattedMessage {...messages.scoringSettingsLabel} />
+        <FormattedMessage {...messages.scoringSettingsLabelWithGradingMethod} />
       </div>
+      <Form.Group>
+        <Form.Control
+          as="select"
+          value={scoring.gradingMethod}
+          onChange={handleGradingMethodChange}
+          floatingLabel={intl.formatMessage(messages.scoringGradingMethodInputLabel)}
+        >
+          {Object.values(GradingMethodKeys).map((gradingMethod) => {
+            const optionDisplayName = GradingMethod[gradingMethod];
+            return (
+              <option
+                key={gradingMethod}
+                value={gradingMethod}
+              >
+                {intl.formatMessage(optionDisplayName)}
+              </option>
+            );
+          })}
+        </Form.Control>
+        <Form.Control.Feedback>
+          <FormattedMessage {...messages.gradingMethodHint} />
+        </Form.Control.Feedback>
+      </Form.Group>
       <Form.Group>
         <Form.Control
           type="number"

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx

@@ -4,6 +4,7 @@ import {
 } from '@src/testUtils';
 import ScoringCard from './ScoringCard';
 import { selectors } from '../../../../../../data/redux';
+import { GradingMethodKeys } from '../../../../../../data/constants/problem';
 
 const { app } = selectors;
 
@@ -14,6 +15,7 @@ describe('ScoringCard', () => {
       unlimited: false,
       number: 5,
     },
+    gradingMethod: GradingMethodKeys.LAST_SCORE,
     updateSettings: jest.fn().mockName('args.updateSettings'),
   };
 
@@ -59,6 +61,17 @@ describe('ScoringCard', () => {
     expect(props.updateSettings).toHaveBeenCalled();
   });
 
+  test('should call updateSettings when changing grading method', () => {
+    render(<ScoringCard {...props} />);
+    fireEvent.click(screen.getByText('Scoring'));
+    const gradingSelect = screen.getByRole('combobox', { name: 'Grading method' });
+    expect(gradingSelect).toBeInTheDocument();
+    expect(gradingSelect.value).toBe(GradingMethodKeys.LAST_SCORE);
+    
+    fireEvent.change(gradingSelect, { target: { value: GradingMethodKeys.HIGHEST_SCORE } });
+    expect(props.updateSettings).toHaveBeenCalled();
+  });
+
   test('should call updateSettings when clicking attempts button', () => {
     const scoringUnlimited = { ...scoring, attempts: { unlimited: true, number: 0 } };
     render(<ScoringCard {...props} scoring={scoringUnlimited} />);