|
1 | 1 | # Stage 8 - Useability |
2 | 2 |
|
3 | | -```{topic} In this lesson you will: |
4 | | - |
5 | | -- Improve the code useabilty |
| 3 | +```{topic} Learning Intentions |
| 4 | +In this lesson you will: |
| 5 | +* understand why making something easy to use is important for the person using it |
| 6 | +* know what UI and UX mean and why they matter when people use a program |
| 7 | +* understand how comments and neat code make a program easier to read and fix |
| 8 | +* improve a program by adding features that help the user, like a help option or clearer messages |
| 9 | +* tidy up a program by removing code you don’t need and organising it so it’s easier to read and use |
6 | 10 | ``` |
7 | 11 |
|
8 | 12 | <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/lHSCfn0U45k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> |
9 | 13 |
|
10 | 14 | ## Introduction |
11 | 15 |
|
12 | | -Our dungeon is complete. We have a fully functioning game, but before we sign-off we need to improve the useability of our program and tidy up our code. |
| 16 | +Our dungeon works, but before we finish we need to make it easier to use and clean up the code. |
| 17 | + |
| 18 | +We will: |
13 | 19 |
|
14 | | -To do this we will: |
| 20 | +* add a **help** command |
| 21 | +* make the program easier to read and use |
| 22 | +* add a goodbye message at the end |
| 23 | +* write more comments in the code |
| 24 | +* delete code we don’t need |
| 25 | +* make our spacing neat and consistent |
15 | 26 |
|
16 | | -- Create a **help** command |
17 | | -- Improve the user experience and user interface |
18 | | -- Add a farewell message |
19 | | -- Add some in-code comments |
20 | | -- Remove unused code |
21 | | -- Standardise our white-space |
22 | 27 |
|
23 | 28 | ## Help command |
24 | 29 |
|
25 | | -We know all the commands we can use because we wrote the code. Someone else might not know what they can say. In addition, if they don't enter one of the commands, the program only says `I don't understand.`, which is far from helpful. |
| 30 | +We know the commands because we wrote the code. A new player won’t know what they’re allowed to type. Right now, if they type something wrong, the program just says “I don’t understand,” which isn’t very helpful. |
26 | 31 |
|
27 | | -To make life easier for new players, we should create a **help** command which lists all the commands. But how will the player know about the **help** command, without using the **help** command? Simple, we change the catch-all event handler (under the `else:`) to inform the user about the help command. |
| 32 | +To fix this, we should add a **help** command that shows all the commands. But players won’t know the help command exists unless we tell them. So we update the final `else:` section to remind them to type “help” when they get something wrong. |
28 | 33 |
|
29 | | -To implement this, add the highlighted code below to **main.py**: |
| 34 | +Now add the highlighted code to **main.py**. |
30 | 35 |
|
31 | 36 | ```{code-block} python |
32 | 37 | :linenos: |
@@ -161,23 +166,25 @@ while running: |
161 | 166 | print("Enter 'help' to list the copmmands.") |
162 | 167 | ``` |
163 | 168 |
|
164 | | -By now this code should be familiar and makes sense to you. |
| 169 | +You’ve seen this kind of code many times now, so you should already understand how it works without investigating it. |
165 | 170 |
|
166 | 171 | ## Improving the UI and UX |
167 | 172 |
|
168 | | -Although our program is visually very simple, the user stills interacts with it, which means we need to consider the UI and the UX. |
| 173 | +Even though our program looks simple, people still have to use it, so we need to think about the UI and UX — how it looks and how easy it is to use. |
| 174 | + |
169 | 175 |
|
170 | 176 | ```{admonition} UI and UX |
171 | | -UI stands for User Interface, which is basically what you see on your screen when you use an app or a website. This includes things like buttons, menus, icons, and colors. UI design focuses on making things look good and easy to use. |
| 177 | +:class: note |
| 178 | +UI means **User Interface**. It’s the stuff you actually see on the screen when you use an app or website — things like buttons, menus, icons, and colours. UI is about making everything look clear and easy to use. |
172 | 179 |
|
173 | | -UX stands for User Experience, which is how you feel when you use an app or a website. It's about how easy it is to use, how it makes you feel, and whether it helps you achieve what you're trying to do. UX design focuses on making things easy and enjoyable to use. |
| 180 | +UX means **User Experience**. It’s about what it *feels* like to use the app — if it’s easy, confusing, fun, or annoying. UX is about making sure the user has a smooth and enjoyable time using the program. |
174 | 181 | ``` |
175 | 182 |
|
176 | | -We have already addressed some UI and UX problems by adding the **help** command. Play the game and see if you can identify anything else. |
| 183 | +We’ve already fixed some UI and UX issues by adding the **help** command. Now play the game and see if you can spot anything else that feels confusing. |
177 | 184 |
|
178 | | -Did you notice that after entering a command, the game responds and then quickly describes the room again. It's really easy to loose the command response in this quick action. Let's change that by writing the response and then asking the user to press a key to proceed. |
| 185 | +You might notice that after you type a command, the game shows the response and then instantly prints the room description again. This makes it easy to miss what the game just told you. To fix that, we’ll show the response and then make the user press a key before the game continues. |
179 | 186 |
|
180 | | -I implement this, add the highlighted code below. |
| 187 | +To do this, add the highlighted code below. |
181 | 188 |
|
182 | 189 | ```{code-block} python |
183 | 190 | :linenos: |
@@ -317,16 +324,18 @@ Save the file, **predict** and then **run** the code. |
317 | 324 |
|
318 | 325 | How does that work? Let's **investigate**: |
319 | 326 |
|
320 | | -- `input("\nPress <Enter> key to continue")` → this is a hack. That is we are using `input` in an unconventional way to achieve our desired outcome. |
321 | | - - the normal operation of `input` is to wait for the user response → addresses the pausing of the game |
322 | | - - normally the user enters their response by pressing the Enter key → stops the pausing |
323 | | - - the value the user enters is **not** assigned to a variable, so it just disappears |
| 327 | +```{admonition} Code Explaination |
| 328 | +* `input("\nPress <Enter> key to continue")` is basically a little trick. We’re using `input` in a way it’s not normally meant to be used. |
| 329 | + * Normally, `input` waits for the user to type something, which is why it pauses the game. |
| 330 | + * The user presses **Enter** to continue, which ends the pause. |
| 331 | + * We don’t save what the user types, so whatever they enter is ignored and disappears. |
| 332 | +``` |
324 | 333 |
|
325 | 334 | ## Farewell message |
326 | 335 |
|
327 | | -When the game ends, it just stops. Whether the player won or lost it just exits the the Shell prompt. To make things a little more polite, we should add an farewell message. |
| 336 | +When the game ends, it just shuts off straight away. No message, even if you win or lose. To make the ending feel a bit nicer, we should add a goodbye message. |
328 | 337 |
|
329 | | -To include a farewell message add the highlighted code below |
| 338 | +Add the highlighted code below to include the farewell message. |
330 | 339 |
|
331 | 340 | ```{code-block} python |
332 | 341 | :linenos: |
@@ -465,7 +474,13 @@ print("Thank you for playing Deepest Dungeon") |
465 | 474 |
|
466 | 475 | ## In-code comments |
467 | 476 |
|
468 | | -We already have some in-code comment that helps structure our code, but we have missed much of the main loop. We should add some comment to the main loop to make our code more readable and therefore maintainable. |
| 477 | +We already have a few comments in the code to help explain what parts do, but most of the main loop doesn’t have any. Adding comments there will make the code easier to read and easier to fix later. |
| 478 | + |
| 479 | + |
| 480 | +```{admonition} Code maintainability |
| 481 | +:class: note |
| 482 | +Code maintainability means making your code easy to understand, fix, and update later. If your code is neat, well-organised, and has clear comments, you or someone else can quickly figure out how it works. This makes it easier to find bugs, add new features, and change things without breaking the program. |
| 483 | +``` |
469 | 484 |
|
470 | 485 | Let's first start with **main.py** |
471 | 486 |
|
@@ -613,7 +628,7 @@ while running: |
613 | 628 | print("Thank you for playing Deepest Dungeon") |
614 | 629 | ``` |
615 | 630 |
|
616 | | -When you create classes your should really have a comment that explains what each method does. If you look at the classes in our **room.py**, **item.py** and **character.py** files you will see that we have already done this. |
| 631 | +When you make classes, it’s a good idea to add a comment explaining what each method does. If you check the classes in **room.py**, **item.py**, and **character.py**, you’ll see we’ve already done this there. |
617 | 632 |
|
618 | 633 | ## Remove unused code |
619 | 634 |
|
@@ -764,7 +779,7 @@ print("Thank you for playing Deepest Dungeon") |
764 | 779 |
|
765 | 780 | ## Final code |
766 | 781 |
|
767 | | -White space is the blank lines between our code. You can use this to help structure your code. |
| 782 | +Whitespace is the empty lines in your code. You can use it to break your code into clear sections and make it easier to read. |
768 | 783 |
|
769 | 784 | Finalise your code by adjusting it so to look the same as the following code: |
770 | 785 |
|
@@ -1035,8 +1050,8 @@ class Item(): |
1035 | 1050 |
|
1036 | 1051 | ## Final Make |
1037 | 1052 |
|
1038 | | -The tutorials are now over. It is time to make this dungeon yours by adding new features. The Extensions Ideas page has some suggestions. |
| 1053 | +The tutorials are finished. Now it’s your turn to make the dungeon your own by adding new features. You can check the Extension Ideas page for inspiration. |
1039 | 1054 |
|
1040 | | -The current code does have a couple of logical errors, but you will have to test it to find out what they are and then try and solve them. Don't forget to use your debugger to help you with this. |
| 1055 | +There are a few logic mistakes in the code, but you’ll need to test the game to find them and work out how to fix them. Make sure you use your debugger to help. |
1041 | 1056 |
|
1042 | | -Good luck. May your adventure be long and fruitful. |
| 1057 | +Good luck on your adventure. |
0 commit comments