Save does work now.

javascript/src/CodeCorrection.js

@@ -55,6 +55,7 @@ var QfqNS = QfqNS || {};
             url: this.$parent.data("file"),
             text: this.$parent.data("text")
         };
+        this.page = page;
         this.language = this.$parent.data("highlight") || "typo3conf/ext/qfq/Resources/Public/Json/javascript.json";
 
         this.currentUser = $container.data("uid");
@@ -237,9 +238,53 @@ var QfqNS = QfqNS || {};
         commentController.on('comment.added', function(argument) {
             console.log("Catch event: " + that.annotations.length);
             console.log("With data: " + argument.data);
+            that._handleNew(argument.data);
         });
     };
 
+    n.CodeCorrection.prototype._handleNew = function(eventData) {
+        this._addCurrentUser();
+        this._updateJSON();
+    };
+
+    n.CodeCorrection.prototype._addCurrentUser = function() {
+        if (!this.checkUserExists(this.currentUser.uid)) {
+            this.users.push(this.currentUser);
+        }
+    };
+
+    n.CodeCorrection.prototype.checkUserExists = function(uid) {
+        for (var i = 0; i < this.users.length; i++) {
+            if (this.users[i].uid === uid) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    n.CodeCorrection.prototype._updateJSON = function() {
+        var jexport = {};
+        jexport.annotations = [];
+        for (var i = 0; i < this.annotations.length; i++) {
+            var annotation = {
+                lineNumber: this.annotations[i].lineNumber,
+                comments: this.annotations[i].commentController.exportComments()
+            };
+            jexport.annotations.push(annotation);
+        }
+        jexport.users = this.users;
+        this.$target.val(JSON.stringify(jexport));
+        var that = this;
+        if (this.page.qfqForm) {
+            this.page.qfqForm.eventEmitter.emitEvent('form.changed', n.EventEmitter.makePayload(that, null));
+            this.page.qfqForm.changeHandler();
+            this.page.qfqForm.form.formChanged = true;
+        } else {
+            console.log(this.page);
+            throw("Error: Couldn't initialize qfqForm - not possible to send form.changed event");
+        }
+    };
+
 
     /**
      * Places a comment editor under the hook.
@@ -295,5 +340,4 @@ var QfqNS = QfqNS || {};
         return false;
     };
 
-
 })(QfqNS);
\ No newline at end of file

javascript/src/CommentController.js

@@ -46,7 +46,7 @@ var QfqNS = QfqNS || {};
      * @param event String containing possible change states
      * @return {boolean} true on success
      */
-    n.CommentController.prototype._changeHandler = function(event) {
+    n.CommentController.prototype._changeHandler = function(event, comment) {
         if (event === "edit") {
             this.eventEmitter.emitEvent('comment.edited',
                 n.EventEmitter.makePayload(this, "edit"));
@@ -54,7 +54,7 @@ var QfqNS = QfqNS || {};
             return true;
         } else if (event === "new") {
             this.eventEmitter.emitEvent('comment.added',
-                n.EventEmitter.makePayload(this, "add"));
+                n.EventEmitter.makePayload(this, comment));
             console.log("[CommentController] Event comment.add emitted");
             return true;
         } else if (event === "remove") {
@@ -102,7 +102,7 @@ var QfqNS = QfqNS || {};
         var commentObject = new n.Comment(comment, user, this.$container);
         commentObject.display();
         this.comments.push(commentObject);
-        this._changeHandler("new");
+        this._changeHandler("new", commentObject);
         this.updateHeight();
         return this.comments.length - 1;
     };
@@ -163,6 +163,14 @@ var QfqNS = QfqNS || {};
         this.displayEditor();
     };
 
+    n.CommentController.prototype.exportComments = function() {
+        var comments = [];
+        for(var i=0; i < this.comments.length; i++) {
+            comments.push(this.comments[i].comment);
+        }
+        return comments;
+    };
+
     n.CommentController.prototype._searchUsersByUid = function (users, uid) {
         for (var i=0; i < users.length; i++) {
             if (users[i].uid === uid) {

javascript/src/QfqPage.js

@@ -89,9 +89,9 @@ var QfqNS = QfqNS || {};
             this.qfqForm = null;
         }
 
+        var page = this;
         // Initialize Fabric to access form events
         try {
-            var page = this;
             $(".annotate-graphic").each(function() {
                 var qfqFabric = new QfqNS.Fabric();
                 qfqFabric.initialize($(this), page);

mockup/codeCorrection.html

@@ -14,7 +14,7 @@
 </head>
 <body style="background-color: #f5f5f5;">
 <div class="container-fluid">
-    <div class="row">
+     <div class="row">
         <div class="col-md-10 ">
             <div class="btn-toolbar pull-right" role="toolbar">
                 <div class="btn-group" role="group">