From 3074bb199dd9ca486f9a4e388614f6fc71a0aa57 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Fri, 6 Sep 2024 05:16:26 -0500
Subject: [PATCH] refactor(client/challenge views): extract items into sharable
 components (#55946)

---
 client/i18n/locales/english/translations.json |   2 +-
 .../Challenges/components/assignments.css     |   4 +
 .../Challenges/components/assignments.tsx     |  58 +++++++
 .../components/fill-in-the-blanks.tsx         |  87 +++++++++++
 .../components/multiple-choice-questions.tsx  |  85 +++++++++++
 .../Challenges/components/scene/scene.tsx     |   3 +-
 .../Challenges/components/video-player.tsx    |  12 +-
 .../templates/Challenges/dialogue/show.tsx    |  45 +-----
 .../Challenges/fill-in-the-blank/show.css     |  19 ---
 .../Challenges/fill-in-the-blank/show.tsx     | 101 +++----------
 client/src/templates/Challenges/odin/show.tsx | 142 ++++--------------
 .../src/templates/Challenges/video/show.tsx   |  94 +++---------
 12 files changed, 318 insertions(+), 334 deletions(-)
 create mode 100644 client/src/templates/Challenges/components/assignments.css
 create mode 100644 client/src/templates/Challenges/components/assignments.tsx
 create mode 100644 client/src/templates/Challenges/components/fill-in-the-blanks.tsx
 create mode 100644 client/src/templates/Challenges/components/multiple-choice-questions.tsx

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 2529db851b0..361049204b1 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -385,7 +385,7 @@
     "add-subtitles": "Help improve or add subtitles",
     "wrong-answer": "Sorry, that's not the right answer. Give it another try?",
     "check-answer": "Click the button below to check your answer.",
-    "assignment-not-complete": "Please finish the assignments",
+    "assignment-not-complete": "Please complete the assignments",
     "assignments": "Assignments",
     "question": "Question",
     "solution-link": "Solution Link",
diff --git a/client/src/templates/Challenges/components/assignments.css b/client/src/templates/Challenges/components/assignments.css
new file mode 100644
index 00000000000..7e52d42aaa1
--- /dev/null
+++ b/client/src/templates/Challenges/components/assignments.css
@@ -0,0 +1,4 @@
+.assignments-not-complete {
+  text-align: center;
+  color: var(--danger-color);
+}
diff --git a/client/src/templates/Challenges/components/assignments.tsx b/client/src/templates/Challenges/components/assignments.tsx
new file mode 100644
index 00000000000..1282a00ae06
--- /dev/null
+++ b/client/src/templates/Challenges/components/assignments.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Spacer from '../../../components/helpers/spacer';
+import ChallengeHeading from './challenge-heading';
+import PrismFormatted from './prism-formatted';
+
+import './assignments.css';
+
+type AssignmentsProps = {
+  assignments: string[];
+  allAssignmentsCompleted: boolean;
+  handleAssignmentChange: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    totalAssignments: number
+  ) => void;
+};
+
+function Assignments({
+  assignments,
+  allAssignmentsCompleted,
+  handleAssignmentChange
+}: AssignmentsProps): JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      <ChallengeHeading heading={t('learn.assignments')} />
+      <div className='video-quiz-options'>
+        {assignments.map((assignment, index) => (
+          <label className='video-quiz-option-label' key={index}>
+            <input
+              name='assignment'
+              type='checkbox'
+              onChange={event =>
+                handleAssignmentChange(event, assignments.length)
+              }
+            />
+            <PrismFormatted className={'video-quiz-option'} text={assignment} />
+            <Spacer size='medium' />
+          </label>
+        ))}
+      </div>
+      {!allAssignmentsCompleted && (
+        <>
+          <Spacer size='medium' />
+          <div className='assignments-not-complete'>
+            {t('learn.assignment-not-complete')}
+          </div>
+        </>
+      )}
+      <Spacer size='medium' />
+    </>
+  );
+}
+
+Assignments.displayName = 'Assignments';
+
+export default Assignments;
diff --git a/client/src/templates/Challenges/components/fill-in-the-blanks.tsx b/client/src/templates/Challenges/components/fill-in-the-blanks.tsx
new file mode 100644
index 00000000000..ca1981bc3c7
--- /dev/null
+++ b/client/src/templates/Challenges/components/fill-in-the-blanks.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { parseBlanks } from '../fill-in-the-blank/parse-blanks';
+import Spacer from '../../../components/helpers/spacer';
+import PrismFormatted from '../components/prism-formatted';
+import { FillInTheBlank } from '../../../redux/prop-types';
+import ChallengeHeading from './challenge-heading';
+
+type FillInTheBlankProps = {
+  fillInTheBlank: FillInTheBlank;
+  answersCorrect: (boolean | null)[];
+  showFeedback: boolean;
+  feedback: string | null;
+  showWrong: boolean;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+function FillInTheBlanks({
+  fillInTheBlank: { sentence, blanks },
+  answersCorrect,
+  showFeedback,
+  feedback,
+  showWrong,
+  handleInputChange
+}: FillInTheBlankProps): JSX.Element {
+  const { t } = useTranslation();
+
+  const addInputClass = (index: number): string => {
+    if (answersCorrect[index] === true) return 'green-underline';
+    if (answersCorrect[index] === false) return 'red-underline';
+    return '';
+  };
+
+  const paragraphs = parseBlanks(sentence);
+  const blankAnswers = blanks.map(b => b.answer);
+
+  return (
+    <>
+      <ChallengeHeading heading={t('learn.fill-in-the-blank')} />
+      <Spacer size='small' />
+      <div className='fill-in-the-blank-wrap'>
+        {paragraphs.map((p, i) => {
+          return (
+            // both keys, i and j, are stable between renders, since
+            // the paragraphs are static.
+            <p key={i}>
+              {p.map((node, j) => {
+                const { type, value } = node;
+                if (type === 'text') return value;
+                if (type === 'blank')
+                  return (
+                    <input
+                      key={j}
+                      type='text'
+                      maxLength={blankAnswers[value].length + 3}
+                      className={`fill-in-the-blank-input ${addInputClass(
+                        value
+                      )}`}
+                      onChange={handleInputChange}
+                      data-index={node.value}
+                      size={blankAnswers[value].length}
+                      aria-label={t('learn.blank')}
+                    />
+                  );
+              })}
+            </p>
+          );
+        })}
+      </div>
+      <Spacer size='medium' />
+      {showFeedback && feedback && (
+        <>
+          <PrismFormatted text={feedback} />
+          <Spacer size='medium' />
+        </>
+      )}
+      <div className='text-center'>
+        {showWrong && <span>{t('learn.wrong-answer')}</span>}
+      </div>
+    </>
+  );
+}
+
+FillInTheBlanks.displayName = 'FillInTheBlanks';
+
+export default FillInTheBlanks;
diff --git a/client/src/templates/Challenges/components/multiple-choice-questions.tsx b/client/src/templates/Challenges/components/multiple-choice-questions.tsx
new file mode 100644
index 00000000000..291c7077bc7
--- /dev/null
+++ b/client/src/templates/Challenges/components/multiple-choice-questions.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Question } from '../../../redux/prop-types';
+import Spacer from '../../../components/helpers/spacer';
+import ChallengeHeading from './challenge-heading';
+import PrismFormatted from './prism-formatted';
+
+type MultipleChoiceQuestionsProps = {
+  questions: Question;
+  selectedOption: number | null;
+  isWrongAnswer: boolean;
+  handleOptionChange: (
+    changeEvent: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+};
+
+function MultipleChoiceQuestions({
+  questions: { text, answers },
+  selectedOption,
+  isWrongAnswer,
+  handleOptionChange
+}: MultipleChoiceQuestionsProps): JSX.Element {
+  const { t } = useTranslation();
+
+  const feedback =
+    selectedOption !== null ? answers[selectedOption].feedback : undefined;
+
+  return (
+    <>
+      <ChallengeHeading heading={t('learn.question')} />
+      <PrismFormatted className={'line-numbers'} text={text} />
+      <div className='video-quiz-options'>
+        {answers.map(({ answer }, index) => (
+          <label
+            className='video-quiz-option-label'
+            key={index}
+            htmlFor={`mc-question-${index}`}
+          >
+            <input
+              name='quiz'
+              checked={selectedOption === index}
+              className='sr-only'
+              onChange={handleOptionChange}
+              type='radio'
+              value={index}
+              id={`mc-question-${index}`}
+            />{' '}
+            <span className='video-quiz-input-visible'>
+              {selectedOption === index ? (
+                <span className='video-quiz-selected-input' />
+              ) : null}
+            </span>
+            <PrismFormatted
+              className={'video-quiz-option'}
+              text={answer.replace(/^<p>|<\/p>$/g, '')}
+              useSpan
+              noAria
+            />
+          </label>
+        ))}
+      </div>
+      {isWrongAnswer && (
+        <>
+          <Spacer size='medium' />
+          <div className='text-center'>
+            {feedback ? (
+              <PrismFormatted
+                className={'multiple-choice-feedback'}
+                text={feedback}
+              />
+            ) : (
+              t('learn.wrong-answer')
+            )}
+          </div>
+        </>
+      )}
+      <Spacer size='medium' />
+    </>
+  );
+}
+
+MultipleChoiceQuestions.displayName = 'MultipleChoiceQuestions';
+
+export default MultipleChoiceQuestions;
diff --git a/client/src/templates/Challenges/components/scene/scene.tsx b/client/src/templates/Challenges/components/scene/scene.tsx
index 44d7d467744..79fd884c725 100644
--- a/client/src/templates/Challenges/components/scene/scene.tsx
+++ b/client/src/templates/Challenges/components/scene/scene.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'; //, ReactElement } f
 import { Col } from '@freecodecamp/ui';
 import { useTranslation } from 'react-i18next';
 import { FullScene } from '../../../../redux/prop-types';
-import { Loader } from '../../../../components/helpers';
+import { Loader, Spacer } from '../../../../components/helpers';
 import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
 import { sounds, images, backgrounds, characterAssets } from './scene-assets';
 import Character from './character';
@@ -283,6 +283,7 @@ export function Scene({
           </>
         )}
       </div>
+      <Spacer size='medium' />
     </Col>
   );
 }
