From bce1b9915b52ebcd716f71a03b7d962e51535eb6 Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Thu, 2 Nov 2023 01:28:53 -0500
Subject: [PATCH] feat(challenge-parser): add feedback to mc questions (#51942)

---
 client/src/redux/prop-types.ts                |  7 ++-
 client/src/templates/Challenges/odin/show.tsx | 26 ++++++++--
 client/src/templates/Challenges/video.css     |  4 ++
 .../src/templates/Challenges/video/show.tsx   | 26 ++++++++--
 curriculum/challenges/.markdownlint.yaml      |  1 +
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 .../introduction-why-program.md               |  8 ++++
 curriculum/schema/challenge-schema.js         |  9 +++-
 docs/how-to-work-on-coding-challenges.md      | 12 +++++
 pnpm-lock.yaml                                | 47 ++++++++++++-------
 tools/challenge-parser/package.json           |  1 +
 .../__fixtures__/ast-video-challenge.json     | 39 +++++++++++++++
 .../__fixtures__/with-video-question.md       |  4 ++
 .../index.acceptance.test.js.snap             | 15 ++++--
 .../add-video-question.test.js.snap           | 15 ++++--
 .../parser/plugins/add-video-question.js      | 24 +++++++++-
 .../parser/plugins/add-video-question.test.js | 25 ++++++----
 .../parser/plugins/utils/before-heading.js    | 21 +++++++++
 .../plugins/utils/before-heading.test.js      | 24 ++++++++++
 28 files changed, 346 insertions(+), 42 deletions(-)
 create mode 100644 tools/challenge-parser/parser/plugins/utils/before-heading.js
 create mode 100644 tools/challenge-parser/parser/plugins/utils/before-heading.test.js

diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts
index 46a8b5c26f5..f56d469f8fb 100644
--- a/client/src/redux/prop-types.ts
+++ b/client/src/redux/prop-types.ts
@@ -47,9 +47,14 @@ export type MarkdownRemark = {
   };
 };
 
