Labeled Boxes
by Anonymous · ⭐ 1 · 🍴 0
📇 Put multiple values into a single box with labels! Change hp, coin, and name in the hero box using commands and watch only the named slot change. 🏷️Name ↔ 🔢Index shows how hero.hp becomes hero[1] with identical values — numbers must be memorized, but names are easy to read. 🎒 Boxes Inside Boxes turns bags and pets into boxes themselves! Chain labels together to get gold coins and see undefined appear when calling missing names. 🗂️ Multiple Cards lets you make rules to pick specific ones from 5 cards — watch the for loop move through cards one by one. This app was built with code too · Remix it to create your own cards!
About this app
Boxes with Name Tags is an interactive educational web app designed to introduce beginner coders to JavaScript data structures. Through hands-on exercises, learners explore key-value object properties, compare named keys with numbered array indices, traverse nested objects, and filter lists of objects using loop conditions. It visually demonstrates how code accesses and manipulates structured data in real time.
Use cases
- Beginner programmers learning JavaScript objects and key-value concepts
- Students practicing nested data access and loop filtering visually
- Educators looking for an interactive visual aid for programming basics
Features
- Key vs Index Mode: Compare named object properties (hero.hp) against array indices (hero[1])
- Command Executor: Run commands to update individual box values in real time
- Nested Object Explorer: Chain property calls like hero.bag.gold and observe undefined results
- Interactive Loop Visualizer: Filter hero card lists with custom for-loop rule conditions
- Multi-language Support: Practice coding concepts with sound effects and a localized interface