From ad667c698378228a502fe827152b143c15f5110a Mon Sep 17 00:00:00 2001 From: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Date: Tue, 7 Jan 2025 16:15:38 +0100 Subject: [PATCH] fix(curriculum): descriptions and tests in final exams table workshop (#57959) --- client/i18n/locales/english/intro.json | 2 +- .../workshop-final-exams-table/index.md | 2 +- .../66a98f42c7c06903e5f8dd07.md | 2 +- .../66a9b333487b9c14998539a5.md | 2 +- .../66a9b48a211a73155621d0df.md | 8 ++-- .../66a9b8f14b963916a3baa732.md | 4 +- .../66a9bb8578459a175432e7d0.md | 12 +++--- .../66a9bcf00f13a418368a272e.md | 10 ++--- .../66a9c006e4f58819396605b3.md | 11 +++--- .../66a9c14e3b34c719e34bae20.md | 38 +++++++------------ .../66a9c7a4521d2b1b1ec6dcf0.md | 27 +++++++------ .../66a9ca099e3ecb1be10a2696.md | 27 +++++++------ .../66a9cb26ec6bd41cf6c82bc5.md | 12 +++--- 13 files changed, 71 insertions(+), 86 deletions(-) diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 7695d9ee2d8..abc500c6604 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -1907,7 +1907,7 @@ "workshop-final-exams-table": { "title": "Build a Final Exams Table", "intro": [ - "In this workshop, you will learn how to work with HTML tables by building a table of final exams." + "In this workshop, you will practice working with HTML tables by building a table of final exams." ] }, "lab-book-catalog-table": { diff --git a/client/src/pages/learn/full-stack-developer/workshop-final-exams-table/index.md b/client/src/pages/learn/full-stack-developer/workshop-final-exams-table/index.md index 3b0c9f9435f..ed37a6c29a4 100644 --- a/client/src/pages/learn/full-stack-developer/workshop-final-exams-table/index.md +++ b/client/src/pages/learn/full-stack-developer/workshop-final-exams-table/index.md @@ -6,4 +6,4 @@ superBlock: full-stack-developer ## Introduction to the Build a Final Exams Table -This is a test for the new project-based curriculum. +In this workshop, you will practice working with HTML tables by building a table of final exams. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a98f42c7c06903e5f8dd07.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a98f42c7c06903e5f8dd07.md index ec82116556f..f4133184115 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a98f42c7c06903e5f8dd07.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a98f42c7c06903e5f8dd07.md @@ -8,7 +8,7 @@ demoType: onLoad # --description-- -In this workshop, you will learn how to work with HTML tables by building a final exam table for a group of students. +In this workshop, you will practice working with HTML tables by building a final exam table for a group of students. To begin the project, add the ``, and an `html` element with a `lang` attribute of `en`. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b333487b9c14998539a5.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b333487b9c14998539a5.md index 401c17fcefe..d959bf2f86c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b333487b9c14998539a5.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b333487b9c14998539a5.md @@ -107,7 +107,7 @@ assert.match(code, /<\/head>[.\n\s]*/im) --fcc-editable-region-- - + --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b48a211a73155621d0df.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b48a211a73155621d0df.md index 749b8967701..af7c44b8008 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b48a211a73155621d0df.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b48a211a73155621d0df.md @@ -29,7 +29,7 @@ Your `table` element should be inside your `body` element. ```js const tableEl = document.querySelector('table'); -assert.strictEqual(tableEl.parentElement.tagName, 'BODY'); +assert.strictEqual(tableEl?.parentElement?.tagName, 'BODY'); ``` # --seed-- @@ -44,9 +44,9 @@ assert.strictEqual(tableEl.parentElement.tagName, 'BODY'); - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b8f14b963916a3baa732.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b8f14b963916a3baa732.md index 28fb722186a..3c237f9684d 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b8f14b963916a3baa732.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b8f14b963916a3baa732.md @@ -7,7 +7,7 @@ dashedName: step-4 # --description-- -To add a caption to a `table`, you can use the table caption element. +To add a caption to a `table`, you can use the table caption element. Here is an example using the `caption` element: @@ -61,7 +61,7 @@ assert.strictEqual(captionEl.innerText, 'Calculus Final Exam Grades'); --fcc-editable-region-- - +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bb8578459a175432e7d0.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bb8578459a175432e7d0.md index bf42f67253f..d541a0ed25a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bb8578459a175432e7d0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bb8578459a175432e7d0.md @@ -9,7 +9,7 @@ dashedName: step-5 For the first section of the table, you will want to group the header content which represents the column labels for the student's first name, last name, and final exam grade. -The `table head` element, ``, is used to group the header content in a table. +The table head element, `thead`, is used to group the header content in a table. Here is an example using the `thead` element: @@ -21,7 +21,7 @@ Here is an example using the `thead` element: ``` -Below your `caption` element, add a `table head` element. +Below your `caption` element, add a table head element. # --hints-- @@ -41,7 +41,7 @@ Your `thead` element should be inside your `table` element. ```js const theadEl = document.querySelector('thead'); -assert.strictEqual(theadEl.parentElement.tagName, 'TABLE'); +assert.strictEqual(theadEl?.parentElement?.tagName, 'TABLE'); ``` # --seed-- @@ -60,9 +60,9 @@ assert.strictEqual(theadEl.parentElement.tagName, 'TABLE'); Calculus Final Exam Grades - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bcf00f13a418368a272e.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bcf00f13a418368a272e.md index b8058a88251..8ec0203bf50 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bcf00f13a418368a272e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bcf00f13a418368a272e.md @@ -7,7 +7,7 @@ dashedName: step-6 # --description-- -The `table head` element consists of a `table row` element, ``, which contains the `table header` cell elements, ``. +The table head element consists of a table row element, `tr`, which contains the table header cell elements, `th`. Here is an example using the `tr` and `th` elements for a sports table: @@ -48,28 +48,28 @@ Your `tr` element should be inside your `thead` element. ```js const trEl = document.querySelector('tr'); -assert.strictEqual(trEl.parentElement.tagName, 'THEAD'); +assert.strictEqual(trEl?.parentElement?.tagName, 'THEAD'); ``` Your first `th` element should have the text of `Last Name`. ```js const thEl = document.querySelectorAll('th')[0]; -assert.strictEqual(thEl.textContent, 'Last Name'); +assert.strictEqual(thEl?.textContent, 'Last Name'); ``` Your second `th` element should have the text of `First Name`. ```js const thEl = document.querySelectorAll('th')[1]; -assert.strictEqual(thEl.textContent, 'First Name'); +assert.strictEqual(thEl?.textContent, 'First Name'); ``` Your third `th` element should have the text of `Grade`. ```js const thEl = document.querySelectorAll('th')[2]; -assert.strictEqual(thEl.textContent, 'Grade'); +assert.strictEqual(thEl?.textContent, 'Grade'); ``` All of your `th` elements should be inside your `tr` element. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c006e4f58819396605b3.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c006e4f58819396605b3.md index 83d56bbd51a..fe257c162c2 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c006e4f58819396605b3.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c006e4f58819396605b3.md @@ -7,9 +7,9 @@ dashedName: step-7 # --description-- -Now that you have completed the head section, it is time to add the `table body`. The `table body` will represent all of the student names and their grades. +Now that you have completed the head section, it is time to add the table body, `tbody`. The table body will represent all of the student names and their grades. -Add a `table body` element to your table. +Add a table body element to your table. # --hints-- @@ -55,10 +55,9 @@ assert.match(code, /[\s\S]*<\/tbody>/i); Grade - - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c14e3b34c719e34bae20.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c14e3b34c719e34bae20.md index 8265ba76382..53ab520c6c8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c14e3b34c719e34bae20.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c14e3b34c719e34bae20.md @@ -7,9 +7,9 @@ dashedName: step-8 # --description-- -To add student data to the table, you will need to use the `table row` and table data elements. +To add student data to the table, you will need to use the table row and table data elements. -The `table data` element, ``, is used to create a cell in the table. +The table data element, `td`, is used to create a cell in the table. Here is an example of using the `td` element for a sports players table: @@ -21,29 +21,17 @@ Here is an example of using the `td` element for a sports players table: ``` -Inside your `table body` element, add a `table row` element, ``, with three `table data` elements, ``. +Inside your table body element, add a table row element, `tr`, with three table data elements, `td`. -The first `table data` element should contain the last name of `Davis`. +The first table data element should contain the last name of `Davis`. -The second `table data` element should contain the first name of `Alex`. +The second table data element should contain the first name of `Alex`. -The third `table data` element should contain the grade of `54`. +The third table data element should contain the grade of `54`. # --hints-- -You should have an opening `tr` tag. - -```js -assert.match(code, //i); -``` - -You should have a closing `tr` tag. - -```js -assert.match(code, /<\/tr>/i); -``` - -Your `tr` element should be inside your `tbody` element. +You should have a `tr` element inside your `tbody` element. ```js assert.isNotNull(document.querySelector('tbody tr')); @@ -52,19 +40,19 @@ assert.isNotNull(document.querySelector('tbody tr')); You should have a `td` element with the text `Davis` inside the `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr td').textContent, 'Davis'); +assert.strictEqual(document.querySelector('tbody tr td')?.textContent, 'Davis'); ``` You should have a `td` element with the text `Alex` inside the `tr` element. ```js -assert.strictEqual(document.querySelectorAll('tbody tr td')[1].textContent, 'Alex'); +assert.strictEqual(document.querySelectorAll('tbody tr td')[1]?.textContent, 'Alex'); ``` You should have a `td` element with the text `54` inside the `tr` element. ```js -assert.strictEqual(document.querySelectorAll('tbody tr td')[2].textContent, '54'); +assert.strictEqual(document.querySelectorAll('tbody tr td')[2]?.textContent, '54'); ``` You should have all three of the `td` elements inside the `tr` element. @@ -99,9 +87,9 @@ assert.match(code, /[\s\S]*[\s\S]*<\/td>[\s\S]*[\s\S]*<\/td>[\s\S]*< - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c7a4521d2b1b1ec6dcf0.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c7a4521d2b1b1ec6dcf0.md index 83b5b4ca3b3..cfa4fd32afd 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c7a4521d2b1b1ec6dcf0.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c7a4521d2b1b1ec6dcf0.md @@ -9,13 +9,13 @@ dashedName: step-9 Now it is time to add two more students to the table. -Following the same pattern as the previous step, add a second student `table row`. Use the following data for the `table data` elements: +Following the same pattern as the previous step, add a second student table row. Use the following data for the table data elements: - Last Name: `Doe` - First Name: `Samantha` - Grade: `92` -For the third student `table row`, use the following data for the `table data` elements: +For the third student table row, use the following data for the table data elements: - Last Name: `Rodriguez` - First Name: `Marcus` @@ -23,7 +23,7 @@ For the third student `table row`, use the following data for the `table data` e # --hints-- -You should have a second `table row` inside your `tbody` element. +You should have a second `tr` inside your `tbody` element. ```js assert.isNotNull(document.querySelector('tbody tr:nth-of-type(2)')); @@ -32,22 +32,22 @@ assert.isNotNull(document.querySelector('tbody tr:nth-of-type(2)')); You should have a `td` element with the text `Doe` inside the second `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(2) td:first-child').textContent, 'Doe'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(2) td:first-child')?.textContent, 'Doe'); ``` You should have a `td` element with the text `Samantha` inside the second `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(2) td:nth-child(2)').textContent, 'Samantha'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(2) td:nth-child(2)')?.textContent, 'Samantha'); ``` You should have a `td` element with the text `92` inside the second `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(2) td:last-child').textContent, '92'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(2) td:last-child')?.textContent, '92'); ``` -You should have a third `table row` inside your `tbody` element. +You should have a third `tr` inside your `tbody` element. ```js assert.strictEqual(document.querySelectorAll('tbody tr').length, 3); @@ -56,19 +56,19 @@ assert.strictEqual(document.querySelectorAll('tbody tr').length, 3); You should have a `td` element with the text `Rodriguez` inside the third `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:first-child').textContent, 'Rodriguez'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:first-child')?.textContent, 'Rodriguez'); ``` You should have a `td` element with the text `Marcus` inside the third `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:nth-child(2)').textContent, 'Marcus'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:nth-child(2)')?.textContent, 'Marcus'); ``` You should have a `td` element with the text `88` inside the third `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:last-child').textContent, '88'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:last-child')?.textContent, '88'); ``` # --seed-- @@ -102,10 +102,9 @@ assert.strictEqual(document.querySelector('tbody tr:nth-of-type(3) td:last-child Alex 54 - - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9ca099e3ecb1be10a2696.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9ca099e3ecb1be10a2696.md index 40363b344c3..49b49fb4b0a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9ca099e3ecb1be10a2696.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9ca099e3ecb1be10a2696.md @@ -9,13 +9,13 @@ dashedName: step-10 Now it is time to add two more students to the table. -Following the same pattern as the previous steps, add a fourth student `table row`. Use the following data for the `table data` elements: +Following the same pattern as the previous steps, add a fourth student table row. Use the following data for the table data elements: - Last Name: `Thompson` - First Name: `Jane` - Grade: `77` -For the fifth student `table row`, use the following data for the `table data` elements: +For the fifth student table row, use the following data for the table data elements: - Last Name: `Williams` - First Name: `Natalie` @@ -23,7 +23,7 @@ For the fifth student `table row`, use the following data for the `table data` e # --hints-- -You should have a fourth `table row` inside your `tbody` element. +You should have a fourth `tr` inside your `tbody` element. ```js assert.isNotNull(document.querySelector('tbody tr:nth-of-type(4)')); @@ -32,22 +32,22 @@ assert.isNotNull(document.querySelector('tbody tr:nth-of-type(4)')); You should have a `td` element with the text `Thompson` inside the fourth `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:first-child').textContent, 'Thompson'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:first-child')?.textContent, 'Thompson'); ``` You should have a `td` element with the text `Jane` inside the fourth `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:nth-of-type(2)').textContent, 'Jane'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:nth-of-type(2)')?.textContent, 'Jane'); ``` You should have a `td` element with the text `77` inside the fourth `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:nth-of-type(3)').textContent, '77'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:nth-of-type(3)')?.textContent, '77'); ``` -You should have a fifth `table row` inside your `tbody` element. +You should have a fifth `tr` inside your `tbody` element. ```js assert.strictEqual(document.querySelectorAll('tbody tr').length, 5); @@ -56,19 +56,19 @@ assert.strictEqual(document.querySelectorAll('tbody tr').length, 5); You should have a `td` element with the text `Williams` inside the fifth `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:first-child').textContent, 'Williams'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:first-child')?.textContent, 'Williams'); ``` You should have a `td` element with the text `Natalie` inside the fifth `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-type(2)').textContent, 'Natalie'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-type(2)')?.textContent, 'Natalie'); ``` You should have a `td` element with the text `83` inside the fifth `tr` element. ```js -assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-type(3)').textContent, '83'); +assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-type(3)')?.textContent, '83'); ``` # --seed-- @@ -114,10 +114,9 @@ assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-typ Marcus 88 - - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9cb26ec6bd41cf6c82bc5.md b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9cb26ec6bd41cf6c82bc5.md index 2502fff427c..ea0769303af 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9cb26ec6bd41cf6c82bc5.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9cb26ec6bd41cf6c82bc5.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -The last section to add to the table would be the `table foot` (``) element. The `table foot` element will be used to display the average grade for all of the students in the table. +The last section to add to the table would be the table foot element, `tfoot`. The table foot element will be used to display the average grade for all of the students in the table. Add a `tfoot` element to the table. @@ -40,13 +40,13 @@ assert.isNotNull(document.querySelector('tfoot tr')); Your first `td` element should contain the text `Average Grade`. Make sure it is inside the `tr` element. ```js -assert.strictEqual(document.querySelector('tfoot tr td:first-child').textContent, 'Average Grade'); +assert.strictEqual(document.querySelector('tfoot tr td:first-child')?.textContent, 'Average Grade'); ``` Your second `td` element should contain the text `78.8`. Make sure it is inside the `tr` element. ```js -assert.strictEqual(document.querySelector('tfoot tr td:nth-of-type(2)').textContent, '78.8'); +assert.strictEqual(document.querySelector('tfoot tr td:nth-of-type(2)')?.textContent, '78.8'); ``` Your `tr` element should have two `td` elements inside it. @@ -111,9 +111,9 @@ assert.strictEqual(document.querySelectorAll('tfoot tr td').length, 2); 83 - --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region--