14.02 Revised Interactive Web Experience Assignment

Assignment Deliverables

1. Screenshot or Screen Recording showing your revised interactive web experience running with the new assets visible/audible.
   • Label file YYYY-MM-DD Lastname Firstname revised interactive web experience (.png, .jpg, .mp4)
2. Active URL to your hosted interactive web experience, n̶o̶t̶ t̶h̶e̶ l̶o̶c̶a̶l̶h̶o̶s̶t̶ U̶R̶L̶ o̶n̶ y̶o̶u̶r̶ m̶a̶c̶h̶i̶n̶e̶
   • Label file YYYY-MM-DD Lastname Firstname revised interactive web experience url (.png, .jpg, .mp4)
   • You may paste the URL into the comment section of the assignment submission page

Assignment Overview

Move beyond the “prototype” phase of the previous natural language programming assignment. Similar to the development of creative, artistic work,software development is rarely one and done. It requires iteration, refinement, and the integration of bespoke artist created assets such as imagery, animation, and sound.

In this assignment, you will take your existing natural language coded web experience, or start a completely fresh project, and replace placeholder elements such as colored rectangles, blank background, and basic beeps with original content created by you. You will continue to use GitHub Copilot in Visual Studio Code to implement these changes, focusing on how to prompt an Large Language Model or “AI” to handle external files and assets.

Interactive Web Experience?

Interactive web experience simply means any webpage that responds to user input such as clicking, hovering, scrolling, typing, or microphone input to change the state of the audio or visuals. It does not need to have a “win state,” a “score,” or “enemies.”

Here are four categories of experiences you can build with GitHub Copilot and your original assets.

Interactive Narrative

Instead of a game, create a story that advances as the user interacts. This is excellent for students who want to focus on illustration and voice-over. This could take the form of a digital comic book or poetry reader where the environment changes based on the user’s progress. Scrolling down the page or clicking Next might advance the story.

Backgrounds could fade from day to night or characters could change expressions as the mood shifts. Ambient noise such as rai or city traffic could fades in on certain sections. Specific voice over lines could play at specific moments.

Process

1. Make a list of things to change, remove, and add to your natural language coded web experience.
   • What placeholder graphics look boring?
   • What physics feel floaty or what gameplay is non responsive?
   • Does it work on mobile?
   • Do you want to add computer vision face detection or pose detection?
   • What sound effects are missing. such as jump sounds, background ambience, button clicks?
2. Spend time creating original visual and auditory content to add to the site. Spend minimum 1 hour creating original content. This includes recorded sounds, images sprites, vector graphics, text and story information, voice over, music, and any other type of experiential digital content made by you.
3. File management and organization is important when working on digital projects.
   • Save images with descriptive, lowercase names without spaces such as player-idle.png or background_forest.jpg This helps you stay organized and helps the LLM understand your content better than untitled.jpg It is also helpful to make a folder such as img or assets to put content files in.
4. Spend a minimum of 1 hour using Copilot in visual Studio code to create an interactive web experience. This could be a game, an abstract sequence of animations, a physics simulation, a poetry evaluator, or any other interaction that can occur via a webpage. Try some of the example prompts below or modify them to fit your project.
   • Change the red player rectangle to use the image located at 'assets/images/hero_sprite.png'
   • Play the sound file 'assets/audio/jump_sfx.mp3' whenever the spacebar is pressed.
   • Create a CSS animation that rotates the logo image when the user hovers over it.
   • Adjust the physics so the character falls faster, and play 'thud.mp3' when they hit the ground.
5. Use your content in the webpage.
6. Put sound files, image files, and video files into the folder of your project.
7. Give instructions to copilot to use those specific files on your web program.

Assignment Resources

• GitHub Copilot Model Selection
• Copilot Web Game
• Add Image Sprite

Sound Resources

• Create Sound Effect in Adobe Audition  
• Export MP3 from Adobe Audition  
• Add Sound Effects with GitHub Copilot  
• Set Audio Hardware Adobe Audition  
• Create New Audio File Adobe Audition  

Troubleshooting

1. What to do when Copilot gets stuck?
   • Sometimes Copilot hallucinates, makes up code that doesn’t exist, or gets stuck in a loop Delete the last block of code it gave you and rephrase your request. Make sure the file you are referencing, the index.html or styles.css is actually open in a tab in Visual Studio Code so Copilot sees the context. Sometimes the classic IT trick of turning it off and on again by reloading the Visual Studio Code window helps clear the context.

Example 1 Prompt Games

Grading Rubric