From 1804c5a8cc03c90855b942551e083986cbbf8004 Mon Sep 17 00:00:00 2001
From: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
Date: Wed, 14 Aug 2024 23:36:36 +0200
Subject: [PATCH] chore(curriculum): convert survey form into lab (#55701)
Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
---
client/i18n/locales/english/intro.json | 5 +-
.../lab-survey-form/index.md | 9 +
.../_meta/lab-survey-form/meta.json | 11 +
.../66a8e9ca371965b6ef5f2989.md | 601 ++++++++++++++++++
4 files changed, 625 insertions(+), 1 deletion(-)
create mode 100644 client/src/pages/learn/front-end-development/lab-survey-form/index.md
create mode 100644 curriculum/challenges/_meta/lab-survey-form/meta.json
create mode 100644 curriculum/challenges/english/25-front-end-development/lab-survey-form/66a8e9ca371965b6ef5f2989.md
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 2d9e37ff2cd097..e77e7540d1898c 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -1738,7 +1738,10 @@
"pwwg": { "title": "15", "intro": [] },
"cfgp": { "title": "16", "intro": [] },
"gesh": { "title": "17", "intro": [] },
- "cqha": { "title": "18", "intro": [] },
+ "lab-survey-form": {
+ "title": "Build a Survey Form",
+ "intro": ["For this lab, you will create a survey form."]
+ },
"wgot": { "title": "19", "intro": [] },
"workshop-final-exams-table": {
"title": "Build a Final Exams Table",
diff --git a/client/src/pages/learn/front-end-development/lab-survey-form/index.md b/client/src/pages/learn/front-end-development/lab-survey-form/index.md
new file mode 100644
index 00000000000000..d9601d65d9e74d
--- /dev/null
+++ b/client/src/pages/learn/front-end-development/lab-survey-form/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Survey Form
+block: lab-survey-form
+superBlock: front-end-development
+---
+
+## Introduction to the Build a Survey Form
+
+For this lab, you will create a survey form.
diff --git a/curriculum/challenges/_meta/lab-survey-form/meta.json b/curriculum/challenges/_meta/lab-survey-form/meta.json
new file mode 100644
index 00000000000000..d2fa458f816591
--- /dev/null
+++ b/curriculum/challenges/_meta/lab-survey-form/meta.json
@@ -0,0 +1,11 @@
+{
+ "name": "Build a Survey Form",
+ "blockType": "lab",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "dashedName": "lab-survey-form",
+ "order": 18,
+ "superBlock": "front-end-development",
+ "challengeOrder": [{ "id": "66a8e9ca371965b6ef5f2989", "title": "Build a Survey Form" }],
+ "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/english/25-front-end-development/lab-survey-form/66a8e9ca371965b6ef5f2989.md b/curriculum/challenges/english/25-front-end-development/lab-survey-form/66a8e9ca371965b6ef5f2989.md
new file mode 100644
index 00000000000000..c2de7af78de7a8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lab-survey-form/66a8e9ca371965b6ef5f2989.md
@@ -0,0 +1,601 @@
+---
+id: 66a8e9ca371965b6ef5f2989
+title: Build a Survey Form
+challengeType: 14
+dashedName: build-a-survey-form
+demoType: onClick
+---
+
+# --description--
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should have a page title in an `h1` element with an `id` of `title`.
+1. You should have a short explanation in a `p` element with an `id` of `description`.
+1. You should have a `form` element with an `id` of `survey-form`.
+1. Inside the form element you should have a required `input` field to enter your name that has an `id` of `name` and a `type` of `text`.
+1. Inside the form element you should have a required `input` field to enter your email that has an `id` of `email`.
+1. If you enter an email that is not formatted correctly, you should see an HTML5 validation error.
+1. Inside the form element you should have an `input` field to enter a number that has an `id` of `number`.
+1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser).
+1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you should see an HTML5 validation error.
+1. For the name, email, and number input fields, you should have corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `name-label`, `email-label`, and `number-label`.
+1. For the name, email, and number input fields, you should have a placeholder text that gives a description or instructions for each field.
+1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from.
+1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute.
+1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute.
+1. Inside the form element, you should have a `textarea` for additional comments.
+1. Inside the form element, you should have a button with `id` of `submit` to submit all the inputs.
+
+# --hints--
+
+You should have an `h1` element with an `id` of `title`.
+
+```js
+const el = document.getElementById('title');
+assert(!!el && el.tagName === 'H1');
+```
+
+Your `#title` should not be empty.
+
+```js
+const el = document.getElementById('title');
+assert(!!el && el.innerText.length > 0);
+```
+
+You should have a `p` element with an `id` of `description`.
+
+```js
+const el = document.getElementById('description');
+assert(!!el && el.tagName === 'P');
+```
+
+Your `#description` should not be empty.
+
+```js
+const el = document.getElementById('description');
+assert(!!el && el.innerText.length > 0);
+```
+
+You should have a `form` element with an `id` of `survey-form`.
+
+```js
+const el = document.getElementById('survey-form');
+assert(!!el && el.tagName === 'FORM');
+```
+
+You should have an `input` element with an `id` of `name`.
+
+```js
+const el = document.getElementById('name');
+assert(!!el && el.tagName === 'INPUT');
+```
+
+Your `#name` should have a `type` of `text`.
+
+```js
+const el = document.getElementById('name');
+assert(!!el && el.type === 'text');
+```
+
+Your `#name` should require input.
+
+```js
+const el = document.getElementById('name');
+assert(!!el && el.required);
+```
+
+Your `#name` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #name');
+assert(!!el);
+```
+
+You should have an `input` element with an `id` of `email`.
+
+```js
+const el = document.getElementById('email');
+assert(!!el && el.tagName === 'INPUT');
+```
+
+Your `#email` should have a `type` of `email`.
+
+```js
+const el = document.getElementById('email');
+assert(!!el && el.type === 'email');
+```
+
+Your `#email` should require input.
+
+```js
+const el = document.getElementById('email');
+assert(!!el && el.required);
+```
+
+Your `#email` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #email');
+assert(!!el);
+```
+
+You should have an `input` element with an `id` of `number`.
+
+```js
+const el = document.getElementById('number');
+assert(!!el && el.tagName === 'INPUT');
+```
+
+Your `#number` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #number');
+assert(!!el);
+```
+
+Your `#number` should have a `type` of `number`.
+
+```js
+const el = document.getElementById('number');
+assert(!!el && el.type === 'number');
+```
+
+Your `#number` should have a `min` attribute with a numeric value.
+
+```js
+const el = document.getElementById('number');
+assert(!!el && el.min && isFinite(el.min));
+```
+
+Your `#number` should have a `max` attribute with a numeric value.
+
+```js
+const el = document.getElementById('number');
+assert(!!el && el.max && isFinite(el.max));
+```
+
+You should have a `label` element with an `id` of `name-label`.
+
+```js
+const el = document.getElementById('name-label');
+assert(!!el && el.tagName === 'LABEL');
+```
+
+You should have a `label` element with an `id` of `email-label`.
+
+```js
+const el = document.getElementById('email-label');
+assert(!!el && el.tagName === 'LABEL');
+```
+
+You should have a `label` element with an `id` of `number-label`.
+
+```js
+const el = document.getElementById('number-label');
+assert(!!el && el.tagName === 'LABEL');
+```
+
+Your `#name-label` should contain text that describes the input.
+
+```js
+const el = document.getElementById('name-label');
+assert(!!el && el.innerText.length > 0);
+```
+
+Your `#email-label` should contain text that describes the input.
+
+```js
+const el = document.getElementById('email-label');
+assert(!!el && el.innerText.length > 0);
+```
+
+Your `#number-label` should contain text that describes the input.
+
+```js
+const el = document.getElementById('number-label');
+assert(!!el && el.innerText.length > 0);
+```
+
+Your `#name-label` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #name-label');
+assert(!!el);
+```
+
+Your `#email-label` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #email-label');
+assert(!!el);
+```
+
+Your `#number-label` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #number-label');
+assert(!!el);
+```
+
+Your `#name` should have a `placeholder` attribute and value.
+
+```js
+const el = document.getElementById('name');
+assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+```
+
+Your `#email` should have a `placeholder` attribute and value.
+
+```js
+const el = document.getElementById('email');
+assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+```
+
+Your `#number` should have a `placeholder` attribute and value.
+
+```js
+const el = document.getElementById('number');
+assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+```
+
+You should have a `select` field with an `id` of `dropdown`.
+
+```js
+const el = document.getElementById('dropdown');
+assert(!!el && el.tagName === 'SELECT');
+```
+
+Your `#dropdown` should have at least two selectable (not disabled) `option` elements.
+
+```js
+const els = document.querySelectorAll('#dropdown option:not([disabled])');
+assert(els.length >= 2);
+```
+
+Your `#dropdown` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #dropdown');
+assert(!!el);
+```
+
+You should have at least two `input` elements with a `type` of `radio` (radio buttons).
+
+```js
+const els = document.querySelectorAll('input[type="radio"]');
+assert(els.length >= 2);
+```
+
+You should have at least two radio buttons that are descendants of `#survey-form`.
+
+```js
+const els = document.querySelectorAll('#survey-form input[type="radio"]');
+assert(els.length >= 2);
+```
+
+All your radio buttons should have a `value` attribute and value.
+
+```js
+const els1 = document.querySelectorAll('input[type="radio"]');
+const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])');
+assert(els1.length > 0 && els2.length === 0);
+```
+
+All your radio buttons should have a `name` attribute and value.
+
+```js
+const els1 = document.querySelectorAll('input[type="radio"]');
+const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])');
+assert(els1.length > 0 && els2.length === 0);
+```
+
+Every radio button group should have at least 2 radio buttons.
+
+```js
+const radioButtons = document.querySelectorAll('input[type="radio"]');
+const groups = {};
+
+if (radioButtons) {
+ radioButtons.forEach(el => {
+ if (!groups[el.name]) groups[el.name] = [];
+ groups[el.name].push(el);
+ })
+}
+
+const groupKeys = Object.keys(groups);
+
+groupKeys.forEach(key => {
+ if (groups[key].length < 2) assert(false);
+})
+
+assert(groupKeys.length > 0);
+```
+
+You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`.
+
+```js
+const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
+assert(els.length >= 2);
+```
+
+All your checkboxes inside `#survey-form` should have a `value` attribute and value.
+
+```js
+const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]');
+const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])');
+assert(els1.length > 0 && els2.length === 0);
+```
+
+You should have at least one `textarea` element that is a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form textarea');
+assert(!!el);
+```
+
+You should have an `input` or `button` element with an `id` of `submit`.
+
+```js
+const el = document.getElementById('submit');
+assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'));
+```
+
+Your `#submit` should have a `type` of `submit`.
+
+```js
+const el = document.getElementById('submit');
+assert(!!el && el.type === 'submit');
+```
+
+Your `#submit` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #submit');
+assert(!!el);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Survey Form
+
+
+
+
+
+
+
+```
+
+# --solutions--
+
+```html
+
+
+
+
+
+
+
+
+
freeCodeCamp Survey Form
+
+ Thank you for taking the time to help us improve the platform
+