refactor(client): use generic comp for multiple choice (freeCodeCamp#56825)

Co-authored-by: moT01 <[email protected]>

Author: ojeytonwilliams

client/src/templates/Challenges/fill-in-the-blank/show.tsx

@@ -32,8 +32,6 @@ import {
 import Scene from '../components/scene/scene';
 import { isChallengeCompletedSelector } from '../redux/selectors';
 
-// Styles
-import '../video.css';
 import './show.css';
 
 // Redux Setup

…t/src/templates/Challenges/odin/show.css …rc/templates/Challenges/generic/show.cssclient/src/templates/Challenges/odin/show.css renamed to client/src/templates/Challenges/generic/show.css client/src/templates/Challenges/odin/show.css renamed to client/src/templates/Challenges/generic/show.css

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Container, Col, Row, Button, Spacer } from '@freecodecamp/ui';
+import { isEqual } from 'lodash';
 
 // Local Utilities
 import LearnLayout from '../../../components/layouts/learn';
@@ -24,6 +25,13 @@ import {
 import { isChallengeCompletedSelector } from '../redux/selectors';
 import { BlockTypes } from '../../../../../shared/config/blocks';
 import Scene from '../components/scene/scene';
+import MultipleChoiceQuestions from '../components/multiple-choice-questions';
+import ChallengeExplanation from '../components/challenge-explanation';
+import HelpModal from '../components/help-modal';
+
+// Styles
+import './show.css';
+import '../video.css';
 
 // Redux Setup
 const mapStateToProps = (state: unknown) => ({
@@ -35,7 +43,8 @@ const mapDispatchToProps = {
   updateChallengeMeta,
   challengeMounted,
   updateSolutionFormValues,
-  openCompletionModal: () => openModal('completion')
+  openCompletionModal: () => openModal('completion'),
+  openHelpModal: () => openModal('help')
 };
 
 // Types
@@ -46,6 +55,7 @@ interface ShowQuizProps {
   initTests: (xs: Test[]) => void;
   isChallengeCompleted: boolean;
   openCompletionModal: () => void;
+  openHelpModal: () => void;
   pageContext: {
     challengeMeta: ChallengeMeta;
   };
@@ -63,10 +73,12 @@ const ShowGeneric = ({
         block,
         blockType,
         description,
+        explanation,
         challengeType,
-        fields: { tests },
+        fields: { blockName, tests },
         helpCategory,
         instructions,
+        questions,
         title,
         translationPending,
         scene,
@@ -80,6 +92,7 @@ const ShowGeneric = ({
   initTests,
   updateChallengeMeta,
   openCompletionModal,
+  openHelpModal,
   isChallengeCompleted
 }: ShowQuizProps) => {
   const { t } = useTranslation();
@@ -142,9 +155,36 @@ const ShowGeneric = ({
     setAssignmentsCompleted(a => (isCompleted ? a + 1 : a - 1));
   };
 
+  // multiple choice questions
+  const [selectedMcqOptions, setSelectedMcqOptions] = useState(
+    questions.map<number | null>(() => null)
+  );
+  const [submittedMcqAnswers, setSubmittedMcqAnswers] = useState(
+    questions.map<number | null>(() => null)
+  );
+  const [showFeedback, setShowFeedback] = useState(false);
+
+  const handleMcqOptionChange = (
+    questionIndex: number,
+    answerIndex: number
+  ): void => {
+    setSelectedMcqOptions(prev =>
+      prev.map((option, index) =>
+        index === questionIndex ? answerIndex : option
+      )
+    );
+  };
+
   // submit
   const handleSubmit = () => {
-    if (assignments.length == 0 || allAssignmentsCompleted) {
+    const hasCompletedAssignments =
+      assignments.length === 0 || allAssignmentsCompleted;
+    const mcqSolutions = questions.map(question => question.solution - 1);
+    const mcqCorrect = isEqual(mcqSolutions, selectedMcqOptions);
+
+    setSubmittedMcqAnswers(selectedMcqOptions);
+    setShowFeedback(true);
+    if (hasCompletedAssignments && mcqCorrect) {
       openCompletionModal();
     }
   };
@@ -214,15 +254,34 @@ const ShowGeneric = ({
                 />
               )}
 
+              {!!questions && (
+                <MultipleChoiceQuestions
+                  questions={questions}
+                  selectedOptions={selectedMcqOptions}
+                  handleOptionChange={handleMcqOptionChange}
+                  submittedMcqAnswers={submittedMcqAnswers}
+                  showFeedback={showFeedback}
+                />
+              )}
+
+              {explanation ? (
+                <ChallengeExplanation explanation={explanation} />
+              ) : null}
+
               <Button block={true} variant='primary' onClick={handleSubmit}>
                 {blockType === BlockTypes.review
                   ? t('buttons.submit')
                   : t('buttons.check-answer')}
               </Button>
+              <Spacer size='xxs' />
+              <Button block={true} variant='primary' onClick={openHelpModal}>
+                {t('buttons.ask-for-help')}
+              </Button>
 
               <Spacer size='l' />
             </Col>
             <CompletionModal />
+            <HelpModal challengeTitle={title} challengeBlock={blockName} />
           </Row>
         </Container>
       </LearnLayout>
@@ -248,6 +307,7 @@ export const query = graphql`
         blockType
         challengeType
         description
+        explanation
         helpCategory
         instructions
         fields {
@@ -258,6 +318,14 @@ export const query = graphql`
             testString
           }
         }
+        questions {
+          text
+          answers {
+            answer
+            feedback
+          }
+          solution
+        }
         scene {
           setup {
             background