Use postMessage in function call

content.js

@@ -57,7 +57,7 @@ let Content = {
 
   change_color: {
     instructions: "The blue area on left contains barely visible text. Your task is to use the browser inspector tool to locate the paragraph element <strong>&lt;p&gt;</strong> containing the barely visible text and then add a CSS property to apply another <strong>color</strong>. <em>Note that editing existing CSS rules does not grade the exercise.</em>",
-    html: "<div class=\"acos-webdev-poi\"><p class=\"blue\">The quick brown fox jumps over the lazy dog's back.</p></div>",
+    html: "<div class=\"acos-webdev-poi\"><p class=\"blue\">The quick brown fox jumps over the lazy dog's back 1234567890</p></div>",
     mutations: true,
     points: function ($element, config, mutations) {
       let $p = $element.find('.exercise p');
@@ -104,15 +104,18 @@ let Content = {
     instructions: "This time the area on left does not have any visible content. However, this exercise defines a JavaScript function that can grant you points. Your task is to use the browser console to call the function like this: <code>giveMePoints();</code>",
     html: "<div id=\"events\"></div>",
     script: function giveMePoints() {
-      document.getElementById('events').dispatchEvent(new Event('grade'));
+      window.parent.postMessage('grade');
     },
-    selector: "#events",
-    events: "grade",
+    selector: "$window.parent",
+    events: "message",
     points: function ($element, config, event) {
+      if (event.originalEvent.data == 'grade') {
         return {
           points: 10,
           feedback: 'Congratulations!'
         };
+      }
+      return undefined;
     },
     maxPoints: 10,
     title: "Console command",