Started from the Top explainer

The aim of this puzzle: Create a red circle that has a radius of 35 and place it at a random location at the top of the screen.

Walkthrough of the solution: Since we’ll probably want to reference our shape later on, we’ll create a new variable called balloon using the let key. After the equals sign of let balloon = , we need to create the SVG shape using svg.append(). To tell the code that the shape should be a circle, we put the string 'circle' inside of the append() parentheses. Next, we can set all of the attributes of the circle using .attr() calls. To make the circle red, set the 'fill' to 'red'. To make the radius 35, use .attr('r', 35). Since the circle should be at the top, we want the 'cy' value to be 35 which is the same as the radius. Finally, to make the horizontal location random, we pick a random position using pickRandom(position) and use that value as the 'cx' attribute.

Review cards:
If you’re looking to practice on a few previous cards to help you with Started from the Top, these 3 should help you. When you solve these, try to figure out what each part of the code does and when the order of the function calls matters.

  • Build a Snowman
  • In the Middle
  • Map of Places

Sample code solution:
(Tap below to reveal)

Since this is part of the final topic of the Animations II course and it is testing your knowledge, there is no sample solution code.

JavaScript Concepts: Identifiers, Member Expression, Variable Declaration

JavaScript Concepts: pickRandom()

D3 Concepts: .append(), .attr('fill',), .attr('r',), .attr('cx',), .attr('cy',)

Additional Code (hidden code that runs before the puzzle’s code):

var position = [];
for (var i = 35; i <= window.innerWidth - 35; i += 5) {
    position.push(i);
}

svg.append('rect').attr('fill', 'silver').attr('y',165 + 35).attr('width', window.innerWidth).attr('height', window.innerHeight - 200);

I do not understand what to do here

3 Likes

I dont understand the topic ‘started from the top’ I tried to do it right but when I run the codes it keep saying I should name it balloon

The name of your variable should be balloon. The beginning of your code will look like:

var balloon = svg.append('circle')...

–Frankie

1 Like

I really do not get the pickRandom() part it’s just confusing to me. ???

My answer and it works,

var balloon = svg.append ( ‘circle’ ) .attr ( ‘fill’ , ‘red’ ) .attr ( ‘r’ , ‘35’ ) .attr ( ‘cy’ , ‘35’ ) .attr ( ‘cy’ , pickrandom (position));

6 Likes

Hi. I’m stuck in Started from the top
They ask me to name balloon balloon. I conpleted the code for the balloon to move according to instructions. I’m not sure what to do now
Please help

Check your spelling and capitalization. It should be all lowercase balloon.

–Frankie

I’m really stuck here.

Could you tell me what to do?

Could you take a screenshot of your code and post it here?

–Frankie

Here you go

you spelled balloon wrong.

2 Likes

Any news?

I’m stuck and would really like to move on

Thanks

Your variable name is missing an 'o'. The puzzle is checking for a variable called balloon, and it can’t find it. Change ballon to balloon.

–Frankie

This puzzle had me frustrated and I had trouble with it!

This got me passed it though we may have different ways, however this is what worked for me! So I shared it!! Have a blessed day and may our lord Jesus Christ fill your heart with love and compassion!

Edit. (this is on android.)I dont have a var key to use?

1 Like

Hi, similar to above, trying to start the exercise but I don’t have a var key available.

1 Like

@Johan_Nordin @Celeste_Li

This puzzle was recently updated to use let instead of var. I’ve updated the explainer post at the top.

let and var are both ways to create a new variable.

–Frankie