Introduction to JavaScript: Remix JavaScript Coffee Co. Roleplay Game
Overview
Introduce your students to JavaScript with this hands-on classroom activity! Students will remix a pre-built roleplay game to create a custom café or restaurant theme. This activity teaches how to dynamically populate a menu, calculate prices using arrays and functions, and personalize a website with creative design choices. Perfect for students with basic HTML and CSS knowledge, this project highlights the power of JavaScript while fostering creativity and problem-solving skills.
Remix a JavaScript Coffee Co. Roleplaying Game!
Teaching Notes
This activity assumes students have basic knowledge of HTML and CSS. If students are new to JavaScript, take some time at the start of the class to explain:
- What JavaScript is and how it differs from HTML and CSS.
- Why JavaScript is useful for making websites dynamic.
- Key concepts like arrays, objects, and functions (using simple examples).
You can guide students through the first few steps of the activity as a class. Encourage experimentation and emphasize that this is a creative project. Provide support as needed while students work individually or in pairs.
Instructions
Access the Example Project:
- Open the project: JavaScript Coffee Co. Spy Roleplay Game.
- Click "Remix this project" to create your own copy.
Understand the Code:
- The provided project includes elements you haven’t yet covered. Focus on editing text, images, CSS, and JavaScript arrays.
- Notice how JavaScript dynamically populates the menu and calculates combo prices. These are the key features you’ll customize.
Customize the HTML:
- Change the
<title>
tag (e.g., "Burger Bistro Combo Game"). - Replace the
<h1>
in the<header>
with a new title matching your theme. - Update the
src
in the<img>
tag to add a unique character image (see step 6).
- Change the
Edit the Menu and Combo Deals:
- Open
script.js
and update:- The
menuItems
array to include your new menu options. - The
prices
object to reflect the prices of your items. - The
calculateCombo
function to align with your combos.
- The
- Explain to students how JavaScript arrays and objects work together to dynamically update the page.
- Open
Style Your Project:
- Open
style.css
to adjust the design:- Change the background color and text colors to match your theme.
- Update the chalkboard menu styling in
#menu-board
, if needed.
- Open
Generate a Character Image:
- Use ChatGPT to create a character image. Provide specific details, such as dimensions (250x250 px) and file type (JPG).
- Sample prompt:
Create an illustration of a character for a café-themed roleplaying game. The character is a cheerful barista wearing a retro 1950s diner outfit. They have short, wavy hair, a striped apron, and are holding a steaming cup of coffee. The background is a cozy café setting with a chalkboard menu. Make the image a 250x250 pixel JPG for easy use on a website.
Test Your Project:
- Check that your menu displays correctly, combo buttons work as expected, and the design is responsive to screen resizing.
Discussion and Reflection
Once the project is complete, discuss or write about:
- What would happen if the menu was populated using only HTML instead of JavaScript? Why is JavaScript useful here?
- What challenges did you face while working with JavaScript, and how did you solve them?
- Why did you choose your theme and design elements? How do they reflect your personality or interests?