copied library from source (not functional yet)

package.json

@@ -8,7 +8,7 @@
     "build": "cross-env NODE_ENV='development' webpack",
     "watch": "webpack --watch",
     "dist": "cp library.json dist && cp semantics.json dist",
-    "deploy": "rsync -vaz --delete --rsh=\"ssh -l bitnami\" dist/* 192.168.188.43:~/h5p_dev/h5p-advanced-blanks",
+    "deploy": "rsync -vaz --delete --rsh=\"ssh -l bitnami\" dist/* 192.168.1.207:~/h5p_dev/h5p-advanced-blanks",
     "build+deploy": "npm run build && npm run deploy"
   },
   "repository": {
@@ -31,9 +31,13 @@
     "babel-preset-latest": "^6.22.0",
     "cross-env": "^4.0.0",
     "css-loader": "^0.26.2",
+    "ractive": "^0.8.14",
     "style-loader": "^0.13.2",
     "ts-loader": "^2.3.2",
     "typescript": "^2.4.2",
     "webpack": "^2.2.1"
+  },
+  "dependencies": {
+    "@types/ractive": "^0.7.27"
   }
 }

src/entries/dist.ts

@@ -1,7 +1,5 @@
 import "../styles/main.css";
-import AdvancedBlanks from "../scripts/app";
-
-declare var H5P: any;
+import AdvancedBlanks from '../scripts/app';
 
 // Load library
 H5P = H5P || {};

src/libs/ractive-events-keys.ts

@@ -0,0 +1,37 @@
+module RactiveEventsKeys {
+    // TODO can we just declare the keydownHandler once? using `this`?
+    function makeKeyDefinition(code) {
+        return (node, fire) => {
+            function keydownHandler(event) {
+                var which = event.which || event.keyCode;
+
+                if (which === code) {
+                    event.preventDefault();
+
+                    fire({
+                        node,
+                        original: event
+                    });
+                }
+            }
+
+            node.addEventListener('keydown', keydownHandler, false);
+
+            return {
+                teardown() {
+                    node.removeEventListener('keydown', keydownHandler, false);
+                }
+            };
+        };
+    }
+
+    export const enter = makeKeyDefinition(13);
+    export const tab = makeKeyDefinition(9);
+    export const escape = makeKeyDefinition(27);
+    export const space = makeKeyDefinition(32);
+
+    export const leftarrow = makeKeyDefinition(37);
+    export const rightarrow = makeKeyDefinition(39);
+    export const downarrow = makeKeyDefinition(40);
+    export const uparrow = makeKeyDefinition(38);
+}

src/scripts/answer.ts

@@ -0,0 +1,65 @@
+import { Message } from './message';
+import { ClozeHighlight } from './cloze-highlight';
+import { Settings } from './settings';
+import { Evaluation } from './enums';
+import { Levensthein } from './levenshtein';
+
+	export class Answer {
+		alternatives: string[];
+		message: Message;
+		appliesAlways: boolean;
+
+		constructor(answers: string, reaction: string) {
+			this.alternatives = answers.split(/[;|]/).map(s => s.trim());
+			this.message = new Message(reaction);
+			if (answers.trim() === "") {
+				this.appliesAlways = true;
+			} else {
+				this.appliesAlways = false;
+			}
+		}
+
+		linkHighlightIdsToObjects = (highlightsBefore: ClozeHighlight[], highlightsAfter: ClozeHighlight[]) => {
+			this.message.linkHighlights(highlightsBefore, highlightsAfter);
+		}
+
+		activateHighlights = () => {
+			for (var highlightedObject of this.message.highlightedElements) {
+				highlightedObject.isHighlighted = true;
+			}
+		}
+
+		private getCleanedText(text: string) {
+			var caseSensitivity = Settings.instance.caseSensivitity;
+
+			if (caseSensitivity == false)
+				return text.toLocaleLowerCase();
+			else
+				return text;
+		}
+
+		public evaluateEnteredText(enteredText: string): Evaluation {
+			var cleanedEnteredText = this.getCleanedText(enteredText);
+
+			var acceptableTypoCount: number;
+			if (Settings.instance.acceptTypos)
+				acceptableTypoCount = Math.floor(enteredText.length / 10) + 1;
+			else
+				acceptableTypoCount = 0;
+
+			var bestEvaluation: Evaluation = Evaluation.NoMatch;
+
+			for (var alternative of this.alternatives) {
+				var cleanedAlternative = this.getCleanedText(alternative);
+
+				if (cleanedAlternative == cleanedEnteredText)
+					return Evaluation.ExactMatch;
+
+				var necessaryChanges = Levensthein.getEditDistance(cleanedEnteredText, cleanedAlternative);
+				if (necessaryChanges <= acceptableTypoCount)
+					bestEvaluation = Evaluation.CloseMatch;
+			}
+
+			return bestEvaluation;
+		}
+	}

src/scripts/app.ts

@@ -1,29 +1,33 @@
 import * as $ from 'jquery';
-
-declare var H5P: any;
-declare var H5PIntegration: any;
+import { H5PDataRepository } from './data-repository';
+import { MindTheGapController } from './mind-the-gap-controller';
 
 export default class AdvancedBlanks extends (H5P.EventDispatcher as { new(): any; }) {
-  /**
-   * @constructor
-   *
-   * @param {object} config
-   * @param {string} contentId
-   * @param {object} contentData
-   */
-  constructor(config: any, contentId: string, contentData: any = {}) {
-    super();
-    this.element = document.createElement('div');
-    this.element.innerText = '-Advanced blanks content-';
-  }
-
-  /**
-   * Attach library to wrapper
-   *
-   * @param {jQuery} $wrapper
-   */
-  attach = function($wrapper: JQuery) {
-    $wrapper.get(0).classList.add('h5p-advanced-blanks');
-    $wrapper.get(0).appendChild(this.element);
-  }  
-}
+    /**
+     * @constructor
+     *
+     * @param {object} config
+     * @param {string} contentId
+     * @param {object} contentData
+     */
+    constructor(config: any, contentId: string, contentData: any = {}) {
+      super();
+      this.element = document.createElement('div');
+      this.element.innerText = '-Advanced blanks content-';
+
+      var repository = new H5PDataRepository(contentData);      
+      //Localization.initialize(AppClient);
+      var app : MindTheGapController = new MindTheGapController(repository);
+      app.initialize();
+    }
+
+    /**
+     * Attach library to wrapper
+     *
+     * @param {jQuery} $wrapper
+     */
+    attach = function($wrapper: JQuery) {
+      $wrapper.get(0).classList.add('h5p-advanced-blanks');
+      $wrapper.get(0).appendChild(this.element);
+    }  
+  }

src/scripts/cloze-element.ts

@@ -0,0 +1,8 @@
+	export enum ClozeElementType {
+		Gap,
+		Highlight
+	}
+
+	export class ClozeElement {
+		public type: ClozeElementType;
+	}