Prototype of using Markdown for experiment copy

app/assets/default_experiments/faces_houses/index.ts

@@ -1,10 +1,15 @@
 import { params } from './params';
 import { background } from './content_background';
-import { overview } from './content_overview';
 import { protocol } from './content_protocol';
+import overview from './overview.md';
+
+console.log(overview);
 
 const buildTimeline = () => ({
-    params, background, overview, protocol
+  params,
+  background,
+  overview,
+  protocol,
 });
 
-export default buildTimeline;
+export default buildTimeline;

app/assets/default_experiments/faces_houses/overview.md

@@ -0,0 +1,5 @@
+# Faces and Houses
+
+Oh boy I love faces and houses.
+
+I love [rambler-style houses](https://google.com) the best.

app/assets/default_experiments/stroop/content_protocol.js

@@ -13,5 +13,5 @@ export const protocol = {
   condition_second_img: `conditionIncongruent`,
   condition_second_title: `"Green" written in red`,
   condition_second: `The color is red, so the correct response is ‘r’.`,
-  links: []
+  links: [],
 };

app/assets/default_experiments/stroop/params.js

@@ -20,4 +20,4 @@ export const params = {
     type: EVENTS.STIMULUS_2,
     response: '9',
   },
-},
+};

app/components/DesignComponent/index.tsx

