# Stage Fright explainer

The aim of this puzzle: Make the circle transition to red when you tap on it.
Walkthrough of the solution: If you run the starter code, you’ll see that the `curtain` lifts when you tap on it. It’s actually changing the height of the rectangle. You want to do something similar with the `performer` – it should blend its color to red when you click it. The `curtain.on('click',...)` part will wait for you to click on the curtain, and then it will run a function – in this case, an arrow function. You can copy the command for the `curtain` and just change the identifier (`curtain` to `performer`). Then you need to change the attribute that is being transitioned, from ‘height’ to ‘fill’. Just remember to make the performer turn ‘red’ or at least some shade of red.
Sample code solution:
(Tap below to reveal)

``````curtain.on('click', () => {
curtain.transition()
.attr('height', 25)
.duration(1000);
});

performer.on('click', () => {
performer.transition()
.attr('fill', 'tomato')
.duration(1000);
});
``````

JavaScript Concepts: Code Block (arrow function), Member Expression, Identifiers
D3 Concepts: .attr(‘height’,), .attr(‘fill’,), .duration(), .transition(), .on(‘click’,)
Additional Code (hidden code that runs before the puzzle’s code):

``````var rg = pickRandom(255);
var color = 'rgb('+rg+','+rg+','+(255-pickRandom(10))+')';

var performer = svg.append('circle').attr('fill',color).attr('cx', 100).attr('cy',150).attr('r',30);

var stage = svg.append('g');
var curtain = stage.append('rect').attr('fill', 'orangered').attr('x',0).attr('y',0).attr('height',175).attr('width',200);

var folds = 10;
for (var i=0; i< folds; i++) {
stage.append('rect').attr('width',5).attr('height',175).attr('x',i*200/folds).attr('fill','red');
}

stage.append('rect').attr('width',200).attr('height',5).attr('y',175).attr('fill','gold');

stage.on('click',()=>{
stage.selectAll('rect').filter('[fill=red]').transition().attr('transform','scale(1 0.14286)').duration(1000);
stage.selectAll('rect').filter('[fill=gold]').transition().attr('y',25).duration(1000);
curtain.transition().attr('height',25).duration(1000);
});
``````
1 Like

Would be great if at the assigned example description would say about “tomato” not “red” color. My code was correct but had to check the answer to see that checked color is different than example suggests using.

From this list of colors that SVG understands, this puzzle will pass using:

• `'indianred'`
• `'palevioletred'`
• `'crimson'`
• `'darksalmon'`
• `'lightcoral'`
• `'salmon'`
• `'red'`
• `'deeppink'`
• `'orangered'`
• `'tomato'`
• `'hotpink'`
• `'coral'`
• `'darkorange'`
• `'lightsalmon'`
• `'lightpink'`
• `'pink'`

The hints all reference using `'red'` in this particular puzzle, because that is the only case-insensitve answer that will work at this time.

–Frankie

2 Likes

I don’t understand the puzzle I did it right but it didn’t pass

Could you post a screenshot of your code if you’re still unable to pass?

Thanks,
Frankie

I got it thanks for trying to help

I used the right code checked it with the solution changed red to tomato still did not pass. Do not understand it keeps telling me use curtain as example.

1 Like

Okay okay i figured out why it was not passing you have to start the performer code after the }) or else it does not recognize it eventhough the code works with nested functions the solution is not looking for the nested form

I put the exact same code from your website, and it still doesn’t work. Please help!!

1 Like

Hello @Aka,

Your curtain.on event isn’t closed in the proper place and also it wants tomato instead of red. You have the following see the bold:

curtain.on(‘click’, () => {
curtain.transition()
.attr(‘height’, 25)
.duration(1000);

``````performer.on('click', () => {
performer.transition()
.attr('fill', 'red')
.duration(1000);
});
``````

});

Where it should be this instead:

curtain.on(‘click’, ()=>{
curtain.transition()
.attr(‘height’, 25)
.duration(1000);
});

performer.on(‘click’, ()=>{
performer.transition()
.attr(‘fill’, ‘tomato’)
.duration(1000);
});

Have fun and good luck

Thanks,
Ahsen

3 Likes

Ahsen is correct about the location of your `performer.on('click',...)`. In other words, your arrow functions are nested; the `performer.on('click',)` is inside of your `curtain.on('click',)` but it should be one after the other.

Using `'red'` is fine. The example solution uses `'tomato'` just for fun. See this post about what shades of red this puzzle will accept.

–Frankie

1 Like

Where is the error? It is not passing, even if I use 1000 instead of 1 second.

You can take the `.transition().attr('fill', 'red')` off of the end of the `curtain` arrow function.

And then changing the `.duration()` of the `performer` back to 1000 should work. It needs to be a number greater than 250 milliseconds to work.

–Frankie

I still stuck, I can’t advance to the next puzzle.

Try deleting the last 2 calls in the `curtain`'s arrow function: `.transition().attr('fill','red')`. The `curtain` won’t need those.

–Frankie

Thanks, that was the error.

Hey there,

It looks like `.duration()` is attached to `'tomato'`, and is inside the `.attr()`. Take out `.duration(1000)` and place it after the closing parentheses `)` of `.attr()`, so it looks like:

``````performer.transition().attr('fill', 'tomato').duration(1000)`
``````

Hope this helps!
Ben

Thanks a lot!!!

Just can’t understand why it’s wrong