Introduction Form Instructions
Build a form that lets a visitor create their own introduction page - Part 1 collects the data and rebuilds the page on submit; Part 2 adds raw HTML, JSON, and XML output. AI expected on both. Your course's assignments page says which modules these two parts land in, and whether it wants them together or apart.
The Acid Test (How We Evaluate Part 1)
- We follow your link and click Submit untouched - the result must be indistinguishable from your real introduction page (spacing, colors, fonts, footer links) except the h2 says "Introduction Form" and the title matches.
- We edit prefilled values - the new values must appear on submit, including a different uploaded image (the most-missed feature: your image is the default, but an upload overrides it).
- We clear the form - optional fields may stay blank; the rest must be required.
- We add and remove courses - JS must add course field groups (department, number, name, reason) with a delete button beside each.
Setup & Form (Part 1)
- introduction_form.html in your course site folder, linked from your common primary menu (one place - your header is a component by now). Title and h2 follow the usual pattern.
- h3: "Please submit the form below."
- One form asking for everything on the introduction: first/middle(opt)/nickname(opt)/last name, acknowledgment statement and date, mascot adjective and animal, divider, picture (defaulting to yours, uploadable), picture caption, personal statement, the 7 main bullets, courses with department/number/name/reason each, quote and author, funny thing (opt), something to share (opt), and your 5 footer links.
- Prefill your values with the value attribute; add placeholders that show when cleared.
- Buttons: Submit (type="submit"), Reset (type="reset"), and Clear (type="button", empties every field).
- scripts/introduction.js: prevent submit without required fields, prevent the default page refresh, reset progress, add/remove course rows, and on submit swap the form for the built introduction - with a reset link at the bottom so a visitor can go again.
Generate Output (Part 2)
- Add buttons - Generate HTML, Generate JSON, Generate XML, in that order.
- Each appends a text area at the bottom holding the raw code for whatever is currently in the form - nicely formatted JSON, the HTML itself as code, and an XML representation. Change the form, click again, and the output reflects it.
- Everything from Part 1 must keep working alongside.
Submitting (Each Part)
- The URL of your form page.
- A brief summary of what you did, what you asked AI to do, and impressions.
- Peer reviews: these instructions as a GO/NO-GO checklist on at least two classmates who don't already have two reviews.
What gets checked: the page is in the primary nav; the form has 15+ inputs with prefilled values and placeholders, a file-upload input, Submit/Reset/Clear buttons, and scripts/introduction.js; from Part 2 on, the Generate HTML/JSON/XML buttons. The submit-result fidelity is judged by eye against your real introduction.