The aim of this puzzle: Make the turnOn function flip the switch and turn on the light.
Walkthrough of the solution: When you tap on the light switch, it will run the turnOn function, but that function is empty. We need to do two things: move the light switch up to 35 and turn the light bulb color to yellow. This can be done with two .attr() calls. First, lightSwitch needs to have a new vertical location which means its 'y' attribute should be set. To turn the lightBulb yellow, you need to change its 'fill' attribute to 'yellow'.
Sample code solution:
(Tap below to reveal)
function turnOn() {
lightSwitch.attr('y', 35);
lightBulb.attr('fill', 'yellow');
}
lightSwitch.on('click', turnOn);
JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .attr(āyā,), .attr(āfillā,), .on(āclickā,)
Additional Code (hidden code that runs before the puzzleās code):
var switchPlate = svg.append('rect');
switchPlate.attr('width', 40).attr('height', 70).attr('fill', 'white').attr('x', 50).attr('y',30).attr('stroke','grey');
var innerPlate = svg.append('rect');
innerPlate.attr('width', 30).attr('height', 60).attr('fill', 'lightgrey').attr('x', 55).attr('y',35);
var lightSwitch = svg.append('rect');
lightSwitch.attr('width', 30).attr('height', 30).attr('fill', 'grey').attr('x', 55).attr('y', 65);
var stem = svg.append('rect');
stem.attr('width', 2).attr('height', 100).attr('fill', 'grey').attr('x', 180);
var base = svg.append('rect');
base.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 100).attr('stroke','grey');
var base2 = svg.append('rect');
base2.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 107).attr('stroke','grey');
var base3 = svg.append('rect');
base3.attr('width', 30).attr('height', 5).attr('fill', 'white').attr('x', 166).attr('y', 114).attr('stroke','grey');
var lightBulb = svg.append('circle');
lightBulb.attr('r', 30).attr('fill', 'black').attr('cx', 181).attr('cy', 152);
ā toward the bottom of the page
