Disinfect explainer

The aim of this puzzle: Remove the bacterial colonies.
Walkthrough of the solution: You’ll see that if you run the code and click on the dropper, the dropper will disappear – that’s what you want to happen when you click on the bacteria, too! Let’s look at how the dropper does it so we can copy it to the bacteria. There are two functions: removeDropper and cure. removeDropper has a command that says: dropper.remove() which is the code that deletes the dropper from the screen. The cure function definition is empty, so you should add a command to remove the bacteria from the screen: bacteria.remove();
Sample code solution:
(Tap below to reveal)

function removeDropper() {
  dropper.remove();
}
function cure() {
  bacteria.remove();
}
dropper.on('click', removeDropper);
bacteria.on('click', cure);

JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .remove(), .on(‘click’,)
Additional Code (hidden code that runs before the puzzle’s code):

for (var i=0; i<100; i++) {
  svg.append('circle').attr('cx',window.innerWidth*Math.random()).attr('cy',window.innerHeight*Math.random()).attr('r',0).attr('fill','yellowgreen').transition().duration(60000).ease(d3.easeLinear).attr('r',100);
}

var bacteria = d3.selectAll('circle');
var dropper = svg.append('g').attr('transform','scale(4) translate(65 -5) rotate(45 0 0)');
var sample = dropper.append('path').attr('d','M 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 Z').attr('fill','yellowgreen').attr('opacity',1);
var glass = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 L 6 18 C 4 18 4 12 6 12 Z').attr('fill','silver').attr('opacity',0.5).attr('stroke','grey').attr('stroke-width',0.2);
var rubber = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 6 18 C 4 18 4 12 6 12 Z').attr('stroke','grey').attr('stroke-width',0.2);
3 Likes

Can you publish the hidden code for wonders?

1 Like

What it is? The botton’s legend is good but I don’t know why send code frezee. what is the motive? thank you

ok now i have seen why frezee the code temporaly

Hey @mecevik,

Here is the hidden code, we don’t teach all of this so don’t stress if you don’t understand it all.

for (var i=0; i<100; i++) {
    svg.append('circle').attr('cx',window.innerWidth*Math.random()).attr('cy',window.innerHeight*Math.random()).attr('r',0).attr('fill','yellowgreen').transition().duration(60000).ease(d3.easeLinear).attr('r',100);
}
var bacteria = d3.selectAll('circle');
var dropper = svg.append('g').attr('transform','scale(4) translate(65 -5) rotate(45 0 0)');
var sample = dropper.append('path').attr('d','M 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 Z').attr('fill','yellowgreen').attr('opacity',1);
var glass = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 12 48 C 12 50 10 52 10 60 L 8 60 C8 52 6 50 6 48 L 6 18 C 4 18 4 12 6 12 Z').attr('fill','silver').attr('opacity',0.5).attr('stroke','grey').attr('stroke-width',0.2);
var rubber = dropper.append('path').attr('d','M 6 12 C 6 0 12 0 12 12 C 14 12 14 18 12 18 L 6 18 C 4 18 4 12 6 12 Z').attr('stroke','grey').attr('stroke-width',0.2);
4 Likes

I add what I think is an alternative solution, which also seem to work.
Out of curiosity, could this also be used? Are there drawbacks in putting all together in a single function? Thanks

2 Likes

That looks like a clean and efficient way to do it! The puzzle may not accept it as a solution, but it looks good to me.

Ben

3 Likes