From 03e3a3bc60504daab4356e333b494a0f4f2c247d Mon Sep 17 00:00:00 2001 From: Mariani Giacomo <mariang1@t31300-lr138.org.aalto.fi> Date: Wed, 15 Jul 2020 15:49:07 +0300 Subject: [PATCH] Modifyed exercises remove_element & modify_element_innerText --- content.js | 94 +++++++++++++++++++++++++++--------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/content.js b/content.js index 5d69ef0..01e953a 100644 --- a/content.js +++ b/content.js @@ -506,7 +506,7 @@ let Content = { let returnedKeyboard = removePianoKey('D♭'); if (typeof(returnedKeyboard) === 'object') { - let returnedKeys = returnedKeyboard.childNodes; + let returnedKeys = Object.values(returnedKeyboard.childNodes).map(item => item.value) ; display.res("Checking the keyboard keys...", returnedKeys); } else { display.cmd("Did yuu return the keyboard div?") @@ -514,7 +514,8 @@ let Content = { executeAtStart: true, points: function ($element, config, accessor) { let p = accessor.testResults(10, function(i , args, res) { - let points = Object.values(args).some(key => key.value === 'D♭')? 0 : config.maxPoints; + let correctKeys = ['C', 'C#', 'D', 'D#', 'E']; + let points = args.some((key, i) => key !== correctKeys[i])? 0 : config.maxPoints; return points; }); return { points: p }; @@ -527,26 +528,7 @@ let Content = { }, modify_element_innerText: { - instructions: `Our virtual piano now has lost the notes from the keys and it - is very sad. There should be C, C#, D, D# and E, but instead there is just ":(". Can you help us - setting back the correct key names? 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 - add the correct key names modifying the <code>innerText</code> property of each - element in the list. Finally print the NodeList to the console 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 */ - /* Modify the innerText of each element in the list by setting the correct note */ - console.log(keys); - </code></pre> - If your code is correct, the notes will appear in the keys. - 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: + instructions: ` <pre><code> <!DOCTYPE html> <html lang="en" dir="ltr"> @@ -564,38 +546,56 @@ let Content = {  </body> </html> </code></pre>`, - initialJs: '', + initialJs: 'function setKeyboard(keysValues) {\n' + + '\t// Get the piano keyboard div using its id\n' + + '\tlet keyboard = "Replace this string with the expression to get the keyboard div";\n' + + '\t// Get the childNodes of the keyboard\n' + + '\tlet keys = "Replace this string with the expression to get the childNodes of the keyboard";\n' + + '\t// Set the both the value and the innerText attributes of the keys to the given keyValues argument\n' + + '\t\n' + + '\treturn keyboard;\n' + + '}', 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;">:(</button><button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">:(</button><button type="button" style="width: 50px; height: 120px; padding: 2px; background-color: #FFFFFF;">:(</button><button type="button" style="width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;">:(</button><button type="button" style="width: 50px; height: 120px; padding: 2px; background-color: #FFFFFF;">:(</button></div>'; + pianoDivInConf.id = 'piano-keyboard'; + pianoDivInConf.style = 'text-align: center'; + let keys = [':(', ':(', ':(', ':(', ':(']; + keys.forEach((key, i) => { + let keyButton = document.createElement('button'); + keyButton.value = keys[i]; + keyButton.innerText = keys[i]; + keyButton.style = (i+1)%2 === 1? 'width: 50px; height: 120px; padding: 2px; background-color: #FFFFFF;' : 'width: 50px; height: 100px; background-color: #000;color: #FFFFFF; padding: 2px; line-height: 10;'; + pianoDivInConf.appendChild(keyButton); + }); document.body.appendChild(pianoDivInConf); - `, + + let correctKeys = ['C', 'C#', 'D', 'D#', 'E']; + let returnedKeyboard = setKeyboard(correctKeys); + + if (typeof(returnedKeyboard) === 'object') { + let returnedKeysValues = Object.values(returnedKeyboard.childNodes).map(item => item.value); + let returnedKeysInnertext = Object.values(returnedKeyboard.childNodes).map(item => item.innerText); + display.res("Checking the keyboard keys...", [returnedKeysValues, returnedKeysInnertext]); + } else { + display.cmd("Did yuu return the keyboard div?") + }`, executeAtStart: true, points: function ($element, config, accessor) { - let outputDiv = document.getElementsByClassName('execute'); - if(outputDiv.length) outputDiv.style.height = '400px'; - let correctKeysInConf = [ 'C', 'C#', 'D', 'D#', 'E']; let p = accessor.testResults(10, function(i , args, res) { let points = 0; - args.forEach((item, i) => { - if(item.toUpperCase() === correctKeysInConf[i]) { - points += 2.5; - } - }); + let correctKeys = ['C', 'C#', 'D', 'D#', 'E']; + let correctValues = args[0].every((item, i) => item === correctKeys[i]); + let correctInnerText = args[1].every((item, i) => item === correctKeys[i]); + if (correctValues) { + points += config.maxPoints / 2; + } else { + console.log('Did you change all the values of the keyboard keys?', args[0]); + } + if (correctInnerText) { + points += config.maxPoints / 2; + } else { + console.log('Did you change all the innerText of the keyboard keys?', args[1]); + } return points; }); return { points: p }; -- GitLab