Stack and Queue Simulator¶
Run the Stack and Queue Simulator MicroSim Fullscreen
Edit in the p5.js Editor
About This MicroSim¶
LIFO versus FIFO is a difference in time order, which code output alone
cannot show. This simulator makes it a controlled experiment: one Add button
feeds the identical item to both structures, so the only difference students
see is the exit. stack.pop() lifts the newest plate off the top;
queue.pop(0) releases the oldest item from the front. The removal-history
strips give the punchline — the stack returns items reversed, the queue in
original order.
Learning objective: The student will be able to predict the removal order of items from a stack versus a queue and match each to its list operations.
- Bloom's Taxonomy (2001): Understand → Apply — compare, demonstrate, predict
- Interaction pattern: button-driven push/pop with a side-by-side controlled comparison
How to Use¶
- Click Add Item four times — the same letters join both structures.
- Predict which letter each Remove button will release, then click and check the operation line.
- Empty both structures and read the two history strips: reversed versus original order.
- Note the code: both use
append()to add; only the removal differs.
Iframe Embed Code¶
You can add this MicroSim to any web page by adding this to your HTML:
1 2 3 4 | |
Lesson Plan¶
Grade Level¶
Upper elementary and middle school (ages 10-14), Chapter 16 (Lists — Methods and Patterns); revisited in Chapter 30
Duration¶
10 minutes
Prerequisites¶
- List append() and pop() (Chapter 16)
Activities¶
- Controlled experiment (4 min): Add A-D, predict both first exits, remove one from each, verify.
- History race (3 min): Empty both structures; students write the two history orders and name the patterns (LIFO/FIFO).
- Real-world match (3 min): Students match scenarios to structures: undo button (stack), print queue (queue), browser back button (stack), lunch line (queue).
Assessment¶
- Student predicts the removal order for both structures after any sequence of adds
- Student can state which list method makes a stack vs a queue
- Student names one real-world example of each
References¶
- Python Tutorial — Using Lists as Stacks and Queues — official documentation
- p5.js — the JavaScript library used to build this MicroSim