7 Using the GUI

Learning Objectives

  • Build a simple GUI based on code from the last lesson.
  • Add code to make the GUI functional.
  • Adapt the code to make a joke app.

Learning Outcomes

Must Use code similar to that from the last lesson to create a simple GUI (Level 5)

Should Adapt the code to make elements of the GUI functional. (Level 5)

Could Without help, start to expand and adapt the code. (Level 6)

Keywords

Words to learn: Implementation.

Starter

We’re going to make a Joke telling app.  First Choose a few entertaining Jokes from this website.  Make a note of them (copy and paste them onto a “notepad” text file).  Make sure you choose “question and answer” type jokes.

Main

We start with this GUI:

sc3

  1. First we need to start our program with the imports, and make the window:sc4
  2. Now we add the loop to show the GUI, and you should be able to run the program to get an empty window…
    sc5
  3. Now We’ll add our first button:
    sc6
  4. Note in your first button that the “command” instruction is empty – more of that later.  We’re using a grid layout, so this button goes in the top corner.  Sticky = W means that the button always stays to the West of the container (left-hand side.
    Can you make a second button to get the answer,  labelled “GET ANSWER”? You’ll need it to be to the East (sticky = E)
  5. Now a text box called entry which will display the first line of the Joke:
    sc7
  6. Now we need a label (look out our original photo of the GUI):
    sc8
  7. Now make a second text box called output:sc9
  8. **NOTE** Make sure you move the code from step 2 to the bottom of your program.
  9. Your code should run the “empty” GUI as seen above!

  10. We’re going to make a collection of “tuples”  these are Pairs of data (In this case, question and answer)We make the variable “my_flashcards”:

    my_flashcards = { ‘Why did the scarecrow get a gold medal?’ : ‘He was outstanding in his field’,’Where did Napoleon keep his armies?’:’Up his sleevies’}


    Make sure you add your own jokes to this collection. Each joke is separated by a comma, and the question and answer are separated by a ‘:’


  11. Now, we create the code for the buttons.  Remember the “command” field we left blank?  The command field is the name of a function.  A function is just a “bundle” of code with a name.  Here is the code for “click” (click on the “GET ANSWER”  button)Put this function below the “import” statements, and above the GUI code.
    sc10
    All this code actually does is find the joke line that is printed on the app.  It will then get the corresponding answer from my_flashcards, and print it in the lower text field.
  12. Now, we just need the code that chooses a random entry from my_flashcards so we get a different joke each timethe button is clicked:
    sc11
  13. There is one remaining problem.  We need to “tell” each button to run the function when it is clicked. Look for the code that creates each button :Button(window, text=b,      )
    edit the command=”  field to read command=click for the GET ANSWER button, and command=click1 for the GET JOKE button.
  14. Run this code, and we have a fully working app with a GUI….

    Extension…

  15. Read through these instructions again, and comment your code as thoroughly as possible to make sure you understand it.
  16. Change your app so it becomes a quiz,  asking a question, and giving the answer when the “Answer” button is pressed.
  17. Add a variable to the app to track how many times the “Question” button has been pressed.  It should print this number each time the button is pressed, just before the question…