first pass at setting up base components; installed syntax highlighters

package.json

@@ -3,9 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "highlight.js": "^9.12.0",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react-highlight": "briancappello/react-highlight#react-v16-compiled",
+    "react-redux": "^5.0.6",
+    "react-remarkable": "^1.1.3",
+    "react-scripts": "1.1.1",
+    "redux": "^3.7.2",
+    "reset-css": "^2.2.1"
   },
   "scripts": {
     "start": "NODE_PATH=src react-scripts start",

public/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

src/components/App/App.css

@@ -1,28 +1,4 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  display: flex;
+  flex: 1;
 }

src/components/App/App.js

@@ -1,17 +1,15 @@
 import React, { Component } from 'react';
 import './App.css';
 
+import {
+    AssessmentQuiz
+} from 'components';
+
 class App extends Component {
     render() {
         return (
             <div className={`App`}>
-                <header className={`App-header`}>
-                    <h1 className={`App-title`}>Welcome to React</h1>
-                </header>
-                <p className={`App-intro`}>
-                    To get started, edit <code>src/App.js</code> and save to
-                    reload.
-                </p>
+                <AssessmentQuiz/>
             </div>
         );
     }

src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.component.js

@@ -0,0 +1,23 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+
+import {
+    Quiz,
+    VariableDeclarationQuestion,
+} from 'components';
+
+
+export default class AssessmentQuiz extends PureComponent {
+    static propTypes = {};
+
+    render() {
+        const {} = this.props;
+
+        return (
+            <Quiz>
+                <VariableDeclarationQuestion/>
+            </Quiz>
+        );
+    }
+}

src/components/AssessmentQuiz/AssessmentQuiz/AssessmentQuiz.container.js

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

src/components/AssessmentQuiz/AssessmentQuiz/index.js

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

src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.component.js

@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+
+import {
+    QuizQuestion,
+} from 'components';
+
+const codeFigure = `var name = "Bill";
+
+function caller(func){
+  var myObject = {
+    name: "Joe"
+  };
+  
+  return func(myObject);
+}
+
+function callee(param) {
+  return param.name
+}
+
+var c = caller(callee);`;
+
+const question = `Select the answer below that would set a variable named \`myVariable\` to \`3\``;
+
+const answers = [
+    {
+        type: `code`,
+        text: `myVariable(3)`,
+    },
+    {
+        type: `code`,
+        text: `var myVariable = 3;`,
+    },
+    {
+        type: `code`,
+        text: `var myVariable[3]`,
+    },
+    {
+        type: `code`,
+        text: `var myVariable = {
+    3
+}`,
+    },
+];
+
+
+export default class VariableDeclarationQuestion extends PureComponent {
+    static propTypes = {};
+
+    render() {
+        const {} = this.props;
+
+        return (
+            <QuizQuestion
+                codeFigure={codeFigure}
+                question={question}
+                answers={answers}
+            />
+        );
+    }
+}

src/components/AssessmentQuiz/VariableDeclarationQuestion/VariableDeclarationQuestion.container.js

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

src/components/AssessmentQuiz/VariableDeclarationQuestion/index.js

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

src/components/AssessmentQuiz/index.js

@@ -0,0 +1,2 @@
+export * from './AssessmentQuiz';
+export * from './VariableDeclarationQuestion';

src/components/Quiz/Quiz.component.js

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+
+import PropTypes from 'prop-types';
+
+import {
+    QuizQuestion
+} 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}
+            </div>
+        );
+    }
+}

src/components/Quiz/Quiz.css

@@ -0,0 +1,6 @@
+.Quiz {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/components/Quiz/index.js

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

src/components/QuizQuestion/QuizQuestion.component.js

@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react';
+
+import Highlight from 'react-highlight';
+
+import Markdown from 'react-remarkable';
+
+import 'highlight.js/styles/github-gist.css';
+
+import PropTypes from 'prop-types';
+
+import './QuizQuestion.css';
+
+export default class QuizQuestion extends PureComponent {
+    static propTypes = {
+        codeFigure: PropTypes.string,
+        question: PropTypes.string.isRequired,
+        answers: PropTypes.arrayOf(PropTypes.shape({
+            text: PropTypes.string.isRequired,
+        }))
+    };
+
+    render() {
+        const { codeFigure, question, answers } = this.props;
+
+        return (
+            <div className={`QuizQuestion`}>
+                {codeFigure && (
+                    <div className={`QuizQuestion__code-figure`}>
+                        <Highlight className={`javascript`}>{codeFigure}</Highlight>
+                    </div>
+                )}
+                <div className={`QuizQuestion__question`}>
+                    <Markdown>{question}</Markdown>
+                </div>
+                <ol className={`QuizQuestion__answers-list`}>
+                    {answers.map(({ text }, i) => {
+                        return (
+                            <li key={i}>
+                                <Highlight className={`javascript`}>{text}</Highlight>
+                            </li>
+                        );
+                    })}
+                </ol>
+            </div>
+        );
+    }
+}

src/components/QuizQuestion/QuizQuestion.css

@@ -0,0 +1,32 @@
+.QuizQuestion {
+
+}
+
+.QuizQuestion__question p {
+    font-size: 2rem;
+}
+
+.QuizQuestion__question code {
+    color: #1b2733;
+    background-color: #f7f9fa;
+    border-color: #e6e8eb;
+    font-family: SourceCodePro,monospace;
+}
+
+.QuizQuestion__code-figure {
+    border: 1px solid #e6e8eb;
+    background-color: #f7f9fa;
+}
+
+.QuizQuestion__code-figure > pre {
+    margin: 0;
+}
+
+.QuizQuestion__code-figure .hljs {
+    background-color: transparent;
+    padding: 20px 15px;
+}
+
+.QuizQuestion__answers-list {
+
+}

src/components/QuizQuestion/index.js

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

src/components/index.js

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

src/index.css

@@ -1,5 +1,38 @@
 body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
+    margin: 0;
+    padding: 0;
+    font-family: 'Open Sans', sans-serif;
+    min-height: 100vh;
+    min-width: 100vw;
+    display: flex;
+}
+
+pre {
+    font-family: monospace;
+}
+
+p,
+ul,
+ol,
+pre {
+    line-height: 1.4;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+ul > li,
+ol > li {
+    margin-left: 20px;
+}
+
+pre > .hljs {
+    padding: 0
+}
+
+
+#root {
+    flex: 1;
+    display: flex;
 }

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'reset-css';
 import './index.css';
 
 import { App } from 'components';