Light Switch explainer

grasshopperexplainer · December 4, 2019, 11:26pm

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);

Sushma_Deshmukh · May 1, 2018, 5:22am

I want additional code plz…

Grasshopper_Heather · May 2, 2018, 5:13pm

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);

ELBO_D2i · June 18, 2018, 12:19pm

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

Scott_McNay · June 26, 2018, 11:45pm

Hi @ELBO_D2i,

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

ELBO_D2i · June 27, 2018, 1:42am

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

Grasshopper_Frankie · December 6, 2019, 12:37am

Check out Heather’s post about the animations playground.

–Frankie

Grunch · June 28, 2018, 7:52pm

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.

Grasshopper_Frankie · June 28, 2018, 8:39pm

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:

Go to the home screen
Tap the three horizontal lines ☰ in the top left near the course name
Scroll down to Profile under the Account section
Select “Reset All My Progress ” toward the bottom of the page
Then you can press “Reset” to remove all your progress, achievements, and points.

–Frankie

Grunch · July 1, 2018, 8:22pm

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

VIPUL_KRISHNA_MATHUR · July 7, 2018, 11:49am

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…

VIPUL_KRISHNA_MATHUR · July 8, 2018, 3:53am

please please improve your coading background in grasshopper app other wise give us a good platform to coading in animation ,

VIPUL_KRISHNA_MATHUR · July 8, 2018, 3:54am

please please improve your coading background in grasshopper app other wise give us a good platform to coading in animation ,

there is no option write freely

Kristopher_Ellis · April 17, 2019, 2:22am

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

Grasshopper_Ben · April 17, 2019, 6:29pm

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

Dominique_G · August 19, 2019, 6:00pm

I’m not sure what I’m getting wrong?

Edit I figured it out

Madison_Baysinger · October 23, 2019, 1:28pm

i am now on see this

Ervin_Ablaev · October 30, 2019, 6:38pm

Am I missing something?

Grasshopper_Ben · October 31, 2019, 8:42pm

Hey there, it looks like there’s an extra space after 'yellow'. This is causing the issue.

Hope this helps!
Ben

UNI_Q · May 25, 2020, 3:15pm

Who can I make turnOn function into
turnOn variable