diff --git a/client/src/templates/Challenges/components/video-player.tsx b/client/src/templates/Challenges/components/video-player.tsx
index a875175eb53..1f068d686f2 100644
--- a/client/src/templates/Challenges/components/video-player.tsx
+++ b/client/src/templates/Challenges/components/video-player.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import YouTube from 'react-youtube';
+
+import Loader from '../../../components/helpers/loader';
 import envData from '../../../../config/env.json';
 import type { BilibiliIds, VideoLocaleIds } from '../../../redux/prop-types';
 
@@ -47,7 +49,13 @@ function VideoPlayer({
   }
 
   return (
-    <>
+    <div className='video-wrapper'>
+      {!videoIsLoaded ? (
+        <div className='video-placeholder-loader'>
+          <Loader />
+        </div>
+      ) : null}
+
       {bilibiliSrc ? (
         <iframe
           frameBorder='no'
@@ -71,7 +79,7 @@ function VideoPlayer({
           videoId={videoId}
         />
       )}
-    </>
+    </div>
   );
 }
 
diff --git a/client/src/templates/Challenges/dialogue/show.tsx b/client/src/templates/Challenges/dialogue/show.tsx
index d9139420f01..0ef10b36053 100644
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -19,7 +19,6 @@ import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
 import CompletionModal from '../components/completion-modal';
 import ChallengeTitle from '../components/challenge-title';
-import ChallengeHeading from '../components/challenge-heading';
 import HelpModal from '../components/help-modal';
 import PrismFormatted from '../components/prism-formatted';
 import {
@@ -30,6 +29,7 @@ import {
 } from '../redux/actions';
 import { isChallengeCompletedSelector } from '../redux/selectors';
 import Scene from '../components/scene/scene';
+import Assignments from '../components/assignments';
 
 // Styles
 import '../odin/show.css';
@@ -256,45 +256,12 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer size='medium' />
                 <ObserveKeys>
-                  <ChallengeHeading heading={t('learn.assignments')} />
-                  <div className='video-quiz-options'>
-                    {assignments.map((assignment, index) => (
-                      <label className='video-quiz-option-label' key={index}>
-                        <input
-                          name='assignment'
-                          type='checkbox'
-                          onChange={event =>
-                            this.handleAssignmentChange(
-                              event,
-                              assignments.length
-                            )
-                          }
-                        />
-
-                        <PrismFormatted
-                          className={'video-quiz-option'}
-                          text={assignment}
-                        />
-                        <Spacer size='medium' />
-                      </label>
-                    ))}
-                  </div>
-                  <Spacer size='medium' />
+                  <Assignments
+                    assignments={assignments}
+                    allAssignmentsCompleted={this.state.allAssignmentsCompleted}
+                    handleAssignmentChange={this.handleAssignmentChange}
+                  />
                 </ObserveKeys>
-
-                <div
-                  style={{
-                    textAlign: 'center'
-                  }}
-                >
-                  {!this.state.allAssignmentsCompleted &&
-                    assignments.length > 0 && (
-                      <>
-                        <br />
-                        <span>{t('learn.assignment-not-complete')}</span>
-                      </>
-                    )}
-                </div>
                 <Spacer size='medium' />
                 <Button
                   block={true}
diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.css b/client/src/templates/Challenges/fill-in-the-blank/show.css
index 265445b3323..2a855dfad96 100644
--- a/client/src/templates/Challenges/fill-in-the-blank/show.css
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.css
@@ -36,25 +36,6 @@
   z-index: 2;
 }
 
-.code-tag code {
-  font-size: 100%;
-  z-index: 0;
-  position: relative;
-}
-
-.first-code-tag code {
-  border-right: none;
-}
-
-.middle-code-tag code {
-  border-left: none;
-  border-right: none;
-}
-
-.last-code-tag code {
-  border-left: none;
-}
-
 .green-underline {
   border-bottom-color: var(--success-background) !important;
 }
diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.tsx b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
index 3eb056f17e6..3fd482c6347 100644
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -1,6 +1,6 @@
 // Package Utilities
 import { graphql } from 'gatsby';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 import { ObserveKeys } from 'react-hotkeys';
 import type { TFunction } from 'i18next';
@@ -18,9 +18,9 @@ import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
 import ChallengeTitle from '../components/challenge-title';
-import ChallengeHeading from '../components/challenge-heading';
 import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/help-modal';
+import FillInTheBlanks from '../components/fill-in-the-blanks';
 import PrismFormatted from '../components/prism-formatted';
 import {
   challengeMounted,
@@ -31,7 +31,6 @@ import {
 } from '../redux/actions';
 import Scene from '../components/scene/scene';
 import { isChallengeCompletedSelector } from '../redux/selectors';
-import { parseBlanks } from './parse-blanks';
 
 // Styles
 import '../video.css';
@@ -237,25 +236,6 @@ class ShowFillInTheBlank extends Component<
     });
   };
 
