diff --git a/docs/08-develop/05-build_new_activities.md b/docs/08-develop/05-build_new_activities.md index 7a66bd5fac..7d9b3a9af4 100644 --- a/docs/08-develop/05-build_new_activities.md +++ b/docs/08-develop/05-build_new_activities.md @@ -8,10 +8,93 @@ Learning modules, surveys, cognitive tests, and interventions all use the same A Any Javascript-based code can be added the LAMP Platform using the ActivitySpec API, as long as it uses `window.postMessage()` and `window.addEventListener()` API to receive the Activity settings and submit the ActivityEvent once complete. -With approximately ~40 lines of JavaScript + React code, shown on the left, produces a naïve implementation of the Jewels game, shown on the right. +Approximately ~40 lines of JavaScript + React code, shown on the left produces a naïve implementation of the Jewels game, shown on the right. ![](assets/Screen_Shot_2019-04-16_at_12.12.16_PM.png) :::info If you'd like to try creating your own, but don't have a ReactJS development environment, **consider using [CodeSandbox](https://codesandbox.io/)**, a free service. ::: + +# Specific Instructions to add Custom Activity + +To add a custom activity, the HTML page must be compressed in base64 and must be able to be accessed by the dashboard. +To do this, you can run this command on your html file: + +`$ cat index.html | base64 > index.html.b64` + +In your Activity Spec DB document it should have an **executable** and a **settings** attribute. +Should look something similiar to this: +``` +"executable": "https://path/to/your/index.html.b64" +"settings": { + "type": "object", + "properties": { + "settings": { + "title": "Activity Settings", + "type": "object", + "required": [ + "totalTrials", + "maxTime" + ], + "properties": { + "totalTrials": { + "title": "Total Trials", + "description": "The number of trials.", + "type": "number", + "default": 20, + "minimum": 1, + "maximum": 100, + "ui:grid": { + "xs": 4 + } + }, + "maxTime": { + "title": "Max Time", + "description": "The time it takes to get to the stopsign in seconds", + "type": "number", + "default": 0.75, + "minimum": 0.1, + "maximum": 2, + "ui:grid": { + "xs": 4 + } + } + } + } + } + }, +``` + +# Custom Activity HTML file + +## Back Button Function in Activity +In your HTML document, include a function where the user can revert back to LAMP. The *onclick* attribute should then call a parent postMessage. + +Something like this: + +``` +function clickedBackButton(){ + console.log('clicked back button') + parent.postMessage(null, '*'); +} +``` + +In that specific example, the postMessage is sent to the LAMP with no data. + +## Initialized Settings from LAMP +Using the settings we added to the document, we can access these variables using the *addEventListener()* + +``` +window.addEventListener("message", (event) => { + // console.log(event) + settings = event.data.activity.settings + + totalTrials = settings.totalTrials // the totalTrials settings can be accessed here + + totalTrials = 20 //default + maxTime = settings.maxTime // the maxTime settings can be accessed here + + +}, false); +```