diff --git a/content.js b/content.js index c49da8ae5a121c95a01616bea34d34a90f001bea..a2b3b16aa91906a370015391fb75b393a0f8389d 100644 --- a/content.js +++ b/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><p></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) { - return { - points: 10, - feedback: 'Congratulations!' - }; + if (event.originalEvent.data == 'grade') { + return { + points: 10, + feedback: 'Congratulations!' + }; + } + return undefined; }, maxPoints: 10, title: "Console command",