(EXAMPLE 1) CSP 20-21 U4 Practice PT Planning Guide
(EXAMPLE 1) CSP 20-21 U4 Practice PT Planning Guide
Project Description
For this project you will create an app that helps a user make a decision. Your app must take in at least one number
and one string from the user that will help to make the decision. All of this information will be used as part of the
decision making process. In addition, your code must include at least one function used to update the screen.
App Requirements
● At least one number and one string used to make and report a decision with a conditional statement
● A function which updates the screen and is called at least twice in the program
● Conditional statement includes at least one logical operator (&&, || or !)
● There are at least three different possible output answers (i.e. “Yes, you can adopt a cat!”, “No, you can’t adopt
a cat”, and “Congratulations, you can adopt a kitten!).
● Every function contains a comment explaining purpose and functionality
● Clear and easy to navigate user interface
● Cleanly written code which is free of errors
Steps
● Brainstorm an app idea for making a decision
● Interview classmates for ideas on what information would be needed to make the decision
● Draft a flowchart of the decision making process
● Design your app’s user interface
● Design and program your app in App Lab
● Collect feedback from your classmates and update your app
● Submit your final app
Investigate
Step 1. Brainstorm App Ideas: Your app should be designed to help a user make a decision. The decision can be
small or big, like what to eat for lunch or where to apply for a job.
Step 2. Choose One Idea: Talk through your ideas with a classmate. Pick the one that you are most interested in.
App Idea: We want to help suggest what kind of fish someone should get as a pet _________________
Step 3. Survey Your Classmates: To design your app you’ll need to understand your users. For this project your user
is your classmates, and you’ll need to understand what information will be needed to make the decision.
Find two classmates and talk to them about your topic for a couple minutes. Then fill in this table.
How big of a fish do they want. Some are really small like goldfish whereas
Andrea others are bigger
Example:
2
Component Purpose
Start your flowchart with a question. What decision are you trying to make?
Baggies are used to represent the variables which store information. In your flowchart,
draw a small rectangle for the variables.
A diamond represents a decision point, based on the original question. Write the
Boolean expression that will be used to determine the answer.
True and False arrows designate the paths taken, based on the result of a decision
(diamond). Note that every decision may have only 2 possible paths that result from it,
one for true and one for false.
A simple arrow indicates that we are moving from one action to the next without
considering any decision. These will generally be used to link a set of actions to be
completed one after the other.
Flowchart
3
Design
Step 6. Design User Interface: In the space below draw a rough sketch of your user interface. This means you should
include all the buttons, text, and images that the user will be able to use. Write notes or draw arrows showing how
different user interface elements should work.
Note: There are no screen requirements for this app - you may use one or more screens.
Students here will just Students here will just Students here will just
need to draw a rough need to draw a rough need to draw a rough
sketch of what their app sketch of what their app sketch of what their app
will look like and how will look like and how will look like and how
screens are connected screens are connected screens are connected
Prototype
Step 7. Start Building Your App: Build your app. Along the way make sure you:
● Use the design you drew as a starting point, but it’s OK to update as you go.
● Reference the flow chart when setting up your conditional statements
● Use your debugging skills to check that your app is working
● Comment all functions explaining purpose (what does it do) and functionality (how does it work)
4
Test
Step 8. Testing: You will need to test your app to make sure it works as expected. To do that find at least two
classmates to use your app. While they use the app watch them to see if anything is broken or confusing. Afterwards
ask them to share any specific improvements they’d like to see.
Name Things that could be improved based on Improvements this person recommends
watching them use the app
People are struggling to know how big fish Having a dropdown menu instead of user
Preston are input would be nice as I didn’t know what
to say for size
Step 9. Pick Improvements: Pick at least one improvement you plan to make to your app based on feedback you
collected from your classmate.
Improvement 1: We want to use dropdown menus instead of user input so that users can choose rather
than have to know information beforehand. ___________________________________________________
Improvement 2 (Optional): We want to have photos of the fish we recommend so users can see what it
looks like. __________________________________________________________________________________
Reflection
The way that it functions is that it takes into account two main user inputs, if the user
wants a freshwater or saltwater fish and how big of a tank they have/are willing to get and
then based on those choices, the app will make a recommendation.
The app takes in user inputs in three ways. First off, the user can type in their own name so
the app can make it feel more personal. The other two inputs are the type of water and the
size of the tank, which the user inputs through dropdown menus to pick the options. When all of
this is inputted, the app will output the name of the user, the name of the fish it recommends
and a photo of the fish to help the user know what it looks like.
5
Question 2: This project was created using a development process that required you to incorporate the
ideas of your partner and feedback from your classmates. Provide a written response that describes one
part of your app that was improved through input from EITHER your partner or feedback you received from
classmates. Include:
● Who specifically provided the idea or recommendation
● What their idea or recommendation was
● The specific change you made to your app’s user interface or functionality in response to the
recommendation
● How you believe this change improved your app
(Approx 150 words)
We asked Nikki and Preston to test our initial app design to see how much they liked it and how
effective it was. And from just watching them use our app, it became clear to see that
having them input numbers for something like fish size was confusing. They weren’t sure how
big certain fish were and if the number we were using was in inches or feet. So preston
suggested using a dropdown menu for our inputs instead so the user does not need to know
everything beforehand. So we did that, making the inputs dropdown as well as changing our
second question to be tank size since that seemed to make more sense than just asking for a
fish size. Nikki wanted to see what the fish the app recommends looks like so we added photos
to go along our recommendation All in all, the changes made in this app make it a lot friendlier
for people to use by aiding them in what options are available and what the fish look like
rather than having the user do all that work.
6
Rubric
App Development Planning guide is fully Planning guide is mostly Planning guide is Planning guide is not
Planning Guide: completed. completed. somewhat complete. complete.
Written Response 1: Response accurately Response describes the Response partially Response does not
describes the purpose, purpose and functionality, describes the purpose and describe the purpose,
functionality, and or the inputs/outputs of functionality, or the functionality, and
inputs/outputs of the app. the app. inputs/outputs of the app. inputs/outputs of the app.
Written Response 2: Response clearly Response describes an Response describes an Response does not
describes an idea or idea or recommendation idea or recommendation describe an idea or
recommendation provided provided by a partner / provided by a partner, but recommendation provided
by a partner / peer and peer and how it improved does not explain how it by a partner.
how it improved the app. the app, but there is some improved the app.
confusion.
User Interface: The User Interface is easy The User Interface is The User Interface is The User Interface is
to navigate and it’s clear mostly easy to navigate lacking in some readability difficult to navigate and it’s
how the app is designed and it’s clear how the app or it’s not clear how to use not clear how the app is
to be used. All text is is designed to be used. All the app. designed to be used. Text
readable. text is readable. is unreadable.
Code: Warnings & Error No warnings or error A few warnings or error Many warnings or error The app does not run at
Messages messages appear when messages appear when messages appear when all.
the app is run. the app is run.. the app is run.
Code: Variables At least one number and One data type (numbers One variable stores either No variables are set up or
one String are each stored or Strings) is stored in at a number or String and is used to make a decision.
in a variable and used to least two variables and used to make a decision.
make a decision. used to make a decision.
Code: Function A function is used to A function is used to A function is created to A function was not created
update the screen. The update the screen. The update the screen but is to update the screen.
function is called at least function is called one time not called in the program.
two times in the program. in the program.
Code: Conditional A conditional is used A conditional is used A conditional is created No conditionals are
inside of the function to inside of the function to inside of the function, but present in the function.
make a decision based on make a decision based on does not use information
information stored in information stored in stored in variables to
variables. The conditional variables. The conditional make a decision or display
correctly uses a logical does not correctly use a it on the screen.
operator (&&, ||, or !) in logical operator (&&, ||, or
the Boolean expression. !) in the Boolean
The decision is displayed expression. The decision
on the screen. There are is displayed on the
at least three different screen. There are at least
responses that could be two different responses
displayed. that could be displayed.
Code: Comments The update screen The update screen A comment is present, but No comments are present.
function has a comment function has a comment it does not clearly explain
which clearly explains its which clearly explains its anything about the
purpose and functionality. purpose or functionality. function.