void;
}
-function renderNodule(nodule: ChallengeNode['challenge']['nodules'][number]) {
+function renderNodule(
+ nodule: ChallengeNode['challenge']['nodules'][number],
+ showInteractiveEditor: boolean
+) {
switch (nodule.type) {
case 'paragraph':
return ;
case 'interactiveEditor':
- return ;
+ if (showInteractiveEditor) {
+ return ;
+ } else {
+ const files = nodule.data;
+ return files.map((file, index) => (
+
+ ));
+ }
default:
return null;
}
@@ -207,6 +218,20 @@ const ShowGeneric = ({
const sceneSubject = new SceneSubject();
+ // interactive editor
+ const hasInteractiveEditor = nodules?.some(
+ nodule => nodule.type === 'interactiveEditor'
+ );
+
+ const [showInteractiveEditor, setShowInteractiveEditor] = useState(
+ () => !!store.get('showInteractiveEditor')
+ );
+
+ const toggleInteractiveEditor = () => {
+ store.set('showInteractiveEditor', !showInteractiveEditor);
+ setShowInteractiveEditor(!showInteractiveEditor);
+ };
+
return (
-
-
-
-
- {title}
-
+
+ {hasInteractiveEditor && (
+
+ )}
-
+
+
+
+
+ {title}
+
- {description && (
-
-
-
-
- )}
+
- {nodules?.map((nodule, i) => {
- return (
- {renderNodule(nodule)}
- );
- })}
-
-
- {videoId && (
- <>
-
-
-
- )}
-
-
- {scene && }
-
-
- {transcript && }
-
- {instructions && (
- <>
+ {description && (
+
-
+
)}
- {assignments.length > 0 && (
-
-
-
- )}
+ {nodules?.map((nodule, i) => {
+ return (
+
+ {renderNodule(nodule, showInteractiveEditor)}
+
+ );
+ })}
- {questions.length > 0 && (
-
-
-
- )}
+
+ {videoId && (
+ <>
+
+
+
+ )}
+
- {explanation ? (
-
- ) : null}
+ {scene && }
- {!hasAnsweredMcqCorrectly && (
- {t('learn.answered-mcq')}
- )}
+
+ {transcript && }
-
-
-
+ {instructions && (
+ <>
+
+
+
+ )}
-
-
-
-
-
+ {assignments.length > 0 && (
+
+
+
+ )}
+
+ {questions.length > 0 && (
+
+
+
+ )}
+
+ {explanation ? (
+
+ ) : null}
+
+ {!hasAnsweredMcqCorrectly && (
+ {t('learn.answered-mcq')}
+ )}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/curriculum/schema/challenge-schema.js b/curriculum/schema/challenge-schema.js
index eb12c4ada1a..affad7cc2da 100644
--- a/curriculum/schema/challenge-schema.js
+++ b/curriculum/schema/challenge-schema.js
@@ -192,7 +192,8 @@ const schema = Joi.object().keys({
Joi.object().keys({
ext: Joi.string().required(),
name: Joi.string().required(),
- contents: Joi.string().required()
+ contents: Joi.string().required(),
+ contentsHtml: Joi.string().required()
})
),
otherwise: Joi.string().required()
diff --git a/tools/challenge-parser/parser/plugins/add-interactive-elements.js b/tools/challenge-parser/parser/plugins/add-interactive-elements.js
index d6940d69c8d..21ab46d4bbb 100644
--- a/tools/challenge-parser/parser/plugins/add-interactive-elements.js
+++ b/tools/challenge-parser/parser/plugins/add-interactive-elements.js
@@ -54,12 +54,16 @@ function getFiles(filesNodes) {
return filesNodes.map(node => {
counts[node.lang] = counts[node.lang] ? counts[node.lang] + 1 : 1;
+
+ const contentsHtml = mdastToHTML([node]);
+
const out = {
contents: node.value,
ext: node.lang,
name:
getFilenames(node.lang) +
- (counts[node.lang] ? `-${counts[node.lang]}` : '')
+ (counts[node.lang] ? `-${counts[node.lang]}` : ''),
+ contentsHtml
};
return out;
diff --git a/tools/challenge-parser/parser/plugins/add-interactive-elements.test.js b/tools/challenge-parser/parser/plugins/add-interactive-elements.test.js
index db6e9a185af..1bdc7167a1d 100644
--- a/tools/challenge-parser/parser/plugins/add-interactive-elements.test.js
+++ b/tools/challenge-parser/parser/plugins/add-interactive-elements.test.js
@@ -28,51 +28,51 @@ describe('add-interactive-editor plugin', () => {
element => element.type === 'interactiveEditor'
);
- expect(editorElements).toEqual(
- expect.arrayContaining([
- {
- data: [
- {
- ext: expect.any(String),
- name: expect.any(String),
- contents: expect.stringContaining(
- 'This is an interactive element
'
- )
- }
- ],
- type: 'interactiveEditor'
- }
- ])
- );
-
- expect(editorElements).toEqual(
- expect.arrayContaining([
- {
- data: [
- {
- ext: expect.any(String),
- name: expect.any(String),
- contents: expect.stringContaining(
- 'This is an interactive element'
- )
- }
- ],
- type: 'interactiveEditor'
- },
- {
- data: [
- {
- ext: expect.any(String),
- name: expect.any(String),
- contents: expect.stringContaining(
- "console.log('Interactive JS');"
- )
- }
- ],
- type: 'interactiveEditor'
- }
- ])
- );
+ expect(editorElements).toEqual([
+ {
+ type: 'interactiveEditor',
+ data: [
+ {
+ contents: "console.log('Interactive JS');",
+ ext: 'js',
+ name: 'script-1',
+ contentsHtml:
+ 'console.log(\'Interactive JS\');\n
'
+ }
+ ]
+ },
+ {
+ type: 'interactiveEditor',
+ data: [
+ {
+ contents: 'This is an interactive element
',
+ ext: 'html',
+ name: 'index-1',
+ contentsHtml:
+ '<div>This is an interactive element</div>\n
'
+ }
+ ]
+ },
+ {
+ type: 'interactiveEditor',
+ data: [
+ {
+ contents: 'This is an interactive element
',
+ ext: 'html',
+ name: 'index-1',
+ contentsHtml:
+ '<div>This is an interactive element</div>\n
'
+ },
+ {
+ contents: "console.log('Interactive JS');",
+ ext: 'js',
+ name: 'script-1',
+ contentsHtml:
+ 'console.log(\'Interactive JS\');\n
'
+ }
+ ]
+ }
+ ]);
});
it('provides unique names for each file with the same extension', async () => {
@@ -97,6 +97,9 @@ describe('add-interactive-editor plugin', () => {
// Contents should match
expect(files[0].contents).toBe("console.log('First JavaScript file');");
expect(files[1].contents).toBe("console.log('Second JavaScript file');");
+
+ expect(files[0].contentsHtml).toContain('');
+ expect(files[1].contentsHtml).toContain('');
});
it('respects the order of elements in the original markdown', async () => {