@@ -66,10 +66,10 @@ export interface Props {
   overview: {
     title: string;
     overview: string;
-    links: { address: string; name: string }[],
+    links: { address: string; name: string }[];
   };
   background: {
-    links: { address: string; name: string }[],
+    links: { address: string; name: string }[];
     first_column_statement: string;
     first_column_question: string;
     second_column_statement: string;
@@ -85,7 +85,7 @@ export interface Props {
     condition_second_title: string;
     condition_second: string;
   };
-};
+}
 
 interface State {
   activeStep: string;

app/components/HomeComponent/index.tsx

@@ -40,6 +40,7 @@ import OverviewComponent from './OverviewComponent';
 import { loadProtocol } from '../../utils/labjs/functions';
 import EEGExplorationComponent from '../EEGExplorationComponent';
 import { SignalQualityData } from '../../constants/interfaces';
+import strings from '../../strings';
 
 const { dialog } = remote;
 
@@ -95,6 +96,7 @@ export default class Home extends Component<Props, State> {
 
   componentDidMount() {
     this.setState({ recentWorkspaces: readWorkspaces() });
+    console.log(strings);
   }
 
   handleStepClick(step: string) {
@@ -334,6 +336,17 @@ export default class Home extends Component<Props, State> {
                 />
               </Grid.Column>
 
+              <Grid.Column />
+            </Grid.Row>
+            <Grid.Row>
+              <Grid.Column>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: strings.defaultExperiments.FacesHouses.Overview,
+                  }}
+                />
+              </Grid.Column>
+
               <Grid.Column />
             </Grid.Row>
           </Grid>

app/strings/defaultExperiments_/facesHouses_/background.md

@@ -0,0 +1,9 @@
+Did you know that we spend more time looking at faces than any other type of stimuli? Faces contain a lot of information that is relevant to our day-to-day lives.
+
+For example, by looking at someone’s face we can assess their emotional state. This has led researchers speculate that faces may be processed differently than other stimuli.
+
+In fact, there is a special area in your brain, the Fusiform Face Area, that has been shown to be selective for faces. People who have damage in this area may have a hard time recognizing faces, a condition called face blindness, or prosopagnosia.
+
+In [this video](https://www.cnn.com/videos/health/2011/01/04/sacks.face.blindness.cnn) the famous neurologist Oliver Sacks explains what it is like to have face blindness to the extent that he sometimes didn’t even recognize his own face (!).
+
+Fun fact: Brad Pitt claims he has face blindness, but he has not been tested. Do you know anyone who has face blindness?

app/strings/defaultExperiments_/facesHouses_/overview.md

@@ -0,0 +1,3 @@
+# Faces Houses Experiment
+
+When you scroll through your social media feed, you may find that you are more likely to pause when a picture contains a face, than, for example, a tree. In this experiment, you will explore whether our brains process faces differently than other objects (in this case, houses).

app/strings/defaultExperiments_/facesHouses_/protocol.md

@@ -0,0 +1,19 @@
+# What participants are shown
+
+In the Faces/Houses experiment, participants will see pictures of different faces and houses.
+
+ <!---
+ TODO: figure out the best way to include images. May just involve finding the right path and/or tweaking webpack settings to inline the images 
+ -->
+
+![](../../../assets/default_experiments/faces_houses/stimuli/faces/Face1.jpg)
+
+## Faces
+
+When participants see a face, they should press the key “1”.
+
+![](../../../assets/default_experiments/faces_houses/stimuli/houses/House1.jpg)
+
+## Houses
+
+If participants see a house, they should press “9”.

app/strings/defaultExperiments_/stroop_/background.md

@@ -0,0 +1,9 @@
+Did you know that we spend more time looking at faces than any other type of stimuli? Faces contain a lot of information that is relevant to our day-to-day lives.
+
+For example, by looking at someone’s face we can assess their emotional state. This has led researchers speculate that faces may be processed differently than other stimuli.
+
+In fact, there is a special area in your brain, the Fusiform Face Area, that has been shown to be selective for faces. People who have damage in this area may have a hard time recognizing faces, a condition called face blindness, or prosopagnosia.
+
+In [this video](https://www.cnn.com/videos/health/2011/01/04/sacks.face.blindness.cnn) the famous neurologist Oliver Sacks explains what it is like to have face blindness to the extent that he sometimes didn’t even recognize his own face (!).
+
+Fun fact: Brad Pitt claims he has face blindness, but he has not been tested. Do you know anyone who has face blindness?

app/strings/index.ts

@@ -0,0 +1,32 @@
+/**
+ * This file allows webpack to bundle all of the html generated by the markdown
+ * files in this directory into one object that can be imported into the app
+ * e.g.  <div dangerouslySetInnerHTML={{ __html: strings.defaultExperiments.facesHouses.overview }} />
+ */
+
+import set from 'set-value';
+
+// Unfortunately, recursive globbing doesn't work here,
+// so we have to do this somewhat ugly hack.
+// @ts-expect-error
+import * as firstLevel from 'glob:./**.md';
+// @ts-expect-error
+import * as secondLevel from 'glob:./**/**.md';
+// @ts-expect-error
+import * as thirdLevel from 'glob:./**/**/**.md';
+
+// babel-plugin-import-glob separates path with this character
+// TODO: directory seperator is not being added so I had to do it manually
+const DIRECTORY_SEPARATOR = /_/g;
+const buildStrings = () => {
+  const entries = { ...firstLevel, ...secondLevel, ...thirdLevel };
+  const nested: any = {};
+  Object.keys(entries).forEach((key) => {
+    const keyWithDots = key.replace(DIRECTORY_SEPARATOR, '.');
+    set(nested, keyWithDots, entries[key]);
+  });
+  return nested;
+};
+
+const strings = buildStrings();
+export default strings;

app/utils/labjs/functions.ts

@@ -1,10 +1,9 @@
 import { EXPERIMENTS } from '../../constants/constants';
 
-import * as buildN170Timeline from '../../assets/default_experiments/faces_houses';
-import * as buildStroopTimeline from '../../assets/default_experiments/stroop';
-import * as buildMultiTimeline from '../../assets/default_experiments/multitasking';
-import * as buildSearchTimeline from '../../assets/default_experiments/search';
-import * as buildCustomTimeline from './protocols/custom';
+import buildN170Timeline from '../../assets/default_experiments/faces_houses';
+import buildStroopTimeline from '../../assets/default_experiments/stroop';
+import buildMultiTimeline from '../../assets/default_experiments/multitasking';
+import buildSearchTimeline from '../../assets/default_experiments/search';
 
 // loads a protocol of the experiment
 // TODO refactor this experiment description system to be much more predictable
@@ -29,7 +28,7 @@ export const loadProtocol = (paradigm: EXPERIMENTS) => {
 
     case EXPERIMENTS.CUSTOM:
     default:
-      protocol = buildCustomTimeline();
+      protocol = {};
       break;
   }
   return protocol;

babel.config.js

@@ -56,6 +56,9 @@ module.exports = (api) => {
       [require('@babel/plugin-proposal-class-properties'), { loose: true }],
       require('@babel/plugin-proposal-json-strings'),
 
+      // glob for easily handling html from markdown
+      require('babel-plugin-import-glob'),
+
       ...(development ? developmentPlugins : productionPlugins),
     ],
   };

configs/webpack.config.renderer.dev.babel.js

@@ -11,6 +11,7 @@ import webpack from 'webpack';
 import chalk from 'chalk';
 import { merge } from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
+import ImportGlobPlugin from 'babel-plugin-import-glob';
 import baseConfig from './webpack.config.base';
 import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
 
@@ -189,6 +190,21 @@ export default merge(baseConfig, {
         test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
         use: 'url-loader',
       },
+      // Markdown for copy
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'html-loader',
+          },
+          {
+            loader: 'markdown-loader',
+            options: {
+              /* your options here */
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {

configs/webpack.config.renderer.prod.babel.js

@@ -9,6 +9,7 @@ import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
+import ImportGlobPlugin from 'babel-plugin-import-glob';
 import baseConfig from './webpack.config.base';
 import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
 import DeleteSourceMaps from '../internals/scripts/DeleteSourceMaps';
@@ -174,6 +175,21 @@ export default merge(baseConfig, {
         test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
         use: 'url-loader',
       },
+      // Markdown for copy
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'html-loader',
+          },
+          {
+            loader: 'markdown-loader',
+            options: {
+              /* your options here */
+            },
+          },
+        ],
+      },
     ],
   },
 
@@ -222,5 +238,6 @@ export default merge(baseConfig, {
         process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
       openAnalyzer: process.env.OPEN_ANALYZER === 'true',
     }),
+    new ImportGlobPlugin({}),
   ],
 });

keys.js

@@ -1,5 +1,5 @@
-// These  values must be filled with the appropriate Emotiv credentials to be able to use the Cortex SDK
-// We have our credentials stored in environement variables
+// These values must be filled with the appropriate Emotiv credentials to be able to use the Cortex SDK
+// We have our credentials stored in environment variables
 
 const USERNAME = process.env.EMOTIV_USERNAME;
 const PASSWORD = process.env.EMOTIV_PASSWORD;

package.json

@@ -200,6 +200,7 @@
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",
+    "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist-config-erb": "^0.0.1",
     "chalk": "^4.1.0",
@@ -231,10 +232,12 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-testcafe": "^0.2.1",
     "file-loader": "^6.0.0",
+    "html-loader": "^1.3.1",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.1.0",
     "lint-staged": "^10.2.11",
+    "markdown-loader": "^5.1.0",
     "mini-css-extract-plugin": "^0.9.0",
     "opencollective-postinstall": "^2.0.3",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
@@ -309,6 +312,7 @@
     "rxjs-compat": "^6.5.5",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2",
+    "set-value": "^3.0.2",
     "simple-statistics": "^7.1.0",
     "simplify-js": "^1.2.4",
     "source-map-support": "^0.5.19",