# Light Switch explainer

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: There is hidden code that runs before the puzzleās code that sets the size, color, and location of the SVG shapes.

1 Like

Hey @Sushma_Deshmukh,

There is quite a lot of code here, but itās simply creating the SVG shapes.

``````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);
``````
4 Likes

Sir , where I should Practice these thing.Can you tell me any software to use these java script

Hi @ELBO_D2i,

Have you tried the Code Playground? In Grasshopper, tap the menu icon in the upper-left, then select Code Playground.

Yes ,sir I have tried , some keys are missing . Canāt make any thing ,other.

Check out Heatherās post about the animations playground.

āFrankie

1 Like

I cant find āa button with arrows in a circleā to reset the code. Give me something more than that to find it, (like is it on the right-top) or is it saying about the green circle that only re launches the code.
I need to start the exercise like it was when I opened the first time(, not to re launch my same old code).
I will be w8-ing for the hint. Thanks.

The reset button is in the top row of the keyboard, next to the undo button. Iāve outlined it in red here:

When you open a puzzle that youāve already completed before, youāll get the option to continue where you left off or start over.

If you want to reset your account so itās like you just downloaded the app the 1st time:

1. Go to the home screen
2. Tap the three horizontal lines ā° in the top left near the course name
3. Scroll down to Profile under the Account section
4. Select āReset All My Progress ā toward the bottom of the page
5. Then you can press āResetā to remove all your progress, achievements, and points.

āFrankie

Thanks, finally I can continue some coding.

This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. E-mail transmission cannot be guaranteed to be secure or error-free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. The sender therefore does not accept liability for any errors or omissions in the contents of this message, which arise as a result of e-mail transmission. If verification is required please request a hard-copy version. Simonian Educational Foundation, Halabyan 16, Yerevan, Rep. of Armenia. www.tumo.org

I want to learn whole code of this then i want to type this on pc so which compiler software should i use. I tried some of them but command like drawBox(āblueā) ; does not work and shows lots of errors. So suggest me near like that is given in app as coading background separately. Reply soonā¦

there is no option write freely

I donāt understand what Iām doing wrong and the error message I get is not correct.

Hey there, apologies for the unhelpful feedback message, and thanks for flagging!

The actual error in the code is that the `'fill'` attribute has been input as `'color'`. Try changing `'color'` to `'fill'` and the puzzle should complete.

If youāre curious why that error message is appearing, it is checking if there are any `.attr`'s where the 2nd argument is a string and the 1st argument is not `'fill'`. This would catch an error like `.attr('y', '35')`.

Weāll tweak this logic a bit so this error message doesnāt appear in an instance like this. Thanks for bringing it to our attention!

Ben

Iām not sure what Iām getting wrong?

Edit I figured it out

1 Like