diff --git a/content.js b/content.js index c5699c3b8091e2123e839ee00683c40878f7564c..3d83b7bb2faa14f6a450b8bb58d0cfdb52b5b3f1 100644 --- a/content.js +++ b/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",