diff --git a/client/gatsby-node.js b/client/gatsby-node.js index 22697616d9e..55d2ce5c86b 100644 --- a/client/gatsby-node.js +++ b/client/gatsby-node.js @@ -80,6 +80,7 @@ exports.createPages = async function createPages({ certification challengeType dashedName + demoType disableLoopProtectTests disableLoopProtectPreview fields { diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index f4c9dea4336..cd5a07ee246 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -67,6 +67,7 @@ "click-here": "Click here to sign in", "save": "Save", "save-code": "Save your Code", + "show-demo": "Show Demo", "no-thanks": "No thanks", "yes-please": "Yes please", "update-email": "Update my Email", diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx index 234360a2a05..4c3b9ac3d97 100644 --- a/client/src/client-only-routes/show-project-links.tsx +++ b/client/src/client-only-routes/show-project-links.tsx @@ -213,7 +213,6 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => { challengeData={challengeData} closeText={t('buttons.close')} previewTitle={projectTitle} - showProjectPreview={true} /> diff --git a/client/src/components/profile/components/time-line.tsx b/client/src/components/profile/components/time-line.tsx index 301ab48a075..7f71b5b6b82 100644 --- a/client/src/components/profile/components/time-line.tsx +++ b/client/src/components/profile/components/time-line.tsx @@ -229,7 +229,6 @@ function TimelineInner({ challengeData={challengeData} closeText={t('buttons.close')} previewTitle={projectTitle} - showProjectPreview={true} /> diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts index e3582b66d68..56e3d038c07 100644 --- a/client/src/redux/prop-types.ts +++ b/client/src/redux/prop-types.ts @@ -184,6 +184,7 @@ export type ChallengeNode = { challengeOrder: number; challengeType: number; dashedName: string; + demoType: 'onClick' | 'onLoad' | null; description: string; challengeFiles: ChallengeFiles; fields: Fields; diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index e84f004ee58..c3aa0ffd859 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -110,7 +110,6 @@ interface ShowClassicProps extends Pick { challengeMeta: ChallengeMeta; projectPreview: { challengeData: CompletedChallenge; - showProjectPreview: boolean; }; }; updateChallengeMeta: (arg0: ChallengeMeta) => void; @@ -183,6 +182,7 @@ function ShowClassic({ challenge: { challengeFiles: seedChallengeFiles, block, + demoType, title, description, instructions, @@ -202,7 +202,7 @@ function ShowClassic({ pageContext: { challengeMeta, challengeMeta: { isFirstStep, nextChallengePath, prevChallengePath }, - projectPreview: { challengeData, showProjectPreview } + projectPreview: { challengeData } }, createFiles, cancelTests, @@ -359,7 +359,10 @@ function ShowClassic({ ); initTests(tests); - if (showProjectPreview) openModal('projectPreview'); + // Typically, this kind of preview only appears on the first step of a + // project and is shown (once) automatically. In contrast, labs are more + // freeform, so the preview is shown on demand. + if (demoType === 'onLoad') openModal('projectPreview'); updateChallengeMeta({ ...challengeMeta, title, @@ -371,9 +374,11 @@ function ShowClassic({ }; const renderInstructionsPanel = ({ - toolPanel + toolPanel, + hasDemo }: { toolPanel: React.ReactNode; + hasDemo: boolean; }) => { return ( ); }; @@ -420,7 +426,7 @@ function ShowClassic({ resizeProps={resizeProps} title={title} usesMultifileEditor={usesMultifileEditor} - showProjectPreview={showProjectPreview} + showProjectPreview={demoType === 'onLoad'} /> ) ); @@ -448,7 +454,8 @@ function ShowClassic({ hasEditableBoundaries={hasEditableBoundaries} hasPreview={showPreview} instructions={renderInstructionsPanel({ - toolPanel: null + toolPanel: null, + hasDemo: demoType === 'onClick' })} notes={notes} onPreviewResize={onPreviewResize} @@ -482,7 +489,8 @@ function ShowClassic({ hasEditableBoundaries={hasEditableBoundaries} hasPreview={showPreview} instructions={renderInstructionsPanel({ - toolPanel: + toolPanel: , + hasDemo: demoType === 'onClick' })} isFirstStep={isFirstStep} layoutState={layout} @@ -512,7 +520,6 @@ function ShowClassic({ challengeData={challengeData} closeText={t('buttons.start-coding')} previewTitle={t('learn.project-preview-title')} - showProjectPreview={showProjectPreview} /> @@ -529,6 +536,7 @@ export const query = graphql` challengeNode(challenge: { fields: { slug: { eq: $slug } } }) { challenge { block + demoType title description id diff --git a/client/src/templates/Challenges/components/project-preview-modal.tsx b/client/src/templates/Challenges/components/project-preview-modal.tsx index 6e1e72f2a6e..59f357b5ab9 100644 --- a/client/src/templates/Challenges/components/project-preview-modal.tsx +++ b/client/src/templates/Challenges/components/project-preview-modal.tsx @@ -16,7 +16,6 @@ import './project-preview-modal.css'; interface ProjectPreviewMountedPayload { challengeData: CompletedChallenge | null; - showProjectPreview: boolean; } interface Props { @@ -25,7 +24,6 @@ interface Props { projectPreviewMounted: (payload: ProjectPreviewMountedPayload) => void; challengeData: CompletedChallenge | null; setEditorFocusability: (focusability: boolean) => void; - showProjectPreview: boolean; previewTitle: string; closeText: string; } @@ -45,7 +43,6 @@ function ProjectPreviewModal({ projectPreviewMounted, challengeData, setEditorFocusability, - showProjectPreview, previewTitle, closeText }: Props): JSX.Element { @@ -66,9 +63,7 @@ function ProjectPreviewModal({ - projectPreviewMounted({ challengeData, showProjectPreview }) - } + previewMounted={() => projectPreviewMounted({ challengeData })} /> diff --git a/client/src/templates/Challenges/components/side-panel.tsx b/client/src/templates/Challenges/components/side-panel.tsx index d9b73205043..6f48ded1a24 100644 --- a/client/src/templates/Challenges/components/side-panel.tsx +++ b/client/src/templates/Challenges/components/side-panel.tsx @@ -1,11 +1,15 @@ import React, { useEffect, ReactElement, ReactNode } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; -import { Test } from '../../../redux/prop-types'; +import { useTranslation } from 'react-i18next'; +import { Button } from '@freecodecamp/ui'; +import { Test } from '../../../redux/prop-types'; import { SuperBlocks } from '../../../../../shared/config/curriculum'; import { initializeMathJax } from '../../../utils/math-jax'; import { challengeTestsSelector } from '../redux/selectors'; +import { openModal } from '../redux/actions'; +import { Spacer } from '../../../components/helpers'; import TestSuite from './test-suite'; import './side-panel.css'; @@ -16,11 +20,22 @@ const mapStateToProps = createSelector( tests }) ); -interface SidePanelProps { + +const mapDispatchToProps: { + openModal: (modal: string) => void; +} = { + openModal +}; + +type StateProps = ReturnType; +type DispatchProps = typeof mapDispatchToProps; + +interface SidePanelProps extends DispatchProps, StateProps { block: string; challengeDescription: ReactElement; challengeTitle: ReactElement; instructionsPanelRef: React.RefObject; + hasDemo: boolean; toolPanel: ReactNode; superBlock: SuperBlocks; tests: Test[]; @@ -31,10 +46,13 @@ export function SidePanel({ challengeDescription, challengeTitle, instructionsPanelRef, + hasDemo, toolPanel, superBlock, - tests + tests, + openModal }: SidePanelProps): JSX.Element { + const { t } = useTranslation(); useEffect(() => { const mathJaxChallenge = superBlock === SuperBlocks.RosettaCode || @@ -50,6 +68,14 @@ export function SidePanel({ tabIndex={-1} > {challengeTitle} + {hasDemo && ( + <> + + + + )} {challengeDescription} {toolPanel} @@ -59,4 +85,4 @@ export function SidePanel({ SidePanel.displayName = 'SidePanel'; -export default connect(mapStateToProps)(SidePanel); +export default connect(mapStateToProps, mapDispatchToProps)(SidePanel); diff --git a/client/src/templates/Challenges/redux/execute-challenge-saga.js b/client/src/templates/Challenges/redux/execute-challenge-saga.js index 1a4ca74e143..2c6915ade20 100644 --- a/client/src/templates/Challenges/redux/execute-challenge-saga.js +++ b/client/src/templates/Challenges/redux/execute-challenge-saga.js @@ -348,9 +348,8 @@ function* updatePython(challengeData) { } function* previewProjectSolutionSaga({ payload }) { - if (!payload) return; - const { showProjectPreview, challengeData } = payload; - if (!showProjectPreview) return; + if (!payload?.challengeData) return; + const { challengeData } = payload; try { if (canBuildChallenge(challengeData)) { diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js index 45742c83302..105bbf2b7d3 100644 --- a/client/utils/gatsby/challenge-page-creator.js +++ b/client/utils/gatsby/challenge-page-creator.js @@ -1,9 +1,6 @@ const path = require('path'); const { sortChallengeFiles } = require('../sort-challengefiles'); -const { - challengeTypes, - viewTypes -} = require('../../../shared/config/challenge-types'); +const { viewTypes } = require('../../../shared/config/challenge-types'); const backend = path.resolve( __dirname, @@ -150,8 +147,7 @@ exports.createChallengePages = function (createPage) { // it during the curriculum build process and attach it to the first challenge? // That would remove the need to analyse allChallengeEdges. function getProjectPreviewConfig(challenge, allChallengeEdges) { - const { block, challengeOrder, challengeType, usesMultifileEditor } = - challenge; + const { block } = challenge; const challengesInBlock = allChallengeEdges .filter(({ node: { challenge } }) => challenge.block === block) @@ -169,15 +165,6 @@ function getProjectPreviewConfig(challenge, allChallengeEdges) { })); return { - showProjectPreview: - challengeOrder === 0 && - usesMultifileEditor && - // TODO: handle the special cases better. Create a meta property for - // showProjectPreview, maybe? Then we can remove all the following cases - challengeType !== challengeTypes.multifileCertProject && - challengeType !== challengeTypes.multifilePythonCertProject && - challengeType !== challengeTypes.python && - challengeType !== challengeTypes.js, challengeData: { challengeType: lastChallenge.challengeType, challengeFiles: projectPreviewChallengeFiles diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md index 737056e9343..bd00a7d7d37 100644 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md @@ -3,6 +3,7 @@ id: 5d8a4cfbe6b6180ed9a1c9de title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md index 74aed9592fe..954f8595161 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md @@ -3,6 +3,7 @@ id: 614ccc21ea91ef1736b9b578 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md index 7caf813a382..56c7a7eeffd 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md @@ -3,6 +3,7 @@ id: 5f33071498eb2472b87ddee4 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md index d718509edac..be56d82277f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md @@ -3,6 +3,7 @@ id: 6140c7e645d8e905819f1dd4 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md index 459efb2160e..518c6455a44 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md @@ -3,6 +3,7 @@ id: 61695197ac34f0407e339882 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md index b5707aa5ff5..efd631d2842 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md @@ -3,6 +3,7 @@ id: 61537485c4f2a624f18d7794 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md index 2d083077ee1..2c2b55c24a6 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -3,6 +3,7 @@ id: 61437d575fb98f57fa8f7f36 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md index 4dca0168a6a..b7e8eaa8239 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md @@ -3,6 +3,7 @@ id: 619665c9abd72906f3ad30f9 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md index 0dfd8acd66a..135b807fccb 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md @@ -3,6 +3,7 @@ id: 5d822fd413a79914d39e98c9 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md index 1d313ae2892..234c68ff84f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md @@ -3,6 +3,7 @@ id: 5dc174fcf86c76b9248c6eb2 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md index e8490875ffc..cd6a7a7cf99 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md @@ -3,6 +3,7 @@ id: 60eebd07ea685b0e777b5583 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md index 3d897404664..758c8896da6 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md @@ -3,6 +3,7 @@ id: 646c47867800472a4ed5d2ea title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md index 38776c35314..72fcdfc9a09 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md @@ -3,6 +3,7 @@ id: 61fd5a93fd62bb35968adeab title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md index 9a566b90db0..03916cdc968 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md @@ -3,6 +3,7 @@ id: 612e6afc009b450a437940a1 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md index 72537f155ec..204fbf2beb9 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md @@ -3,6 +3,7 @@ id: 60a3e3396c7b40068ad6996a title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md index 750166024ce..4a06a183bf1 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md @@ -3,6 +3,7 @@ id: 615f2abbe7d18d49a1e0e1c8 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635060a5c03c950f46174cb5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635060a5c03c950f46174cb5.md index 8795e060483..4df0f4cefd1 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635060a5c03c950f46174cb5.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/635060a5c03c950f46174cb5.md @@ -3,6 +3,7 @@ id: 635060a5c03c950f46174cb5 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md index 42a31b3e548..440217411e2 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/657386f11fb8265660bfac75.md @@ -3,6 +3,7 @@ id: 657386f11fb8265660bfac75 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-algorithmic-thinking-by-building-a-number-sorter/64061a98f704a014b44afdb2.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-algorithmic-thinking-by-building-a-number-sorter/64061a98f704a014b44afdb2.md index fde875ca4f4..16d3c4e5ab3 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-algorithmic-thinking-by-building-a-number-sorter/64061a98f704a014b44afdb2.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-algorithmic-thinking-by-building-a-number-sorter/64061a98f704a014b44afdb2.md @@ -3,6 +3,7 @@ id: 64061a98f704a014b44afdb2 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md index 521acada08f..b1c1e221a75 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md @@ -3,6 +3,7 @@ id: 6650c9a94d6e13d14a043a69 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md index 78af38a649a..d3cbfd193a6 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md @@ -3,6 +3,7 @@ id: 5d5a813321b9e3db6c106a46 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-oop-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-oop-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md index d65212aca6b..9bf08c95b3e 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-oop-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-oop-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md @@ -3,6 +3,7 @@ id: 63ec14d1c216aa063f0be4af title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/652f948489abbb81e6bf5a01.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/652f948489abbb81e6bf5a01.md index e20879f7dda..abf8aa7d220 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/652f948489abbb81e6bf5a01.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/652f948489abbb81e6bf5a01.md @@ -3,6 +3,7 @@ id: 652f948489abbb81e6bf5a01 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-fetch-and-promises-by-building-an-fcc-authors-page/641d9a19bff38d34d5a5edb8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-fetch-and-promises-by-building-an-fcc-authors-page/641d9a19bff38d34d5a5edb8.md index 6fa72aa78bd..32afe14d5c9 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-fetch-and-promises-by-building-an-fcc-authors-page/641d9a19bff38d34d5a5edb8.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-fetch-and-promises-by-building-an-fcc-authors-page/641d9a19bff38d34d5a5edb8.md @@ -3,6 +3,7 @@ id: 641d9a19bff38d34d5a5edb8 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md index 847757c542f..8d673694933 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md @@ -3,6 +3,7 @@ id: 5ddb965c65d27e1512d44d9a title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/642db8c409d9991d0b3b2f0d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/642db8c409d9991d0b3b2f0d.md index 3ca57fbf522..8061ba75b0a 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/642db8c409d9991d0b3b2f0d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/642db8c409d9991d0b3b2f0d.md @@ -3,6 +3,7 @@ id: 642db8c409d9991d0b3b2f0d title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461815bc48998eb15d55349.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461815bc48998eb15d55349.md index 4c06752d7bf..189b52f4d9d 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461815bc48998eb15d55349.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-intermediate-oop-by-building-a-platformer-game/6461815bc48998eb15d55349.md @@ -3,6 +3,7 @@ id: 6461815bc48998eb15d55349 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md index 033ada62631..c8f15646343 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64e4e4c4ec263b62ae7bf54d.md @@ -3,6 +3,7 @@ id: 64e4e4c4ec263b62ae7bf54d title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md index d9dea136dc4..8a3f5c55615 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -3,6 +3,7 @@ id: 63c620161fc2b49ac340ffc4 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-recursion-by-building-a-decimal-to-binary-converter/63db7f4677d06d7500a13321.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-recursion-by-building-a-decimal-to-binary-converter/63db7f4677d06d7500a13321.md index 59c4509ce9d..60ea68d9de4 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-recursion-by-building-a-decimal-to-binary-converter/63db7f4677d06d7500a13321.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-recursion-by-building-a-decimal-to-binary-converter/63db7f4677d06d7500a13321.md @@ -3,6 +3,7 @@ id: 63db7f4677d06d7500a13321 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md index 8af4d607dc3..880cc22cbab 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md @@ -3,6 +3,7 @@ id: 641cd18eb67c661d8a9e11f3 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md index 9822bf89cd9..881992a1bd6 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md @@ -3,6 +3,7 @@ id: 65386e889dd615940cb3e042 title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md index 2bf7891c938..61a3fb024b6 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657a0ea50da0c8d9d6d7950a.md @@ -3,6 +3,7 @@ id: 657a0ea50da0c8d9d6d7950a title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md index 0d507d3503a..671b781d868 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md +++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/review-dom-manipulation-by-building-a-rock-paper-scissors-game/663d0ab797cb716189ffcc0a.md @@ -3,6 +3,7 @@ id: 663d0ab797cb716189ffcc0a title: Step 1 challengeType: 0 dashedName: step-1 +demoType: onLoad --- # --description-- diff --git a/curriculum/challenges/english/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md b/curriculum/challenges/english/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md index a36b408fed5..7eaecd123a3 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md +++ b/curriculum/challenges/english/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md @@ -3,6 +3,7 @@ id: 668f08ea07b99b1f4a91acab title: Build a Recipe Page challengeType: 14 dashedName: build-a-recipe-page +demoType: onClick --- # --description-- diff --git a/curriculum/schema/__snapshots__/challenge-schema.test.js.snap b/curriculum/schema/__snapshots__/challenge-schema.test.js.snap index 2dbc7870cdd..801fe8478f1 100644 --- a/curriculum/schema/__snapshots__/challenge-schema.test.js.snap +++ b/curriculum/schema/__snapshots__/challenge-schema.test.js.snap @@ -107,6 +107,7 @@ const schema = Joi.object() checksum: Joi.number(), // TODO: require this only for normal challenges, not certs dashedName: Joi.string().regex(slugRE), + demoType: Joi.string().valid('onClick', 'onLoad'), description: Joi.when('challengeType', { is: [ challengeTypes.step, diff --git a/curriculum/schema/challenge-schema.js b/curriculum/schema/challenge-schema.js index 1b302632dfb..601d7dadaff 100644 --- a/curriculum/schema/challenge-schema.js +++ b/curriculum/schema/challenge-schema.js @@ -104,6 +104,7 @@ const schema = Joi.object() checksum: Joi.number(), // TODO: require this only for normal challenges, not certs dashedName: Joi.string().regex(slugRE), + demoType: Joi.string().valid('onClick', 'onLoad'), description: Joi.when('challengeType', { is: [ challengeTypes.step, diff --git a/tools/challenge-helper-scripts/create-project.ts b/tools/challenge-helper-scripts/create-project.ts index c1edd1c4517..1b435d4f100 100644 --- a/tools/challenge-helper-scripts/create-project.ts +++ b/tools/challenge-helper-scripts/create-project.ts @@ -163,7 +163,8 @@ async function createFirstChallenge( projectPath: newChallengeDir + '/', stepNum: 1, challengeType: 0, - challengeSeeds + challengeSeeds, + isFirstChallenge: true }); } diff --git a/tools/challenge-helper-scripts/helpers/get-step-template.ts b/tools/challenge-helper-scripts/helpers/get-step-template.ts index b6322e7ed8a..1767c8469ee 100644 --- a/tools/challenge-helper-scripts/helpers/get-step-template.ts +++ b/tools/challenge-helper-scripts/helpers/get-step-template.ts @@ -25,6 +25,7 @@ type StepOptions = { challengeSeeds: Record; stepNum: number; challengeType: number; + isFirstChallenge?: boolean; }; export interface ChallengeSeed { @@ -40,7 +41,8 @@ function getStepTemplate({ challengeId, challengeSeeds, stepNum, - challengeType + challengeType, + isFirstChallenge = false }: StepOptions): string { const seedTexts = Object.values(challengeSeeds) .map(({ contents, ext, editableRegionBoundaries }: ChallengeSeed) => { @@ -67,12 +69,18 @@ function getStepTemplate({ const seedHeadSection = getSeedSection(seedHeads, 'before-user-code'); const seedTailSection = getSeedSection(seedTails, 'after-user-code'); + const demoString = isFirstChallenge + ? ` +# demoType can either be 'onClick' or 'onLoad'. If the project or lab doesn't have a preview, delete the property +demoType: onClick` + : ''; + return ( `--- id: ${challengeId.toString()} title: Step ${stepNum} challengeType: ${challengeType} -dashedName: step-${stepNum} +dashedName: step-${stepNum}${demoString} --- # --description-- diff --git a/tools/challenge-helper-scripts/utils.ts b/tools/challenge-helper-scripts/utils.ts index 1090d3a88d3..8fc843e8ca6 100644 --- a/tools/challenge-helper-scripts/utils.ts +++ b/tools/challenge-helper-scripts/utils.ts @@ -16,13 +16,15 @@ interface Options { challengeType: number; projectPath?: string; challengeSeeds?: Record; + isFirstChallenge?: boolean; } const createStepFile = ({ stepNum, challengeType, projectPath = getProjectPath(), - challengeSeeds = {} + challengeSeeds = {}, + isFirstChallenge = false }: Options): ObjectID => { const challengeId = new ObjectID(); @@ -30,7 +32,8 @@ const createStepFile = ({ challengeId, challengeSeeds, stepNum, - challengeType + challengeType, + isFirstChallenge }); // eslint-disable-next-line @typescript-eslint/no-base-to-string