This project is completely vibe coded using Claude Opus 5.5

Triangle Lab

A class activity site. Students enter triangle corner coordinates in a sheet, see the triangles in 3D as they type, and submit their figure. The gallery page shows every submitted figure side by side, each on its own tile, and updates live while students submit.

• index.html: the student sheet and 3D preview.
• gallery.html: the class gallery, with a QR code for the student link and teacher controls.

Hosting is free on GitHub Pages, and submissions are stored in Firebase (free Spark plan). Students need no accounts, and the site works from any network.

Try it first (demo mode)

Open index.html in a browser. Until you finish step 3 below, the site runs in demo mode: submissions are saved only in that browser, which is enough to see how it works. On the gallery page, Add 6 sample figures fills the scene, and the teacher sign-in accepts any input.

Setup (about 15 minutes, one time)

1. Put the site on GitHub Pages

1. Create a new repository on GitHub (it can be public) and upload all the files in this folder.
2. Go to Settings → Pages, and under Build and deployment choose Deploy from a branch, then branch main and folder / (root). Save.
3. After a minute, your site is at https://<your-username>.github.io/<repo-name>/.

2. Create the Firebase database

1. Go to https://console.firebase.google.com and click Create a project. Analytics is not needed.
2. Open Build → Firestore Database → Create database. Pick a location in Europe (for example eur3) and start in production mode.
3. Open the Rules tab and replace everything with the contents of firestore.rules.
4. In the rules, replace TEACHER_EMAIL_HERE with the email you will use for the teacher account (step 4). Click Publish.

3. Connect the site to Firebase

1. In Firebase, click the gear icon, then Project settings. Under Your apps, click the web icon </> and register an app (any nickname, without Firebase Hosting).
2. At Add Firebase SDK, choose Use a <script> tag. Ignore the import lines and the initializeApp line, because the site already loads Firebase itself. Copy only the values between the braces of const firebaseConfig = { ... } into firebase-config.js, replacing PASTE_YOUR_API_KEY and the empty strings. If Firebase also shows a measurementId line, you can paste it too or leave it out.
3. Commit the change to GitHub. These values are meant to be public. The database rules are what protect the data.

4. Turn on sign-in

1. In Firebase, open Build → Authentication → Get started.
2. Under Sign-in method, enable Anonymous, which lets students submit without accounts, and Email/Password, which is for you.
3. Under Users → Add user, create the teacher account with the same email you put in the rules, plus a password.
4. Under Settings → Authorized domains, add <your-username>.github.io.

Open your GitHub Pages address. The demo banner should be gone.

In class

1. Open the gallery on the projector and click Show QR code. Students scan it or type the link.
2. Students fill in the sheet and click Submit/update figure. Submitting again from the same browser replaces their earlier figure.
3. Figures appear in the gallery live. Click a tile or a name to zoom in, and use Show all to go back. Fit each scales every figure to fill its tile, and True scale keeps the real coordinates so sizes can be compared.
4. To reset between classes, click Teacher sign-in, sign in, then Clear all submissions (click twice to confirm). You can also delete single figures from the list.

Details

• Rows: each row is one triangle with corners A, B and C as x, y, z. There is no row limit. A single submission can hold up to 10,000 triangles, the most a Firebase document can store.
• What gets drawn: only complete, non-flat triangles are drawn and submitted. Rows with missing values, text, or three corners on one line are skipped. The Area column shows which rows count.
• Pasting: rows paste straight from Excel or Google Sheets, either 9 columns per row or 3 lines of x y z per triangle. Comma, semicolon and space separators, brackets like (1, 2, 3) and decimal commas (1,5) all work. A header row is skipped.
• Drafts: each student's sheet and nickname are kept in their browser, so a page reload doesn't lose work.
• Colors: each row has a Color drop-down. Auto gives each row a different color, and the chosen colors carry over to the gallery.
• Stored data: only the nickname, the coordinates, the triangle colors and a timestamp.