Answered by:
Understanding Answer Key From Curriculum: Lesson 4.1 Playing with Shapes
Question

Hello, I am currently reading (and experimenting) the sample code in lesson 4.1 of the curriculum. I attempted the "Show What You Know" and made little success so I decided to study the answer key. It was very insightful and I learned some new programming techniques. However, there are two lines of code that I can't seem to decipher. I marked the two lines of code in the program below.Could someone please explain how those lines work in the program? Any help would be much appreciated.
Solution: ' Copyright (c) Microsoft Corporation. All rights reserved. GraphicsWindow.Hide() gw = 620 gh = 450 endtime = Clock.ElapsedMilliseconds starttime = Clock.ElapsedMilliseconds blinktime = Clock.ElapsedMilliseconds gamestarttime = Clock.ElapsedMilliseconds GraphicsWindow.CanResize = "False" GraphicsWindow.Width = gw GraphicsWindow.Height = gh GraphicsWindow.Top = ( Desktop.Height  gh ) / 2 GraphicsWindow.Left = ( Desktop.Width  gw ) / 2 GraphicsWindow.Title = "Flower" GraphicsWindow.BrushColor ="Pink" GraphicsWindow.Show() CreateUI() GraphicsWindow.MouseDown = MouseAction Controls.ButtonClicked = OnclickButton starttimer() Sub MouseAction x = GraphicsWindow.MouseX y = GraphicsWindow.MouseY GraphicsWindow.MouseMove = MouseMove If x > px And x < px + 180 And y > py And y < py + 400 Then GraphicsWindow.MouseUp = onMouseUpEvent If x < px + 90 and y < py + 100 Then sh = leaf1 bsh = leafs[1] GetShapeXY() ElseIf x < px + 200 And y < py + 100 Then sh = petal1 bsh = petals[1] GetShapeXY() ElseIf x < px + 90 and y < py + 200 Then sh = stik bsh = stick GetShapeXY() ElseIf x < px + 200 And y < py + 200 Then sh = circle bsh = circ GetShapeXY() ElseIf x < px + 90 And y < py + 300 Then sh = petal2 bsh = petals[2] GetShapeXY() ElseIf x < px + 200 And y < py + 300 then sh = petal3 bsh = petals[3] GetShapeXY() ElseIf x < px+90 And y < py + 400 Then sh = petal4 bsh = petals[4] GetShapeXY() ElseIf x < px + 200 And y < py + 400 Then sh = leaf2 bsh = leafs[2] GetShapeXY() EndIf EndIf EndSub Sub GetShapeXY shx = shapes.GetLeft(sh) shy = shapes.GetTop(sh) EndSub Sub CreateUI GraphicsWindow.DrawRectangle(10, 10, 380, 420) GraphicsWindow.DrawRectangle(410, 10, 200, 420) GraphicsWindow.BrushColor = "Brown" stick = Shapes.AddRectangle(5, 180) Shapes.Move(stick, 174, 238) GraphicsWindow.BrushColor = "Pink" petals[1] = Shapes.AddEllipse(70, 55) Shapes.Move( petals[1], 93, 115) Shapes.Rotate( petals[1], 15) petals[2] = Shapes.AddEllipse(70, 55) Shapes.Move(petals[2], 148, 81) Shapes.Rotate(petals[2], 105) petals[3] = Shapes.AddEllipse(75, 55) Shapes.Move( petals[3], 185, 135 ) Shapes.Rotate( petals[3], 200 ) petals[4] = Shapes.AddEllipse(75, 55) Shapes.Move( petals[4], 135, 175) Shapes.Rotate( petals[4], 90) GraphicsWindow.BrushColor = "Yellow" circ = Shapes.AddEllipse(25, 25) Shapes.Move(circ, 162, 140) GraphicsWindow.BrushColor = "Green" For i = 1 To 2 leafs[i] = Shapes.AddEllipse(50, 25) Shapes.Move(leafs[i], 223 (i * 48), 258) Shapes.Rotate(leafs[i], 180 * i) EndFor Hide() px = 420 py = 20 pw = 90 ph = 100 GraphicsWindow.DrawRectangle(px, py, 180, 200) GraphicsWindow.DrawRectangle(px, 220, 180, 200) GraphicsWindow.DrawRectangle(px, py, pw, ph) GraphicsWindow.DrawRectangle(px + 90, py, pw, ph) GraphicsWindow.DrawRectangle(px, py + 100, pw, ph) GraphicsWindow.DrawRectangle(px + 90, py + 100, pw, ph) GraphicsWindow.DrawRectangle(px, py + 200, pw, ph) GraphicsWindow.DrawRectangle(px + 90, py + 200, pw, ph) GraphicsWindow.DrawRectangle(px, py + 300, pw, ph) GraphicsWindow.DrawRectangle(px + 90, py + 300, pw, ph) GraphicsWindow.BrushColor = "Green" leaf1 = Shapes.AddEllipse(50, 25) Shapes.Move(leaf1, px + 20, py + 40) leaf2 = Shapes.AddEllipse(50, 25) Shapes.Move(leaf2, px + 115, py + 340) GraphicsWindow.BrushColor = "Pink" petal1 = Shapes.AddEllipse(65, 50) Shapes.Move(petal1, px + 105, py + 30) Shapes.Rotate(petal1, 15) petal2 = Shapes.AddEllipse(65, 50) Shapes.Move(petal2, px + 20, py + 230) Shapes.Rotate(petal2, 105) petal3=Shapes.AddEllipse(65, 50) Shapes.Move(petal3, px + 105, py + 230) Shapes.Rotate(petal3, 200) petal4 = Shapes.AddEllipse(65, 50) Shapes.Move(petal4, px + 20, py + 330) Shapes.Rotate(petal4, 90) GraphicsWindow.BrushColor = "Brown" stik = Shapes.AddRectangle(5, 50) Shapes.Move(stik, px + 40, py + 130) GraphicsWindow.BrushColor = "Yellow" circle = Shapes.AddEllipse(25, 25) Shapes.Move(circle, px + 120, py + 130) EndSub Sub Hide For i = 1 To 8 Shapes.SetOpacity(petals[i], 10) EndFor For i = 1 To 2 Shapes.SetOpacity(leafs[i], 10) EndFor Shapes.SetOpacity(circ, 10) Shapes.SetOpacity(stick, 10) EndSub Sub MouseMove x = GraphicsWindow.MouseX y = GraphicsWindow.MouseY If Mouse.IsLeftButtonDownThen Shapes.Move(sh, x, y) EndIf EndSub Sub onMouseUpEvent If bsh = stick Then '????????? This Line Below ??????????? HELP HERE! If (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh)  10) <= Shapes.GetLeft(bsh) Then Shapes.SetOpacity(bsh, 100) Shapes.Remove(sh) dropped = dropped + 1 Else Shapes.Move(sh, shx, shy) EndIf EndIf '???????? This Line Below ??????? HELP HERE! If (Shapes.GetLeft(sh) + 10) >= Shapes.GetLeft(bsh) And (Shapes.GetLeft(sh)  10) <= Shapes.GetLeft(bsh) And (Shapes.GetTop(sh) + 10) >= Shapes.GetTop(bsh) And (Shapes.GetTop(sh)  10) <= Shapes.GetTop(bsh) Then Shapes.SetOpacity(bsh, 100) Shapes.Remove(sh) dropped=dropped + 1 Else Shapes.Move(sh, shx, shy) EndIf EndSub Sub starttimer GraphicsWindow.BrushColor = "Black" Submitbtn = Controls.AddButton("Submit", 300, 390) Controls.SetSize(Submitbtn, 70, 35) end = Clock.ElapsedMilliseconds start = Clock.ElapsedMilliseconds blink = Clock.ElapsedMilliseconds gamestart = Clock.ElapsedMilliseconds init = 0 While init < 1 game = Clock.ElapsedMilliseconds  start GraphicsWindow.BrushColor = "#3975e5" GraphicsWindow.FontSize = 15 GraphicsWindow.FillRectangle(250, 20, 120, 25) GraphicsWindow.BrushColor = "Black" tsecamt = Math.Round(game / 1000) tsec = Math.Remainder(tsecamt, 60) tming = Math.Floor(tsecamt / 60) tmin = Math.Remainder(tming, 60) thour = Math.Floor(tming / 60) If tsec < 10 Then strSec = Text.Append(":0", tsec) Else strSec = Text.Append( ":", tsec) EndIf If tmin < 10 Then strMin = Text.Append( "0", tmin) Else strMin = Text.Append( "", tmin) EndIf sec = Text.Append(strMin, strSec) GraphicsWindow.DrawText(250, 22, " Time: " + thour + ":" + sec ) GraphicsWindow.FontSize = 10 end = Clock.ElapsedMilliseconds fps = 0 Program.Delay(1000) EndWhile EndSub Sub OnclickButton If Controls.GetButtonCaption(Controls.LastClickedButton) = "Submit" Then IF dropped = 8 Then init = 2 GraphicsWindow.ShowMessage("Congratulations! You took " + thour +":"+ tsec + " seconds to complete the flower.","Result") Program.End() EndIf EndIf EndSub
Thursday, July 31, 2014 6:35 PM
Answers

They are checking for an overlap of 2 shapes.
If the Left and Right X values for 2 shapes are:
L1, R1 and L2, R2
Then they overlap if:
R1 >= L2 And L1 <= R2.
Draw some rectangles on paper to be sure.
The +/10 are just to control the overlap  bsh left edge is within +/ 10 of the left edge of sh  the Y top bottom is just the same.
 Marked as answer by Ezra94 Friday, August 1, 2014 5:26 PM
Thursday, July 31, 2014 7:11 PM 
Others have found this answer to the "show what you know" very hard to follow, I did.
It's a really good build exercise but comes with a difficult to follow sample.
Here's an alternative solution: BFM261 (needs a clock)
I think it's the stage in the curriculum where people can start to think about taking a bit of a top down approach to building a program.
I would start with seeing if I could add 2 shapes of similar size, drag one to the vicinity of the other and release it on top and detect if the shape was close enough to the other to make the match.
Then build in all the details around this, bit by bit, testing each part as I go.
 Marked as answer by Ezra94 Saturday, August 2, 2014 3:15 PM
Friday, August 1, 2014 8:17 PM
All replies

They are checking for an overlap of 2 shapes.
If the Left and Right X values for 2 shapes are:
L1, R1 and L2, R2
Then they overlap if:
R1 >= L2 And L1 <= R2.
Draw some rectangles on paper to be sure.
The +/10 are just to control the overlap  bsh left edge is within +/ 10 of the left edge of sh  the Y top bottom is just the same.
 Marked as answer by Ezra94 Friday, August 1, 2014 5:26 PM
Thursday, July 31, 2014 7:11 PM 
Thank you litdev. I'm still a bit confused but from what I understood the first line I mentioned, located after line 'if bsh = stick then' . . . , creates a bubble like boundary around 'sh'. The 10 and +10 defines the bubble boundary of 'sh'. When 'sh' is dragged and its +/ 10 (20) pixel boundary overlaps the specified area, Shapes.GetLeft(bsh), then it initiates the specified action: increasing the opacity of 'bsh' and removing 'sh'. The line after this is similar but associates with y coordinates as well. Did I explain that correctly?
Thursday, July 31, 2014 9:47 PM 
Yes that sounds right to me, its all variants (bubbles) on R1 >= L2 And L1 <= R2.Friday, August 1, 2014 11:40 AM

Others have found this answer to the "show what you know" very hard to follow, I did.
It's a really good build exercise but comes with a difficult to follow sample.
Here's an alternative solution: BFM261 (needs a clock)
I think it's the stage in the curriculum where people can start to think about taking a bit of a top down approach to building a program.
I would start with seeing if I could add 2 shapes of similar size, drag one to the vicinity of the other and release it on top and detect if the shape was close enough to the other to make the match.
Then build in all the details around this, bit by bit, testing each part as I go.
 Marked as answer by Ezra94 Saturday, August 2, 2014 3:15 PM
Friday, August 1, 2014 8:17 PM 
Thank you for the advice. That's the best programming advice there is and I work by that: just take it one piece at a time. I agree it is quite a leap compared to the other lessons in the curriculum, but I learned quite a bit from taking apart its code and evaluating it.
 Edited by Ezra94 Friday, August 1, 2014 9:05 PM
Friday, August 1, 2014 9:02 PM