1. Making Python Pretty!

2. How to Use This Presentation… Download a copy of this presentation to your ‘Computing’ folder. Follow the code examples, and put a screen capture of your code into the presentation when you are asked to. When you see a green box with a python, put your own notes & answers in.

3. I’m stuck!!! 1 – Read the instructions again. 2 - Check the notes in your folder. 3 – Ask someone sitting close by THEN – ask me!

4. Tell Me How it’s Going… Use the square at the top of each slide to tell me how you are feeling about the task by changing the colour. I’m OK! It’s hard, but I’m trying! I’ve tried 3b4Me and I’m stuck!

5. Is There Any Homework? Yes! The first lesson of every week, you are still handing in a Takeaway Homework Task of your choosing.

6. Tkinter – The Visual Tool So far we have worked with command line. A GUI is an interface that contains images & buttons G raphical U ser I nterface

7. Things to remember about a GUI indows cons enus ointers

8. What are we creating? Our objective over the next few lessons is to create a version of noughts and crosses which will allow you to: Create buttons Use labels Manipulate an array Create line drawings

9. Creating Your Code To create a GUI, you will need to import the tkinter library file. A library file is a…

10. Creating Your Code Next, we need to create a window. Give your window a title and a width & height. The frame is the window the program runs in &.pack() places things in the screen. When I ran my code, my screen looked like this:

11. Creating Your Code After our frame.pack(), add in the following two frames to organise the items on the screen. When I call a function with a variable name in it, this is called a …. These allow me to…

12. Creating Your Code Next, we will create out noughts and crosses board. This is a square where we will draw the lines to make Os & Xs. A canvas works by creating a grid of pixels which use coordinates to draw. This works in a similar way to vector graphics. A pixel is…. A vector graphic is useful because….

13. Creating Your Code In this code, I am using labels instead of the ________ function that I used in command line. Labels are better for users because….. Our next challenge is to create some labels which will show messages to our user.

14. Creating Your Code When I run my code, it looks like this: The final line of the program is window.mainloop() This allows your program to run all of its code. As you add new code into your program, this should remain the final line of your code.

15. Creating Your Code A noughts and crosses board looks like _______. Therefore, my array must look like ______. The next stage is to create the variables. These are an integer to count turns, and a 2 dimensional array for the board.

16. Creating Your Code Procedures are good practice when coding because: The next stage is to create a procedure which draws a O or a X on the canvas. This code is on the next slide! Your procedure goes in here (between import & turn = 1):

17. Procedure Annotate this code to explain what it does. The first one has been done for you… This procedure expects 8 parameters!

18. The Alpha Test When I run my code, it looks like this: So far the errors I have found have been… I fixed them by…. There are three types of testing: Alpha, Beta & Acceptance Alpha testing happens while the developer is still coding.

19. Getting Cross (or Nought) Draw an algorithm to show the process of clicking a button to run the procedure we have just written: Right now, we have a procedure to write a shape onto the board, but no event to trigger the code to run. For this game, our trigger will be our user clicking a button on the screen to tell us which square they want to play. Plan first!

20. Creating Your Code Using lambda before the procedure means that it isn’t run until the button is clicked. Why is this important?: TLbtn is the name created for ‘Top Left Button’ – you can give this a name that means something to you. Each of these numbers relates to a parameter in the drawStuff procedure. 1 – x coordinate 1 – y coordinate 60 – left for oval 50 - top for oval 10 – point 1 of cross 10 – point 2 of cross 100 – point 3 of cross 100 – point 4 of cross

21. Understanding Your Code We have now coded one out of nine squares. Change the screen shot to one of your program & explain what is on the screen so far…

22. Buttons Buttons Everywhere Now we need to create a button for all 9 of the noughts and crosses board. Don’t worry, we’ve already worked out the coordinates for you!

23. Understanding Your Code We have now coded nine out of nine squares. Change the screen shot to one of your program & explain what is on the screen so far…

24. Procedure 2 When testing my game, I’ve found that it isn’t finished yet because…. You may have noticed in our first procedure that we included a procedure call to checkStuff() but hadn’t written it yet. We are now going to write this below the drawStuff() procedure.

25. Procedure 2 If all three are the same, you win! Annotate this code to explain what it does. The first two have been done for you… This writes each line of the array out to a label

26. Understanding Your Code We have now coded the part of our code which checks for a winner! Change the screen shot to one of your program & explain what is on the screen so far…

27. Procedure 3 The variables I may need to reset to start my game again are…. If I didn’t reset these variables, my game would…. We’re nearly there! Our final part of the program is to clear the board and restart the game. We can do this with a button and one final procedure which resets all of our variables.

28. Procedure 3 Annotate this code to explain what it does. The first one has been done for you… This removes all our drawings (lines & ovals)

29. Click Me! Now I have finished my code, when I run my program it looks like this: delbtn is the name created for ‘Delete everything Button’ – you can give this a name that means something to you. This button code is placed after the game buttons that we have already created.

30. Test It! A standard data test means…. An erroneous data test means…. An extreme data test means…. Once a program has been written, it must be tested. Complete the testing table on the next slide and add in your own tests for standard, erroneous and extreme data.

31. Test It! Test No. Test DescriptionExpected Outcome Actual Outcome Evidence 1Click the top right button as player 1 An X appears in the top right square success! 2Click the top row as player 2 When three Os appear, label says ‘Os Win!’ 3 4 5

32. Test It More! I tried to break the game by…. Some errors I found were…. It was good because…. Once a program has been written and tested, you are ready to try Beta Testing. Ask a friend to test your game and fill in the box below.

33. Evaluate It! My game met the criteria of noughts and crosses because…. I think I developed my code [well? Ok? Brilliantly?] because…. Some feedback I had was…. It was good / bad because…. In future, I could improve….. You have reached the end of your development cycle. You have planned, developed and tested, which means it’s time to evaluate.