-  addCodeTags(str: string, index: number, numberOfBlanks: number): string {
-    if (index === 0) return `${str}</code>`;
-    if (index < numberOfBlanks) return `<code>${str}</code>`;
-    return `<code>${str}`;
-  }
-
-  addPrismClass(index: number, numberOfBlanks: number): string {
-    if (index === 0) return `first-code-tag`;
-    if (index < numberOfBlanks) return `middle-code-tag`;
-    return `last-code-tag`;
-  }
-
-  addInputClass(index: number): string {
-    const { answersCorrect } = this.state;
-    if (answersCorrect[index] === true) return 'green-underline';
-    if (answersCorrect[index] === false) return 'red-underline';
-    return '';
-  }
-
   setIsScenePlaying = (shouldPlay: boolean) => {
     this.setState({
       isScenePlaying: shouldPlay
@@ -274,7 +254,7 @@ class ShowFillInTheBlank extends Component<
             block,
             translationPending,
             fields: { blockName },
-            fillInTheBlank: { sentence, blanks },
+            fillInTheBlank,
             scene
           }
         }
@@ -292,9 +272,6 @@ class ShowFillInTheBlank extends Component<
     )} - ${title}`;
 
     const { allBlanksFilled, feedback, showFeedback, showWrong } = this.state;
-    const paragraphs = parseBlanks(sentence);
-
-    const blankAnswers = blanks.map(b => b.answer);
 
     return (
       <Hotkeys
@@ -324,78 +301,34 @@ class ShowFillInTheBlank extends Component<
               </Col>
 
               {scene && (
-                <>
-                  <Scene
-                    scene={scene}
-                    isPlaying={this.state.isScenePlaying}
-                    setIsPlaying={this.setIsScenePlaying}
-                  />
-                  <Spacer size='medium' />
-                </>
+                <Scene
+                  scene={scene}
+                  isPlaying={this.state.isScenePlaying}
+                  setIsPlaying={this.setIsScenePlaying}
+                />
               )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <ChallengeHeading heading={t('learn.fill-in-the-blank')} />
-                <Spacer size='small' />
                 {instructions && (
                   <>
                     <PrismFormatted text={instructions} />
                     <Spacer size='small' />
                   </>
                 )}
+
                 {/* what we want to observe is ctrl/cmd + enter, but ObserveKeys is buggy and throws an error
                 if it encounters a key combination, so we have to pass in the individual keys to observe */}
                 <ObserveKeys only={['ctrl', 'cmd', 'enter']}>
-                  <div className='fill-in-the-blank-wrap'>
-                    {paragraphs.map((p, i) => {
-                      return (
-                        // both keys, i and j, are stable between renders, since
-                        // the paragraphs are static.
-                        <p key={i}>
-                          {p.map((node, j) => {
-                            if (node.type === 'text') return node.value;
-                            if (node.type === 'blank')
-                              return (
-                                <input
-                                  key={j}
-                                  type='text'
-                                  maxLength={
-                                    blankAnswers[node.value].length + 3
-                                  }
-                                  className={`fill-in-the-blank-input ${this.addInputClass(
-                                    node.value
-                                  )}`}
-                                  onChange={this.handleInputChange}
-                                  data-index={node.value}
-                                  size={blankAnswers[node.value].length}
-                                  aria-label={t('learn.blank')}
-                                />
-                              );
-                          })}
-                        </p>
-                      );
-                    })}
-                  </div>
+                  <FillInTheBlanks
+                    fillInTheBlank={fillInTheBlank}
+                    answersCorrect={this.state.answersCorrect}
+                    showFeedback={showFeedback}
+                    feedback={feedback}
+                    showWrong={showWrong}
+                    handleInputChange={this.handleInputChange}
+                  />
                 </ObserveKeys>
                 <Spacer size='medium' />
-                {showFeedback && feedback && (
-                  <>
-                    <PrismFormatted text={feedback} />
-                    <Spacer size='small' />
-                  </>
-                )}
-                <div
-                  style={{
-                    textAlign: 'center'
-                  }}
-                >
-                  {showWrong ? (
-                    <span>{t('learn.wrong-answer')}</span>
-                  ) : (
-                    <span>{t('learn.check-answer')}</span>
-                  )}
-                </div>
-                <Spacer size='medium' />
                 <Button
                   block={true}
                   variant='primary'
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 8ce53873348..3f1d3f8612b 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -13,7 +13,6 @@ import { Container, Col, Row, Button } from '@freecodecamp/ui';
 import ShortcutsModal from '../components/shortcuts-modal';
 
 // Local Utilities
-import Loader from '../../../components/helpers/loader';
 import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
@@ -24,7 +23,8 @@ import HelpModal from '../components/help-modal';
 import Scene from '../components/scene/scene';
 import PrismFormatted from '../components/prism-formatted';
 import ChallengeTitle from '../components/challenge-title';
-import ChallengeHeading from '../components/challenge-heading';
+import MultipleChoiceQuestions from '../components/multiple-choice-questions';
+import Assignments from '../components/assignments';
 import {
   challengeMounted,
   updateChallengeMeta,
@@ -236,7 +236,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
             videoLocaleIds,
             bilibiliIds,
             fields: { blockName },
-            question: { text, answers, solution },
+            question,
             assignments,
             translationPending,
             scene
@@ -256,10 +256,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
       `intro:${superBlock}.blocks.${block}.title`
     )} - ${title}`;
 
