Skip to content
Snippets Groups Projects
Commit 7b7aa2e8 authored by giacomo's avatar giacomo
Browse files

added exercise for readonly and list

parent 30d1b3c3
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 155 additions and 2 deletions
content.js
+ 155
− 2
View file @ 7b7aa2e8
......@@ -122,8 +122,161 @@ let Content = {
description: "Call function in browser console",
concepts: ["Console", "JavaScript"],
order: 4
},
readonly_attribute: {
instructions: "First try to fill the form on the left, then using the browser developer tools, inspect the form and find the <i>&lt;input&gt;</i> element which has the <i>readonly</i> attribute set. Once you have found it, change the element in a way, that you are able to write in it using the form. Finally, in the form write in the element you modified to test that now it is no longer <i>readonly</i>. And don't forget to submit the form at the end...",
script: function formSubmitted(e) {
e.preventDefault();
document.getElementById('form-submitted').innerHTML = "Thank you for giving us your soul! You will get it back after completing the course..";
},
selector: "$document",
html: `
<style>
#readonly-attribute {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#readonly-attribute input, #readonly-attribute label {
width: 50%;
margin: 2px;
}
#readonly-attribute #form-radio-button {
width: auto;
}
#readonly-attribute p{
color: #cc6666
}
</style>
<div id=\"readonly-attribute\">
<form onsubmit=\"formSubmitted(event)\">
<label for=\"form-first-name-field\">First name:</label><br>
<input type=\"text\" id\"form-first-name-field\"><br>
<label for=\"form-last-name-field\">Last name:</label><br>
<input type=\"text\" id\"form-last-name-field\"><br>
<label for=\"form-address-field\">Address:</label><br>
<input type=\"text\" id\"form-address-field\"><br>
<label for=\"form-birthday-field\">Date of birth:</label><br>
<input type=\"date\" id=\"form-birthday-field\"><br>
<label for=\"form-color-field\">Choose your favourite color:</label><br>
<input type=\"color\" value=\"#de935f\" id=\"form-color-field\"><br>
<label for=\"form-age-field\">Age:</label><br>
<input type=\"number\" id=\"form-age-field\"><br>
<label for=\"form-email-field\">Email:</label><br>
<input type=\"email\" readonly id=\"form-email-field\"><br>
<input type=\"checkbox\" id=\"form-radio-button\">
<label for=\"form-radio-button\">Subscribe to our newsletter</label>
<input type=\"submit\" id=\"form-submit-button\">
</form>
<p id=\"form-submitted\"></p>
</div>`,
mutations: true,
points: function ($element, config, event) {
let $email = $element.find('#form-email-field');
let $inputs = $element.find('#readonly-attribute input')
if($email.length == 0 || $inputs.length < 8){
return {
points: 0,
feedback: 'The document is altered beyond repair. Avoid accidentally removing nodes or ids. You should reset the assignment to start over.'
};
} else if(!config.graded && $email['0'].readOnly === false) {
config.graded = true;
return {
points: 10,
feedback: 'Congratulations!'
};
return undefined;
}
},
maxPoints: 10,
title: "Disable readonly attribute",
description: "Find and disable the readonly attribute",
concepts: ["Inspector", "DOM", "CSS", "readonly"],
order: 5
},
modify_list: {
instructions: "A malicious hacker has managed to break into our database and has modified our perfect pizza recipe, now the pizza does no long taste as before :'( We don't know what to do! Please, help us find and remove the malicious ingredient, so we will be able to enjoy pizza again every friday evening!",
selector: "$document",
html: `
<style>
#pizza_ingredients {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
<div id="pizza_ingredients">
<h4>Dough</h4>
<p>Add the ingredients in the following order one at a time, and mix well in between. Make sure that the yeast is well mixed with the dough before adding the salt</p>
<ol id="pizza-ol">
<li id="water">Water: 200 gr.</li>
<li id="yeast">Yeast: 5gr if dried or 25 if fresh.</li>
<li id="flour">Flour: 300 gr.</li>
<li id="salt">Salt: half teaspoon.</li>
</ol>
<p>When all the above ingredients are well mixed, leave the dough in a bowl for 2-4 hours and cover it with so that it does not dry.</p>
<h4>Toppings</h4>
<p>Once the dough has risen, switch on the oven at 220 degrees and spread a little bit of olive oil on a baking tray, to prevent the pizza from getting stuck in it while cooking. Then spread the dough on the baking tray using your hands, and finally add the toppings. If you like thick pizza base, let it rise for half an hour before putting it in the oven.</p>
<ul id="pizza-ul">
<li id="tomato">Good tomato sauce: 100/150 gr.</li>
<li id="mozzarella">Good mozzarella cheese: 100/120 gr.</li>
<li id="olive-oil">Good olive oil: one table spoon.</li>
<li id="pineapple">Canned sliced pineapple.</li>
<li id="ham">Ham: 80/100 gr.,</li>
<li id="mushrooms">Mushrooms: 80/100 gr.</li>
<li id="basil">Fresh basil (add on top when the pizza is ready)</li>
</ul>
</div>`,
mutations: true,
script: function getToppingIds(ul) {
let toppingIds = [];
Object.keys(ul).forEach(k => {
if(!isNaN(k)) {
toppingIds.push(ul[k].id);
};
});
return toppingIds;
},
points: function ($element, config, event) {
let $ol = $element.find('#pizza-ol li');
let $ul = $element.find('#pizza-ul li');
let toppings = ["tomato", "mozzarella", "olive-oil", "pineapple", "ham", "mushrooms", "basil"];
if($ol.length < 4) {
return {
points: 0,
feedback: 'The dough should be fine as it is, we think that the problem might be in some nasty topping... Reset to try again'
};
}
if($ul.length < 6) {
return {
points: 0,
feedback: "Yes you are right, a good pizza does not need many toppings, but we can't remove so many, otherwise we will be still hungry after dinner... Reset to try again"
};
}
if($ul.length === 6) {
let wrongTopping = false;
let toppingIds = getToppingIds($ul);
toppings.forEach(topping => {
let toppingMissing = !toppingIds.some(id => id === topping);
let wrongMissing = (topping !== "pineapple" && toppingMissing);
wrongTopping = wrongMissing ? topping : wrongTopping;
});
if(wrongTopping) {
return {
points: 0,
feedback: `Are you sure? Please try again, we have used ${wrongTopping} for ages and it is a good topping... Reset to try again`
};
} else {
return {
points: 10,
feedback: 'Thank you! Pineapple does not really belong on a pizza! What kind of evil and pervert hacker could do that to us!?!? Now we can start enjoying our pizza fridays again!'
};
}
}
return undefined;
},
maxPoints: 10,
title: "Remove the right element from the list",
description: "Find and remove the element which does not belong in the list",
concepts: ["Inspector", "DOM", "CSS", "list"],
order: 6
},
};
module.exports = Content;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment