Area Calculator Project (level 1)

[truthgoddess]

@madduccino

It's taken me a long time to actually get enough time to actually put some hours into this, but here's one. Didn't take me that long. Should be a lot faster now.

Idea behind this is to introduce functions to students in Level 1 Woof. It is harder than other Level 1 woof projects insofar as it requires them to do some internet research and use functions, but with a little help shouldn't be too hard. My future curriculum contributions will try and do this with other topics to help our students be more successful with WoofJS later levels and our web curriculum.

[stevekrouse]

[This is an automated integration to preview this pull request's changes to the website.]

https://raw.githack.com/truthgoddess/coding.space/dcea0f0eb8aab6314594b571f616d8cd86b8e798/create.html

[truthgoddess]

@stevekrouse @madduccino The preview link doesn't work. I saw that it didn't work on an earlier pull request. Did I do anything wrong?

[stevekrouse]

I think it may have never worked. Will remove that automated integration now, because it's not so easy to fix it.

[madduccino]

Thanks for submitting this, @truthgoddess!

I really like how this project introduces functions (although I wonder if these should be introduced at a later level? This seems a lot harder than other Level 1 project but could just be me) and it's also a great way to get students to play around with shapes and learn about calculating the area of different shapes. I do worry that the topic won't entice enough students to try out this project, though. @stevekrouse do you have thoughts here?

Other comments:

1. On my screen the circle and ellipse aren't visible. Maybe position the shapes in reference to min as well as max. At the very least, make sure they all appear on smaller chromebooks.

2. Step 1 says, "Create shapes that will represent shapes your program will calculate the area of." I find this a little hard to follow. Is there a simpler way to say this? What if it just said something like "Create some shapes!" You might also want to tell users to put the shapes in different places on the screen. A beginner might layer the shapes on top of each other and not realize what has happened. This is also a good way to get them more familiar with x and y.

3. When I played the game, it wasn't clear to me that I should click the text to make the alert window appear. I kept clicking the shape and wondering why it wasn't working. I'm not sure the best way to address this. Thoughts?

4. Step 3 says, "Create a text sprite to act as the calculator window. Place some default text there." Will students understand what a calculator window is? Should we call it a calculator display screen? I was slightly confused. It might be easier to process if you combine steps 3 and 4 by saying something like, "Create another text sprite. When you click a shape, have the text sprite display the name of the shape." But then I guess it's harder to refer to this text sprite later...

For the hint, I think it's more correct to say object.text would change the text of an object called object. Maybe instead: Hint: textSprite1.text = 'your text' would change the text of a sprite called 'textSprite1' to 'your text'"

5. Step 5 says, "When a user clicks on the area text (not the shape) for the square, prompt the user to input a side length and place the number that they input into the window." What if the user didn't make a square? Would it be more straightforward to have them just create a square and add other shapes at the end of the tutorial?

Also, I would use "ask" and not "prompt." Students are transitioning from Scratch so I think it makes sense to use Scratch lingo here.

6. In STep 6 I think that we should be pointing to Woof documentation here and not W3C. If we need a better explanation for functions, let's add it to Woof (e.g. return is missing). We should probably tell users that functions can be found in "More blocks." And we might want to break this down into smaller steps.

7. I think a good challenge step could be to make sure the user passes in a number.

8. Step 9 says, "Use a javascript function to limit the results that you get to 2 decimal points (use search engine to find it)." We should make sure to write javascript as JavaScript for consistency.

In addition, I think we should still be pointing to Woof documentation here, especially if we're treating this as a beginner project.

10. For the animation challenge step, what would this look like? Maybe give students a little more direction here. Or maybe I'm just not being creative enough in my thoughts!

[truthgoddess]

@madduccino Thanks for these tips. I will integrate them first thing tomorrow!

[truthgoddess]

Hi @madduccino! I really loved your feedback and it helped me really make this clearer, cleaner, and hopefully more useful to us! I've updated the program and curriculum pages significantly using your notes. I'd love it if you'd take a look at it and provide feedback on anything else you'd like to see!

[madduccino]

Awesome! Agreed that this is a lot cleaner/clearer and I think suitable for Level 1. I'm also really liking the style changes.

A few more things:

1. I wasn't able to preview the project through Cloud9 (a bunch of errors popped up) until I switched to the latest version of the Woof library. I think this is why the shapes were in weird places for me in my last comments. Each time we make a new untutorial, let's make sure we're referencing the latest production version. (Go to https://raw.githack.com/ and paste in https://github.com/stevekrouse/WoofJS/blob/master/woof.js, then grab the URL on the left and update the script src in the untutorial). This unfortunately has to be done for every step.

2. It's good to add comments explaining what each part of your code does. We use this to serve as a guide for teachers. (See other untutorials for reference.)

3. I'm wondering if we can make your code a little more readable by saving phrases that are used multiple times in variables, e.g. var calcInstructions = Area or perimeter? 1 for area, 2 for perimeter.

4. Step 3 should reference Step 2

5. Step 4 is going to be really tricky for students but I think it's the right approach.

Almost there! Excited to add this.

[truthgoddess]

Thanks! Quickly, about your first comment, where do I place that? All the snippets seem to have <script src="https://rawgit.com/stevekrouse/WoofJS/master/dist/woof.js"></script> is that not correct? Should each of those be <script src="https://rawcdn.githack.com/stevekrouse/WoofJS/8f46930383acf6e7bc6db6a9084014bd3cbdd44a/woof.js"></script> ?

[madduccino]

Right, replace as you’ve written.

On Wed, Jul 24, 2019 at 9:40 AM Kate Norton notifications@github.com wrote:

Thanks! Quickly, about your first comment, where do I place that? All the snippets seem to have is that not correct? should each of those be ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/madduccino/coding.space/pull/133?email_source=notifications&email_token=AAQAR4PGCTRB2AFVNYLPYETQBBLUDA5CNFSM4H6NJSMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2WLWFY#issuecomment-514636567, or mute the thread https://github.com/notifications/unsubscribe-auth/AAQAR4L52XIYHSRXIDPTCNTQBBLUDANCNFSM4H6NJSMA .

[truthgoddess]

Hi Maddy, I updated the pull request with a new commit integrating your directions.

[madduccino]

Great work!! Merged.