add styles and adjust the monacoEditorMock to show backend challenges

packages/learn/src/__mocks__/monacoEditorMock.js

@@ -1,4 +1,18 @@
 /* eslint-disable */
 import React from 'react';
 
-export default () => React.createElement('div');
+export default (props) => {
+  const { width = '100%', height = '100%' } = props;
+  const fixedWidth = width.toString().indexOf('%') !== -1 ?
+    width : `${width}px`;
+  const fixedHeight = height.toString().indexOf('%') !== -1 ?
+    height : `${height}px`;
+  const style = {
+    width: fixedWidth,
+    height: fixedHeight
+  };  return (
+    <div
+      style={style}
+      className="react-monaco-editor-container" />
+  );
+}

packages/learn/src/templates/Challenges/backend/Show.js

@@ -10,6 +10,7 @@ import ChallengeDescription from '../components/Challenge-Description';
 import TestSuite from '../components/Test-Suite';
 import Output from '../components/Output';
 import CompletionModal from '../components/CompletionModal';
+import HelpModal from '../components/HelpModal';
 import ProjectToolPanel from '../project/Tool-Panel';
 import {
   executeChallenge,
@@ -29,6 +30,11 @@ import {
 import Spacer from '../../../components/util/Spacer';
 import { createGuideUrl } from '../utils';
 
+import '../components/tool-panel.css';
+import '../components/preview.css';
+import '../components/test-suite.css';
+import '../classic/classic.css';
+
 // provided by redux form
 const reduxFormPropTypes = {
   fields: PropTypes.object,
@@ -157,6 +163,7 @@ export class BackEnd extends PureComponent {
           <Spacer />
         </Col>
         <CompletionModal />
+        <HelpModal />
       </Row>
     );
   }