Embedded Files
Computer Science Discoveries
Computer Science Discoveries
Computer Science Discoveries (CS Discoveries) is a computer science course where students create authentic artifacts (web development, animation, and game design) and engage with computer science as a medium for creativity, communication, problem solving, and fun.
What else are we learning in this class?
We are learn Google Docs, Touch-Typing, and Digital Citizenship.
What else are we learning in this class?
We are learn Google Docs, Touch-Typing, and Digital Citizenship.
Weekly Classwork:
The lessons at code.org are broken down into levels, and the lessons have an assessment level that is graded based on a 4-point rubric. This course fits the model of Equitable Grading and Instruction.
Games, Animations, & Web Pages (HTML)
Games, Animations, & Web Pages (HTML)
Unit 3: Drawing, Animation, and Games
Unit 3: Drawing, Animation, and Games
Lesson 23: Game Over
Lesson 23: Game Over
Lesson 23: Sprite Interactions
Lesson 23: Sprite Interactions
Lesson 21 (Side Scroller Game) - Controlled Jump Code:
Lesson 18 (Interactive Card - Shake Mouse) - Possible Solution:
4/17/25:
Journal Prompt:
Think of one time you gave/received a greeting card to/from someone.
Who was that person?
>
What was the purpose of the card/occasion?
>
What about the card made it specific to that purpose?
>
Lesson 14: Conditionals
Text in Motion:
To make text move horizontally, set a variable like: var Words = 0 (Do not use “text”).
In The Draw Loop add: Words = Words + 1 (use -1 to move text to the left).
In the text command, replace the value of x with Words: text (“your moving text”, Words, 50);
Keep in mind the order of your code:
3/24/25:
Journal Prompt:
List as many types of movement and animations as you can remember from the previous lessons. Describe your animation!
3/20/25:
Lesson 13, Challenge Level 8-b (picture at right):
To make “bubbles” move up in the water, set up a variable:
var bubbles = 400
Draw the bubbles as
noFill();
stroke(“white”);
ellipse(90, bubbles, 25);
ellipse(200, bubbles + 25, 25);
ellipse(290, bubbles + 50, 25);
and use as counter pattern:
bubbles = bubbles - 2;
Lesson 12: Animations, Sprite Movement
The Counter Pattern is used for movement: x = x + 1
Replace the x by a sprite property:
sprite.x, sprite.y, sprite.rotation, sprite.scale, etc.
Game Lab Coordinates & Elements
dot.notation = sprite.rotation (degrees)
Lesson 7: Mini Project: Robot Face Samples
2/3/25:
Journal Entry:
So far, our programs have done the same thing every time that we run them. When would you want a program to do something differently each time it was run?
1/27/25:
Journal Entry:
All computers do four things: input, output, processing, and storage. Where do you see input, output, storage, and processing in Game Lab?
1/13/25:
Journal Entry:
What things are important in communicating about position, color, and order of the shapes in this activity?
Lesson 2: Plotting Shapes
1/7/25:
Lesson 1: Programming for a Purpose
Go go code.org and look at each template. Fill out this Google form explaining why you would recommend each template: https://forms.gle/H2erS4VYPkPiGczn9
Unit 2: Web Development
Unit 2: Web Development
Linking Web Pages:
11/21/24:
Checklist: What else can I add to my web page?
-Lesson 6, Level 12 (Styling Text): Font-family, Text Shadow, Border Around Title...
-Lesson 9, Level 10 (Styling Elements): Borders, Round Corners, Background Img
-You can always add more images & info, like Reviews. Who is your competition?
-Don't forget the Copyright License for all your Pictures!
-Try viewing your web page in a new Browser!
"Landscape" by Kenny Teo (zoompict) is licensed with CC BY-NC-SA 2.0 (By Attribution-Non Commercial-Share Alike).
10/17/24:
Adding images with the <img> tag:
<img src="dog.jpg" alt="My Dog">
img ("image"), tells HTML to include an image
src ("source") says where to find the file
alt ("alternate") is text used if the file cannot be found
10/16/24:
How to find images for your web page:
Go to openverse.org to search for an image
Click on the image and drag it to the Desktop
Rename to _____.jpg (click the file name, wait 1 second, click the file name again)
Copy the license (or attribution)
Go back to code.org and click on "Add Image" from the Desktop:
<img src="_____.jpg" alt="Your Image">
<p>Paste your license inside these tags</p>
10/2/24:
The link tag in index.html:
<head>
<link rel="stylesheet" href="style.css">
</head>
Your style.css file contains rule sets, like:
p {
color: blue;
font-size: 20px;
}
List of HTML Tags
<p>Paragraph</p>
<h1>Biggest Heading</h1>
<h2>Big Heading</h2>
<h3>Medium Big Heading</h3>
<h4>Medium Small Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>
List of HTML Tags
Ordered List (Numbered)
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
List of HTML Tags
Unordered List (Bullet Points)
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
10/9/24:
Journal Entry:
Come up with 3 rules for people who want to use your original, creative work:
1)
2)
3)
9/23/24:
Journal Prompt - HTML Tags
Add this list of Heading HTML tags
<br> Line break
<hr> Horizontal line
To type “<” use this code: <
To type “>”use this code: >
For double quotation marks “ ” use "
To type ampersand “&” (and) use &
9/18/24:
Lesson 4: Journal Prompt
9/18/24:
Lesson 4: Journal Prompt
Quick Write: Digital Footprint
Quick Write: Digital Footprint
Name 2 or 3 social media websites that you have accounts on:
Name 2 or 3 social media websites that you have accounts on:
What kind of information could someone learn about you by looking on these websites?
What kind of information could someone learn about you by looking on these websites?
9/12/24:
Lesson 3: Headings & Lists:
Journal Prompt - HTML Tags:
<!DOCTYPE html> Tells the computer that this is a document written in HTML
9/12/24:
Lesson 3: Headings & Lists:
Journal Prompt - HTML Tags:
<!DOCTYPE html> Tells the computer that this is a document written in HTML
<html> Indicates the beginning of your code written in HTML
<html> Indicates the beginning of your code written in HTML
<head>
<head>
This is where information (sometimes called “metadata”) about your web page goes.
This is where information (sometimes called “metadata”) about your web page goes.
</head>
</head>
<body>
<body>
<p>Contains all the main content of your web page</p>
<p>Contains all the main content of your web page</p>
</body>
</html>
</body>
</html>
9/6/24:
Lesson 1: Exploring Webpages
Journal 3-2-1:
3 - What are 3 topics you might be interested in creating a website about?
2 - What are 2 reasons you think someone might visit a website that you create?
1 - What's 1 thing you’re most interested in learning about creating websites?
9/6/24:
Lesson 1: Exploring Webpages
Journal 3-2-1:
3 - What are 3 topics you might be interested in creating a website about?
2 - What are 2 reasons you think someone might visit a website that you create?
1 - What's 1 thing you’re most interested in learning about creating websites?
Lesson 1: Journal Entry
For each template in Lesson 1, explain why or when you would use that kind of web page:
1 Photo Gallery: I would use it to share my family vacation pictures with my friends.
2 Dominic Lee Resume: I would use this web page to .
3 Maria Bonita Catering:
4 Top 5 Cutest Dogs:
5 Visit Tucson:
Unit 1: Problem Solving & Computing
Unit 1: Problem Solving & Computing
8/26/24
Lesson 6: Four Kinds of Processing:
If/Then: If something is true, then do this.
Comparing: Check if things are the same, or one is bigger than the other.
Finding a Match: Search a list or group of things for a match.
Counting: Keep track of how many of something there are.
8/23/24:
Lesson 5: Input & Output
8/23/24:
Lesson 5: Input & Output
Journal Entry
Think of a new app idea. What does the app do?
>
What inputs and outputs does it need?
>
8/25/24:
Lesson 4: What is a computer?
Journal 3-2-1
8/25/24:
Lesson 4: What is a computer?
Journal 3-2-1
What are 3 ways this computer is different from computers that we use today?
>
What are 2 ways that it is the same?
>
What is 1 thing you think is true of ALL computers?
>
8/19/24:
The Problem Solving Process: Select a problem you have solved and explain each step of the Problem Solving Process.
Type of Problem:
Define:
Prepare:
Try:
Reflect:
The Problem Solving Process
The Problem Solving Process
Define
What problem are you trying to solve?
What are your constraints/limitations?
What does success look like?
Prepare
Brainstorm / research possible solutions
Compare pros and cons
Make a plan
Try
Put your plan into action
Reflect
How do your results compare to the goals you set while defining the problem?
What can you learn from this or do better next time?
What new problems have you discovered?
8/16/24
Lesson 1: Problem Solving
What makes someone a good problem solver?
A good problem solver is someone who is helpful and has social skills; someone that works well with others..
Paper Towers
1st round Tower height: 1 inches
2md round Tower height: 25 1/2 inches
-How did working in a team make this activity easier?
-How did it make the activity more challenging?
-What helped your group overcome these challenges?
Getting-to-Know-You Survey
Getting-to-Know-You Survey
Please fill out this Survey at the beginning of the semester.
Unit 3: Drawings, Animations, and Games
Unit 3: Drawings, Animations, and Games
5/29/24:
Journal Prompt:
Using the blocks we already know how to use, how could we create the sprite interaction we can see in this image? Here are some blocks to consider:
sprite.isTouching(), sprite.velocityX, sprite.velocityY, sprite.x, sprite.y
>
5/22/24:
Journal Prompt:
What is the difference between these two kinds of jumping?
How would you code the second kind of jumping?
>
5/1/24:
Journal Prompt:
An interesting aspect of this animation is that the sprites change when they touch each other. How do you think the computer uses the sprites’ properties to figure out whether they are touching each other?
>
Lesson 17, Level 8 (Challenges) - Possible Solution:
4/10/24:
3-2-1 Review:
What are 3 different things that you've been able to do with conditionals?
What are 2 things that everyone should remember when using conditionals?
What's 1 thing you still want to learn how to program?
4/4/24:
Journal Prompt:
So far, all of the programs you've written run without any input from the user. How might adding user interaction make your programs more useful, effective, or entertaining? How might a user provide input into your program?
4/3/24:
// 1) Use the counter pattern to make the ghost and monster sprites both travel from right to left.
ghost.x = ghost.x -3 ;
monster.x = monster.x -3.05 ;
3/11/24:
Think of all of the sprite properties you’ve learned and what aspect of a sprite they affect.
Journal Prompt:
What kinds of animations could you make if you could control these properties?
Think about adding and subtracting from properties, or even updating multiple properties at the same time.
2/28/24:
Journal Prompt:
Write down as many blocks as you can remember from Game Lab.
Make sure you know what each one does, especially the inputs, or parameters, for each of the blocks.
2/22/24:
Journal Prompt:
What is your own definition of a sprite?
What sprite properties do you know how to use?
What other sprite properties might be useful?
2/14/24:
Journal Prompt:
What is a Sprite in computer science (coding)?
2/14/24:
Journal Prompt:
What is a Sprite in computer science (coding)?
1/23/24:
Journal Prompt:
All computers do four things: input, output, processing, and storage. Where do you see input, output, storage, and processing in Game Lab?
1/23/24:
Journal Prompt:
All computers do four things: input, output, processing, and storage. Where do you see input, output, storage, and processing in Game Lab?
1/18/24:
Journal Prompt:
The ‘rect( )’ block has two inputs that control where it's drawn - the x and y position. If you wanted these commands to draw different sizes of rectangles, what additional inputs would you need to give the blocks?
1/18/24:
Journal Prompt:
The ‘rect( )’ block has two inputs that control where it's drawn - the x and y position. If you wanted these commands to draw different sizes of rectangles, what additional inputs would you need to give the blocks?
1/12/24:
Journal Entry:
Based on what you know about computers, what do you think will be different between telling a person about your image and telling a computer about your image?
1/12/24:
Journal Entry:
Based on what you know about computers, what do you think will be different between telling a person about your image and telling a computer about your image?
Unit 3, Lesson 2: Plotting Shapes
1/11/24:
Journal Entry:
What things were important in communicating about position, color, and order of the shapes in this activity?
What's a way you have seen similar problems solved in the past?
Unit 3, Lesson 2: Plotting Shapes
1/11/24:
Journal Entry:
What things were important in communicating about position, color, and order of the shapes in this activity?
What's a way you have seen similar problems solved in the past?
Unit 3, Lesson 1:
Choosing The Right Interactive Design
Unit 3, Lesson 1:
Choosing The Right Interactive Design
Type your answers in this Google Form
Semester 1 has ended. Please answer 3 questions below:
Semester 1 has ended. Please answer 3 questions below:
Computer Science Week
The Hour of Code (code.org):
New Code:
<a href="hobby.html">My Hobby</a>
11/14/23:
Getting Pictures:
1.- Go to creativecommons.org (Click on Explore CC, Search Portal)
2.- Drag picture to Desktop
3.- Rename picture: click on its name once, wait 1 second, click once again.
4.- Replace the entire file name, from like: "tree.webp" to "tree.jpg"
3.- Go back to code.org
4.- Click on the “Add Image” button
5.- Navigate to the Desktop folder and select the image
6.- Copy/paste the attribution from the source
11/13/23:
Journal Entry - Debugging 3-2-1:
What are the top 3 bugs you have seen so far when making web pages?
What are 2 things you can do while coding to make bugs easier to find and fix?
What is the 1 piece of advice you'd give someone who has a bug?
10/30/23:
Journal 3-2-1:
What are 3 ways you can use images to make your site better?
What are 2 challenges in adding images on a website?
What is 1 way you can respect people’s rights when using images?
10/25/23:
Adding Images:
<img src="elephants.jpg" alt="Family of elephants" width="300">
Code Studio, Level 6
1.- Go to creativecommons.org (Explore CC, Search Portal)
2.- Cross-click on the image, and select: Save Image As
Save your image to the “Downloads” folder
Type the name of the file as: bear.jpg (in case your picture comes as bear.wepb, not supported)
3.- Go back to code.org
4.- Click on the “Add Image” button
5.- Navigate to the Downloads folder and select the image
6.- Copy/paste the attribution from the source
10/18/23:
Come up with 3 rules for people who want to use your original, creative work.
1.
2.
3.
10/3/23:
Quick Write: Digital Footprint
Name 2 or 3 social media websites that you have accounts on:
What kind of information could someone learn about you by looking on these websites?
Journal Prompt:
What is a problem you're good at solving?
Journal Prompt:
What is a problem you're good at solving?
Think about a type of problem you are good at solving
Write down which parts of your process fit into these steps: Define | Prepare | Try | Reflect
4/25-26/23
Journal Prompt #1:
Think of one time you gave or received a card from someone.
Who was that person?
What was the purpose of the card/occasion?
What about the card made it specific to that purpose?
4/25-26/23
Journal Prompt #2:
Example Project - Lesson 17: Interactive Card
1) Which elements appear to use drawing commands?
2) Which elements appear to be sprites?
3) For each sprite, which properties are being updated?
4) Where do you see conditionals being used?
5) Are there elements that you don’t understand?
4/19/23
3-2-1 Review:
What are three different things that you've been able to do with conditionals?
What are two big things that everyone should remember when using conditionals?
What's one thing you still want to learn how to program?
4/13/23
Journal Prompt:
Now that you know how conditionals work, where do you think that they are used in games or other programs and apps that you already use?
3/20/23
Journal Prompt:
Write down as many types of movement and animations as you can remember from the previous lessons.
Journal Entry:
3/16/23
Journal Prompt:
You've seen two ways to create animations with the draw loop: random numbers and the counter pattern
1. What is one type of movement that you'd want to use random numbers for?
2. What is one type of movement that you would want to use the counter pattern for?
3. Are there any movements that might combine the counter pattern and random numbers?
Journal Entry:
2/13/23
Journal Prompt:
What is your own definition of a sprite?
What sprite properties do you know how to use?
What other sprite properties might be useful?
Journal Entry:
1/9/23
Lesson 1: Programming for Entertainment
What is your favorite form of entertainment?
Research how computer science (CS) plays a role in (pick one): Movies, Television, Music, Games, Art, etc. Answer the following questions:
What problem does computer science (CS) solve?
How does CS improve that form of entertainment?
What’s an interesting fact about that field of entertainment?
10/24/22:
Journal Prompt
The link tag in index.html:
<head>
<link rel="stylesheet" href="style.css">
</head>
Your style.css file contains rule sets, like:
h1 {
color: red;
text-align: center;
letter-spacing: 6px;
text-shadow: -2px 2px black;
}
p {
color: blue;
font-size: 20px;
}
9/26/22:
Journal:
HTML - Hypertext Markup Language, a language used to create web pages
HTML Element - A piece of a website, marked by a start tag and often closed with an end tag
HTML Tag - The special set of characters that indicates the start and end of an HTML element and that element's type
Presentation Peer Grading:
Use the link below to grade your fellow students and share any feedback:
5/10-11/22
Lesson 22 - Journal Prompt:
Using the blocks we already know how to use, how could we create the sprite interaction we can see in this program? Here are some blocks to consider:
sprite.isTouching()
sprite.velocityX
sprite.velocityY
sprite.x
sprite.y
4/28/22
Lesson 20 - Journal Prompt:
What was one challenge in making this game?
What is your advice for someone else who has the same challenge?
4/25/22
Lesson 19 - Journal Prompt:
At the beginning of the lesson, you saw that it's possible to do everything that the isTouching block does without using the block at all. What makes this block useful?
4/20/22:
Lesson 18: Velocity
3/24/22
Journal Entry
3-2-1 Review:
What are three different things that you've been able to do with conditionals?
What are two big things that everyone should remember when using conditionals?
What's one thing you still want to learn how to program?
3/23/22:
Lesson 15: Keyboard Input
Research how computer science (CS) plays a role in (pick one): Movies, Television, Music, Games, Art, etc. Answer the following questions:
What problem does computer science (CS) solve?
How does CS improve that form of entertainment?
What’s an interesting fact about that field of entertainment?
Peer Grading:
Use the link below to grade your fellow students and share any feedback:
Using Images - Creative Commons:
To help you comply with copyright law, use the following website for your image needs in any class:
https://search.creativecommons.org/
CC Search is a tool that allows openly licensed and public domain works to be discovered and used by everyone. Creative Commons, the nonprofit behind CC Search, is the maker of the CC licenses, used over 1.4 billion times to help creators share knowledge and creativity online.
Here is how to Submit a Google Drive Resources to an Assignment.
Need to see the full article? Here it is!
Reference:
- Web Lab Documentation: https://studio.code.org/docs/weblab/
- Game Lab Documentation: https://studio.code.org/docs/gamelab/
Page updated
Google Sites
Report abuse