Fix: Documentation improvements (fixes #16)

README.md

@@ -5,7 +5,9 @@
 Uses v5.7.6 of Lottie.
 
 ## Adapt Authoring Tool
-Change the file ending of your json from `.json` to `.svgz` for use in the AAT image picker.
+To use with the AAT's image picker:
+- Change the file ending of your JSON file from `.json` to `.svgz`
+- In *course.json*, ensure `_graphicLottie._fileExtension` is set to `svgz`
 
 ## Settings Overview
 
@@ -17,7 +19,7 @@ The attributes listed below are used in *course.json* to configure **Adapt Graph
 
 >**\_isEnabled** (String): Defaults to `true`.
 
->**\_fileExtension** (String): The image file extension of the json file. Acceptable values are `svgz` and `bmp`. Defaults to `svgz`.
+>**\_fileExtension** (String): The file extension of the JSON file that is exported from Adobe After Effects. Acceptable values are `svgz` and `json`. Defaults to `svgz`.
 
 >**\_loops** (Number): Controls how many times the animation should loop when inview. To set an infinite loop, use a value of `-1`. Defaults to `0` (don't loop).
 

example.json

@@ -1,15 +1,31 @@
-    // course.json
-    {
-        "_graphicLottie": {
-            "_isEnabled": true,
-            "_fileExtension": "svgz",
-            "_loops": -1,
-            "_autoPlay": true,
-            "_onScreenPercentInviewVertical": 1,
-            "_playFirstViewOnly": true,
-            "_offScreenPause": true,
-            "_offScreenRewind": true,
-            "_showPauseControl": false,
-            "_onPauseRewind": false
-        }
+// course.json
+"_graphicLottie": {
+    "_isEnabled": true,
+    "_fileExtension": "svgz",
+    "_loops": -1,
+    "_autoPlay": true,
+    "_onScreenPercentInviewVertical": 1,
+    "_playFirstViewOnly": true,
+    "_offScreenPause": true,
+    "_offScreenRewind": true,
+    "_showPauseControl": false,
+    "_onPauseRewind": false
+}
+
+// components.json - Example using a Lottie animation in a Graphic component
+{
+    "_id": "c-05",
+    "_parentId": "b-05",
+    "_type": "component",
+    "_component": "graphic",
+    "_classes": "",
+    "_layout": "left",
+    "title": "Graphic component",
+    "displayTitle": "",
+    "body": "",
+    "instruction": "",
+    "_graphic": {
+        "large": "course/en/images/graphic.svgz",
+        "small": "course/en/images/graphic.svgz"
     }
+}