-    const feedback =
-      this.state.selectedOption !== null
-        ? answers[this.state.selectedOption].feedback
-        : undefined;
+    const { solution } = question;
 
     return (
       <Hotkeys
@@ -280,23 +277,17 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
               {videoId && (
                 <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
                   <Spacer size='medium' />
-                  <div className='video-wrapper'>
-                    {!this.state.videoIsLoaded ? (
-                      <div className='video-placeholder-loader'>
-                        <Loader />
-                      </div>
-                    ) : null}
-                    <VideoPlayer
-                      bilibiliIds={bilibiliIds}
-                      onVideoLoad={this.onVideoLoad}
-                      title={title}
-                      videoId={videoId}
-                      videoIsLoaded={this.state.videoIsLoaded}
-                      videoLocaleIds={videoLocaleIds}
-                    />
-                  </div>
+                  <VideoPlayer
+                    bilibiliIds={bilibiliIds}
+                    onVideoLoad={this.onVideoLoad}
+                    title={title}
+                    videoId={videoId}
+                    videoIsLoaded={this.state.videoIsLoaded}
+                    videoLocaleIds={videoLocaleIds}
+                  />
                 </Col>
               )}
+
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer size='medium' />
                 <ChallengeTitle
@@ -310,104 +301,33 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
               </Col>
 
               {scene && (
-                <>
-                  <Scene
-                    scene={scene}
-                    isPlaying={this.state.isScenePlaying}
-                    setIsPlaying={this.setIsScenePlaying}
-                  />{' '}
-                  <Spacer size='medium' />
-                </>
+                <Scene
+                  scene={scene}
+                  isPlaying={this.state.isScenePlaying}
+                  setIsPlaying={this.setIsScenePlaying}
+                />
               )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ObserveKeys>
                   {assignments.length > 0 && (
-                    <>
-                      <ChallengeHeading heading={t('learn.assignments')} />
-                      <div className='video-quiz-options'>
-                        {assignments.map((assignment, index) => (
-                          <label
-                            className='video-quiz-option-label'
-                            key={index}
-                          >
-                            <input
-                              name='assignment'
-                              type='checkbox'
-                              onChange={event =>
-                                this.handleAssignmentChange(
-                                  event,
-                                  assignments.length
-                                )
-                              }
-                            />
-
-                            <PrismFormatted
-                              className={'video-quiz-option'}
-                              text={assignment}
-                            />
-                            <Spacer size='medium' />
-                          </label>
-                        ))}
-                      </div>{' '}
-                      <Spacer size='medium' />
-                    </>
+                    <Assignments
+                      assignments={assignments}
+                      allAssignmentsCompleted={
+                        this.state.allAssignmentsCompleted
+                      }
+                      handleAssignmentChange={this.handleAssignmentChange}
+                    />
                   )}
 
-                  <ChallengeHeading heading={t('learn.question')} />
-                  <PrismFormatted className={'line-numbers'} text={text} />
-                  <div className='video-quiz-options'>
-                    {answers.map(({ answer }, index) => (
-                      <label className='video-quiz-option-label' key={index}>
-                        <input
-                          aria-label={t('aria.answer')}
-                          checked={this.state.selectedOption === index}
-                          className='sr-only'
-                          name='quiz'
-                          onChange={this.handleOptionChange}
-                          type='radio'
-                          value={index}
-                        />{' '}
-                        <span className='video-quiz-input-visible'>
-                          {this.state.selectedOption === index ? (
-                            <span className='video-quiz-selected-input' />
-                          ) : null}
-                        </span>
-                        <PrismFormatted
-                          className={'video-quiz-option'}
-                          text={answer}
-                        />
-                      </label>
-                    ))}
-                  </div>
+                  <MultipleChoiceQuestions
+                    questions={question}
+                    selectedOption={this.state.selectedOption}
+                    isWrongAnswer={this.state.isWrongAnswer}
+                    handleOptionChange={this.handleOptionChange}
+                  />
                 </ObserveKeys>
                 <Spacer size='medium' />
-                <div
-                  style={{
-                    textAlign: 'center'
-                  }}
-                >
-                  {this.state.isWrongAnswer && (
-                    <span>
-                      {feedback ? (
-                        <PrismFormatted
-                          className={'multiple-choice-feedback'}
-                          text={feedback}
-                        />
-                      ) : (
-                        t('learn.wrong-answer')
-                      )}
-                    </span>
-                  )}
-                  {!this.state.allAssignmentsCompleted &&
-                    assignments.length > 0 && (
-                      <>
-                        <br />
-                        <span>{t('learn.assignment-not-complete')}</span>
-                      </>
-                    )}
-                </div>
-                <Spacer size='medium' />
                 <Button
                   block={true}
                   size='medium'
diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
index faa2180fa78..4bcd1b05c3e 100644
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -12,7 +12,6 @@ import { createSelector } from 'reselect';
 import { Container, Col, Row, Button } from '@freecodecamp/ui';
 
 // Local Utilities
-import Loader from '../../../components/helpers/loader';
 import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta, Test } from '../../../redux/prop-types';
@@ -23,7 +22,7 @@ import VideoPlayer from '../components/video-player';
 import ChallengeTitle from '../components/challenge-title';
 import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/help-modal';
-import PrismFormatted from '../components/prism-formatted';
+import MultipleChoiceQuestions from '../components/multiple-choice-questions';
 import {
   challengeMounted,
   updateChallengeMeta,
@@ -201,7 +200,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
             videoLocaleIds,
             bilibiliIds,
             fields: { blockName },
-            question: { text, answers, solution }
+            question
           }
         }
       },
