From 807f20674ae64572ac75277b4a0f005101f45e14 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Mon, 26 Sep 2022 06:03:20 -0700
Subject: [PATCH 1/6] Rename exercise props

---
 pages/exercises/[lessonSlug].tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 3d511cef2..e08c427b7 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -76,8 +76,8 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
           exercise={exercise}
           setExerciseIndex={setExerciseIndex}
           lessonTitle={currentLesson.title}
-          showPreviousButton={exerciseIndex > 0}
-          showSkipButton={exerciseIndex < currentExercises.length - 1}
+          hasPrevious={exerciseIndex > 0}
+          hasNext={exerciseIndex < currentExercises.length - 1}
         />
       ) : (
         <ExerciseList
@@ -95,16 +95,16 @@ type ExerciseProps = {
   exercise: ExerciseCardProps
   setExerciseIndex: React.Dispatch<React.SetStateAction<number>>
   lessonTitle: string
-  showPreviousButton: boolean
-  showSkipButton: boolean
+  hasPrevious: boolean
+  hasNext: boolean
 }
 
 const Exercise = ({
   exercise,
   setExerciseIndex,
   lessonTitle,
-  showPreviousButton,
-  showSkipButton
+  hasPrevious,
+  hasNext
 }: ExerciseProps) => {
   return (
     <div className={`mx-auto ${styles.exercise__container}`}>
@@ -122,7 +122,7 @@ const Exercise = ({
         explanation={exercise.explanation}
       />
       <div className="d-flex justify-content-between mt-4">
-        {showPreviousButton ? (
+        {hasPrevious ? (
           <button
             onClick={() => setExerciseIndex(i => i - 1)}
             className="btn btn-outline-primary fw-bold px-4 py-2"
@@ -133,7 +133,7 @@ const Exercise = ({
         ) : (
           <div />
         )}
-        {showSkipButton ? (
+        {hasNext ? (
           <button
             onClick={() => setExerciseIndex(i => i + 1)}
             className="btn btn-outline-primary fw-bold px-4 py-2"

From 2669797426ecb5e4468405fe2d7eed1bebba48fd Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Mon, 26 Sep 2022 06:53:56 -0700
Subject: [PATCH 2/6] Change exercise card state to props

---
 components/ExerciseCard/ExerciseCard.test.tsx | 99 ++++++++++++++++---
 components/ExerciseCard/ExerciseCard.tsx      | 18 +++-
 components/ExerciseCard/index.tsx             |  6 +-
 pages/exercises/[lessonSlug].tsx              | 17 +++-
 4 files changed, 122 insertions(+), 18 deletions(-)

diff --git a/components/ExerciseCard/ExerciseCard.test.tsx b/components/ExerciseCard/ExerciseCard.test.tsx
index 15bcdd086..db88db46c 100644
--- a/components/ExerciseCard/ExerciseCard.test.tsx
+++ b/components/ExerciseCard/ExerciseCard.test.tsx
@@ -3,36 +3,60 @@ import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import ExerciseCard from './ExerciseCard'
 
-describe('ExerciseCard component', () => {
-  it('Should render an exercise card', () => {
-    const exampleProblem = `let a = 5
+const successMessage = '🎉 Your answer is correct!'
+const errorMessage = 'Your answer is incorrect - please try again.'
+
+const exampleProblem = `let a = 5
 a = a + 10
 // what is a?`
-    const exampleAnswer = '15'
-    const exampleExplanation = `You can reassign variables that are initialized with "let".`
+const exampleAnswer = '15'
+const exampleExplanation = `You can reassign variables that are initialized with "let".`
 
-    const { getByRole, queryByText, getByLabelText } = render(
+describe('ExerciseCard component', () => {
+  it('Should render an exercise card', async () => {
+    const setAnswerShown = jest.fn()
+    const setMessageKey = jest.fn()
+
+    const { getByRole, queryByText } = render(
       <ExerciseCard
         problem={exampleProblem}
         answer={exampleAnswer}
         explanation={exampleExplanation}
+        answerShown={false}
+        setAnswerShown={setAnswerShown}
+        messageKey={'EMPTY'}
+        setMessageKey={setMessageKey}
       />
     )
 
     // Test that an error message shows if the user is wrong
 
-    const errorMessage = 'Your answer is incorrect - please try again.'
-
     expect(queryByText(errorMessage)).not.toBeInTheDocument()
 
     const submitButton = getByRole('button', { name: 'SUBMIT' })
     fireEvent.click(submitButton)
 
-    expect(queryByText(errorMessage)).toBeInTheDocument()
+    expect(setAnswerShown.mock.calls).toEqual([])
+    expect(setMessageKey.mock.calls).toEqual([['ERROR']])
+  })
 
-    // Test that a success message shows and the answer is shown if the user is right
+  it('Should render an error message', () => {
+    const setAnswerShown = jest.fn()
+    const setMessageKey = jest.fn()
 
-    const successMessage = '🎉 Your answer is correct!'
+    const { getByRole, queryByText, getByLabelText } = render(
+      <ExerciseCard
+        problem={exampleProblem}
+        answer={exampleAnswer}
+        explanation={exampleExplanation}
+        answerShown={false}
+        setAnswerShown={setAnswerShown}
+        messageKey={'ERROR'}
+        setMessageKey={setMessageKey}
+      />
+    )
+
+    expect(queryByText(errorMessage)).toBeInTheDocument()
 
     expect(queryByText(successMessage)).not.toBeInTheDocument()
 
@@ -40,8 +64,32 @@ a = a + 10
     fireEvent.change(inputBox, {
       target: { value: '15' }
     })
+
+    // Test that the submit button shows the success message and the answer explanation
+
+    const submitButton = getByRole('button', { name: 'SUBMIT' })
     fireEvent.click(submitButton)
 
+    expect(setAnswerShown.mock.calls).toEqual([[true]])
+    expect(setMessageKey.mock.calls).toEqual([['SUCCESS']])
+  })
+
+  it('Should render a success message', () => {
+    const setAnswerShown = jest.fn()
+    const setMessageKey = jest.fn()
+
+    const { getByRole, queryByText } = render(
+      <ExerciseCard
+        problem={exampleProblem}
+        answer={exampleAnswer}
+        explanation={exampleExplanation}
+        answerShown={true}
+        setAnswerShown={setAnswerShown}
+        messageKey={'SUCCESS'}
+        setMessageKey={setMessageKey}
+      />
+    )
+
     expect(queryByText(successMessage)).toBeInTheDocument()
     expect(queryByText(exampleExplanation)).toBeInTheDocument()
 
@@ -50,6 +98,35 @@ a = a + 10
     const hideButton = getByRole('button', { name: 'Hide Answer' })
     fireEvent.click(hideButton)
 
+    expect(setAnswerShown.mock.calls).toEqual([[false]])
+    expect(setMessageKey.mock.calls).toEqual([])
+  })
+
+  it('Should hide the answer', () => {
+    const setAnswerShown = jest.fn()
+    const setMessageKey = jest.fn()
+
+    const { queryByText, getByRole } = render(
+      <ExerciseCard
+        problem={exampleProblem}
+        answer={exampleAnswer}
+        explanation={exampleExplanation}
+        answerShown={false}
+        setAnswerShown={setAnswerShown}
+        messageKey={'SUCCESS'}
+        setMessageKey={setMessageKey}
+      />
+    )
+
+    expect(queryByText(successMessage)).toBeInTheDocument()
     expect(queryByText(exampleExplanation)).not.toBeInTheDocument()
+
+    // Test that the show button shows the answer explanation
+
+    const hideButton = getByRole('button', { name: 'Show Answer' })
+    fireEvent.click(hideButton)
+
+    expect(setAnswerShown.mock.calls).toEqual([[true]])
+    expect(setMessageKey.mock.calls).toEqual([])
   })
 })
diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
index b5084878a..c4e976f7f 100644
--- a/components/ExerciseCard/ExerciseCard.tsx
+++ b/components/ExerciseCard/ExerciseCard.tsx
@@ -7,6 +7,10 @@ export type ExerciseCardProps = {
   problem: string
   answer: string
   explanation: string
+  answerShown: boolean
+  setAnswerShown: (answerShown: boolean) => void
+  messageKey: MessageKey
+  setMessageKey: (messageKey: MessageKey) => void
 }
 
 enum Message {
@@ -15,12 +19,18 @@ enum Message {
   SUCCESS = '🎉 Your answer is correct!'
 }
 
-type MessageKey = keyof typeof Message
+export type MessageKey = keyof typeof Message
 
-const ExerciseCard = ({ problem, answer, explanation }: ExerciseCardProps) => {
+const ExerciseCard = ({
+  problem,
+  answer,
+  explanation,
+  answerShown,
+  setAnswerShown,
+  messageKey,
+  setMessageKey
+}: ExerciseCardProps) => {
   const [studentAnswer, setStudentAnswer] = useState('')
-  const [answerShown, setAnswerShown] = useState(false)
-  const [messageKey, setMessageKey] = useState<MessageKey>('EMPTY')
   const message = Message[messageKey]
 
   return (
diff --git a/components/ExerciseCard/index.tsx b/components/ExerciseCard/index.tsx
index 85a203898..68a5dab3b 100644
--- a/components/ExerciseCard/index.tsx
+++ b/components/ExerciseCard/index.tsx
@@ -1 +1,5 @@
-export { default, type ExerciseCardProps } from './ExerciseCard'
+export {
+  default,
+  type ExerciseCardProps,
+  type MessageKey
+} from './ExerciseCard'
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index e08c427b7..77e7b3c9c 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -13,7 +13,7 @@ import ExercisePreviewCard, {
   ExercisePreviewCardProps
 } from '../../components/ExercisePreviewCard'
 import { NewButton } from '../../components/theme/Button'
-import ExerciseCard, { ExerciseCardProps } from '../../components/ExerciseCard'
+import ExerciseCard, { MessageKey } from '../../components/ExerciseCard'
 import { ArrowLeftIcon } from '@primer/octicons-react'
 import GET_EXERCISES from '../../graphql/queries/getExercises'
 import styles from '../../scss/exercises.module.scss'
@@ -91,8 +91,14 @@ const Exercises: React.FC<QueryDataProps<GetExercisesQuery>> = ({
   )
 }
 
+type ExerciseData = {
+  problem: string
+  answer: string
+  explanation: string
+}
+
 type ExerciseProps = {
-  exercise: ExerciseCardProps
+  exercise: ExerciseData
   setExerciseIndex: React.Dispatch<React.SetStateAction<number>>
   lessonTitle: string
   hasPrevious: boolean
@@ -106,6 +112,9 @@ const Exercise = ({
   hasPrevious,
   hasNext
 }: ExerciseProps) => {
+  const [answerShown, setAnswerShown] = useState(false)
+  const [messageKey, setMessageKey] = useState<MessageKey>('EMPTY')
+
   return (
     <div className={`mx-auto ${styles.exercise__container}`}>
       <button
@@ -120,6 +129,10 @@ const Exercise = ({
         problem={exercise.problem}
         answer={exercise.answer}
         explanation={exercise.explanation}
+        answerShown={answerShown}
+        setAnswerShown={setAnswerShown}
+        messageKey={messageKey}
+        setMessageKey={setMessageKey}
       />
       <div className="d-flex justify-content-between mt-4">
         {hasPrevious ? (

From 1771da99dffdbd70ed5a695aefe6920b1d05b436 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Mon, 26 Sep 2022 07:07:38 -0700
Subject: [PATCH 3/6] Update exercise card storybook

---
 stories/components/ExerciseCard.stories.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/stories/components/ExerciseCard.stories.tsx b/stories/components/ExerciseCard.stories.tsx
index b9660e8af..095653290 100644
--- a/stories/components/ExerciseCard.stories.tsx
+++ b/stories/components/ExerciseCard.stories.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import ExerciseCard from '../../components/ExerciseCard'
+import React, { useState } from 'react'
+import ExerciseCard, { MessageKey } from '../../components/ExerciseCard'
 
 export default {
   component: ExerciseCard,
@@ -15,11 +15,18 @@ const exampleAnswer = '15'
 const exampleExplanation = `You can reassign variables that are initialized with "let".`
 
 export const Basic = () => {
+  const [answerShown, setAnswerShown] = useState(false)
+  const [messageKey, setMessageKey] = useState<MessageKey>('EMPTY')
+
   return (
     <ExerciseCard
       problem={exampleProblem}
       answer={exampleAnswer}
       explanation={exampleExplanation}
+      answerShown={answerShown}
+      setAnswerShown={setAnswerShown}
+      messageKey={messageKey}
+      setMessageKey={setMessageKey}
     />
   )
 }

From 1c40bb63e80b49e3324751bf2a31cbe26eb8e1d8 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Mon, 26 Sep 2022 07:17:53 -0700
Subject: [PATCH 4/6] Add NEXT QUESTION button to DOJO exercise

---
 pages/exercises/[lessonSlug].tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 77e7b3c9c..3d075276e 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -146,7 +146,11 @@ const Exercise = ({
         ) : (
           <div />
         )}
-        {hasNext ? (
+        {messageKey === 'SUCCESS' ? (
+          <NewButton onClick={() => setExerciseIndex(i => i + 1)}>
+            NEXT QUESTION
+          </NewButton>
+        ) : hasNext ? (
           <button
             onClick={() => setExerciseIndex(i => i + 1)}
             className="btn btn-outline-primary fw-bold px-4 py-2"

From 7bb4f5e4500dca7c8234119381d2895b2628398d Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Mon, 26 Sep 2022 07:41:21 -0700
Subject: [PATCH 5/6] Add NEXT QUESTION tests

---
 __tests__/pages/exercises/[lessonSlug].test.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/__tests__/pages/exercises/[lessonSlug].test.js b/__tests__/pages/exercises/[lessonSlug].test.js
index 95aac4afd..3c25466ec 100644
--- a/__tests__/pages/exercises/[lessonSlug].test.js
+++ b/__tests__/pages/exercises/[lessonSlug].test.js
@@ -46,7 +46,7 @@ describe('Exercises page', () => {
       }
     ]
 
-    const { getByRole, queryByRole } = render(
+    const { getByRole, queryByRole, getByLabelText } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <Exercises />
       </MockedProvider>
@@ -64,12 +64,20 @@ describe('Exercises page', () => {
     // Previous button is not in the document on the first exercise.
     expect(queryByRole('button', { name: 'PREVIOUS' })).not.toBeInTheDocument()
 
-    let skipButton = getByRole('button', { name: 'SKIP' })
+    const skipButton = getByRole('button', { name: 'SKIP' })
     fireEvent.click(skipButton)
     expect(queryByRole('button', { name: 'PREVIOUS' })).toBeInTheDocument()
 
-    skipButton = getByRole('button', { name: 'SKIP' })
-    fireEvent.click(skipButton)
+    // Expect "NEXT QUESTION" button to appear once you answered a question correctly.
+    const inputBox = getByLabelText('User answer')
+    fireEvent.change(inputBox, {
+      target: { value: '3' }
+    })
+    const submitButton = getByRole('button', { name: 'SUBMIT' })
+    fireEvent.click(submitButton)
+    const nextQuestionButton = getByRole('button', { name: 'NEXT QUESTION' })
+    fireEvent.click(nextQuestionButton)
+
     // Skip button should not be in the document because we're on the last exercise now.
     expect(queryByRole('button', { name: 'SKIP' })).not.toBeInTheDocument()
 

From 3ca645f96cf329a7f003a4577f8074e88c958678 Mon Sep 17 00:00:00 2001
From: Bryan Jennings <bryanjenningz@gmail.com>
Date: Mon, 26 Sep 2022 08:38:11 -0700
Subject: [PATCH 6/6] Use Message instead of MessageKey

---
 components/ExerciseCard/ExerciseCard.test.tsx | 61 ++++++++++---------
 components/ExerciseCard/ExerciseCard.tsx      | 23 ++++---
 components/ExerciseCard/index.tsx             |  6 +-
 pages/exercises/[lessonSlug].tsx              | 10 +--
 stories/components/ExerciseCard.stories.tsx   |  8 +--
 5 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/components/ExerciseCard/ExerciseCard.test.tsx b/components/ExerciseCard/ExerciseCard.test.tsx
index db88db46c..6a3b91926 100644
--- a/components/ExerciseCard/ExerciseCard.test.tsx
+++ b/components/ExerciseCard/ExerciseCard.test.tsx
@@ -1,10 +1,7 @@
 import '@testing-library/jest-dom'
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import ExerciseCard from './ExerciseCard'
-
-const successMessage = '🎉 Your answer is correct!'
-const errorMessage = 'Your answer is incorrect - please try again.'
+import ExerciseCard, { Message } from './ExerciseCard'
 
 const exampleProblem = `let a = 5
 a = a + 10
@@ -15,7 +12,7 @@ const exampleExplanation = `You can reassign variables that are initialized with
 describe('ExerciseCard component', () => {
   it('Should render an exercise card', async () => {
     const setAnswerShown = jest.fn()
-    const setMessageKey = jest.fn()
+    const setMessage = jest.fn()
 
     const { getByRole, queryByText } = render(
       <ExerciseCard
@@ -24,25 +21,26 @@ describe('ExerciseCard component', () => {
         explanation={exampleExplanation}
         answerShown={false}
         setAnswerShown={setAnswerShown}
-        messageKey={'EMPTY'}
-        setMessageKey={setMessageKey}
+        message={Message.EMPTY}
+        setMessage={setMessage}
       />
     )
 
     // Test that an error message shows if the user is wrong
 
-    expect(queryByText(errorMessage)).not.toBeInTheDocument()
+    expect(queryByText(Message.ERROR)).not.toBeInTheDocument()
 
     const submitButton = getByRole('button', { name: 'SUBMIT' })
     fireEvent.click(submitButton)
 
-    expect(setAnswerShown.mock.calls).toEqual([])
-    expect(setMessageKey.mock.calls).toEqual([['ERROR']])
+    expect(setAnswerShown).toBeCalledTimes(0)
+    expect(setMessage).toBeCalledWith(Message.ERROR)
+    expect(setMessage).toBeCalledTimes(1)
   })
 
   it('Should render an error message', () => {
     const setAnswerShown = jest.fn()
-    const setMessageKey = jest.fn()
+    const setMessage = jest.fn()
 
     const { getByRole, queryByText, getByLabelText } = render(
       <ExerciseCard
@@ -51,14 +49,13 @@ describe('ExerciseCard component', () => {
         explanation={exampleExplanation}
         answerShown={false}
         setAnswerShown={setAnswerShown}
-        messageKey={'ERROR'}
-        setMessageKey={setMessageKey}
+        message={Message.ERROR}
+        setMessage={setMessage}
       />
     )
 
-    expect(queryByText(errorMessage)).toBeInTheDocument()
-
-    expect(queryByText(successMessage)).not.toBeInTheDocument()
+    expect(queryByText(Message.ERROR)).toBeInTheDocument()
+    expect(queryByText(Message.SUCCESS)).not.toBeInTheDocument()
 
     const inputBox = getByLabelText('User answer')
     fireEvent.change(inputBox, {
@@ -70,13 +67,15 @@ describe('ExerciseCard component', () => {
     const submitButton = getByRole('button', { name: 'SUBMIT' })
     fireEvent.click(submitButton)
 
-    expect(setAnswerShown.mock.calls).toEqual([[true]])
-    expect(setMessageKey.mock.calls).toEqual([['SUCCESS']])
+    expect(setAnswerShown).toBeCalledWith(true)
+    expect(setAnswerShown).toBeCalledTimes(1)
+    expect(setMessage).toBeCalledWith(Message.SUCCESS)
+    expect(setMessage).toBeCalledTimes(1)
   })
 
   it('Should render a success message', () => {
     const setAnswerShown = jest.fn()
-    const setMessageKey = jest.fn()
+    const setMessage = jest.fn()
 
     const { getByRole, queryByText } = render(
       <ExerciseCard
@@ -85,12 +84,12 @@ describe('ExerciseCard component', () => {
         explanation={exampleExplanation}
         answerShown={true}
         setAnswerShown={setAnswerShown}
-        messageKey={'SUCCESS'}
-        setMessageKey={setMessageKey}
+        message={Message.SUCCESS}
+        setMessage={setMessage}
       />
     )
 
-    expect(queryByText(successMessage)).toBeInTheDocument()
+    expect(queryByText(Message.SUCCESS)).toBeInTheDocument()
     expect(queryByText(exampleExplanation)).toBeInTheDocument()
 
     // Test that the hide button hides the answer explanation
@@ -98,13 +97,14 @@ describe('ExerciseCard component', () => {
     const hideButton = getByRole('button', { name: 'Hide Answer' })
     fireEvent.click(hideButton)
 
-    expect(setAnswerShown.mock.calls).toEqual([[false]])
-    expect(setMessageKey.mock.calls).toEqual([])
+    expect(setAnswerShown).toBeCalledWith(false)
+    expect(setAnswerShown).toBeCalledTimes(1)
+    expect(setMessage).toBeCalledTimes(0)
   })
 
   it('Should hide the answer', () => {
     const setAnswerShown = jest.fn()
-    const setMessageKey = jest.fn()
+    const setMessage = jest.fn()
 
     const { queryByText, getByRole } = render(
       <ExerciseCard
@@ -113,12 +113,12 @@ describe('ExerciseCard component', () => {
         explanation={exampleExplanation}
         answerShown={false}
         setAnswerShown={setAnswerShown}
-        messageKey={'SUCCESS'}
-        setMessageKey={setMessageKey}
+        message={Message.SUCCESS}
+        setMessage={setMessage}
       />
     )
 
-    expect(queryByText(successMessage)).toBeInTheDocument()
+    expect(queryByText(Message.SUCCESS)).toBeInTheDocument()
     expect(queryByText(exampleExplanation)).not.toBeInTheDocument()
 
     // Test that the show button shows the answer explanation
@@ -126,7 +126,8 @@ describe('ExerciseCard component', () => {
     const hideButton = getByRole('button', { name: 'Show Answer' })
     fireEvent.click(hideButton)
 
-    expect(setAnswerShown.mock.calls).toEqual([[true]])
-    expect(setMessageKey.mock.calls).toEqual([])
+    expect(setAnswerShown).toBeCalledWith(true)
+    expect(setAnswerShown).toBeCalledTimes(1)
+    expect(setMessage).toBeCalledTimes(0)
   })
 })
diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx
index c4e976f7f..7cd61a8d4 100644
--- a/components/ExerciseCard/ExerciseCard.tsx
+++ b/components/ExerciseCard/ExerciseCard.tsx
@@ -9,29 +9,26 @@ export type ExerciseCardProps = {
   explanation: string
   answerShown: boolean
   setAnswerShown: (answerShown: boolean) => void
-  messageKey: MessageKey
-  setMessageKey: (messageKey: MessageKey) => void
+  message: Message
+  setMessage: (message: Message) => void
 }
 
-enum Message {
+export enum Message {
   EMPTY = '',
   ERROR = 'Your answer is incorrect - please try again.',
   SUCCESS = '🎉 Your answer is correct!'
 }
 
-export type MessageKey = keyof typeof Message
-
 const ExerciseCard = ({
   problem,
   answer,
   explanation,
   answerShown,
   setAnswerShown,
-  messageKey,
-  setMessageKey
+  message,
+  setMessage
 }: ExerciseCardProps) => {
   const [studentAnswer, setStudentAnswer] = useState('')
-  const message = Message[messageKey]
 
   return (
     <section className="card p-5 border-0 shadow">
@@ -45,14 +42,16 @@ const ExerciseCard = ({
           <input
             aria-label="User answer"
             className={`form-control mb-2 ${
-              messageKey === 'ERROR' ? styles.exerciseCard__input__error : ''
+              message === Message.ERROR ? styles.exerciseCard__input__error : ''
             }`}
             value={studentAnswer}
             onChange={e => setStudentAnswer(e.target.value)}
           />
           <div
             className={`${styles.exerciseCard__message} ${
-              messageKey === 'ERROR' ? styles.exerciseCard__message__error : ''
+              message === Message.ERROR
+                ? styles.exerciseCard__message__error
+                : ''
             } my-3`}
           >
             {message}
@@ -61,10 +60,10 @@ const ExerciseCard = ({
             <NewButton
               onClick={() => {
                 if (studentAnswer.trim() === answer.trim()) {
-                  setMessageKey('SUCCESS')
+                  setMessage(Message.SUCCESS)
                   setAnswerShown(true)
                 } else {
-                  setMessageKey('ERROR')
+                  setMessage(Message.ERROR)
                 }
               }}
             >
diff --git a/components/ExerciseCard/index.tsx b/components/ExerciseCard/index.tsx
index 68a5dab3b..e1d3376c8 100644
--- a/components/ExerciseCard/index.tsx
+++ b/components/ExerciseCard/index.tsx
@@ -1,5 +1 @@
-export {
-  default,
-  type ExerciseCardProps,
-  type MessageKey
-} from './ExerciseCard'
+export { default, type ExerciseCardProps, Message } from './ExerciseCard'
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx
index 3d075276e..eba05da37 100644
--- a/pages/exercises/[lessonSlug].tsx
+++ b/pages/exercises/[lessonSlug].tsx
@@ -13,7 +13,7 @@ import ExercisePreviewCard, {
   ExercisePreviewCardProps
 } from '../../components/ExercisePreviewCard'
 import { NewButton } from '../../components/theme/Button'
-import ExerciseCard, { MessageKey } from '../../components/ExerciseCard'
+import ExerciseCard, { Message } from '../../components/ExerciseCard'
 import { ArrowLeftIcon } from '@primer/octicons-react'
 import GET_EXERCISES from '../../graphql/queries/getExercises'
 import styles from '../../scss/exercises.module.scss'
@@ -113,7 +113,7 @@ const Exercise = ({
   hasNext
 }: ExerciseProps) => {
   const [answerShown, setAnswerShown] = useState(false)
-  const [messageKey, setMessageKey] = useState<MessageKey>('EMPTY')
+  const [message, setMessage] = useState(Message.EMPTY)
 
   return (
     <div className={`mx-auto ${styles.exercise__container}`}>
@@ -131,8 +131,8 @@ const Exercise = ({
         explanation={exercise.explanation}
         answerShown={answerShown}
         setAnswerShown={setAnswerShown}
-        messageKey={messageKey}
-        setMessageKey={setMessageKey}
+        message={message}
+        setMessage={setMessage}
       />
       <div className="d-flex justify-content-between mt-4">
         {hasPrevious ? (
@@ -146,7 +146,7 @@ const Exercise = ({
         ) : (
           <div />
         )}
-        {messageKey === 'SUCCESS' ? (
+        {message === Message.SUCCESS ? (
           <NewButton onClick={() => setExerciseIndex(i => i + 1)}>
             NEXT QUESTION
           </NewButton>
diff --git a/stories/components/ExerciseCard.stories.tsx b/stories/components/ExerciseCard.stories.tsx
index 095653290..e0599abbe 100644
--- a/stories/components/ExerciseCard.stories.tsx
+++ b/stories/components/ExerciseCard.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import ExerciseCard, { MessageKey } from '../../components/ExerciseCard'
+import ExerciseCard, { Message } from '../../components/ExerciseCard'
 
 export default {
   component: ExerciseCard,
@@ -16,7 +16,7 @@ const exampleExplanation = `You can reassign variables that are initialized with
 
 export const Basic = () => {
   const [answerShown, setAnswerShown] = useState(false)
-  const [messageKey, setMessageKey] = useState<MessageKey>('EMPTY')
+  const [message, setMessage] = useState(Message.EMPTY)
 
   return (
     <ExerciseCard
@@ -25,8 +25,8 @@ export const Basic = () => {
       explanation={exampleExplanation}
       answerShown={answerShown}
       setAnswerShown={setAnswerShown}
-      messageKey={messageKey}
-      setMessageKey={setMessageKey}
+      message={message}
+      setMessage={setMessage}
     />
   )
 }