Select Git revision
content.js
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
content.js 12.46 KiB
/* global module, require, console */
/* jshint globalstrict: true */
'use strict';
let Content = {
click_for_points: {
instructions: "This is an example of how automatically graded assignments appear in this course. Always <strong>carefully read assignment instructions</strong> before starting to do anything. At this time, there is no problem to solve. You are only expected to click the button on left to receive your first points.",
html: "<button class=\"green\">Click Me!</button>",
selector: ".exercise button",
events: "click",
points: function ($element, config, event) {
return {
points: 10,
feedback: 'Congratulations!'
};
},
maxPoints: 10,
title: "Click for points",
description: "An example of how these assignments work.",
concepts: ["Automatic assessment"],
order: 0
},
fix_typo: {
instructions: "On the left, you see a message that unfortunately contains a typo. Your task is to open the browser inspector tool, find the paragraph element <strong><p></strong> containing the message and then edit the element body correctly to contain the intended message \"<strong>Hello World!</strong>\".",
html: "<div class=\"acos-webdev-poi\"><p>Hello Wordl!</p></div>",
mutations: true,
points: function ($element, config, mutations) {
let $p = $element.find('.exercise p');
if ($p.length != 1) {
return {
points: 0,
feedback: 'The document is altered beyond repair. Avoid accidentally removing nodes. You should reset the assignment to start over.'
};
} else if ($p.eq(0).text() != 'Hello Wordl!') {
if ($p.eq(0).text() != 'Hello World!') {
return {
points: 5,
feedback: 'Almost there! You were able to change the node contents, but the message is not exactly as requested.'
};
} else {
return {
points: 10,
feedback: 'Great work! You were able to change the node contents as requested.'
};
}
}
return undefined;
},
maxPoints: 10,
title: "Fix typo",
description: "Find and change element body",
concepts: ["Inspector", "DOM", "HTML"],
order: 1
},
change_color: {
instructions: "The blue area on left contains barely visible text. Your task is to use the browser inspector tool and locate the paragraph element <strong><p></strong> containing the barely visible text and then add a CSS property to apply another <strong>color</strong>. <em>Note that editing existing CSS rules does not grade the exercise.</em>",
html: "<div class=\"acos-webdev-poi blue\" style=\"max-width: 280px;\"><p>The quick brown fox jumps over the lazy dog's back.</p></div>",
mutations: true,
points: function ($element, config, mutations) {
let $p = $element.find('.exercise p');
if ($p.length != 1) {
return {
points: 0,
feedback: 'The document is altered beyond repair. Avoid accidentally removing nodes. You should reset the assignment to start over.'
};
} else if (!config.graded && $p.eq(0).css('color') != 'rgb(173, 216, 230)') {
config.graded = true; return {
points: 10,
feedback: 'Excellent! You changed the color of the text.'
};
}
return undefined;
},
maxPoints: 10,
title: "Change text color",
description: "Find and change text color using CSS",
concepts: ["Inspector", "DOM", "CSS"],
order: 2
},
disabled_button: {
instructions: "You need to click the button on the left to receive your points from this assigment. Too bad that the button is disabled. Your task is to use the browser inspector tool to locate the <strong>button</strong>, remove the <strong>disabled</strong> attribute and finally click it.",
html: "<button class=\"green\" disabled>Click Me!</button>",
selector: ".exercise button",
events: "click",
points: function ($element, config, event) {
return {
points: 10,
feedback: 'Congratulations!'
};
},
maxPoints: 10,
title: "Disabled button",
description: "Find and enable button",
concepts: ["Inspector", "DOM", "HTML"],
order: 3
},
console_command: {
instructions: "This time the area on the left does not have any visible content. However, this exercise defines a JavaScript function that can grant you points. Your task is to use the browser console to call the function like this: <code>giveMePoints();</code>",
html: "<div id=\"events\"></div>",
script: function giveMePoints() {
window.postMessage('grade');
},
selector: "$window",
events: "message",
points: function ($element, config, event) {
if (event.originalEvent.data == 'grade') {
return {
points: 10,
feedback: 'Congratulations!'
};
}
return undefined;
},
maxPoints: 10,
title: "Console command",
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><input></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;