@@ -218,10 +217,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
       `intro:${superBlock}.blocks.${block}.title`
     )} - ${title}`;
 
-    const feedback =
-      this.state.selectedOption !== null
-        ? answers[this.state.selectedOption].feedback
-        : undefined;
+    const { solution } = question;
 
     return (
       <Hotkeys
@@ -248,84 +244,28 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
 
               {challengeType === challengeTypes.video && (
                 <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
-                  <div className='video-wrapper'>
-                    {!this.state.videoIsLoaded ? (
-                      <div className='video-placeholder-loader'>
-                        <Loader />
-                      </div>
-                    ) : null}
-                    <VideoPlayer
-                      bilibiliIds={bilibiliIds}
-                      onVideoLoad={this.onVideoLoad}
-                      title={title}
-                      videoId={videoId}
-                      videoIsLoaded={this.state.videoIsLoaded}
-                      videoLocaleIds={videoLocaleIds}
-                    />
-                  </div>
+                  <VideoPlayer
+                    bilibiliIds={bilibiliIds}
+                    onVideoLoad={this.onVideoLoad}
+                    title={title}
+                    videoId={videoId}
+                    videoIsLoaded={this.state.videoIsLoaded}
+                    videoLocaleIds={videoLocaleIds}
+                  />
                 </Col>
               )}
 
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <ChallengeDescription description={description} />
-                <PrismFormatted className={'line-numbers'} text={text} />
-                <Spacer size='medium' />
                 <ObserveKeys>
-                  <div className='video-quiz-options'>
-                    {answers.map(({ answer }, index) => (
-                      // answers are static and have no natural id property, so
-                      // index should be fine as a key:
-                      <label
-                        className='video-quiz-option-label'
-                        key={index}
-                        htmlFor={`mc-question-${index}`}
-                      >
-                        <input
-                          checked={this.state.selectedOption === index}
-                          className='sr-only'
-                          name='quiz'
-                          onChange={this.handleOptionChange}
-                          type='radio'
-                          value={index}
-                          id={`mc-question-${index}`}
-                        />{' '}
-                        <span className='video-quiz-input-visible'>
-                          {this.state.selectedOption === index ? (
-                            <span className='video-quiz-selected-input' />
-                          ) : null}
-                        </span>
-                        <PrismFormatted
-                          className={'video-quiz-option'}
-                          text={answer.replace(/^<p>|<\/p>$/g, '')}
-                          useSpan
-                          noAria
-                        />
-                      </label>
-                    ))}
-                  </div>
+                  <MultipleChoiceQuestions
+                    questions={question}
+                    selectedOption={this.state.selectedOption}
+                    isWrongAnswer={this.state.showWrong}
+                    handleOptionChange={this.handleOptionChange}
+                  />
                 </ObserveKeys>
                 <Spacer size='medium' />
-                <div
-                  style={{
-                    textAlign: 'center'
-                  }}
-                >
-                  {this.state.showWrong ? (
-                    <span>
-                      {feedback ? (
-                        <PrismFormatted
-                          className={'multiple-choice-feedback'}
-                          text={feedback}
-                        />
-                      ) : (
-                        t('learn.wrong-answer')
-                      )}
-                    </span>
-                  ) : (
-                    <span>{t('learn.check-answer')}</span>
-                  )}
-                </div>
-                <Spacer size='medium' />
                 <Button
                   block={true}
                   variant='primary'