Save and continue when there is no feedback

src/components/Exercise.spec.tsx

@@ -142,6 +142,7 @@ describe('Exercise', () => {
         numberOfQuestions: 1,
         scrollToQuestion: 1,
         hasMultipleAttempts: false,
+        hasFeedback: true,
         onAnswerChange: () => null,
         onAnswerSave: () => null,
         onNextStep: () => null,

src/components/Exercise.stories.tsx

@@ -130,6 +130,7 @@ const exerciseWithQuestionStatesProps = (): ExerciseWithQuestionStatesProps => {
       apiIsPending: false
     }
   },
+  hasFeedback: true,
 }};
 
 type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3;
@@ -181,6 +182,34 @@ export const Default = () => {
   )
 };
 
+export const DefaultWithoutFeedback = () => {
+  const [selectedAnswerId, setSelectedAnswerId] = useState<number>(0);
+  const [apiIsPending, setApiIsPending] = useState(false)
+  const [isCompleted, setIsCompleted] = useState(false)
+  const props = exerciseWithQuestionStatesProps();
+  props.hasFeedback = false;
+  props.questionStates['1'].answer_id = selectedAnswerId;
+  props.questionStates['1'].apiIsPending = apiIsPending;
+  props.questionStates['1'].is_completed = isCompleted;
+  props.questionStates['1'].canAnswer = !isCompleted;
+  return (
+    <Exercise
+      {...props}
+      onAnswerChange={(a: Omit<Answer, 'id'> & { id: number, question_id: number }) => {
+        setSelectedAnswerId(a.id)
+      }}
+      onAnswerSave={() => {
+        setApiIsPending(true);
+        setTimeout(() => {
+          setApiIsPending(false)
+          setIsCompleted(true)
+        }, 1000)
+      }}
+      onNextStep={(idx) => console.log(`Next step: ${idx}`)}
+    />
+  )
+};
+
 export const DeprecatedStepData = () => <Exercise {...exerciseWithStepDataProps} />;
 
 export const CompleteWithFeedback = () => {
@@ -210,6 +239,34 @@ export const CompleteWithFeedback = () => {
   return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
+export const CompleteWithoutFeedback = () => {
+  const props: ExerciseWithQuestionStatesProps = {
+    ...exerciseWithQuestionStatesProps(),
+
+    questionStates: {
+      '1': {
+        available_points: '1.0',
+        is_completed: true,
+        answer_id_order: ['1', '2'],
+        answer_id: 1,
+        free_response: 'Free response',
+        feedback_html: '',
+        correct_answer_id: '',
+        correct_answer_feedback_html: '',
+        attempts_remaining: 0,
+        attempt_number: 1,
+        incorrectAnswerId: 0,
+        canAnswer: false,
+        needsSaved: false,
+        apiIsPending: false
+      }
+    },
+    hasFeedback: false,
+  };
+
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
+};
+
 export const IncorrectWithFeedbackAndSolution = () => {
   const props: ExerciseWithQuestionStatesProps = { ...exerciseWithQuestionStatesProps() };
   props.questionStates = {

src/components/Exercise.tsx

@@ -138,6 +138,7 @@ export interface ExerciseBaseProps {
    * - A topic icon linking to the relevant textbook location
    */
   exerciseIcons?: ExerciseIcons;
+  hasFeedback?: boolean;
 }
 
 export interface ExerciseWithStepDataProps extends ExerciseBaseProps {

src/components/ExerciseQuestion.spec.tsx

@@ -50,6 +50,7 @@ describe('ExerciseQuestion', () => {
       displaySolution: false,
       available_points: '1.0',
       exercise_uid: '',
+      hasFeedback: true,
     }
   });
 
@@ -125,6 +126,21 @@ describe('ExerciseQuestion', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders Submit & continue button', () => {
+    const tree = renderer.create(
+      <ExerciseQuestion {...props}
+        choicesEnabled={true}
+        incorrectAnswerId='2'
+        canAnswer={true}
+        needsSaved={true}
+        answer_id='1'
+        canUpdateCurrentStep={false}
+        hasFeedback={false}
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('renders continue button (unused?)', () => {
     const tree = renderer.create(
       <ExerciseQuestion {...props}
@@ -197,4 +213,27 @@ describe('ExerciseQuestion', () => {
 
     expect(mockFn).toHaveBeenCalledWith(0);
   });
+
+  it('passes question index on submit button click when there is not feedback', () => {
+    const mockFn = jest.fn();
+
+    // This combination of props should never happen: `is_completed` should not 
+    // be true at the same time as `needsSaved`. This combination allows the 
+    // test to work correctly without simulating waiting for api calls
+    const tree = renderer.create(
+      <ExerciseQuestion
+        {...props}
+        needsSaved={true}
+        canAnswer={true}
+        hasFeedback={false}
+        is_completed={true}
+        onNextStep={mockFn}
+      />
+    );
+    renderer.act(() => {
+      tree.root.findByType(SaveButton).props.onClick();
+    });
+
+    expect(mockFn).toHaveBeenCalledWith(0);
+  });
 });

src/components/ExerciseQuestion.stories.tsx

@@ -51,7 +51,8 @@ const props = {
   needsSaved: true,
   canUpdateCurrentStep: true,
   attempt_number: 0,
-  apiIsPending: false
+  apiIsPending: false,
+  hasFeedback: false
 };
 
 export const Default = () => <ExerciseQuestion {...props} />;

src/components/ExerciseQuestion.tsx

@@ -37,6 +37,7 @@ export interface ExerciseQuestionProps {
   free_response?: string;
   show_all_feedback?: boolean;
   tableFeedbackEnabled?: boolean;
+  hasFeedback?: ExerciseBaseProps['hasFeedback'];
 }
 
 const AttemptsRemaining = ({ count }: { count: number }) => {
@@ -56,15 +57,17 @@ const PublishedComments = ({ published_comments }: { published_comments?: string
 }
 
 export const SaveButton = (props: {
-  disabled: boolean, isWaiting: boolean, attempt_number: number
+  disabled: boolean, isWaiting: boolean, attempt_number: number, willContinue: boolean
 } & React.ComponentPropsWithoutRef<'button'>) => (
   <Button
     {...props}
     waitingText="Saving…"
     isWaiting={props.isWaiting}
     data-test-id="submit-answer-btn"
   >
-    {props.attempt_number == 0 ? 'Submit' : 'Re-submit'}
+    {props.willContinue
+      ? 'Submit & continue'
+      : (props.attempt_number == 0 ? 'Submit' : 'Re-submit')}
   </Button>
 );
 
@@ -93,9 +96,18 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
     is_completed, correct_answer_id, incorrectAnswerId, choicesEnabled, questionNumber,
     answer_id, hasMultipleAttempts, attempts_remaining, published_comments, detailedSolution,
     canAnswer, needsSaved, attempt_number, apiIsPending, onAnswerSave, onNextStep, canUpdateCurrentStep,
-    displaySolution, available_points, free_response, show_all_feedback, tableFeedbackEnabled
+    displaySolution, available_points, free_response, show_all_feedback, tableFeedbackEnabled,
+    hasFeedback
   } = props;
 
+  const [shouldContinue, setShouldContinue] = React.useState(false)
+  React.useEffect(() => {
+    if (shouldContinue && is_completed) {
+      onNextStep(questionNumber - 1);
+      setShouldContinue(false);
+    }
+  }, [onNextStep, questionNumber, shouldContinue, is_completed]);
+
   return (
     <div data-test-id="student-exercise-question">
       <Question
@@ -133,12 +145,18 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
             {detailedSolution && (<div><strong>Detailed solution:</strong> <Content html={detailedSolution} /></div>)}
           </div>
           <div className="controls">
-            {canAnswer && needsSaved ?
+            {(canAnswer && needsSaved) || shouldContinue ?
               <SaveButton
-                disabled={apiIsPending || !answer_id}
-                isWaiting={apiIsPending}
+                disabled={apiIsPending || !answer_id || shouldContinue}
+                isWaiting={apiIsPending || shouldContinue}
                 attempt_number={attempt_number}
-                onClick={() => onAnswerSave(numberfyId(question.id))}
+                onClick={() => {
+                  onAnswerSave(numberfyId(question.id));
+                  if (!hasFeedback) {
+                    setShouldContinue(true);
+                  }
+                }}
+                willContinue={!hasFeedback}
               /> :
               <NextButton onClick={() => onNextStep(questionNumber - 1)} canUpdateCurrentStep={canUpdateCurrentStep} />}
           </div>

src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap

@@ -470,6 +470,165 @@ exports[`ExerciseQuestion renders Save button 1`] = `
 </div>
 `;
 
+exports[`ExerciseQuestion renders Submit & continue button 1`] = `
+<div
+  data-test-id="student-exercise-question"
+>
+  <div
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
+    data-question-number={1}
+    data-test-id="question"
+  >
+    <div
+      className="question-stem"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Is this a question?",
+        }
+      }
+      data-question-number={1}
+    />
+    <div
+      className="answers-table"
+    >
+      <div
+        className="openstax-answer"
+      >
+        <section
+          className="answers-answer answer-selected"
+        >
+          <input
+            checked={true}
+            className="answer-input-box"
+            disabled={false}
+            id="1-option-0"
+            name="1-options"
+            onChange={[Function]}
+            type="radio"
+          />
+          <label
+            className="answer-label"
+            htmlFor="1-option-0"
+          >
+            <span
+              className="answer-letter-wrapper"
+            >
+              <button
+                aria-label="Selected Choice A:"
+                className="answer-letter"
+                data-test-id="answer-choice-A"
+                disabled={false}
+                onClick={[Function]}
+              >
+                A
+              </button>
+            </span>
+            <div
+              className="answer-answer"
+            >
+              <span
+                className="answer-content"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "True",
+                  }
+                }
+              />
+            </div>
+          </label>
+        </section>
+      </div>
+      <div
+        className="openstax-answer"
+      >
+        <section
+          className="answers-answer answer-incorrect"
+        >
+          <input
+            checked={false}
+            className="answer-input-box"
+            disabled={false}
+            id="1-option-1"
+            name="1-options"
+            onChange={[Function]}
+            type="radio"
+          />
+          <label
+            className="answer-label"
+            htmlFor="1-option-1"
+          >
+            <span
+              className="answer-letter-wrapper"
+            >
+              <button
+                aria-label="Choice B:"
+                className="answer-letter"
+                data-test-id="answer-choice-B"
+                disabled={true}
+                onClick={[Function]}
+              >
+                B
+              </button>
+            </span>
+            <div
+              className="answer-answer"
+            >
+              <div
+                className="sc-gsnTZi jsjSLp"
+              >
+                Incorrect
+                 Answer
+              </div>
+              <span
+                className="answer-content"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "False",
+                  }
+                }
+              />
+            </div>
+          </label>
+        </section>
+      </div>
+    </div>
+  </div>
+  <div
+    className="sc-hKMtZM eTQwo step-card-footer"
+  >
+    <div
+      className="step-card-footer-inner"
+    >
+      <div
+        className="points"
+        role="status"
+      >
+        <strong>
+          Points: 
+          1.0
+        </strong>
+        <span
+          className="attempts-left"
+        />
+
+      </div>
+      <div
+        className="controls"
+      >
+        <button
+          className="sc-bczRLJ fLTvYy"
+          data-test-id="submit-answer-btn"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Submit & continue
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ExerciseQuestion renders all attempts remaining 1`] = `
 <div
   data-test-id="student-exercise-question"