Build a Snowman explainer


#1

The aim of this puzzle: Fix the sizes of the snowman’s circles.
Walkthrough of the solution: There are three main parts to the code: creating the location and sizes variables, the buildSnowman function, and the .on('click',...) call. We know that we have to change the sizes of some circles, so we need to look for .attr('r',...). You can find it inside of the buildSnowman function definition. Currently, it always sets the radius of every circle to 30, but we need the size to change. The radius values we should use are the ones from the sizes array. Since we’re using the sizes array to count through our for...of loop, we know that element is storing each value as it goes through the loop. That means, if you assign element to the radius attribute, you will be setting the circle to the correct size.
Sample code solution:
(Tap below to reveal)

var location = 30;
var sizes = [15, 20, 30];
function buildSnowman(){
  for (var element of sizes){
    svg.append('circle')
      .attr('r', element)
      .attr('cx', 60)
      .attr('cy', location)
      .attr('fill', 'white');
    location = location + element*2;
  }
}
button.on('click', buildSnowman);

JavaScript Concepts: Arithmetic Operators (+, *), Assignments, Binary Expression (+, *), Code Block (function, for loop)
D3 Concepts: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,), .on(‘click’,)
Additional Code: There is hidden code that runs before the puzzle’s code that sets the SVG Shapes attributes.


#2

Why the snowman repeating twice at build a snowman problem in Animation 2 course?
How can I display snowman only as starting head, body & bottom ?


#3

For some odd reason I can’t get the VAR sizes to align like I want. See below:


#4

Hi @Nolan_Code,

It appears that you’re using element as a string (‘element’) rather than as a variable (element) in the section that draws the circle to the screen and that is what is causing your program to become confused.

Hopefully this helps, but if you would like me to go more in-depth, feel free to reply! :smile:


#5

Nope you nailed it. Thanks for the help.


#6

Thanks… although the puzzle explained everything more than well, and it was clear what I was supposed to do I still couldn’t figure out how to do it. The only thing I was sure of was that the required intervention was simple. It just didn’t crossed my mind that all I supposed to do was set the value of the radius so that it points out to variable? Something like that… Or? And then I felt silly when I read the solution, but now I’m not that sure about that. Anyway, or something better, great app and thanks for this explanation.


#7

most boring child ever


#8

Location=location+element*2
I am not able to understand this line , why this line is been written hear.


#9

This line updates the value of location. In other puzzles, we would want a “variable update” to be “increase the value by 1”, and to do that, we would use location = location + 1. In this puzzle, we want to increase the value by a different amount – the width (or diameter) of the current circle. Since the element stores the current radius of the circle, we can add 2 of these to the location variable to move it the correct amount.

What we want is: location = location + diameter, but we don’t have the diameter directly, we have the radius value.
Except, the radius isn’t stored in a radius variable: location = location + (radius * 2).
It is stored in the element variable: location = location + (element * 2)

–Frankie