diff --git a/client/gatsby-node.js b/client/gatsby-node.js index 61da002e38f..30a2849bce3 100644 --- a/client/gatsby-node.js +++ b/client/gatsby-node.js @@ -261,6 +261,7 @@ exports.createSchemaCustomization = ({ actions }) => { type Challenge { blockType: String challengeFiles: [FileContents] + explanation: String notes: String url: String assignments: [String] diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index fcedea63ba7..9a1cae4d2da 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -388,6 +388,7 @@ "assignment-not-complete": "Please complete the assignments", "assignments": "Assignments", "question": "Question", + "explanation": "Explanation", "solution-link": "Solution Link", "source-code-link": "Source Code Link", "ms-link": "Microsoft Link", diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts index 3e14958775b..7c135d1fc58 100644 --- a/client/src/redux/prop-types.ts +++ b/client/src/redux/prop-types.ts @@ -174,6 +174,7 @@ export type ChallengeNode = { demoType: 'onClick' | 'onLoad' | null; description: string; challengeFiles: ChallengeFiles; + explanation: string; fields: Fields; fillInTheBlank: FillInTheBlank; forumTopicId: number; diff --git a/client/src/templates/Challenges/components/challenge-explanation.css b/client/src/templates/Challenges/components/challenge-explanation.css new file mode 100644 index 00000000000..c9fd943be59 --- /dev/null +++ b/client/src/templates/Challenges/components/challenge-explanation.css @@ -0,0 +1,3 @@ +.explanation { + cursor: pointer; +} diff --git a/client/src/templates/Challenges/components/challenge-explanation.tsx b/client/src/templates/Challenges/components/challenge-explanation.tsx new file mode 100644 index 00000000000..ed211c34216 --- /dev/null +++ b/client/src/templates/Challenges/components/challenge-explanation.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import Spacer from '../../../components/helpers/spacer'; +import PrismFormatted from './prism-formatted'; + +interface ChallengeExplanationProps { + explanation: string; +} + +function ChallengeExplanation({ + explanation +}: ChallengeExplanationProps): JSX.Element { + const { t } = useTranslation(); + + return ( + <> +
+ {t('learn.explanation')} + + +
+ + + ); +} + +ChallengeExplanation.displayName = 'ChallengeExplanation'; + +export default ChallengeExplanation; 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 3fd482c6347..5db70d0d607 100644 --- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx +++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx @@ -18,6 +18,7 @@ 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 ChallegeExplanation from '../components/challenge-explanation'; import CompletionModal from '../components/completion-modal'; import HelpModal from '../components/help-modal'; import FillInTheBlanks from '../components/fill-in-the-blanks'; @@ -60,7 +61,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => interface ShowFillInTheBlankProps { challengeMounted: (arg0: string) => void; data: { challengeNode: ChallengeNode }; - description: string; isChallengeCompleted: boolean; initTests: (xs: Test[]) => void; openCompletionModal: () => void; @@ -250,6 +250,7 @@ class ShowFillInTheBlank extends Component< title, description, instructions, + explanation, superBlock, block, translationPending, @@ -328,7 +329,13 @@ class ShowFillInTheBlank extends Component< handleInputChange={this.handleInputChange} /> - + + {explanation ? ( + + ) : ( + + )} +