border_color exercise

content.js

@@ -297,37 +297,48 @@ let Content = {
     order: 7
   },
   change_border_color: {
-    instructions: "Change the color of the border of the element on the left to the value \"red\". In order to get the points you will have to use the developer tools console, and change the color in the element selector.",
+    instructions: "Change the border color and the background color of the element on the left. Use any value that you prefer. In order to get the points you will have to use the developer tools console, and change the color in the <em>element</em> selector. Also remeber that the values you use should be valid ones.",
     html: `
       <style>
-        span#color-span {
-          color: red
-        }
-        div#border-color-element {
+        div#color-element {
           border-style: double;
           margin 5px;
-
+          padding: 2px;
         }
       </style>
-      <div id="border-color-container">
-        <div id="border-color-element" style="border-color: green">
-          Change the border of this element to <span id="color-span">red</span>
-        </div>
+      <div>
+        <form method="post" action="" id="color-form">
+          <div id="color-element" style="border-color: rgb(47, 252, 252);
+          background-color: rgb(252, 47, 252);">
+            Pease change the border and background colors of this element, my eyes are bleeding :'(
+          </div><br>
+          <input type="submit" value="Grade" />
+        </form>
       </div>
     `,
-    mutations: true,
-    points: function (config) {
-      let rightColor = "red";
-      let borderColorElement = document.getElementById("border-color-element");
-      let borderColor = borderColorElement.style.borderColor;
+    selector: "#color-form",
+    events: "submit",
+    points: function ($element, config, event) {
+      let borderColor = document.getElementById('color-element').style.borderColor;
+      let backgroundColor = document.getElementById('color-element').style.backgroundColor;
       let pointAmount = 10;
-      if(!config.graded && borderColor === rightColor) {
+      event.preventDefault();
+      let colorsChanged = (borderColor !== "rgb(47, 252, 252)" && backgroundColor !== "rgb(252, 47, 252)");
+      let colorsDefined = (borderColor.length > 0 && backgroundColor.length > 0)
+
+      if(colorsChanged && colorsDefined) {
+      document.getElementById('color-element').innerHTML = "Huhuh, thank you! My eyes feel much better already 8-D"
         return {
           points: pointAmount,
-          feedback: 'Congratulations, nice color! You got ' + pointAmount + ' points.'
+          feedback: 'Congratulations, nice colors! You got ' + pointAmount + ' points.'
         };
-      } s
-      return undefined;
+      } else {
+        return {
+          points: 0,
+          feedback: 'You have to change both the border color and background color with any valid value of your choice. Try again'
+        };
+      }
+
     },
     maxPoints: 10,
     title: "Change border color",