+export type MultipleChoiceAnswer = {
+  answer: string;
+  feedback: string | null;
+};
+
 export type Question = {
   text: string;
-  answers: string[];
+  answers: MultipleChoiceAnswer[];
   solution: number;
 };
 export type Fields = {
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 37a90abe6eb..d8d44cd1994 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -231,6 +231,12 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
     const blockNameTitle = `${t(
       `intro:${superBlock}.blocks.${block}.title`
     )} - ${title}`;
+
+    const feedback =
+      this.state.selectedOption !== null
+        ? answers[this.state.selectedOption].feedback
+        : undefined;
+
     return (
       <Hotkeys
         executeChallenge={() => {
@@ -307,7 +313,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   <h2>{t('learn.question')}</h2>
                   <PrismFormatted className={'line-numbers'} text={text} />
                   <div className='video-quiz-options'>
-                    {answers.map((option, index) => (
+                    {answers.map(({ answer }, index) => (
                       <label className='video-quiz-option-label' key={index}>
                         <input
                           aria-label={t('aria.answer')}
@@ -325,7 +331,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                         </span>
                         <PrismFormatted
                           className={'video-quiz-option'}
-                          text={option}
+                          text={answer}
                         />
                       </label>
                     ))}
@@ -338,7 +344,16 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   }}
                 >
                   {this.state.isWrongAnswer && (
-                    <span>{t('learn.wrong-answer')}</span>
+                    <span>
+                      {feedback ? (
+                        <PrismFormatted
+                          className={'multiple-choice-feedback'}
+                          text={feedback}
+                        />
+                      ) : (
+                        t('learn.wrong-answer')
+                      )}
+                    </span>
                   )}
                   {!this.state.allAssignmentsCompleted &&
                     assignments.length > 0 && (
@@ -420,7 +435,10 @@ export const query = graphql`
         }
         question {
           text
-          answers
+          answers {
+            answer
+            feedback
+          }
           solution
         }
         translationPending
diff --git a/client/src/templates/Challenges/video.css b/client/src/templates/Challenges/video.css
index 13ffe992c83..dcbe0cfd18c 100644
--- a/client/src/templates/Challenges/video.css
+++ b/client/src/templates/Challenges/video.css
@@ -114,3 +114,7 @@ input:focus-visible + .video-quiz-input-visible {
   /* remove default prism background */
   background: none;
 }
+
+.multiple-choice-feedback p {
+  margin-bottom: 0;
+}
diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
index 8348f54f84a..1a26ed9d4cb 100644
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/client/src/templates/Challenges/video/show.tsx
@@ -208,6 +208,12 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
     const blockNameTitle = `${t(
       `intro:${superBlock}.blocks.${block}.title`
     )} - ${title}`;
+
+    const feedback =
+      this.state.selectedOption !== null
+        ? answers[this.state.selectedOption].feedback
+        : undefined;
+
     return (
       <Hotkeys
         executeChallenge={() => {
@@ -257,7 +263,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                 <Spacer size='medium' />
                 <ObserveKeys>
                   <div className='video-quiz-options'>
-                    {answers.map((option, index) => (
+                    {answers.map(({ answer }, index) => (
                       // answers are static and have no natural id property, so
                       // index should be fine as a key:
                       <label
@@ -281,7 +287,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                         </span>
                         <PrismFormatted
                           className={'video-quiz-option'}
-                          text={option.replace(/^<p>|<\/p>$/g, '')}
+                          text={answer.replace(/^<p>|<\/p>$/g, '')}
                           useSpan
                           noAria
                         />
@@ -296,7 +302,16 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
                   }}
                 >
                   {this.state.showWrong ? (
-                    <span>{t('learn.wrong-answer')}</span>
+                    <span>
+                      {feedback ? (
+                        <PrismFormatted
+                          className={'multiple-choice-feedback'}
+                          text={feedback}
+                        />
+                      ) : (
+                        t('learn.wrong-answer')
+                      )}
+                    </span>
                   ) : (
                     <span>{t('learn.check-answer')}</span>
                   )}
@@ -365,7 +380,10 @@ export const query = graphql`
         }
         question {
           text
-          answers
+          answers {
+            answer
+            feedback
+          }
           solution
         }
         translationPending
diff --git a/curriculum/challenges/.markdownlint.yaml b/curriculum/challenges/.markdownlint.yaml
index 28fb8789c61..6f10c316fd3 100644
--- a/curriculum/challenges/.markdownlint.yaml
+++ b/curriculum/challenges/.markdownlint.yaml
@@ -2,6 +2,7 @@ default: true  # include all rules, with exceptions below
 MD002: false   # first heading should not be a top level heading
 MD013: false   # lines can be any length
 MD022: false   # headings don't need surrounding by newlines
+MD024: false   # no duplicate headers
 MD025: false   # headings are used as markers by the parser
 MD031: true    # fenced blocks do need surrounding by newlines
 MD033: false   # inline html is required
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 46b355c1545..0d33e12e8f9 100644
--- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Who should learn to program?
 
 College students.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 People who want to become software developers.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Everyone.
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index c1aeec96e77..f2e68fdfc06 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ dashedName: introduction-why-program
 
 大學生。
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 想成爲軟件開發者的人。
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 所有人。
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 8eb62629b0c..971bd27f6e2 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ dashedName: introduction-why-program
 
 大学生。
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 想成为软件开发者的人。
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 所有人。
diff --git a/curriculum/challenges/english/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/english/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 46b355c1545..0d33e12e8f9 100644
--- a/curriculum/challenges/english/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/english/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Who should learn to program?
 
 College students.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 People who want to become software developers.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Everyone.
diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 25c932e41e8..b511f9954cd 100644
--- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Más recursos:
 
 Estudiantes universitarios.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 Personas que quieren convertirse en desarrolladores de software.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Todo el mundo.
diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index dfec7aa3a5b..102ce7a463a 100644
--- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Wer sollte programmieren lernen?
 
 College Studenten.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 Menschen, die Softwareentwickler werden wollen.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Jeder.
diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index e5422148a7b..5608ac90492 100644
--- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Chi dovrebbe imparare a programmare?
 
 Studenti universitari.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 Persone che vogliono diventare sviluppatori di software.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Tutti.
diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 171608a164e..6d8acc78c68 100644
--- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ dashedName: introduction-why-program
 
 大学生
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 ソフトウェアの開発者になりたい人
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 すべての人
diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 5b266cc33b2..16427f4054f 100644
--- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Quem deveria aprender a programar?
 
 Estudantes universitários.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 Pessoas que querem se tornar desenvolvedores de software.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Todos.
diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 46b355c1545..0d33e12e8f9 100644
--- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ Who should learn to program?
 
 College students.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 People who want to become software developers.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Everyone.
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
index 1d28d3402f7..8a729544d38 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -32,10 +32,18 @@ dashedName: introduction-why-program
 
 Студентам коледжу.
 
+### --feedback--
+
+College students should learn to program, but there's a better answer.
+
 ---
 
 Людям, які хочуть стати розробниками програмного забезпечення.
 
+### --feedback--
+
+People who want to become software developers should learn to program, but there's a better answer.
+
 ---
 
 Всім.
diff --git a/curriculum/schema/challenge-schema.js b/curriculum/schema/challenge-schema.js
index 437dbfe45bd..966a77a9cd8 100644
--- a/curriculum/schema/challenge-schema.js
+++ b/curriculum/schema/challenge-schema.js
@@ -94,7 +94,14 @@ const schema = Joi.object()
     }),
     question: Joi.object().keys({
       text: Joi.string().required(),
-      answers: Joi.array().items(Joi.string()).required(),
+      answers: Joi.array()
+        .items(
+          Joi.object().keys({
+            answer: Joi.string().required(),
+            feedback: Joi.string().allow(null)
+          })
+        )
+        .required(),
       solution: Joi.number().required()
     }),
     required: Joi.array().items(
diff --git a/docs/how-to-work-on-coding-challenges.md b/docs/how-to-work-on-coding-challenges.md
index 5fdcf6adfad..0e061bec265 100644
--- a/docs/how-to-work-on-coding-challenges.md
+++ b/docs/how-to-work-on-coding-challenges.md
@@ -136,6 +136,14 @@ Solutions are used for the CI tests to ensure that changes to the hints will sti
 // third solution etc. - Your solutions should be in HTML.
 ```
 
+# --assignments--
+
+This will show a checkbox that campers have to check before completing a challenge
+
+---
+
+This will show another checkbox that campers have to check before completing a challenge
+
 # --question--
 
 These fields are currently used for the multiple-choice Python challenges.
@@ -148,6 +156,10 @@ The question text goes here.
 
 Answer 1
 
+### --feedback--
+
+This will be shown as feedback when campers guess this answer
+
 ---
 
 Answer 2
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6a354ff9a1..679c7dc200e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1235,6 +1235,9 @@ importers:
       unist-util-find-all-after:
         specifier: 3.0.2
         version: 3.0.2
+      unist-util-find-all-before:
+        specifier: 3.0.1
+        version: 3.0.1
       unist-util-find-all-between:
         specifier: 2.1.0
         version: 2.1.0
@@ -1655,6 +1658,7 @@ packages:
 
   /@aws-crypto/crc32@3.0.0:
     resolution: {integrity: sha512-IzSgsrxUcsrejQbPVilIKy16kAT52EwB6zSaI+M3xxIhKh5+aldEyvI+z6erM7TCLB2BJsFrtHjp6/4/sr+3dA==}
+    requiresBuild: true
     dependencies:
       '@aws-crypto/util': 3.0.0
       '@aws-sdk/types': 3.433.0
@@ -8311,6 +8315,7 @@ packages:
 
   /@smithy/eventstream-codec@2.0.10:
     resolution: {integrity: sha512-3SSDgX2nIsFwif6m+I4+ar4KDcZX463Noes8ekBgQHitULiWvaDZX8XqPaRQSQ4bl1vbeVXHklJfv66MnVO+lw==}
+    requiresBuild: true
     dependencies:
       '@aws-crypto/crc32': 3.0.0
       '@smithy/types': 2.4.0
@@ -8381,6 +8386,7 @@ packages:
   /@smithy/is-array-buffer@2.0.0:
     resolution: {integrity: sha512-z3PjFjMyZNI98JFRJi/U0nGoLWMSJlDjAW4QUX2WNZLas5C0CmVV6LJ01JI0k90l7FvpmixjWxPFmENSClQ7ug==}
     engines: {node: '>=14.0.0'}
+    requiresBuild: true
     dependencies:
       tslib: 2.6.2
     dev: false
@@ -15935,6 +15941,7 @@ packages:
     dependencies:
       ms: 2.1.3
       supports-color: 8.1.1
+    dev: true
 
   /debug@4.3.1:
     resolution: {integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==}
@@ -16270,7 +16277,7 @@ packages:
       '@types/tmp': 0.0.33
       application-config-path: 0.1.1
       command-exists: 1.2.9
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       eol: 0.9.1
       get-port: 3.2.0
       glob: 7.2.3
@@ -17130,7 +17137,7 @@ packages:
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       is-core-module: 2.13.1
       resolve: 1.22.6
     transitivePeerDependencies:
@@ -17181,7 +17188,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 4.33.0(eslint@7.32.0)(typescript@4.9.5)
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.62.0)(eslint-plugin-import@2.29.0)(eslint@8.52.0)
@@ -17210,7 +17217,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@8.52.0)(typescript@4.9.5)
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.62.0)(eslint-plugin-import@2.29.0)(eslint@8.52.0)
@@ -17270,7 +17277,7 @@ packages:
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
       array.prototype.flatmap: 1.3.2
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       doctrine: 2.1.0
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
@@ -17304,7 +17311,7 @@ packages:
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
       array.prototype.flatmap: 1.3.2
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       doctrine: 2.1.0
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
@@ -18548,7 +18555,7 @@ packages:
       debug:
         optional: true
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
 
   /follow-redirects@1.15.3(debug@4.3.4):
     resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
@@ -19396,7 +19403,7 @@ packages:
       css-minimizer-webpack-plugin: 2.0.0(webpack@5.89.0)
       css.escape: 1.5.1
       date-fns: 2.30.0
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       deepmerge: 4.3.1
       del: 5.1.0
       detect-port: 1.5.1
@@ -23053,7 +23060,7 @@ packages:
     dependencies:
       async: 0.9.2
       commondir: 1.0.1
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       lodash: 4.17.21
       semver: 5.7.2
       strong-globalize: 4.1.3
@@ -23066,7 +23073,7 @@ packages:
     resolution: {integrity: sha512-vDRR4gqkvGOEXh5yL383xGuGxUW9xtF+NCY6/lJu1VAgupKltZxEx3Vw+L3nsGvQrlkJTSmiK3jk72qxkoBtbw==}
     engines: {node: '>=6'}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       lodash: 4.17.21
       loopback-swagger: 5.9.0
       strong-globalize: 4.1.3
@@ -23081,7 +23088,7 @@ packages:
     dependencies:
       async: 2.6.4
       bson: 1.1.6
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       loopback-connector: 4.11.1
       mongodb: 3.6.9
       strong-globalize: 4.1.3
@@ -23125,7 +23132,7 @@ packages:
     dependencies:
       async: 2.6.4
       bluebird: 3.7.2
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       depd: 1.1.2
       inflection: 1.13.4
       lodash: 4.17.21
@@ -23149,7 +23156,7 @@ packages:
     resolution: {integrity: sha512-p0qSzuuX7eATe5Bxy+RqCj3vSfSFfdCtqyf3yuC+DpchMvgal33XlhEi2UmywyK/Ym28oVnZxxWmfrwFMzSwLQ==}
     engines: {node: '>=4.0.0'}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -23159,7 +23166,7 @@ packages:
     engines: {node: '>=8.9'}
     dependencies:
       async: 2.6.4
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       strong-globalize: 4.1.3
     transitivePeerDependencies:
       - supports-color
@@ -23170,7 +23177,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       async: 2.6.4
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       ejs: 2.7.4
       lodash: 4.17.21
       strong-globalize: 4.1.3
@@ -31233,6 +31240,12 @@ packages:
       unist-util-is: 4.1.0
     dev: false
 
+  /unist-util-find-all-before@3.0.1:
+    resolution: {integrity: sha512-00YMzXOOu4z/qCHKQI6z7TeERAbIBda0E/1sZqP0cJdGd3d1OtUPvQlMhNCwz4QBFo//GcW2dHOYXPdu3jINdA==}
+    dependencies:
+      unist-util-is: 4.1.0
+    dev: false
+
   /unist-util-find-all-between@2.1.0:
     resolution: {integrity: sha512-OCCUtDD8UHKeODw3TPXyFDxPCbpgBzbGTTaDpR68nvxkwiVcawBqMVrokfBMvUi7ij2F5q7S4s4Jq5dvkcBt+w==}
     engines: {node: '>=10'}
@@ -32045,7 +32058,7 @@ packages:
   /webpack-virtual-modules@0.2.2:
     resolution: {integrity: sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -32053,7 +32066,7 @@ packages:
   /webpack-virtual-modules@0.3.2:
     resolution: {integrity: sha512-RXQXioY6MhzM4CNQwmBwKXYgBs6ulaiQ8bkNQEl2J6Z+V+s7lgl/wGvaI/I0dLnYKB8cKsxQc17QOAVIphPLDw==}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
diff --git a/tools/challenge-parser/package.json b/tools/challenge-parser/package.json
index 9c101ae3b28..033793b9c85 100644
--- a/tools/challenge-parser/package.json
+++ b/tools/challenge-parser/package.json
@@ -44,6 +44,7 @@
     "unist-util-find": "1.0.2",
     "unist-util-find-after": "3.0.0",
     "unist-util-find-all-after": "3.0.2",
+    "unist-util-find-all-before": "3.0.1",
     "unist-util-find-all-between": "2.1.0",
     "unist-util-is": "4.1.0",
     "unist-util-modify-children": "2.0.0",
diff --git a/tools/challenge-parser/parser/__fixtures__/ast-video-challenge.json b/tools/challenge-parser/parser/__fixtures__/ast-video-challenge.json
index 524ded2619f..b0c2d63551c 100644
--- a/tools/challenge-parser/parser/__fixtures__/ast-video-challenge.json
+++ b/tools/challenge-parser/parser/__fixtures__/ast-video-challenge.json
@@ -219,6 +219,45 @@
         "indent": []
       }
     },
+    {
+      "type": "heading",
+      "depth": 3,
+      "children": [
+        {
+          "type": "text",
+          "value": "--feedback--",
+          "position": {
+            "start": { "line": 31, "column": 5, "offset": 231 },
+            "end": { "line": 31, "column": 17, "offset": 243 },
+            "indent": []
+          }
+        }
+      ],
+      "position": {
+        "start": { "line": 31, "column": 1, "offset": 227 },
+        "end": { "line": 31, "column": 17, "offset": 243 },
+        "indent": []
+      }
+    },
+    {
+      "type": "paragraph",
+      "children": [
+        {
+          "type": "text",
+          "value": "That is not correct.",
+          "position": {
+            "start": { "line": 33, "column": 1, "offset": 245 },
+            "end": { "line": 33, "column": 21, "offset": 265 },
+            "indent": []
+          }
+        }
+      ],
+      "position": {
+        "start": { "line": 33, "column": 1, "offset": 245 },
+        "end": { "line": 33, "column": 21, "offset": 265 },
+        "indent": []
+      }
+    },
     {
       "type": "thematicBreak",
       "position": {
diff --git a/tools/challenge-parser/parser/__fixtures__/with-video-question.md b/tools/challenge-parser/parser/__fixtures__/with-video-question.md
index bd0820d151e..87dba917205 100644
--- a/tools/challenge-parser/parser/__fixtures__/with-video-question.md
+++ b/tools/challenge-parser/parser/__fixtures__/with-video-question.md
@@ -28,6 +28,10 @@ Question line 1
 
 Some inline `code`
 
+### --feedback--
+
+That is not correct.
+
 ---
 
 Some *italics*
diff --git a/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap b/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap
index 4820dc561df..7184838037f 100644
--- a/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap
+++ b/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap
@@ -33,10 +33,19 @@ exports[`challenge parser it should parse video questions 1`] = `
 </section>",
   "question": {
     "answers": [
-      "<p>Some inline <code>code</code></p>",
-      "<p>Some <em>italics</em></p>
+      {
+        "answer": "<p>Some inline <code>code</code></p>",
+        "feedback": "<p>That is not correct.</p>",
+      },
+      {
+        "answer": "<p>Some <em>italics</em></p>
 <p>A second answer paragraph.</p>",
-      "<p><code> code in </code> code tags</p>",
+        "feedback": null,
+      },
+      {
+        "answer": "<p><code> code in </code> code tags</p>",
+        "feedback": null,
+      },
     ],
     "solution": 3,
     "text": "<p>Question line 1</p>
diff --git a/tools/challenge-parser/parser/plugins/__snapshots__/add-video-question.test.js.snap b/tools/challenge-parser/parser/plugins/__snapshots__/add-video-question.test.js.snap
index f9833481f62..8e72fd610a8 100644
--- a/tools/challenge-parser/parser/plugins/__snapshots__/add-video-question.test.js.snap
+++ b/tools/challenge-parser/parser/plugins/__snapshots__/add-video-question.test.js.snap
@@ -4,10 +4,19 @@ exports[`add-video-question plugin should match the video snapshot 1`] = `
 {
   "question": {
     "answers": [
-      "<p>Some inline <code>code</code></p>",
-      "<p>Some <em>italics</em></p>
+      {
+        "answer": "<p>Some inline <code>code</code></p>",
+        "feedback": "<p>That is not correct.</p>",
+      },
+      {
+        "answer": "<p>Some <em>italics</em></p>
 <p>A second answer paragraph.</p>",
-      "<p><code> code in </code> code tags</p>",
+        "feedback": null,
+      },
+      {
+        "answer": "<p><code> code in </code> code tags</p>",
+        "feedback": null,
+      },
     ],
     "solution": 3,
     "text": "<p>Question line 1</p>
diff --git a/tools/challenge-parser/parser/plugins/add-video-question.js b/tools/challenge-parser/parser/plugins/add-video-question.js
index 0c7247e7d05..d7870577d9e 100644
--- a/tools/challenge-parser/parser/plugins/add-video-question.js
+++ b/tools/challenge-parser/parser/plugins/add-video-question.js
@@ -1,5 +1,7 @@
 const { root } = require('mdast-builder');
+const find = require('unist-util-find');
 const getAllBetween = require('./utils/between-headings');
+const getAllBefore = require('./utils/before-heading');
 const mdastToHtml = require('./utils/mdast-to-html');
 
 const { splitOnThematicBreak } = require('./utils/split-on-thematic-break');
@@ -36,7 +38,27 @@ function getQuestion(textNodes, answersNodes, solutionNodes) {
 
 function getAnswers(answersNodes) {
   const answerGroups = splitOnThematicBreak(answersNodes);
-  return answerGroups.map(answer => mdastToHtml(answer));
+
+  return answerGroups.map(answerGroup => {
+    const answerTree = root(answerGroup);
+    const feedback = find(answerTree, { value: '--feedback--' });
+
+    if (feedback) {
+      const answerNodes = getAllBefore(answerTree, '--feedback--');
+      const feedbackNodes = getAllBetween(answerTree, '--feedback--');
+
+      if (answerNodes.length < 1) {
+        throw Error('Answer missing');
+      }
+
+      return {
+        answer: mdastToHtml(answerNodes),
+        feedback: mdastToHtml(feedbackNodes)
+      };
+    }
+
+    return { answer: mdastToHtml(answerGroup), feedback: null };
+  });
 }
 
 function getSolution(solutionNodes) {
diff --git a/tools/challenge-parser/parser/plugins/add-video-question.test.js b/tools/challenge-parser/parser/plugins/add-video-question.test.js
index 2c2f427e091..6ebc3902c50 100644
--- a/tools/challenge-parser/parser/plugins/add-video-question.test.js
+++ b/tools/challenge-parser/parser/plugins/add-video-question.test.js
@@ -23,7 +23,7 @@ describe('add-video-question plugin', () => {
   });
 
   it('should generate a question object from a video challenge AST', () => {
-    expect.assertions(8);
+    expect.assertions(10);
     plugin(mockVideoAST, file);
     const testObject = file.data.question;
     expect(Object.keys(testObject).length).toBe(3);
@@ -33,7 +33,9 @@ describe('add-video-question plugin', () => {
     expect(typeof testObject.solution).toBe('number');
     expect(testObject).toHaveProperty('answers');
     expect(Array.isArray(testObject.answers)).toBe(true);
-    expect(typeof testObject.answers[0]).toBe('string');
+    expect(typeof testObject.answers[0]).toBe('object');
+    expect(testObject.answers[0]).toHaveProperty('answer');
+    expect(testObject.answers[0]).toHaveProperty('feedback');
   });
 
   it('should convert question and answer markdown into html', () => {
@@ -46,12 +48,19 @@ describe('add-video-question plugin', () => {
         '</code></pre>'
     );
     expect(testObject.solution).toBe(3);
-    expect(testObject.answers[0]).toBe('<p>Some inline <code>code</code></p>');
-    expect(testObject.answers[1]).toBe(`<p>Some <em>italics</em></p>
-<p>A second answer paragraph.</p>`);
-    expect(testObject.answers[2]).toBe(
-      '<p><code> code in </code> code tags</p>'
-    );
+    expect(testObject.answers[0]).toStrictEqual({
+      answer: '<p>Some inline <code>code</code></p>',
+      feedback: '<p>That is not correct.</p>'
+    });
+    expect(testObject.answers[1]).toStrictEqual({
+      answer: `<p>Some <em>italics</em></p>
+<p>A second answer paragraph.</p>`,
+      feedback: null
+    });
+    expect(testObject.answers[2]).toStrictEqual({
+      answer: '<p><code> code in </code> code tags</p>',
+      feedback: null
+    });
   });
 
   // TODO: consider testing for more specific messages.  Ideally we them to say
diff --git a/tools/challenge-parser/parser/plugins/utils/before-heading.js b/tools/challenge-parser/parser/plugins/utils/before-heading.js
new file mode 100644
index 00000000000..7dd3789ede7
--- /dev/null
+++ b/tools/challenge-parser/parser/plugins/utils/before-heading.js
@@ -0,0 +1,21 @@
+const find = require('unist-util-find');
+const findAllBefore = require('unist-util-find-all-before');
+
+function getAllBefore(tree, marker) {
+  const start = find(tree, {
+    type: 'heading',
+    children: [
+      {
+        type: 'text',
+        value: marker
+      }
+    ]
+  });
+
+  if (!start) return [];
+
+  // reverse because it goes up the tree backwards and adds nodes in that order
+  return findAllBefore(tree, start).reverse();
+}
+
+module.exports = getAllBefore;
diff --git a/tools/challenge-parser/parser/plugins/utils/before-heading.test.js b/tools/challenge-parser/parser/plugins/utils/before-heading.test.js
new file mode 100644
index 00000000000..9583d87dc96
--- /dev/null
+++ b/tools/challenge-parser/parser/plugins/utils/before-heading.test.js
@@ -0,0 +1,24 @@
+const isArray = require('lodash/isArray');
+const simpleAst = require('../../__fixtures__/ast-simple.json');
+const getAllBefore = require('./before-heading');
+
+describe('before-headings', () => {
+  it('should return an array', () => {
+    expect.assertions(1);
+    const actual = getAllBefore(simpleAst, '--hints--');
+    expect(isArray(actual)).toBe(true);
+  });
+
+  it('should return an empty array if the marker is not present', () => {
+    expect.assertions(2);
+    const actual = getAllBefore(simpleAst, '--not-a-marker--');
+    expect(isArray(actual)).toBe(true);
+    expect(actual.length).toBe(0);
+  });
+
+  it('should include the whole AST before the marker', () => {
+    expect.assertions(1);
+    const actual = getAllBefore(simpleAst, '--hints--');
+    expect(actual).toHaveLength(6);
+  });
+});