Bad Apple explainer

The aim of this puzzle: Remove the badApple from the basket

Walkthrough of the solution: The takeOut function will run whenever you click on the badApple. The takeOut() function starts turning the badApple, lime green. You can remove the .attr('fill','lime'), since the badApple is going to be deleted and you won’t see its color. Then you attach the .remove() call to the badApple inside the function’s code block to get badApple.remove(). Now, once the takeOut() function is called, the badApple will be removed.

Sample code solution:
(Tap below to reveal)

function takeOut() {
  badApple.remove();
}
badApple.on('click',takeOut);

JavaScript Concepts: Code Block (function)

D3 Concepts: .on('click',...), .remove()
Additional Code (hidden code that runs before the puzzle’s code):

for (let x of Array(20)) {
    svg.append('circle').attr('r',30).attr('cx', 50+pickRandom(95)).attr('cy', 50+pickRandom(35)).attr('fill',`rgb(${200+pickRandom(55)},20,20)`);
}
let badApple = svg.append('circle').attr('r',30).attr('cx', 50+pickRandom(95)).attr('cy', 50+pickRandom(35)).attr('fill','maroon');
let basket  = svg.append('g').attr('transform',`scale(20) translate(1,4)`).attr('stroke','grey').attr('stroke-width',0.1);
basket.append('path').attr('d','M 0 0 L 2 0 L 2.5 7 L 1   7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 2 0 L 4 0 L 4   7 L 2.5 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 4 0 L 6 0 L 5.5 7 L 4   7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
basket.append('path').attr('d','M 6 0 L 8 0 L 7   7 L 5.5 7 Z').attr('fill',`rgb(${170+pickRandom(20)},${150+pickRandom(20)},${120+pickRandom(20)})`);
2 Likes

Hi @grasshopperexplainer ! I recently got Grasshopper as an Android app and I think it’s fantastic! For this question however (and for certain other questions as well), I can’t seem to remove attributes. I clicked the .attr() but it isn’t removing itself. Is it possibly because I am using an Android app on a Chromebook?