Michael Czechowski
28dd033fca
Update task instructions to explicitly specify all content that appears in the solution, so students can complete lessons without guessing: - semantic-containers: specify "My Website", "Welcome to my site!", "Copyright 2025" - form-structure: specify label text "Name:" and attribute values - input-types: specify label texts "Email:" and "Password:" - input-constraints: specify placeholder text "Enter password" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
103 lines
5.9 KiB
JSON
103 lines
5.9 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-basic",
|
|
"title": "HTML Forms: Basic Inputs",
|
|
"description": "Learn to create forms with various input types",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "form-structure",
|
|
"title": "Form Structure",
|
|
"description": "Every form needs a <kbd><form></kbd> wrapper. Inside, use <kbd><label></kbd> to describe inputs and <kbd><input></kbd> for user data entry.<br><br>The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs for accessibility.",
|
|
"task": "Create a form with:<br>1. A <kbd><label></kbd> with the text 'Name:' and <kbd>for=\"name\"</kbd> attribute<br>2. A text <kbd><input></kbd> with <kbd>id=\"name\"</kbd> and <kbd>name=\"name\"</kbd> attributes",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<!-- Create your form here -->",
|
|
"solution": "<form>\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form",
|
|
"message": "Wrap everything in a <form> element"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Add a <label> for your input"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input",
|
|
"message": "Add an <input> element"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "label", "attr": "for", "value": null },
|
|
"message": "Add a 'for' attribute to your label"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "id", "value": null },
|
|
"message": "Add an 'id' attribute to your input"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "input-types",
|
|
"title": "Input Types",
|
|
"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
|
|
"task": "Create a login form with two fields:<br>1. An email field: <kbd><label for=\"email\">Email:</label></kbd> and <kbd><input type=\"email\" id=\"email\"></kbd><br>2. A password field: <kbd><label for=\"password\">Password:</label></kbd> and <kbd><input type=\"password\" id=\"password\"></kbd><br><br>Optionally wrap each in a <kbd><div class=\"form-group\"></kbd> for spacing.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <!-- Add email and password inputs -->\n</form>",
|
|
"solution": "<form>\n <div class=\"form-group\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n </div>\n <div class=\"form-group\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n </div>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='email']",
|
|
"message": "Add an input with type=\"email\""
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='password']",
|
|
"message": "Add an input with type=\"password\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "label", "min": 2 },
|
|
"message": "Add labels for both inputs"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "submit-button",
|
|
"title": "Submit Button",
|
|
"description": "Forms need a way to submit data. Use:<br><br><kbd><button type=\"submit\"></kbd> - Preferred, flexible content<br><kbd><input type=\"submit\"></kbd> - Simple text-only button<br><br>The button text should be action-oriented (e.g., 'Sign In', 'Register', 'Send').",
|
|
"task": "Add a submit button to the form with the text 'Sign In'.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <div class=\"form-group\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\">\n </div>\n <div class=\"form-group\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\">\n </div>\n <!-- Add submit button -->\n</form>",
|
|
"solution": "<form>\n <div class=\"form-group\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\">\n </div>\n <div class=\"form-group\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\">\n </div>\n <button type=\"submit\">Sign In</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button[type='submit'], input[type='submit']",
|
|
"message": "Add a submit button to your form"
|
|
},
|
|
{
|
|
"type": "element_text",
|
|
"value": { "selector": "button", "text": "Sign In" },
|
|
"message": "The button should say 'Sign In'"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|