From afc93ab2ab7fafe4a7016404554e2cb8d1201a39 Mon Sep 17 00:00:00 2001
From: giacomo <mariang1@aalto.fi>
Date: Mon, 10 Feb 2020 13:49:23 +0200
Subject: [PATCH] change border color exercise

---
 content.js | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/content.js b/content.js
index 66be824..c5699c3 100644
--- a/content.js
+++ b/content.js
@@ -296,6 +296,45 @@ let Content = {
     concepts: ["HTML", "Input", "radio", "disabled", "checked"],
     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.",
+    html: `
+      <style>
+        span#color-span {
+          color: red
+        }
+        div#border-color-element {
+          border-style: double;
+          margin 5px;
+
+        }
+      </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>
+    `,
+    mutations: true,
+    points: function (config) {
+      let rightColor = "red";
+      let borderColorElement = document.getElementById("border-color-element");
+      let borderColor = borderColorElement.style.borderColor;
+      let pointAmount = 10;
+      if(!config.graded && borderColor === rightColor) {
+        return {
+          points: pointAmount,
+          feedback: 'Congratulations, nice color! You got ' + pointAmount + ' points.'
+        };
+      } s
+      return undefined;
+    },
+    maxPoints: 10,
+    title: "Change border color",
+    description: "Points for changing the border color to the right value",
+    concepts: ["HTML", "Input", "CSS", "color"],
+    order: 8
+  }
 };
 
 module.exports = Content;
-- 
GitLab