CSS 143 Alto Teaching Example

This repository is a clean, shareable version of one CSS 143 interactive example. It includes only Alto: a Phaser and Express demo for constructor overloading, overloaded actions, default arguments, and getters.

The original teaching set has more examples, but this public repository is intentionally small so it can be forked, cloned, and adapted without carrying unrelated course material.

What Is Included

• ui/alto: the browser-based Phaser interaction.
• api/src/routes/alto.js: the Express API endpoints for Alto state changes.
• api/src/data/alto.js: the concept data used by the API.
• ui/shared: shared page framing used by the demo.
• compose.yaml: a local Docker Compose setup for the UI and API.

Run Locally

docker compose up -d --build

Open:

• Alto demo: http://127.0.0.1:14320/alto/
• Landing page: http://127.0.0.1:14320/
• API health check: http://127.0.0.1:14320/health

The API is available to the browser through the UI container, so only port 14320 is exposed on the host.

To stop it:

docker compose down

Clone or Fork It for a New Example

Use this repository as a starter shape for another course concept.

1. Fork the repository on GitHub, or clone it locally:

   git clone https://github.com/YOUR-USER/YOUR-REPO.git
   cd YOUR-REPO

2. Rename the example path if you want something other than alto.

   Update:

   • ui/alto
   • api/src/routes/alto.js
   • api/src/data/alto.js
   • api/src/server.js
   • ui/nginx.conf
   • ui/alto/config.js

3. Replace the interaction with one focused concept.

   Keep the surface area small: one concept, one visual model, a few meaningful actions, and clear state changes.

4. Run the project and test the full loop.

   Confirm the page loads, API calls succeed, state updates are visible, and the interaction supports the explanation you want students to write.

Why Build Examples This Way?

This format is meant to be AI-resistant, not AI-proof or anti-AI.

Students begin with a running artifact. They have to interact with it, watch what changes, compare cases, and connect the observed behavior back to Java concepts. A plain text prompt can often be pasted into an AI tool without much thought; a stateful visual example asks the student to form a problem-solving story first.

That creates several benefits:

• Students slow down and observe before answering.
• The task rewards explanation over answer collection.
• AI can still be used productively for clarification, comparison, debugging, and feedback.
• Instructors can ask questions about concrete behavior rather than generic definitions.
• The example can expose conceptual tension that leads naturally into discussion.

The goal is not to block tools. The goal is to make the productive path the easiest path: inspect the behavior, explain what happened, and use AI only when it helps sharpen that explanation.

Goal and Tenets

The goal is to give students a concrete artifact they must inspect before an answer becomes useful. A strong prompt can ask students to observe, compare, explain, and revise; the interaction gives those verbs something real to attach to.

• Copy-paste is brittle. Plain assignment prompts can often be pasted into an AI agent and turned into working code almost immediately.
• Interaction restores thinking. A running example asks students to observe behavior, interpret state, and reason through the prompt before outsourcing explanation.
• Tools should tutor. AI is most useful here when it helps students clarify observations, compare cases, debug assumptions, and improve explanations.

What Makes It AI-Resistant

This repository is not trying to be AI-proof. The point is to make the honest workflow easier than the shortcut: spend time thinking about the problem, interact with the exercise, and solve the logic instead of trying to wrangle an AI agent that will struggle to inspect and understand the activity.

• Phaser requires real UI interaction. The exercise runs as a canvas-based UI, so there is no useful assignment prompt sitting in the DOM and no simple copy/paste path that captures the student's observations.
• Relevant logic lives on the backend. The frontend renders state and sends actions; the concept rules are handled by API routes. Students still need to design their own homework solution rather than extract a ready-made answer from the page.
• Cloudflare AI and bot detection adds friction. Deployed versions can use Cloudflare's bot and AI crawler controls to make automated scraping and agent browsing less reliable.
• AI prompt injection appears on every page. The shared course notice gives AI tools explicit instructions to support explanation, debugging, and learning goals rather than returning final homework code.

Adapting the Pattern

Good candidates for this format have visible state and a small set of actions. For example:

• Object construction and default values.
• Method overloading or overriding.
• Queue, stack, or list operations.
• Exception paths and recovery.
• Sorting or searching steps.
• Interface-driven behavior.

When creating a new example, design the student task around prompts like:

• What changed after this action?
• Which case behaved differently, and why?
• Which Java concept explains the behavior?
• What would you change in code to produce a different result?

Those prompts make the interaction part of the assignment instead of decorative context.