diff --git a/content.js b/content.js index a47a011298b1f297b30ae2b42993e4165fe8a176..bc3e4f684b245968307da9c95f18430e0ef8db6f 100644 --- a/content.js +++ b/content.js @@ -353,37 +353,37 @@ let Content = { <code>id="pizza-toppings"</code> using the <code>document.querySelectorAll()</code> method. Then fix the <em>innerText</em> of each element. The grader does not care if you are using upper case letters or not, so don't worry about that. - Finally print the NodeList to the console. For example:<br/> - <code><br/> - let toppings = document.querySelectorAll(/*your code here*/);<br/> - /*Go through the Nodes in the toppings variable and set the right innerText*/<br/> - /*......*/<br/> - console.log(toppings);<br/> - </code><br/> + Finally print the NodeList to the console. For example: + <pre><code> + let toppings = document.querySelectorAll(/*your code here*/); + /*Go through the Nodes in the toppings variable and set the right innerText*/ + /*......*/ + console.log(toppings); + </code></pre> If your code is correct, the names in the list below the editor will change. Testing with the dev tools console on the exercise itself might not give the expected results and might also break the grading. For this reason we advise you to copy the following code into an empty HTML file, and test your solution in there by opening it within with the browser and using the developer tools - console:<br/> - <code><br/> - <!DOCTYPE html><br/> - <html lang="en"><br/> -  <head><br/> -   <meta content="text/html;charset=utf-8" http-equiv="Content-Type"><br/> -   <meta content="utf-8" http-equiv="encoding"><br/> -  </head><br/> -  <body><br/> -   <h3>Pizza toppings:</h3><br/> -   <ul id="pizza-toppings"><br/> -    <li>Batsilica</li><br/> -    <li>Tomtato</li><br/> -    <li>Morezarella</li><br/> -    <li>Hamster</li><br/> -   </ul><br/> -  </body><br/> - </html><br/> - </code> `, + console: + <pre><code> + <!DOCTYPE html> + <html lang="en"> +  <head> +   <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> +   <meta content="utf-8" http-equiv="encoding"> +  </head> +  <body> +   <h3>Pizza toppings:</h3> +   <ul id="pizza-toppings"> +    <li>Batsilica</li> +    <li>Tomtato</li> +    <li>Morezarella</li> +    <li>Hamster</li> +   </ul> +  </body> + </html> + </code></pre>`, initialJs: '', preExecuteJs:` let consolePrint = []; @@ -398,14 +398,10 @@ let Content = { `, executeAtStart: true, points: function ($element, config, accessor) { - let toppingsInaccessor = document.querySelectorAll('#pizza-toppings li'); let correctNames = [ 'BASILICA', 'TOMATO', 'MOZZARELLA', 'HAM']; let p = accessor.testResults(10, function(i , args, res) { - console.log('res:', res); - console.log('args:', args); let points = 0; args.forEach((item, i) => { - console.log('In testResults', item) if(item.toUpperCase() === correctNames[i]) { points += 2.5; } @@ -421,6 +417,87 @@ let Content = { order: 13 }, + remove_element: { + instructions: `Our virtual piano does not work properly, there seems to be a + wrong key in it (D♭). Can you remove the wrong key using the + ChildNode.remove() method? Try first getting the <code>div</code> with + <code>id="piano-keyboard"</code>, then get the <code>childNodes</code> from it. + Once you have the NodeList containing the <code>childNodes</code>, you can remove + the one with D♭. Finally print the NodeList to the console with for + us to evaluate it. For example: + <pre><code> + let pianoDiv = /* Get the div with id="piano-keyboard" * + let keys = /* Get the child nodes of pianoDiv */ + /* Remove the D♭ key from keys */ + console.log(keys); + </code></pre> + If your code is correct, the D♭ key will disappear. + Testing with the dev tools console on the exercise itself might not give the + expected results and might also break the grading. For this reason we advise + you to copy the following code into an empty HTML file, and test your solution + in there by opening it within with the browser and using the developer tools + console: + <pre><code> + <!DOCTYPE html> + <html lang="en" dir="ltr"> +  <head> +   <meta charset="utf-8"> +  </head> +  <body> +   <div id="piano-keyboard"> +    <button type="button" style="width: 50px; height: 120px; padding: 2px;">C</button> +    <button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">C#</button> +    <button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">D♭</button> +    <button type="button" style="width: 50px; height: 120px; padding: 2px;">D</button> +    <button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">D#</button> +    <button type="button" style="width: 50px; height: 120px; padding: 2px;">E</button> +   </div> +  </body> + </html> + </code></pre>`, + initialJs: '', + preExecuteJs:` + let consolePrint = []; + const originalLog = console.log; + console.log = function(msg) { + originalLog(msg); + let rightFormat = typeof msg === 'object'; + display.cmd('Return value is in the right form: ' + rightFormat); + if(!rightFormat) display.cmd('The returend value should be a NodeList'); + else if (msg.length !== 5) display.cmd('The number of elements in returned NodeList should be 5 but it is: ' + msg.length); + else { + display.cmd('Checking keys in returned NodeList:'); + let keysInList = [msg[0].innerText, msg[1].innerText, msg[2].innerText, msg[3].innerText, msg[4].innerText]; + display.res(keysInList, keysInList); + } + }; + let pianoDivInConf = document.createElement('div'); + pianoDivInConf.innerHTML = '<div id="piano-keyboard" style="text-align: center"><button type="button" style="width: 50px; height: 120px; padding: 2px; background-color: #FFFFFF;">C</button><button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">C#</button><button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">D♭</button><button type="button" style="width: 50px; height: 120px; padding: 2px; background-color: #FFFFFF;">D</button><button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">D#</button><button type="button" style="width: 50px; height: 120px; padding: 2px; background-color: #FFFFFF;">E</button></div>'; + document.body.appendChild(pianoDivInConf); + `, + executeAtStart: true, + points: function ($element, config, accessor) { + let outputDiv = document.getElementsByClassName('execute'); + if(outputDiv.length) outputDiv.style.height = '400px'; + let correctKeys = [ 'C', 'C#', 'D', 'D#', 'E']; + let p = accessor.testResults(10, function(i , args, res) { + let points = 0; + args.forEach((item, i) => { + if(item.toUpperCase() === correctKeys[i]) { + points += 2.5; + } + }); + return points; + }); + return { points: p }; + }, + maxPoints: 10, + title: "Select and remove the right element", + description: "", + concepts: ["JavaScript", "getElementById", "childNodes", "innerText", "remove"], + order: 13 + } + }; module.exports = Content;