Fresno Unified School District
Coding Category
Coding Event Descriptions
Retro Game Re-quel
Teams of 2-3 students will redesign a retro multi-level arcade game in MakeCode Arcade using javascript code. In the redesign process, students must change the theme including colors, environment, and characters. Students must also add a new game mechanic not seen in the original game style. The final project must be uploaded by 10:00 pm on March 14, 2025, to the TOT App Submission Portal.
Project Details:
You are going to upgrade a retro arcade game from the 80s and market it to appeal to today’s youth. You will use MakeCode Arcade to create your game. Your game should have playing instructions, at least 3 levels, track score, and lives, have a winning screen and a losing screen.
Games to redesign:
- Side Scroller (EX: Sonic the hedgehog)– Create a side-scroller game with your own characters and theme.
- 2D Car/Driving (EX: Spy Hunter) – create a driving game with your own characters (cars) and theme.
- Shooting (EX: Galaga) – create a shooter game with a different theme and characters.
- Sport (EX: Pong) -- create a different 1v1 sports game, such as soccer, basketball, or tennis.
You should also add in a game mechanic not seen in the original game. For example: adding unique powerups.
Technical Requirements:
The game you build will need the following:
|
Structure |
Sprites/Characters |
Code |
|
|
|
Resources:
https://arcade.makecode.com/ -- Scroll down to tutorials.
https://hourofcode.com/microsoftarcade
https://hourofcode.com/codemonkeyjump
Online Project Submission:
To submit your finished game, follow the instructions below.
- Open a new blank Word Document
- Go to your game on make code
- Press the Share icon in the top right corner
- Double-check your game title, make adjustments if needed
- Press the orange Share Project button
- Press the Orange Copy button
- Go back to your word document and paste the
- Press enter so the link becomes a
- Save the word document as a pdf.
- Upload the pdf file to the ToT
Retro Game Re-quel Live Challenge:
Scenario:
Your team of programmers has been hired to fix a video game. The video game has some major errors and needs some serious help. You must quickly identify 3 errors in the video game’s code and then implement a creative solution for each mistake. Then your team will present the modified game to the client (judges) to demonstrate the corrections and explain how these changes improve the game.
Challenge:
Identify 3 errors in the game code and work together to correct the errors. Plan a quick presentation to show the judges how you fixed the errors and improved the game.
Possible errors include (but are not limited to): Sprite movement not working, overlap code not working/not present, score or lives not displaying or counting correctly, win/lose screens not displaying or not present.
Time:
Your team will have:
15 minutes to edit the block code AND plan a presentation.
3 minutes to present your modified program to the judges and explain the corrections.
Scoring:
You will receive up to:
| Points: | Judging Criteria: |
| 6 | Team Collaboration while debugging the game code. |
| 6 | Successfully finding the errors in the game code. |
| 6 | Creatively correcting the errors in the game code. |
| 6 | Explaining your corrections to the judges. |
| 6 | Incorporating all team members into the presentation. |
Getting Help:
Visit the Website Builder Support Files to see a sample Design Document and Event support files.
Contact Alaina Tudman at Alaina.Tudman@fresnounified.org if you have any further questions about this event.
Retro Game Re-quel Reward Points:
| Scoring Breakdown | Description / Formula | Max Points | |
|---|---|---|---|
| Online | Retro Game Re-quel Design Document | 30 | |
| Live Event | Retro Game Re-quel Live Event | 70 | |
Retro Game Re-quel Design Document Scoring Rubric
| Category | Exemplary | Proficient | Partially Proficient | Incomplete |
|---|---|---|---|---|
Should have a Playable character(s), enemies, and food/powerups. |
1 or more playable character, 5 or more unique sprites in game as enemies, powerups or obstacles |
1 or more playable characters, 3 or 4 unique sprites as enemies, powerups, or obstacles |
1 or more playable characters, 1 or 2 unique sprites as enemies, powerups, or obstacles |
No playable character |
Start Screen with directions |
Start screen is full screen, with directions that explain ALL controls for the game, and game objective |
Start screen is full screen, has unclear directions for controls or objective. |
Start screen is full screen, and is missing either directions for controls or missing game objective |
No start screen |
Game End Screens Win and Lose screens |
There is an obvious win screen and lose screen. Both screens have backgrounds, visual effects and sounds |
Win screen or lose screen is ambiguous, looks and feels too much like the |
Missing a win screen or a lose screen. |
No win screen or lose screen |
Displaying score and lives |
Display both score and lives, score/lives update (+/-) as appropriate |
Only Score display, score updates (+/-) as appropriate |
Score displays but does not update (+/-) as appropriate |
No score display |
Levels--unique levels that change in appearance or difficulty |
3 or more distinct levels with background change and/or difficulty change. |
2 distinct levels with background change and/or difficulty change. |
Level change is either ambiguous or does not exist. |
No levels to play |
Visual/Audio Background, theme, music |
Game’s backgrounds, music/sound effects and theme is unifying, and unique (does not copy an existing retro game) |
Game’s backgrounds, music/sound effects and theme is unique, but not unifying |
Game’s backgrounds, music/sound effects and theme is not unique, it mimics an existing retro game. |
Game’s backgrounds, music/sound effects and theme is neither unique or unifying. |
Variables |
Variables are named uniquely for score, lives, and sprites, they are used consistently throughout code. (eg – variable does not say default mySprite) |
Variables are not named uniquely for score, lives and sprites (eg – variable says default of mySprite), but are used consistently through the code |
Variables are not consistent or unique through code. Errors in code prevent characters, score, or lives from working correctly. |
No variables used |
Character movement |
Character moves with D-pad and/or A/B buttons as expected. |
Character does move, but movement may be restricted or not working correctly |
Character movement code is present, but has errors preventing character movement |
Character does not move |
Sound Effects |
Unique sound effects used for win/lose, encountering powerups and enemies. |
Some sound effects missing, such as no sound effect for win/lose. |
Many sound effects missing. |
No sound effects used. |
Sprite Overlap |
Used sprite overlap blocks for enemies, obstacles, and powerups, where something happens such as points, death, or other effects. |
Used some sprite overlap blocks, one player type (enemy/food/obstacle) does not have an overlap block, or block has errors and does not work |
Used some sprite overlap blocks, one player type (enemy/food/obstacle) do not have an overlap block, or block has errors and does not work |
No Sprite Overlap blocks are used |
Retro Game Re-quel Live Event Scoring Rubric
| Category | Exemplary | Proficient | Partially Proficient | Incomplete |
|---|---|---|---|---|
Team actively collaborates to debug |
All members on team actively work together to solve the errors. |
Most members on team actively work together to solve the errors. |
1 member is clearly doing the work. |
No show |
Team presents together. |
All members of the team participate in the presentation |
Most members on the team participate in the presentation |
1 member is presenting |
No presentation |
Finding the errors in the game code |
3 or more errors are found. |
2 errors are found. |
1 error is found. |
No errors were found. |
Game End Screens Win and lose screens |
3 or more errors are corrected in a way that makes the game playable. |
2 errors are corrected in a way that makes the game playable. |
1 error is corrected in a way that makes the game playable. |
No errors were corrected. |
Displaying score and lives |
Display both score and lives, score/lives update (+/-) as appropriate. |
Only Score display, score updates (+/-) as appropriate |
Score displays but does not update (+/-) as appropriate. |
No score display. |
Navigation
Web Builder
Teams of 2-3 students will build a 3-page functional website based on specifications from their small business client (fictional). The website will be coded in HTML and CSS and needs to include common elements (see more below) and style rules. The final project must be uploaded by 10:00 pm on March 14, 2025, to the TOT App Submission Portal.
Please copy and paste your website's link into a Word document and submit that to the ToT App Submission Portal.
Common Core Standards:
|
4C’s |
||
|
CCSS.ELA-LITERACY.W.8.1 |
2-AP-11 |
Communicate |
|
CCSS.ELA-LITERACY.W.8.2 |
2-AP-15 |
Collaborate |
|
CCSS.ELA-LITERACY.W.8.7 |
2-AP-18 |
Critically Think |
|
|
2-IC-20 |
Create |
Technical Requirements:
The website you build for any of the businesses will need the following:
|
Content |
Structure |
Style |
|
|
|
Resources:
You can use any online (cloud-based) HTML editor to build your website. You will need to submit an active link to your website for your final submission.
- code.org’s weblab or codepen.io can host your website (there are many other possible hosts as well)
- Google Fonts is a great place for free fonts and Google color picker for getting color codes.
- Web Safe colors list
- Coolors.co or Paletton.com can help you find a color scheme.
- Freepik.com, Pexels, and Unsplash will give you access to royalty-free stock photos.
- W3schools can show you how to create social media buttons
- Free Logo Design will help you build your company’s logo.
- FontAwesome provides icons for social media.
- Favicon will help you create the icon for your tab.
Learn HTML and CSS
- Khan Academy has a free course on HTML and CSS
- W3schools has short tutorials on any HTML or CSS topic
- CodeHS has a free 1-hour course on HTML and CSS
- Codecademy has free demos for HTML and CSS
- Free Code Camp has guided tutorials creating web pages in HTML and CSS
Website Builder Design Document:
Project Details:
You have been hired by one of the following small businesses to build a website using HTML and CSS for their business. You will need to consider their business in your content and design choices. You will work on a team with the following roles: Programmer, content developer, and style designer. (In teams of two, one person will take on two roles).
Content Developer: creates the overall layout and content for each page of the website. Decides on where pictures, navigation bar, and written content will go. Responsible for creating the website mockup document.
Style Designer: Decides on the color scheme including submitting color codes to be used. Chooses fonts that will be used and work with the content developer on an organized layout. Writes the CSS code and submits it to the programmer to add to the website
Programmer: Uses the content developer’s mockup to code the website on the web hosting platform. Links the Style Designer’s CSS code to the website.
- Business 1:A bakery. This business owner makes cakes, cupcakes, and cookies to order. They will need a main page with their address and phone number, a gallery page with their different baked goods, and a contact/order page.
- Business 2:A Mexican Restaurant. This restaurant uses abuela’s recipes to make their menu. They pride themselves on their tradition and heritage of Mexican culture. They will need a main page, a menu page, and a contact/order page.
- Business 3: A shoe store. This business sells high-end shoes for men, women, and children at discount prices. They will need a main page all about their business, a page for their products, organized by men, women, and children, and a page for sales/upcoming products people can look forward to.
Website Builder Live Challenge:
Scenario:
Your team of programmers has been hired to fix a local business’ website. The website has some major errors and needs some serious help. You must quickly identify 3 errors in the website’s code and then implement a creative solution for each mistake. Then your team will present the modified website to the client (judges) to demonstrate the corrections and explain how these changes improve the website.
Challenge:
- Identify 3 errors in the website code and work together to correct the errors.
- Plan a quick presentation to show the judges how you fixed the errors and improved the website.
Possible errors include (but are not limited to):
- Images not loading/displaying correctly
- Images too large/small
- Elements having incorrect CSS code. (Paragraphs displaying like Headers, etc)
- Broken links
- Incorrect tag use and syntax
Time:
Your team will have:
- 15 minutes to edit the HTML and CSS code AND plan a presentation
- 3 minutes to present your modified program to the judges and explain the corrections
Scoring: You will receive up to:
| Points | Judging Criteria |
| 6 pts | Team Collaboration while editing the website. |
| 6 pts | Successfully correcting the errors in the website. |
| 6 pts | The creativity of your corrections to the website. |
| 6 pts | Explain your corrections to the judges. |
| 6 pts | Incorporating all team members into the presentation. |
Tips:
As with most of the Live Event challenges, teams will need to be very careful with time management. They should allocate at least a few minutes to review what they did and prepare for the presentation to the judges. It is highly recommended that a note taker is chosen to keep track of what changes are made so that a clear and concise presentation can be made.
Getting Help:
Coaches visit the Website Builder Support Files to see a sample Design Document and Event support files.
Contact Alaina Tudman at Alaina.Tudman@fresnounified.org if you have any further questions about this event.
Website Builder Reward Points:
| Scoring Breakdown | Description / Formula | Max Points | |
|---|---|---|---|
| Online | Website Builder Main Event | See Website Builder Main Event Rubric | 70 |
| Live Event | Website Builder Live Challenge | See Website Builder Live Challenge Rubric | 30 |
Website Builder Main Event Scoring Rubric
| Category | Exemplary | Proficient | Partially Proficient | Incomplete |
|---|---|---|---|---|
Name, Logo, About, & Contact Info |
Website contains all elements; business Name, Logo, About and Contact Info. |
Website contains 3 of the elements – Name, Logo, About, and Contact Info. |
Website contains 2 of the elements –Name, Logo, About, and Contact Info. |
Website contains one or no elements - Name, Logo, About, and Contact Info. |
Site includes either a menu or items price list. |
Contains a minimum of 10 Menu/Price list items or 5 Photo packages. |
Contains 5-10 Menu/Price list items or 3 Photo packages. |
Contains 3-5 Menu/Price list items or 2 Photo packages. |
Contains less than 3 items in the Menu/Price list or no Photo packages. |
Social media icons are included and linked to the corresponding Social Media Home Page. |
Includes more than one Social Media icon and they are working correctly. |
Includes one working Social Media icon/button. |
Includes g Social Media icon/button but it doesn't work. |
There are no Social Media Buttons or Icons. |
The site contains an obvious Navigation Bar or Site Map that allows users to move from page to page and is easy to identify on all pages. |
Navigation Bar/Menu is organized, user friendly, & easy to access. |
Navigation Bar/Menu is somewhat organized, user friendly, & easy to access. |
Navigation Bar/Menu has some organization, but is not user friendly, & easy to access. |
There is no Navigation Bar/Menu on the website. |
The site contains multiple pages and they are all correctly linked. |
The website contains 3 pages that are linked correctly in the Navigation Bar/Menu on every page. |
The website contains 2 pages that are linked well in the Navigation Bar/Menu on both pages. |
The website contains 2 pages that are linked in the Navigation Bar/Menu one page but not the other. |
The website has one page or more than one page, but no links to connect the pages. |
The website should include Header tags and demonstrate proper use of them throughout the website. |
The website contains only one main header (H1) and at least one other header (H2 - H6) per page. |
The website only contains main tags (H1) and is hard to distinguish tittle importance. |
There are no header tags on the website, but tittles stand out by the use of color or different font |
The website looks more like an essay. |
Website should include paragraph and span tags and demonstrate proper use of them. |
The code contains appropriate use of both paragraph & span tags throughout the site. |
The code contains a combination of paragraph and span tags used appropriately. |
The code contains a few paragraphs and span tags but are not used appropriately. |
There are no paragraph or span tags in the code at all. |
Website contains business related images. |
It includes photos that are relevant to the business. |
It includes some photos that are relevant to the business. |
It includes only one photo that is relevant to the business. The rest are unrelated. |
There are no photos on the website. |
Can be ordered, unordered or both. |
Website contains at least 2 lists and they are used correctly. |
Website contains one list and is used correctly. |
Website contains at least one list but is not used correctly. |
Website contains no order or unordered lists. |
Div tags are used properly in the website. |
Code contains 4 or more “div” tags per page. |
Code contains 3-2 “div” tags per page. |
Code contains only 1 “div” tags per page. |
Code contains other tags to section the website. |
The "img" tag creates a holding space for the referenced image. The "alt" specifies an alternate text for an image. |
Image tags are used appropriately throughout the website code and they all contain “alt” tags. |
Image tags are used throughout the website code but only some contain “alt” tags. |
Image tags are used throughout the website code but “alt” tags are missing. |
Image tags are used in the website code but are unorganized or not working and it does not contain any “alt” tags. |
Links should take user to outside resources or websites. These are separate from navigation menu. |
Website contains 3 or more links that take user to outside resources. |
Website contains 2 or more links that take user to outside resources. |
Website contains 1 link that take user to outside resources. |
Website contains no links that take user to outside resources. |
Website uses a 2-4 color palette. |
Color Scheme contains 4 or more colors that flow together to create a visually pleasant and professional website. |
Color Scheme contains 3 colors that flow together to create a somewhat visually pleasant and professional website |
Color Scheme contains 2 colors that create a somewhat visually pleasant and professional website. |
Color Scheme contains 1 color and website is not visually pleasant. |
Website contains different fonts and colors to enhance content. |
Website contains a combination of font styles and colors that are visually pleasant and is easy to read. |
Website contains a combination of 1 -2 font styles and 1-2 colors and is easy to read. |
Website contains at least one font style or one color but is not easy to read |
Website font styles or colors are visually pleasant and are hard to read. |
The "class" selector selects elements with a specific class attribute. |
Website code uses “class” selectors throughout the code correctly. |
Website code uses some “class” selectors throughout the code correctly. |
Website code uses “class” selectors throughout the code but are not used correctly. |
Website code does not use “class” selectors in the code at all. |
A website layout is a pattern (or framework) that defines a website's structure. It has the role of structuring the information present on a site both for the website's owner and for users. |
Website is well organized and structured. The information on the site is well presented has a professional pattern or framework. |
Website is organized and has some structure. The information on the site has a pattern or framework. |
Website is somewhat organized, has little structure. The information on the site has little to no pattern or framework. |
Website’s layout is confusing and unorganized. There is no defined pattern or framework. |
Website Builder Live Challenge Scoring Rubric
| Category | Exemplary | Proficient | Partially Proficient | Incomplete |
|---|---|---|---|---|
The collaboration between team members while they are editing the website. |
The team was highly collaborative throughout the process. |
The team was mostly collaborative. |
The team was somewhat collaborative. |
The team had little to no collaboration. |
3 or more errors were successfully corrected. |
Only 2 errors were corrected. |
Only 1 error was corrected. |
None of the errors were corrected. |
|
The corrections were very creative and enhanced the website. |
The corrections were creative solutions. |
The corrections were very basic. |
The corrections were very basic and incomplete. |
|
The team was able to very clearly explain their corrections. |
The team explained their corrections. |
The team only mentioned some of their corrections. |
The team did not discuss their corrections at all. |
|
All team members participated equally during presentation. |
All team members participated, but not equally. |
One team member did not speak during presentation. |
2 or more team members did not speak. |