feat(curriculum): add greeting bot workshop (#55799)

Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com>
This commit is contained in:
Jessica Wilkins
2024-08-12 12:53:06 -07:00
committed by GitHub
parent fb571302c4
commit dcc3b2746b
18 changed files with 1070 additions and 0 deletions

View File

@@ -1757,6 +1757,13 @@
"In this workshop, you will learn how to work with HTML tables by building a table of final exams."
]
},
"workshop-greeting-bot": {
"title": "Build a Greeting Bot",
"intro": [
"For this workshop, you will learn how to work with JavaScript fundamentals by building a greeting bot.",
"You will learn about variables, <code>let</code>, <code>const</code>, <code>console.log</code> and basic string usage."
]
},
"workshop-blog-page": {
"title": "Build a Cat Blog Page",
"intro": [

View File

@@ -0,0 +1,9 @@
---
title: Introduction to the Build a Greeting Bot
block: workshop-greeting-bot
superBlock: front-end-development
---
## Introduction to the Build a Greeting Bot
This is a test for the new project-based curriculum.

View File

@@ -0,0 +1,73 @@
{
"name": "Build a Greeting Bot",
"blockType": "workshop",
"isUpcomingChange": true,
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "workshop-greeting-bot",
"order": 131,
"superBlock": "front-end-development",
"challengeOrder": [
{
"id": "66ad8294a0ad902f1b31b612",
"title": "Step 1"
},
{
"id": "66ad8ab945d266383f318cbf",
"title": "Step 2"
},
{
"id": "66ad8d150264db3926eccfeb",
"title": "Step 3"
},
{
"id": "66ad984e92ce213a66f7e51c",
"title": "Step 4"
},
{
"id": "66ad998285df023b23dacdd3",
"title": "Step 5"
},
{
"id": "66ad9c633fa26d3c1475eae3",
"title": "Step 6"
},
{
"id": "66ada3f46945763dd97f43f8",
"title": "Step 7"
},
{
"id": "66adb844118ba74107ce771f",
"title": "Step 8"
},
{
"id": "66adbc8a9793d64250f7e609",
"title": "Step 9"
},
{
"id": "66adc42868cab843ccee87d9",
"title": "Step 10"
},
{
"id": "66adc5919c1853448f119d11",
"title": "Step 11"
},
{
"id": "66adc6046acc18453decf577",
"title": "Step 12"
},
{
"id": "66adc82170acb1464bd348eb",
"title": "Step 13"
},
{
"id": "66adcf383276814776aba3ca",
"title": "Step 14"
},
{
"id": "66add47d27763c4862492c8c",
"title": "Step 15"
}
],
"helpCategory": "JavaScript"
}

View File

@@ -0,0 +1,47 @@
---
id: 66ad8294a0ad902f1b31b612
title: Step 1
challengeType: 1
dashedName: step-1
---
# --description--
In this workshop you will learn how to work with JavaScript fundamentals by building a greeting bot.
In this first step, you will want to output a message to the console from the greeting bot.
Remember that you learned about `console.log()` and strings in the previous lecture videos.
Here is a reminder of how to use `console.log()` with strings:
```js
console.log('Hello, World!');
```
Add a `console.log()` statement that outputs the string `"Hi there!"` to the console. Don't forget your quotes around the message!
# --hints--
You should have a `console.log()` statement in your code.
```js
assert.match(__helpers.removeJSComments(code), /console\.log(.*)/);
```
Your `console` statement should have the message `"Hi there!"`. Don't forget the quotes.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\((['"])Hi\s+there!\1\);?/);
```
# --seed--
## --seed-contents--
```js
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,39 @@
---
id: 66ad8ab945d266383f318cbf
title: Step 2
challengeType: 1
dashedName: step-2
---
# --description--
Now you should see the first message from the bot in the console.
It is time to add a second message from the bot.
Add another `console.log` statement to output the message `"I am excited to talk to you."` to the console.
# --hints--
You should have a `console.log()` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 2);
```
Your `console` statement should have the message `"I am excited to talk to you."`. Don't forget the quotes.
```js
assert.match(__helpers.removeJSComments(code), /("|')I\s+am\s+excited\s+to\s+talk\s+to\s+you.\1/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,52 @@
---
id: 66ad8d150264db3926eccfeb
title: Step 3
challengeType: 1
dashedName: step-3
---
# --description--
In the previous lecture videos, you learned about the `let` keyword and how to declare variables in JavaScript.
Here is a reminder of how to declare a variable using the `let` keyword:
```js
let greeting;
```
Use the `let` keyword to declare a variable called `bot`.
**NOTE**: You are using `let` here because later on in the workshop, you will be changing the value of the `bot` variable.
# --hints--
You should have the `let` keyword in your code.
```js
assert.match(__helpers.removeJSComments(code), /let/g);
```
You should declare a variable called `bot`.
```js
assert.isNotNull(bot);
```
You should use the `let` keyword to declare the variable.
```js
assert.match(__helpers.removeJSComments(code), /let\s+bot;?/g);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,47 @@
---
id: 66ad984e92ce213a66f7e51c
title: Step 4
challengeType: 1
dashedName: step-4
---
# --description--
When you need to declare variables with multiple words, you can use the <dfn>camelCase</dfn> naming convention.
When using `camelCase`, the first word is all lowercase and the first letter of each subsequent word is capitalized.
Here is an example:
```js
let thisIsCamelCase;
```
Use `let` to declare a variable named `botLocation`.
# --hints--
You should use `let` to declare the variable.
```js
assert.lengthOf(code.match(/let/g), 2);
```
Your variable should be named `botLocation`.
```js
assert.isNotNull(botLocation);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,62 @@
---
id: 66ad998285df023b23dacdd3
title: Step 5
challengeType: 1
dashedName: step-5
---
# --description--
Now, it is time to assign some values to your `bot` and `botLocation` variables.
In the previous lecture videos, you learned how to assign values to variables like this:
```js
variableName = "Here is the value";
```
Remember that what is on the right side of the assignment operator `=` is the value that you are assigning to the variable on the left side.
Assign the string `"teacherBot"` to the `bot` variable and the string `"the universe"` to the `botLocation` variable.
# --hints--
You should assign a string to your `bot` variable.
```js
assert.isString(bot);
```
Your `bot` variable should be assigned the string `"teacherBot"`.
```js
assert.equal(bot, "teacherBot");
```
You should assign a string to your `botLocation` variable.
```js
assert.isString(botLocation);
```
Your `botLocation` variable should be assigned the string `"the universe"`.
```js
assert.equal(botLocation, "the universe");
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,45 @@
---
id: 66ad9c633fa26d3c1475eae3
title: Step 6
challengeType: 1
dashedName: step-6
---
# --description--
Now, it is time to add another message from the bot.
Add another `console` statement to the code that logs the message `"Allow me to introduce myself."`.
# --hints--
You should have a `console` statement.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 3);
```
Your `console` statement should have the message `"Allow me to introduce myself."`. Don't forget the quotes.
```js
assert.match(__helpers.removeJSComments(code), /("|')Allow\s+me\s+to\s+introduce\s+myself.\1/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,82 @@
---
id: 66ada3f46945763dd97f43f8
title: Step 7
challengeType: 1
dashedName: step-7
---
# --description--
Earlier, you created the `bot` and `botLocation` variables. Now, you will use them to output new messages to the console.
In the lecture videos, you learned how to work with string concatenation using the `+` operator to concatenate strings together like this:
```js
let firstName = "John";
// result: "Hello, my name is John."
"Hello, my name is " + firstName + ".";
```
Remember that you need to be mindful of spaces when concatenating strings with variables.
Create a variable called `botIntroduction`.
Then use string concatenation with the `+` operator to join the string `"My name is "` followed by the `bot` variable followed by a period (`.`).
Assign this value to the `botIntroduction` variable.
Then, log the `botIntroduction` variable to the console.
# --hints--
You should have a variable called `botIntroduction`.
```js
assert.isNotNull(botIntroduction);
```
Your `botIntroduction` variable should hold the value of a string.
```js
assert.isString(botIntroduction);
```
You should use string concatenation with the `+` operator to join the string `"My name is "` with the `bot` variable followed by a period (`.`). Be mindful of spaces.
```js
assert.equal(botIntroduction, "My name is teacherBot.");
```
You should have a `console` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 4);
```
Your `console` statement should output the `botIntroduction` variable.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\s*\(\s*botIntroduction\s*\);?/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,74 @@
---
id: 66adb844118ba74107ce771f
title: Step 8
challengeType: 1
dashedName: step-8
---
# --description--
The next message from the bot will concern the bot's location.
Create a variable called `botLocationSentence`.
Then use string concatenation with the `+` operator to join the string `"I live in "` with the `botLocation` variable followed by a period (`.`).
Assign this value to the `botLocationSentence` variable.
Then, log the value of `botLocationSentence` to the console.
# --hints--
You should have a `botLocationSentence` variable.
```js
assert.isNotNull(botLocationSentence);
```
Your `botLocationSentence` variable should hold the value of a string.
```js
assert.isString(botLocationSentence);
```
You should use string concatenation with the `+` operator to join the string `"I live in "` with the `botLocation` variable followed by a period (`.`). Be mindful of spaces.
```js
assert.equal(botLocationSentence, "I live in the universe.");
```
You should have a `console` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 5);
```
Your `console` statement should output the `botLocationSentence` variable.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\s*\(\s*botLocationSentence\s*\)/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,55 @@
---
id: 66adbc8a9793d64250f7e609
title: Step 9
challengeType: 1
dashedName: step-9
---
# --description--
In the previous lecture videos, you learned how to reassign values to variables like this:
```js
// name holds the value "John"
let name = "John";
// name now holds the value "Jane"
name = "Jane";
```
Using reassignment, assign the string `"professorBot"` to the `bot` variable.
# --hints--
You should assign the string `"professorBot"` to the `bot` variable.
```js
assert.strictEqual(bot, "professorBot");
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,79 @@
---
id: 66adc42868cab843ccee87d9
title: Step 10
challengeType: 1
dashedName: step-10
---
# --description--
Now it is time to see the new `bot` value.
Start by creating a new variable called `nicknameIntroduction`.
Use string concatenation to join the string `"My nickname is "` with the `bot` variable followed by a period (`.`).
Assign the resulting string to the `nicknameIntroduction` variable.
Then, log the value of `nicknameIntroduction` to the console.
# --hints--
You should have a variable called `nicknameIntroduction`.
```js
assert.isNotNull(nicknameIntroduction);
```
Your `nicknameIntroduction` variable should be a string.
```js
assert.isString(nicknameIntroduction);
```
You should use string concatenation to join the string `"My nickname is "` with the `bot` variable followed by a period (`.`). Be mindful of the spaces.
```js
assert.strictEqual(nicknameIntroduction, "My nickname is professorBot.");
```
You should have a `console` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 6);
```
You should log the value of `nicknameIntroduction` to the console.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\s*\(\s*nicknameIntroduction\s*\)/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,52 @@
---
id: 66adc5919c1853448f119d11
title: Step 11
challengeType: 1
dashedName: step-11
---
# --description--
Now it looks like the bot wants to change their nickname.
Using reassignment, assign the string `"awesomeTeacherBot"` to the `bot` variable.
# --hints--
You should assign the string `"awesomeTeacherBot"` to the `bot` variable.
```js
assert.strictEqual(bot, "awesomeTeacherBot");
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
const nicknameIntroduction = "My nickname is " + bot + ".";
console.log(nicknameIntroduction);
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,84 @@
---
id: 66adc6046acc18453decf577
title: Step 12
challengeType: 1
dashedName: step-12
---
# --description--
To see the bot's new nickname, you will need to log a new message to the console.
Create a new variable called `newNicknameGreeting`.
Then use string concatenation to join the string `"I love my nickname but I wish people would call me "` with the `bot` variable followed by a period.
Assign the result to the `newNicknameGreeting` variable.
Then, log the value of `newNicknameGreeting` to the console.
# --hints--
You should have a variable called `newNicknameGreeting`.
```js
assert.isNotNull(newNicknameGreeting);
```
Your `newNicknameGreeting` variable should be a string.
```js
assert.isString(newNicknameGreeting);
```
You should use string concatenation to join the string `"I love my nickname but I wish people would call me "` with the `bot` variable followed by a period.
```js
assert.strictEqual(newNicknameGreeting, "I love my nickname but I wish people would call me awesomeTeacherBot.");
```
You should have a `console` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 7);
```
You should log the value of `newNicknameGreeting` to the console.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\s*\(\s*newNicknameGreeting\s*\)/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
const nicknameIntroduction = "My nickname is " + bot + ".";
console.log(nicknameIntroduction);
bot = "awesomeTeacherBot";
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,69 @@
---
id: 66adc82170acb1464bd348eb
title: Step 13
challengeType: 1
dashedName: step-13
---
# --description--
The last few messages from the bot will focus on the bot's favorite subject.
Start by creating a new variable called `favoriteSubject` and assign it the string `"Computer Science"`.
# --hints--
You should have a variable called `favoriteSubject`.
```js
assert.isNotNull(favoriteSubject);
```
Your `favoriteSubject` variable should be a string.
```js
assert.isString(favoriteSubject);
```
You should assign the string `"Computer Science"` to the `favoriteSubject` variable.
```js
assert.strictEqual(favoriteSubject, "Computer Science");
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
const nicknameIntroduction = "My nickname is " + bot + ".";
console.log(nicknameIntroduction);
bot = "awesomeTeacherBot";
const newNicknameGreeting = "I love my nickname but I wish people would call me " + bot + ".";
console.log(newNicknameGreeting);
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,87 @@
---
id: 66adcf383276814776aba3ca
title: Step 14
challengeType: 1
dashedName: step-14
---
# --description--
Next, create a variable called `favoriteSubjectSentence`.
Use string concatenation to join the string `"My favorite subject is "` with the `favoriteSubject` variable followed by a period.
Assign the result to the `favoriteSubjectSentence` variable.
Then, log the value of `favoriteSubjectSentence` to the `console`.
# --hints--
You should have a variable called `favoriteSubjectSentence`.
```js
assert.isNotNull(favoriteSubjectSentence);
```
Your `favoriteSubjectSentence` variable should be a string.
```js
assert.isString(favoriteSubjectSentence);
```
You should use string concatenation to join the string `"My favorite subject is "` with the `favoriteSubject` variable followed by a period. Be mindful of the spaces.
```js
assert.strictEqual(favoriteSubjectSentence, "My favorite subject is Computer Science.");
```
You should have a `console` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 8);
```
You should log the value of `favoriteSubjectSentence` to the `console`.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\s*\(\s*favoriteSubjectSentence\s*\)/);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
const nicknameIntroduction = "My nickname is " + bot + ".";
console.log(nicknameIntroduction);
bot = "awesomeTeacherBot";
const newNicknameGreeting = "I love my nickname but I wish people would call me " + bot + ".";
console.log(newNicknameGreeting);
const favoriteSubject = "Computer Science";
--fcc-editable-region--
--fcc-editable-region--
```

