Unit 6 Lesson 4

Name(s)LÓPEZ ROSS William Period 3 Date 19/11/24

Activity Guide - Lists Make

https://studio.code.org/projects/applab/_IFBxSk9EB1e-L8ImDlZhZVCFHHMs6-7qz0wROLKqtQ
Step 1 - Try the app
● Add several reminders to the app.
● Scroll through your reminders.

Discuss with a Partner

● What programming patterns with lists do you think you'll need to use?

Step 2 - Plan

Lists: This app uses one list. Give it a name! What does it store?

List Name What the List Stores

tasks The tasks stored

Other Variable: This app uses one extra variable in addition to the list. What does it store?
Variable Name What the Variable Stores

index The currently selected task

Conditionals: Review the List Scrolling Pattern. Consider how you will use this in your app.

Computer Science Principles 1

 Unit 6 Lesson 4

How does it work?

Many App Lab projects run in the following
way.

1. The user is interested in seeing items

in a list, like a list of favorite foods, or a
list of reminders.
2. The app shows the user one item in
the list at a time.
3. By clicking buttons (or otherwise
interacting with the app) the user can
move back and forth through the list,
one item at a time, to see every item.

This pattern allows a user to "scroll" through all

the items in the list. In order to make it work,
create an index variable and a list. Then use
the "Counter Pattern with Boundary" pattern to
create event handlers to change the value of
the index.

This pattern makes sense to use with the

updateScreen pattern since you will need at
least two buttons for scrolling left and right
through the list but afterwards will use the
same code to update the screen.

Function: What code may be repeated in your app? What should be included in your function(s)?
● Hint: Check out how the updateScreen() function is set up in the List Scrolling Pattern.
The updateScreen function could be repeated alot- when you scroll left or right, when you add an item

Inputs: What are the inputs for the app? These will all be turned into onEvents.
Input Action Result

"rightButton" click The reminder stored in the list at the next index is displayed.

leftButton click Goes to previous item in index

addButton click Inserts current written task (in reminderInput) to the list

Computer Science Principles 2

 Unit 6 Lesson 4

reminderInput Text input Write a task

Step 3 - Write Your Code

● Write the code for the app, using your plan above and the comments provided in Code Studio to help
● Step You Can Follow
○ Create all the variables (including the list!) from your tables above.
○ Give your variables a starting value using the assignment operator (=).
○ Create a function that updates the screen.
○ Update the output elements on the screen inside of the function.
○ Create event handlers (onEvent) for the inputs in your table above
○ Inside the event handlers, update the appropriate variable using the List Scrolling Pattern. Then call
the update screen function.
○ Use your debugging skills to identify unexpected behavior and fix your program
○ Comment your code as you go, explaining what each event handler and function does
● Extension Ideas
○ Create a button that deletes unwanted items from the list.
○ Change the list scrolling so that it wraps from the end of the list back to the beginning.

Computer Science Principles 3

 Unit 6 Lesson 4
Step 4 - Submit
Before you submit check the rubric below to make sure your program meets the requirements of the task.

Checklist

Category Checklist Item(s)

Input 🔲 All required inputs have created onEvents.

Storage: Variables and Lists
🔲 Variables and lists are created and appropriately used for all pieces of
information in the app.

Processing: Lists 🔲 The program correctly processes the list for all user interface elements.
Code: Functions
🔲 A function is used which correctly updates all output elements. The
function is called in the appropriate onEvents.

Output 🔲 The screen correctly displays the current reminders in all instances.
Code runs without errors 🔲 No errors are present in the required code.
Coding Comments
🔲 Comments are used to correctly explain the purpose and function of all
onEvents and functions.

Rubric

Category Extensive Evidence Convincing Limited Evidence No Evidence

Evidence

Input onEvents are onEvents are onEvents are onEvents are not
created for all the created for most of created for some of created for any
required inputs. the inputs. the inputs. inputs.

Storage: Variables Variables and lists Variables and lists Some information is There are no
and Lists are created and are created and stored in variables variables or lists
appropriately used appropriately used and lists and which store the
for all pieces of for most pieces of appropriately necessary
information used in information used in updated throughout information for the
the app. the app. the app. app to work correctly.

Processing: Lists The program The program The program The program does
correctly processes correctly processes correctly processes not include or does
the list for all user the list for most user the list for some of not process a list.
interface elements. interface elements. the user interface
elements.

Code: Functions A function is used A function is used A function is used There is no function
which correctly which correctly which updates some which updates the
updates all output updates most of the of the output screen.
elements. The output elements. The elements or the
function is called in function is called in function is only
the appropriate the appropriate called in some of the
onEvents. onEvents. appropriate
onEvents.

Output The screen correctly The screen correctly The screen correctly The screen does not
displays the current displays the current displays some but correctly display any
reminders in all reminders in most not all information. stored information.

Computer Science Principles 4

 Unit 6 Lesson 4

instances. instances.

Code runs without No errors are One or two errors Three or four errors More than four errors
errors. present in the are present in the are present in the are present in the
required code. required code. required code. required code.

Coding Comments Comments are used Comments are used Comments are used Comments are not
to correctly explain to explain the to explain the present.
the purpose and purpose and function purpose and function
function of all of most onEvents of some onEvents
onEvents and and functions. and functions.
functions.

Step 5 - Create Performance Task Writing Practice

This question is based on the project you submitted.

Consider the list in your program code.

Explain how you would need to adjust your program if the list was not included in your code. How would this change
impact the overall functionality of your program?
The program will either have to store variables for each task (bloat), or will only have 1 task stored. It will be very
very bad

Computer Science Principles 5