From 05cbb2cc28fc760a14c48a993a1dabf867400b84 Mon Sep 17 00:00:00 2001 From: giacomo <mariang1@aalto.fi> Date: Mon, 10 Feb 2020 15:07:42 +0200 Subject: [PATCH] border_color exercise --- content.js | 49 ++++++++++++++++++++++++++++++------------------- 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/content.js b/content.js index c5699c3..3d83b7b 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", -- GitLab