View File

@@ -0,0 +1,107 @@
---
id: 66add47d27763c4862492c8c
title: Step 15
challengeType: 1
dashedName: step-15
---
# --description--
For the final step, you will log the bot's message of `"Well, it was nice to talk to you. Have a nice day!"` to the console.
And with that, your greeting bot is complete!
# --hints--
You should have a `console` statement in your code.
```js
assert.lengthOf(__helpers.removeJSComments(code).match(/console\.log(.*)/g), 9);
```
Your `console` statement should log the string `"Well, it was nice to talk to you. Have a nice day!"`.
```js
assert.match(__helpers.removeJSComments(code), /console\.log\s*\(\s*["']Well\s*,\s*it\s*was\s*nice\s*to\s*talk\s*to\s*you\s*\.\s*Have\s*a\s*nice\s*day\s*!["']\s*\)\s*/
);
```
# --seed--
## --seed-contents--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
const nicknameIntroduction = "My nickname is " + bot + ".";
console.log(nicknameIntroduction);
bot = "awesomeTeacherBot";
const newNicknameGreeting = "I love my nickname but I wish people would call me " + bot + ".";
console.log(newNicknameGreeting);
const favoriteSubject = "Computer Science";
const favoriteSubjectSentence = "My favorite subject is " + favoriteSubject + ".";
console.log(favoriteSubjectSentence);
--fcc-editable-region--
--fcc-editable-region--
```
# --solutions--
```js
console.log("Hi there!");
console.log("I am excited to talk to you.");
let bot;
let botLocation;
bot = "teacherBot";
botLocation = "the universe";
console.log("Allow me to introduce myself.");
const botIntroduction = "My name is " + bot + ".";
console.log(botIntroduction);
const botLocationSentence = "I live in " + botLocation + ".";
console.log(botLocationSentence);
bot = "professorBot";
const nicknameIntroduction = "My nickname is " + bot + ".";
console.log(nicknameIntroduction);
bot = "awesomeTeacherBot";
const newNicknameGreeting = "I love my nickname but I wish people would call me " + bot + ".";
console.log(newNicknameGreeting);
const favoriteSubject = "Computer Science";
const favoriteSubjectSentence = "My favorite subject is " + favoriteSubject + ".";
console.log(favoriteSubjectSentence);
console.log("Well, it was nice to talk to you. Have a nice day!");
```