fix(curriculum): descriptions and tests in final exams table workshop (#57959)

2026-09-24 23:01:18 +08:00 · 2025-01-07 16:15:38 +01:00
parent c441efd704
commit ad667c6983
13 changed files with 71 additions and 86 deletions
@@ -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": {
@@ -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.
@@ -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 `<!DOCTYPE html>`, and an `html` element with a `lang` attribute of `en`.

@@ -107,7 +107,7 @@ assert.match(code, /<\/head>[.\n\s]*<body>/im)
 <html lang="en">
  --fcc-editable-region--
  <head>
-
+    
  </head>
  --fcc-editable-region--
 </html>
@@ -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');
    <meta charset="UTF-8" />
  </head>
  <body>
-  --fcc-editable-region--
-
-  --fcc-editable-region--
+--fcc-editable-region--
+    
+--fcc-editable-region--
  </body>
 </html>
 ```
@@ -7,7 +7,7 @@ dashedName: step-4

 # --description--

-To add a caption to a `table`, you can use the table <dfn>caption</dfn> element.
+To add a caption to a `table`, you can use the <dfn>table caption</dfn> element.

 Here is an example using the `caption` element:

@@ -61,7 +61,7 @@ assert.strictEqual(captionEl.innerText, 'Calculus Final Exam Grades');
  <body>
    --fcc-editable-region--
    <table>
-
+      
    </table>
    --fcc-editable-region--
  </body>
@@ -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, `<thead>`, is used to group the header content in a table. 
+The <dfn>table head</dfn> 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:
 </table>
 ```

-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');
      <caption>
        Calculus Final Exam Grades
      </caption>
-      --fcc-editable-region--
-
-      --fcc-editable-region--
+--fcc-editable-region--
+      
+--fcc-editable-region--
    </table>
  </body>
 </html>
@@ -7,7 +7,7 @@ dashedName: step-6

 # --description--

-The `table head` element consists of a `table row` element, `<tr>`, which contains the `table header` cell elements, `<th>`.
+The table head element consists of a <dfn>table row</dfn> element, `tr`, which contains the <dfn>table header cell</dfn> 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.
@@ -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 <dfn>table body</dfn>, `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, /<tbody>[\s\S]*<\/tbody>/i);
          <th>Grade</th>
        </tr>
      </thead>
-
-      --fcc-editable-region--
-
-      --fcc-editable-region--
+--fcc-editable-region--
+      
+--fcc-editable-region--
    </table>
  </body>
 </html>
@@ -7,9 +7,9 @@ dashedName: step-8

 # --description--

-To add student data to the table, you will need to use the `table row` and <dfn>table data</dfn> elements.
+To add student data to the table, you will need to use the table row and table data elements.

-The `table data` element, `<td>`, is used to create a cell in the table.
+The <dfn>table data</dfn> 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:
 </tr>
 ```

-Inside your `table body` element, add a `table row` element, `<tr>`, with three `table data` elements, `<td>`. 
+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, /<tr>/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, /<tr>[\s\S]*<td>[\s\S]*<\/td>[\s\S]*<td>[\s\S]*<\/td>[\s\S]*<
      </thead>

      <tbody>
-        --fcc-editable-region--
-
-        --fcc-editable-region--
+--fcc-editable-region--
+        
+--fcc-editable-region--
      </tbody>
    </table>
  </body>
@@ -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
          <td>Alex</td>
          <td>54</td>
        </tr>
-
-        --fcc-editable-region--
-
-        --fcc-editable-region--
+--fcc-editable-region--
+        
+--fcc-editable-region--
      </tbody>
    </table>
  </body>
@@ -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
          <td>Marcus</td>
          <td>88</td>
        </tr>
-
-        --fcc-editable-region--
-
-        --fcc-editable-region--
+--fcc-editable-region--
+        
+--fcc-editable-region--
      </tbody>
    </table>
  </body>
@@ -7,7 +7,7 @@ dashedName: step-11

 # --description--

-The last section to add to the table would be the `table foot` (`<tfoot>`) 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 <dfn>table foot</dfn> 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);
          <td>83</td>
        </tr>
      </tbody>
-      --fcc-editable-region--
-
-      --fcc-editable-region--
+--fcc-editable-region--
+      
+--fcc-editable-region--
    </table>
  </body>
 </html>