more component setup

src/components/App/App.js

@@ -2,14 +2,14 @@ import React, { Component } from 'react';
 import './App.css';
 
 import {
-    AssessmentQuiz
+    Quiz
 } from 'components';
 
 class App extends Component {
     render() {
         return (
             <div className={`App`}>
-                <AssessmentQuiz/>
+                <Quiz />
             </div>
         );
     }

src/components/QuestionAnswer/QuestionAnswer.component.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react';
+
+import Highlight from 'react-highlight';
+
+import Markdown from 'react-remarkable';
+
+import PropTypes from 'prop-types';
+
+import './QuestionAnswer.css';
+
+export default class QuestionAnswer extends PureComponent {
+    static propTypes = {
+        text: PropTypes.string.isRequired,
+        type: PropTypes.oneOf([
+            `code`,
+            `markdown`,
+        ]),
+    };
+
+    static defaultProps = {
+        type: `markdown`,
+    };
+
+    render() {
+        const { type, text } = this.props;
+
+        return type === `code` ? (
+            <Highlight className={`javascript`}>{text}</Highlight>
+        ) : (
+            <Markdown>{text}</Markdown>
+        );
+    }
+}

src/components/QuestionAnswer/QuestionAnswer.css

@@ -0,0 +1,3 @@
+.QuestionAnswer {
+
+}

src/components/QuestionAnswer/index.js

@@ -0,0 +1 @@
+export { default as QuestionAnswer } from './QuestionAnswer.component';

src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.component.js → src/components/Questions/VariableDeclaration/VariableDeclaration.component.js

@@ -45,18 +45,17 @@ const answers = [
     },
 ];
 
+const incorrectFeedback = `This is a basic question. If this wasn't a mistake input, you need to learn the fundamentals of Javascript.`;
 
-export default class VariableDeclarationQuestion extends PureComponent {
-    static propTypes = {};
 
+export default class VariableDeclaration extends PureComponent {
     render() {
-        const {} = this.props;
-
         return (
             <QuizQuestion
                 codeFigure={codeFigure}
                 question={question}
                 answers={answers}
+                incorrectFeedback={incorrectFeedback}
             />
         );
     }

src/components/Questions/VariableDeclaration/VariableDeclaration.container.js

@@ -0,0 +1,5 @@
+import { connect } from 'react-redux';
+
+import VariableDeclaration from './VariableDeclaration.component';
+
+export default VariableDeclaration;

src/components/Questions/VariableDeclaration/index.js

@@ -0,0 +1 @@
+export { default as VariableDeclaration } from './VariableDeclaration.container';

src/components/Questions/index.js

@@ -0,0 +1 @@
+export * from './VariableDeclaration';

src/components/Quiz/Quiz.component.js

@@ -3,22 +3,16 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-    QuizQuestion
+    VariableDeclaration,
 } from 'components';
 
 import './Quiz.css';
 
 export default class Quiz extends PureComponent {
-    static propTypes = {
-        children: PropTypes.array,
-    };
-
     render() {
-        const {children} = this.props;
-
         return (
             <div className={`Quiz`}>
-                {children}
+                <VariableDeclaration/>
             </div>
         );
     }

src/components/QuizQuestion/QuizQuestion.component.js

@@ -4,6 +4,10 @@ import Highlight from 'react-highlight';
 
 import Markdown from 'react-remarkable';
 
+import {
+    QuestionAnswer,
+} from 'components';
+
 import 'highlight.js/styles/github-gist.css';
 
 import PropTypes from 'prop-types';
@@ -14,13 +18,12 @@ export default class QuizQuestion extends PureComponent {
     static propTypes = {
         codeFigure: PropTypes.string,
         question: PropTypes.string.isRequired,
-        answers: PropTypes.arrayOf(PropTypes.shape({
-            text: PropTypes.string.isRequired,
-        }))
+        answers: PropTypes.array,
+        incorrectFeedback: PropTypes.node,
     };
 
     render() {
-        const { codeFigure, question, answers } = this.props;
+        const { codeFigure, question, answers, incorrectFeedback } = this.props;
 
         return (
             <div className={`QuizQuestion`}>
@@ -33,10 +36,10 @@ export default class QuizQuestion extends PureComponent {
                     <Markdown>{question}</Markdown>
                 </div>
                 <ol className={`QuizQuestion__answers-list`}>
-                    {answers.map(({ text }, i) => {
+                    {answers.map((answer = {}, i) => {
                         return (
                             <li key={i}>
-                                <Highlight className={`javascript`}>{text}</Highlight>
+                                <QuestionAnswer {...answer} />
                             </li>
                         );
                     })}

src/components/index.js

@@ -1,4 +1,5 @@
 export * from './App';
-export * from './AssessmentQuiz';
+export * from './QuestionAnswer';
+export * from './Questions';
 export * from './Quiz';
 export * from './QuizQuestion';