Skip to content
Snippets Groups Projects
Commit c99a7b70 authored by Lassi Haaranen's avatar Lassi Haaranen
Browse files

Add css pseudoelement exercise

parent 05cbb2cc
No related branches found
No related tags found
No related merge requests found
......@@ -345,7 +345,64 @@ let Content = {
description: "Points for changing the border color to the right value",
concepts: ["HTML", "Input", "CSS", "color"],
order: 8
},
css_checked_pseudo: {
instructions: "You need to add a new style rule (little + icon in the developer tools). That adds a <code>text-decoration</code> property with a value of <code>line-through</code> to any label elements that are <em>adjacent siblings</em> to a checked input. Hint: you can use <code>:checked</code> pseudo-element to select only those inputs which have been checked.",
html: "<form id=\"todo-list-form\"><input type=\"checkbox\" name=\"todo-list\" id=\"exercise\"><label for=\"excercise\">Exercise</label><br><input type=\"checkbox\" name=\"todo-list\" id=\"shopping\"><label for=\"shopping\">Shopping</label><br><input type=\"checkbox\" name=\"todo-list\" id=\"clean\"><label for=\"clean\">Clean</label></form>",
selector: "#todo-list-form",
events: "change",
points: function ($element, config, event) {
let givePoints = true;
let feedback = "";
const checkedLabels = $('#todo-list-form input:checked + label')
const allLabels = $('#todo-list-form input + label')
const inputs = $('#todo-list-form input');
let checkedSeen = false;
inputs.map( (idx, input) => {
let $label = $(input).next();
if($(input).prop('checked')){
if ($label.css('text-decoration').indexOf('line-through') > -1) {
checkedSeen = true;
} else {
feedback = "Line-through NOT found for label for checked input."
givePoints = false;
}
} else {
if ($label.css('text-decoration').indexOf('line-through') > -1) {
feedback = "Line-through found for label for NOT checked input."
givePoints = false;
checkedSeen = true;
} else {
}
}
});
if(checkedSeen == false) {
givePoints = false;
feedback += " You need to have at least one input checked."
}
if(givePoints) {
return {
points: 10,
feedback: feedback
};
} else {
return {
points: 0,
feedback: feedback
};
}
},
maxPoints: 10,
title: "CSS pseudo-element",
description: "Add a new CSS rule that applies to adjacent siblings of a checked input",
concepts: ["HTML", "Input", "CSS", "checked", "pseudo-element"],
order: 9
},
};
module.exports = Content;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment