feat(curriculum): add logic checker workshop (#63666)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
2026-10-13 00:03:05 +08:00 · 2025-11-20 12:02:47 +01:00
parent 68156f8f00
commit 97d812bd5d
17 changed files with 637 additions and 0 deletions
@@ -5293,6 +5293,12 @@
          "In these lectures you will learn about booleans, and equality and inequality operators, and other comparison operators."
        ]
      },
+      "workshop-logic-checker-app": {
+        "title": "Build a Logic Checker App",
+        "intro": [
+          "In this workshop, you'll practice working with conditional statements and comparison operators by building a logic checker app."
+        ]
+      },
      "lecture-working-with-unary-and-bitwise-operators": {
        "title": "Working with Unary and Bitwise Operators",
        "intro": [
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Logic Checker App
+block: workshop-logic-checker-app
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a Logic Checker App
+
+In this workshop, you'll practice working with conditional statements and comparison operators by building a logic checker app.
@@ -0,0 +1,36 @@
+---
+id: 6909ed80e1c195f49564edac
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you'll learn how to work with conditional statements and comparison operators.
+
+Begin by declaring a variable named `truthyOrFalsy` and assign it the boolean value `true`.
+
+# --hints--
+
+You should have a variable named `truthyOrFalsy`.
+
+```js
+assert.exists(truthyOrFalsy);
+```
+
+You should assign `true` to your `truthyOrFalsy` variable.
+
+```js
+assert.isTrue(truthyOrFalsy);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,52 @@
+---
+id: 690a06833d3e83b5226ade78
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+A conditional statement is used to run code depending on a condition. It is composed of the `if` keyword, followed by a condition enclosed by parentheses, and a body enclosed by curly braces. Here's an example of an `if` statement:
+
+```js
+if (condition) {
+  console.log("condition is truthy");
+}
+```
+
+When `condition` is a truthy value (non-empty string, non-zero number, `true`, etc.) the code within the `if` statement's body is executed.
+
+Below your variable, create an `if` statement that uses `hasDeveloperJob` as its condition. Within the body of your `if` statement, log `"Timmy is employed as a developer."` to the console.
+
+# --hints--
+
+You should have an `if` statement.
+
+```js
+assert.match(__helpers.removeJSComments(code), /\bif\s*\(.+\)\s*\{?/);
+```
+
+Your `if` statement should use `hasDeveloperJob` as its condition.
+
+```js
+assert.match(__helpers.removeJSComments(code), /\bif\s*\(\s*hasDeveloperJob\s*\)\s*\{?/);
+```
+
+You should log `"Timmy is employed as a developer."` to the console within your `if` statement.
+
+```js
+assert.match(__helpers.removeJSComments(code), /\bif\s*\(\s*hasDeveloperJob\s*\)\s*\{\s*console\s*\.\s*log\s*\(\s*('|"|`)Timmy is employed as a developer.\1\s*\)\s*;?\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+const hasDeveloperJob = true;
+
+
+--fcc-editable-region--
+```
@@ -0,0 +1,39 @@
+---
+id: 690a0df27ee9ee36d935d530
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Declare another variable named `isTimmyAGamer` and assign it the boolean `false`.
+
+# --hints--
+
+You should declare a variable named `isTimmyAGamer`.
+
+```js
+assert.exists(isTimmyAGamer);
+```
+
+You should assign the boolean value `false` to your `isTimmyAGamer` variable.
+
+```js
+assert.isFalse(isTimmyAGamer);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,49 @@
+---
+id: 690a0f7a5c22c15222a6aa5c
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+Now create another `if` statement that uses `isTimmyAGamer` as its condition. Inside the body of your `if` statement, log `"Timmy loves to play World of Warcraft."` to the console.
+
+Note that you won't see anything logged to the console as the condition of your new `if` statement is false.
+
+# --hints--
+
+You should have two `if` statements in your code.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(?:\bif\s*\(.+\)\s*\{.+\}.*)\bif\s*\(.+\)\s*\{.+\}/s);
+```
+
+Your second `if` statement should use `isTimmyAGamer` as its condition.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(?:\bif\s*\(.+\)\s*\{.+\}.*)\bif\s*\(\s*isTimmyAGamer\s*\)\s*\{.+\}/s);
+```
+
+You should log `"Timmy loves to play World of Warcraft."` to the console within your second `if` statement.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(?:\bif\s*\(.+\)\s*\{.+\}.*)\bif\s*\(\s*isTimmyAGamer\s*\)\s*\{\s*console\s*\.\s*log\s*\(\s*('|"|`)Timmy loves to play World of Warcraft.\1\s*\)\s*;?\s*\}/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+--fcc-editable-region--
+const isTimmyAGamer = false;
+
+
+--fcc-editable-region--
+```
@@ -0,0 +1,45 @@
+---
+id: 690a110a76d0496d9e7c28eb
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+Declare another variable named `timmyAge` and set it to `18`.
+
+# --hints--
+
+You should have a variable named `timmyAge`.
+
+```js
+assert.exists(timmyAge);
+```
+
+You should assign `18` to your `timmyAge` variable.
+
+```js
+assert.strictEqual(timmyAge, 18);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+
+const isTimmyAGamer = false;
+
+if (isTimmyAGamer) {
+  console.log("Timmy loves to play World of Warcraft.");
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,65 @@
+---
+id: 690a3ad44874a928a2fe3077
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+Comparison operators allow you to compare values and write more complex conditional statements.
+
+```js
+if (today == birthday) {
+  console.log("Happy Birthday!");
+}
+```
+
+For example, the code above logs `"Happy Birthday!"` to the console only when the values of the variables `today` and `birthday` are equal.
+
+Create a third `if` statement. For its condition, use the `>=` operator to check if `timmyAge` is greater than or equal to `16`.
+
+Inside the body of your new `if` statement, log `"Timmy is old enough to drive."` to the console.
+
+# --hints--
+
+You should have a third `if` statement in your code.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+timmyAge\s*\=\s*.+\bif\s*\(.+\)\s*\{.+\}/s);
+```
+
+Your third `if` statement should use `timmyAge >= 16` as its condition.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+timmyAge\s*\=\s*.+\bif\s*\(\s*timmyAge\s*>=\s* 16\s*\)\s*\{.+\}/s);
+```
+
+You should log `"Timmy is old enough to drive."` to the console inside your third `if` statement.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+timmyAge\s*\=\s*.+\bif\s*\(\s*timmyAge\s*>=\s*16\s*\)\s*\{\s*console\s*\.\s*log\s*\(\s*('|"|`)Timmy is old enough to drive.\1\s*\)\s*;?\s*\}/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+
+const isTimmyAGamer = false;
+
+if (isTimmyAGamer) {
+  console.log("Timmy loves to play World of Warcraft.");
+}
+--fcc-editable-region--
+const timmyAge = 18;
+
+
+--fcc-editable-region--
+```
@@ -0,0 +1,59 @@
+---
+id: 690a3ce03013be44d116136e
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+A conditional statement can have an `else` clause, which runs code when the `if` condition is falsy. Here's an example of an `if...else` statement:
+
+```js
+if (condition) {
+  console.log("condition is truthy");
+} else {
+  console.log("condition is falsy");
+}
+```
+
+Add an `else` clause to the existing `if` statement. Inside the body of your `else` clause, log `"Timmy is not old enough to drive."` to the console.
+
+# --hints--
+
+Your third `if` statement should have an `else` clause.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+timmyAge\s*\=\s*.+\bif\s*\(\s*timmyAge\s*>=\s*16\s*\)\s*\{\s*console\s*\.\s*log\s*\(\s*('|"|`)Timmy is old enough to drive.\1\s*\)\s*;?\s*\}\s+else\s+{/s);
+```
+
+You should log `"Timmy is not old enough to drive."` to the console within the body of your `else` clause.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+timmyAge\s*\=\s*.+\bif\s*\(\s*timmyAge\s*>=\s*16\s*\)\s*\{\s*console\s*\.\s*log\s*\(\s*('|"|`)Timmy is old enough to drive.\1\s*\)\s*;?\s*\}\s+else\s+{\s*console\s*\.\s*log\s*\(\s*('|"|`)Timmy is not old enough to drive.\1\s*\)\s*;?\s*\}/s);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+
+const isTimmyAGamer = false;
+
+if (isTimmyAGamer) {
+  console.log("Timmy loves to play World of Warcraft.");
+}
+--fcc-editable-region--
+const timmyAge = 18;
+
+if (timmyAge >= 16) {
+  console.log("Timmy is old enough to drive.");
+}
+--fcc-editable-region--
+```
@@ -0,0 +1,68 @@
+---
+id: 690a3f884e083a6a33b81fcf
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+Finally, change the declaration of `timmyAge` and set it to a number less than `16`. After that you'll see `"Timmy is not old enough to drive."` logged to the console.
+
+# --hints--
+
+Your `timmyAge` variable should have a value less than `16`.
+
+```js
+assert.isAtMost(timmyAge, 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+
+const isTimmyAGamer = false;
+
+if (isTimmyAGamer) {
+  console.log("Timmy loves to play World of Warcraft.");
+}
+--fcc-editable-region--
+const timmyAge = 18;
+--fcc-editable-region--
+if (timmyAge >= 16) {
+  console.log("Timmy is old enough to drive.");
+} else {
+  console.log("Timmy is not old enough to drive.");
+}
+```
+
+# --solutions--
+
+```js
+const hasDeveloperJob = true;
+
+if (hasDeveloperJob) {
+  console.log("Timmy is employed as a developer.");
+}
+
+const isTimmyAGamer = false;
+
+if (isTimmyAGamer) {
+  console.log("Timmy loves to play World of Warcraft.");
+}
+
+const timmyAge = 15;
+
+if (timmyAge >= 16) {
+  console.log("Timmy is old enough to drive.");
+} else {
+  console.log("Timmy is not old enough to drive.");
+}
+```
@@ -0,0 +1,42 @@
+---
+id: 690a51806fb743bc896c3af7
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+As you learned in a previous lesson, booleans are a data type with only `true` and `false` values.
+
+A truthy value is a value that evaluates to `true` in a boolean context. Examples of truthy values are:
+
+- Non-empty strings
+- Non-zero numbers
+- The boolean `true`
+
+And other values you'll meet later on.
+
+You can use the `Boolean()` function to check the truthiness of a value. For example, `Boolean("Hello World!")` will return `true` because `"Hello World!"` is truthy.
+
+Now, call `Boolean(truthyOrFalsy)` and log the result to the console.
+
+# --hints--
+
+You should log `Boolean(truthyOrFalsy)` to the console.
+
+```js
+assert.match(__helpers.removeJSComments(code), /console\s*\.\s*log\s*\(\s*Boolean\s*\(\s*truthyOrFalsy\s*\)\s*\)\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+const truthyOrFalsy = true;
+
+
+--fcc-editable-region--
+```
@@ -0,0 +1,30 @@
+---
+id: 690a562fd611e8155599ce98
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+Change the assignment of `truthyOrFalsy` by setting its value to `"freeCodeCamp"`. You will still see `true` logged to the console because a non-empty string is a truthy value.
+
+# --hints--
+
+Your `truthyOrFalsy` variable should have the value `"freeCodeCamp"`.
+
+```js
+assert.strictEqual(truthyOrFalsy, "freeCodeCamp");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+const truthyOrFalsy = true;
+
+console.log(Boolean(truthyOrFalsy));
+--fcc-editable-region--
+```
@@ -0,0 +1,41 @@
+---
+id: 690a57095c4afb27bbe751b3
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Falsy values are values that evaluate to `false` in a boolean context. Examples of falsy values are:
+
+- `""` (empty string)
+- `0`
+- `false`
+- `null`
+- `undefined`
+- `NaN`
+
+You'll meet all of these going through this coursework.
+
+For now, change the assignment of `truthyOrFalsy` by setting its value to an empty string. After that, you'll see `false` logged to the console.
+
+# --hints--
+
+You should assign an empty string to `truthyOrFalsy`.
+
+```js
+assert.strictEqual(truthyOrFalsy, "");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+const truthyOrFalsy = "freeCodeCamp";
+
+console.log(Boolean(truthyOrFalsy));
+--fcc-editable-region--
+```
@@ -0,0 +1,36 @@
+---
+id: 690a57fef66aac39dffc61a2
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Now that you know what truthy and falsy values are, remove both your variable declaration and `console.log` statement from your code.
+
+# --hints--
+
+You should not have a `truthyOrFalsy` variable.
+
+```js
+assert.notMatch(__helpers.removeJSComments(code), /const\s+truthyOrFalsy\s*=/);
+```
+
+You should not have `console.log(Boolean(truthyOrFalsy))` in your code.
+
+```js
+assert.notMatch(__helpers.removeJSComments(code), /console\s*\.\s*log\s*\(\s*Boolean\s*\(\s*truthyOrFalsy\s*\)\s*\)\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+const truthyOrFalsy = "";
+
+console.log(Boolean(truthyOrFalsy));
+--fcc-editable-region--
+```
@@ -0,0 +1,34 @@
+---
+id: 690a58cc4f828a49eab1b53a
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+Declare a variable named `hasDeveloperJob` and assign it the boolean value `true`.
+
+# --hints--
+
+You should have a variable named `hasDeveloperJob`.
+
+```js
+assert.exists(hasDeveloperJob);
+```
+
+You should assign `true` to your `hasDeveloperJob` variable.
+
+```js
+assert.isTrue(hasDeveloperJob);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,25 @@
+{
+  "name": "Build a Logic Checker App",
+  "isUpcomingChange": false,
+  "dashedName": "workshop-logic-checker-app",
+  "helpCategory": "JavaScript",
+  "blockLayout": "challenge-grid",
+  "challengeOrder": [
+    { "id": "6909ed80e1c195f49564edac", "title": "Step 1" },
+    { "id": "690a51806fb743bc896c3af7", "title": "Step 2" },
+    { "id": "690a562fd611e8155599ce98", "title": "Step 3" },
+    { "id": "690a57095c4afb27bbe751b3", "title": "Step 4" },
+    { "id": "690a57fef66aac39dffc61a2", "title": "Step 5" },
+    { "id": "690a58cc4f828a49eab1b53a", "title": "Step 6" },
+    { "id": "690a06833d3e83b5226ade78", "title": "Step 7" },
+    { "id": "690a0df27ee9ee36d935d530", "title": "Step 8" },
+    { "id": "690a0f7a5c22c15222a6aa5c", "title": "Step 9" },
+    { "id": "690a110a76d0496d9e7c28eb", "title": "Step 10" },
+    { "id": "690a3ad44874a928a2fe3077", "title": "Step 11" },
+    { "id": "690a3ce03013be44d116136e", "title": "Step 12" },
+    { "id": "690a3f884e083a6a33b81fcf", "title": "Step 13" }
+  ],
+  "blockLabel": "workshop",
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true
+}
@@ -36,6 +36,7 @@
            "lecture-working-with-operator-behavior",
            "lab-debug-increment-and-decrement-operator-errors",
            "lecture-working-with-comparison-and-boolean-operators",
+            "workshop-logic-checker-app",
            "lecture-working-with-unary-and-bitwise-operators",
            "lecture-working-with-conditional-logic-and-math-methods",
            "workshop-mathbot",