diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index de541074aca..19ae4798b5e 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -1880,7 +1880,13 @@ "yskn": { "title": "134", "intro": [] }, "tpni": { "title": "135", "intro": [] }, "hoec": { "title": "136", "intro": [] }, - "cygu": { "title": "137", "intro": [] }, + "workshop-teacher-chatbot": { + "title": "Build a Teacher Chatbot", + "intro": [ + "In this workshop, you will continue to learn more about JavaScript strings by building a chatbot.", + "You will learn how to work with template literals, and the indexOf method." + ] + }, "axgb": { "title": "138", "intro": [] }, "rwac": { "title": "139", "intro": [] }, "uzjg": { "title": "140", "intro": [] }, diff --git a/client/src/pages/learn/front-end-development/workshop-teacher-chatbot/index.md b/client/src/pages/learn/front-end-development/workshop-teacher-chatbot/index.md new file mode 100644 index 00000000000..33930c58b62 --- /dev/null +++ b/client/src/pages/learn/front-end-development/workshop-teacher-chatbot/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Teacher Chatbot +block: workshop-teacher-chatbot +superBlock: front-end-development +--- + +## Introduction to the Build a Teacher Chatbot + +This is a test for the new project-based curriculum. diff --git a/curriculum/challenges/_meta/workshop-teacher-chatbot/meta.json b/curriculum/challenges/_meta/workshop-teacher-chatbot/meta.json new file mode 100644 index 00000000000..6835183a0d7 --- /dev/null +++ b/curriculum/challenges/_meta/workshop-teacher-chatbot/meta.json @@ -0,0 +1,85 @@ +{ + "name": "Build a Teacher Chatbot", + "blockType": "workshop", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "workshop-teacher-chatbot", + "order": 137, + "superBlock": "front-end-development", + "challengeOrder": [ + { + "id": "66b102ee0bdbad34a9f85ba0", + "title": "Step 1" + }, + { + "id": "66b5928b86e907fdfbf34e56", + "title": "Step 2" + }, + { + "id": "66b59829dba144ff1351220f", + "title": "Step 3" + }, + { + "id": "66b59b12a745e10011158f7b", + "title": "Step 4" + }, + { + "id": "66b59be6ab830800c4df9146", + "title": "Step 5" + }, + { + "id": "66b6d482bbb9e12f2e5ee1ae", + "title": "Step 6" + }, + { + "id": "66b6e39031393e30f2c48d0f", + "title": "Step 7" + }, + { + "id": "66b6e62423e8a031d6c1f03d", + "title": "Step 8" + }, + { + "id": "66b6e80d6c3f0b329c360283", + "title": "Step 9" + }, + { + "id": "66b6efddeca35833cd6f0b03", + "title": "Step 10" + }, + { + "id": "66b6f586767a1534f3097353", + "title": "Step 11" + }, + { + "id": "66b6f80fca500635d1e8af8d", + "title": "Step 12" + }, + { + "id": "66b6fdb76441c738719039fa", + "title": "Step 13" + }, + { + "id": "66b6ffb42b88e33943788abf", + "title": "Step 14" + }, + { + "id": "66b7049b7709ea3a9547c79d", + "title": "Step 15" + }, + { + "id": "66b70b8a611cbf3bcc5c6c5f", + "title": "Step 16" + }, + { + "id": "66b7137348cfb53fd3ec6c73", + "title": "Step 17" + }, + { + "id": "66b7142e588c4a407a51cdb6", + "title": "Step 18" + } + ], + "helpCategory": "JavaScript" +} \ No newline at end of file diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b102ee0bdbad34a9f85ba0.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b102ee0bdbad34a9f85ba0.md new file mode 100644 index 00000000000..20fa289c316 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b102ee0bdbad34a9f85ba0.md @@ -0,0 +1,36 @@ +--- +id: 66b102ee0bdbad34a9f85ba0 +title: Step 1 +challengeType: 1 +dashedName: step-1 +--- + +# --description-- + +In this workshop, you are going to continue learning about strings by building a Teacher Chatbot. + +To begin, add a `console` statement, with the message of `"Hi there!"`. + +# --hints-- + +You should have a `console` statement. + +```js +assert.match(code, /console\.log(.*)/); +``` + +Your console statement should output the message `"Hi there!"`. + +```js +assert.match(code, /console\.log\((['"])(Hi\s+there!)\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b5928b86e907fdfbf34e56.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b5928b86e907fdfbf34e56.md new file mode 100644 index 00000000000..d78a2920d00 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b5928b86e907fdfbf34e56.md @@ -0,0 +1,44 @@ +--- +id: 66b5928b86e907fdfbf34e56 +title: Step 2 +challengeType: 1 +dashedName: step-2 +--- + +# --description-- + +Now it is time to set the bot's name. + +Create a variable called `botName` and assign it the string value of `"teacherBot"`. + +# --hints-- + +You should have a variable called `botName`. + +```js +assert.isNotNull(botName); +``` + +Your `botName` variable should be a string. + +```js +assert.isString(botName); +``` + +Your `botName` variable should have the value of `"teacherBot"`. + +```js +assert.strictEqual(botName, "teacherBot"); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md new file mode 100644 index 00000000000..bf240320243 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59829dba144ff1351220f.md @@ -0,0 +1,65 @@ +--- +id: 66b59829dba144ff1351220f +title: Step 3 +challengeType: 1 +dashedName: step-3 +--- + +# --description-- + +Now it is time to create a greeting using the `botName` variable. + +In the previous lecture videos, you learned how to concatenate strings using template literals like this: + +```js +const name = "John"; + +// "Hello, John!" +`Hello, ${name}!`; +``` + +Start by creating a variable called `greeting`. + +Next, using template literal syntax, assign a string that says `My name is`, followed by the `botName` variable, and ending with a period (`.`). + +Finally, log the `greeting` variable to the console. + +# --hints-- + +You should have a variable called `greeting`. + +```js +assert.isNotNull(greeting); +``` + +You should assign a string to your `greeting` variable. + +```js +assert.isString(greeting); +``` + +You should use template literals to concatenate the string `My name is` with the `botName` variable followed by a period (`.`). + +```js +assert.equal(greeting, "My name is teacherBot."); +``` + +You should have a `console` statement that logs the `greeting` variable to the console. + +```js +assert.match(code, /console.log\(.*greeting.*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59b12a745e10011158f7b.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59b12a745e10011158f7b.md new file mode 100644 index 00000000000..f0063d626f0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59b12a745e10011158f7b.md @@ -0,0 +1,69 @@ +--- +id: 66b59b12a745e10011158f7b +title: Step 4 +challengeType: 1 +dashedName: step-4 +--- + +# --description-- + +The next step is to create a few more variables that will be used in future bot messages. + +Create a variable called `subject` and assign it the string value `"JavaScript"`. + +Then create a variable called `topic` and assign it the string value `"strings"`. + +# --hints-- + +You should have a variable called `subject`. + +```js +assert.isNotNull(subject); +``` + +You should assign a string to your `subject` variable. + +```js +assert.isString(subject); +``` + +You should assign the string `"JavaScript"` to your `subject` variable. + +```js +assert.equal(subject, "JavaScript"); +``` + +You should have a variable called `topic`. + +```js +assert.isNotNull(topic); +``` + +You should assign a string to your `topic` variable. + +```js +assert.isString(topic); +``` + +You should assign the string `"strings"` to your `topic` variable. + +```js +assert.equal(topic, "strings"); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md new file mode 100644 index 00000000000..7e09d9eba71 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b59be6ab830800c4df9146.md @@ -0,0 +1,74 @@ +--- +id: 66b59be6ab830800c4df9146 +title: Step 5 +challengeType: 1 +dashedName: step-5 +--- + +# --description-- + +Now, it's time to use the variables you created in the previous step. + +In the lecture videos, you learned how to work with template literals like this: + +```js +const name = "John"; +const age = 30; + +// My name is John and I am 30 years old. +`My name is ${name} and I am ${age} years old.`; +``` + +Start by creating a `sentence` variable. + +Using template literal syntax, assign the string `Today, you will learn about [topic variable goes here] in [subject variable goes here].` to the `sentence` variable. + +You will replace the `[topic variable goes here]` and `[subject variable goes here]` placeholders with the `topic` and `subject` variables and `${}` syntax. + +Finally, log the `sentence` variable to the console. + +# --hints-- + +You should have a `sentence` variable. + +```js +assert.isNotNull(sentence); +``` + +Your `sentence` variable should be a string. + +```js +assert.isString(sentence); +``` + +You should use template literal syntax to assign the string `Today, you will learn about [topic variable goes here] in [subject variable goes here].` to the `sentence` variable. Refer to the example if you need help. + +```js +assert.match(code, /Today,\s*you\s+will\s+learn\s+about\s+\$\{topic\}\s+in\s+\$\{subject\}\./); +``` + +You should log the `sentence` variable to the console. + +```js +assert.match(code,/console\.log\(\s*sentence\s*\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6d482bbb9e12f2e5ee1ae.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6d482bbb9e12f2e5ee1ae.md new file mode 100644 index 00000000000..079db69b335 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6d482bbb9e12f2e5ee1ae.md @@ -0,0 +1,67 @@ +--- +id: 66b6d482bbb9e12f2e5ee1ae +title: Step 6 +challengeType: 1 +dashedName: step-6 +--- + +# --description-- + +For this next portion of the project, the bot will teach working with the string `length` property. + +Start by creating a new variable called `strLengthIntro`. + +Then using template literal syntax, assign the string `Here is an example of using the length property on the word [subject].` to the `strLengthIntro` variable. + +Replace `[subject]` with the `subject` variable like you did earlier. + +Finally, log the `strLengthIntro` variable to the console. + +# --hints-- + +You should have a variable called `strLengthIntro`. + +```js +assert.isNotNull(strLengthIntro); +``` + +Your `strLengthIntro` variable should be a string. + +```js +assert.isString(strLengthIntro); +``` + +You should use template literal syntax to assign the string `Here is an example of using the length property on the word [subject goes here].` to the `strLengthIntro` variable. + +```js +assert.match(code,/`Here\s+is\s+an\s+example\s+of\s+using\s+the\s+length\s+property\s+on\s+the\s+word\s+\$\{subject\}\.`/); +``` + +You should log the `strLengthIntro` variable to the console. + +```js +assert.match(code,/console\.log\(\s*strLengthIntro\s*\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e39031393e30f2c48d0f.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e39031393e30f2c48d0f.md new file mode 100644 index 00000000000..67ea891739e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e39031393e30f2c48d0f.md @@ -0,0 +1,62 @@ +--- +id: 66b6e39031393e30f2c48d0f +title: Step 7 +challengeType: 1 +dashedName: step-7 +--- + +# --description-- + +To get the length of a string, you can use the length property. This property returns the number of characters in a string. + +Here is an example: + +```js +const greeting = "Hello, world!"; + +// Output: 13 +console.log(greeting.length); +``` + +Start by using the `length` property to get the length of the `subject` string and log that value to the console. + +# --hints-- + + +You should use the `length` property to get the length of the `subject` string. + +```js +assert.match(code, /subject\.length/); +``` + +You should log the length of the `subject` string to the console. + +```js +assert.match(code, /console\.log\(\s*subject\.length\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e62423e8a031d6c1f03d.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e62423e8a031d6c1f03d.md new file mode 100644 index 00000000000..d97e4c5de44 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e62423e8a031d6c1f03d.md @@ -0,0 +1,64 @@ +--- +id: 66b6e62423e8a031d6c1f03d +title: Step 8 +challengeType: 1 +dashedName: step-8 +--- + +# --description-- + +Now it is time to get the length of the `topic` string. + +You can use template literals inside `console` statements like this: + +```js +const developer = "Jessica"; +console.log(`Hello, my name is ${developer}.`); +``` + +Start by outputting the message `Here is an example of using the length property on the word [topic].` to the console. + +Remember to replace `[topic]` with the `topic` variable, and use proper template literal syntax as you did in the previous steps. + +Then, add a second `console.log` statement that outputs the length of the `topic` string to the console. + +# --hints-- + +You should use template literal syntax to output the message `Here is an example of using the length property on the word [topic].` to the `console`. + +```js +assert.match(code, /console\.log\(`Here\s+is\s+an\s+example\s+of\s+using\s+the\s+length\s+property\s+on\s+the\s+word\s+\$\{topic\}\.`\)/); +``` + +You should have a second `console` statement to output the length of the `topic` variable to the `console`. + +```js +assert.match(code, /console\.log\(\s*topic\.length\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); +console.log(subject.length); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e80d6c3f0b329c360283.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e80d6c3f0b329c360283.md new file mode 100644 index 00000000000..28235038635 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6e80d6c3f0b329c360283.md @@ -0,0 +1,53 @@ +--- +id: 66b6e80d6c3f0b329c360283 +title: Step 9 +challengeType: 1 +dashedName: step-9 +--- + +# --description-- + +The next part of this workshop is to review accessing characters from a string. + +Start by outputting the message `Here is an example of accessing the first letter in the word [subject].` to the console. + +Remember to replace `[subject]` with the `subject` variable and use proper template literal syntax like you did in the previous steps. + +# --hints-- + +Your `console` statement should output the message `Here is an example of accessing the first letter in the word [subject].`. + +```js +assert.match(code, /console.log\(`Here\s+is\s+an\s+example\s+of\s+accessing\s+the\s+first\s+letter\s+in\s+the\s+word\s+\${subject}\.`\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md new file mode 100644 index 00000000000..929323c6bab --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6efddeca35833cd6f0b03.md @@ -0,0 +1,63 @@ +--- +id: 66b6efddeca35833cd6f0b03 +title: Step 10 +challengeType: 1 +dashedName: step-10 +--- + +# --description-- + +In the previous lecture videos, you learned how to access characters in a string like this: + +```js +const firstName = 'Jessica'; +// returns 'J' +firstName[0]; +``` + +Remember that index numbers start at `0`, so the first letter in a string will always be at index `0`. + +Start by adding another `console` statement. + +Inside the `console` statement, output the first letter of the `subject` variable using bracket notation and the correct index number. + +# --hints-- + +Your `console` statement should output the first letter of the `subject` variable using bracket notation and index `0`. + +```js +assert.match(code, /console.log\(subject\[0\]\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6f586767a1534f3097353.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6f586767a1534f3097353.md new file mode 100644 index 00000000000..6aa0986c0b7 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6f586767a1534f3097353.md @@ -0,0 +1,63 @@ +--- +id: 66b6f586767a1534f3097353 +title: Step 11 +challengeType: 1 +dashedName: step-11 +--- + +# --description-- + +Now it is time to access the second letter of the `subject` variable. + +Start by adding a `console` statement that outputs the message `Here is an example of accessing the second letter in the word [subject].` Remember to replace `[subject]` with the actual value of the `subject` variable and use correct template literal syntax. + +Then add another `console` statement that outputs the second letter of the `subject` variable using bracket notation and the correct index number. + +# --hints-- + +Your `console` statement should output the message `Here is an example of accessing the second letter in the word [subject].`. + +```js +assert.match(code, /console.log\(`Here\s+is\s+an\s+example\s+of\s+accessing\s+the\s+second\s+letter\s+in\s+the\s+word\s+\$\{subject\}\.`\);?/); +``` + +You should have another `console` statement that outputs the second letter of the `subject` variable using bracket notation index `1`. + +```js +assert.match(code, /console.log\(subject\[1\]\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6f80fca500635d1e8af8d.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6f80fca500635d1e8af8d.md new file mode 100644 index 00000000000..42a86af8017 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6f80fca500635d1e8af8d.md @@ -0,0 +1,60 @@ +--- +id: 66b6f80fca500635d1e8af8d +title: Step 12 +challengeType: 1 +dashedName: step-12 +--- + +# --description-- + +Now it is time to access the last character of a string. + +Start by adding another `console` statement that outputs the message `Here is an example of accessing the last letter in the word [subject].` + +Remember to replace `[subject]` with the actual value of the `subject` variable and use correct template literal syntax. + +# --hints-- + +Your `console` statement should output the message `Here is an example of accessing the last letter in the word [subject].` Remember to use the correct template literal syntax. + +```js +assert.match(code, /console.log\(`Here\s+is\s+an\s+example\s+of\s+accessing\s+the\s+last\s+letter\s+in\s+the\s+word\s+\${subject}\.`\);?/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md new file mode 100644 index 00000000000..be5cc91163c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6fdb76441c738719039fa.md @@ -0,0 +1,83 @@ +--- +id: 66b6fdb76441c738719039fa +title: Step 13 +challengeType: 1 +dashedName: step-13 +--- + +# --description-- + +In the lecture videos, you learned how to access the last character in a string like this: + +```js +const firstName = "Jessica"; + +// returns 'a' +firstName[firstName.length - 1]; +``` + +`string.length - 1` will always give you the last index number for a string. + +Create a new variable called `lastCharacter` and assign it the value of the last character in the `subject` variable. + +Then, log the value of the `lastCharacter` variable to the console. + +# --hints-- + +You should have a variable called `lastCharacter`. + +```js +assert.isNotNull(lastCharacter); +``` + +You should assign the value of the last character in the `subject` variable to the `lastCharacter` variable. Refer to the example if you need help. + +```js +assert.strictEqual(lastCharacter, subject[subject.length - 1]); +``` + +You should log the value of the `lastCharacter` variable to the `console`. + +```js +assert.match(code, /console.log\(lastCharacter\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6ffb42b88e33943788abf.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6ffb42b88e33943788abf.md new file mode 100644 index 00000000000..6fc58f5cd98 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b6ffb42b88e33943788abf.md @@ -0,0 +1,75 @@ +--- +id: 66b6ffb42b88e33943788abf +title: Step 14 +challengeType: 1 +dashedName: step-14 +--- + +# --description-- + +For the last part of the workshop, you will review how to find the index position of substring in a string. Remember that a substring is a part of a string. + +Start by creating a variable called `learningIsFunSentence` and assign it the string value of `"Learning is fun."`. + +# --hints-- + +You should have a variable called `learningIsFunSentence`. + +```js +assert.isNotNull(learningIsFunSentence); +``` + +Your `learningIsFunSentence` should hold the value of a string. + +```js +assert.isString(learningIsFunSentence); +``` + +You should assign the value of `"Learning is fun."` to the variable `learningIsFunSentence`. + +```js +assert.equal(learningIsFunSentence, "Learning is fun."); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +const lastCharacter = subject[subject.length - 1]; +console.log(lastCharacter); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7049b7709ea3a9547c79d.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7049b7709ea3a9547c79d.md new file mode 100644 index 00000000000..a0a40402003 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7049b7709ea3a9547c79d.md @@ -0,0 +1,64 @@ +--- +id: 66b7049b7709ea3a9547c79d +title: Step 15 +challengeType: 1 +dashedName: step-15 +--- + +# --description-- + +The next step is to add another `console` statement that outputs the string `"Here are examples of finding the positions of substrings in the sentence."`. + +# --hints-- + +You should have a `console` statement that outputs the string `"Here are examples of finding the positions of substrings in the sentence."`. + +```js +assert.match(code, /console\.log\((['"])(Here\s+are\s+examples\s+of\s+finding\s+the\s+positions\s+of\s+substrings\s+in\s+the\s+sentence\.)\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +const strLength = subject.length; +console.log(strLength); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +const lastCharacter = subject[subject.length - 1]; +console.log(lastCharacter); + +const learningIsFunSentence = "Learning is fun."; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md new file mode 100644 index 00000000000..02624391eb2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b70b8a611cbf3bcc5c6c5f.md @@ -0,0 +1,79 @@ +--- +id: 66b70b8a611cbf3bcc5c6c5f +title: Step 16 +challengeType: 1 +dashedName: step-16 +--- + +# --description-- + +In the previous lecture videos, you learned how to work with the `indexOf` method like this: + +```js +const sentence = "I love to learn."; + +// returns index 2 +console.log(sentence.indexOf("love")); + +// returns -1 +console.log(sentence.indexOf("hate")); +``` + +Remember that the `indexOf` method returns the index position of the first occurrence of a substring in a string. If the substring is not found, it returns `-1`. + +Add a new `console` statement that outputs the result of using the `indexOf` method on the `learningIsFunSentence` variable to find the index position of the substring `"Learning"`. + +# --hints-- + +Your `console` should use the `indexOf` method on the `learningIsFunSentence` variable to find the index position of the substring `"Learning"`. + +```js +assert.match(code, /console\.log\(\s*learningIsFunSentence\.indexOf\(\s*(['"])(Learning)\1\s*\)\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +const lastCharacter = subject[subject.length - 1]; +console.log(lastCharacter); + +const learningIsFunSentence = "Learning is fun."; + +console.log("Here are examples of finding the positions of substrings in the sentence."); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7137348cfb53fd3ec6c73.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7137348cfb53fd3ec6c73.md new file mode 100644 index 00000000000..397d59ad73b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7137348cfb53fd3ec6c73.md @@ -0,0 +1,77 @@ +--- +id: 66b7137348cfb53fd3ec6c73 +title: Step 17 +challengeType: 1 +dashedName: step-17 +--- + +# --description-- + +Next, you will add a new `console` statement that outputs the result of using the `indexOf` method on the `learningIsFunSentence` variable to find the position of the substring `"fun"`. + +Below that `console` statement, add a new `console` statement that outputs the result of using the `indexOf` method to find the position of the substring `"learning"`. + +Take note of what the last `console` statement outputs. + +# --hints-- + +Your `console` should output the index position of the substring `"fun"` from the `learningIsFunSentence` variable. + +```js +assert.match(code, /console\.log\(\s*learningIsFunSentence\.indexOf\(\s*(['"])(fun)\1\s*\)\s*\)/); +``` + +Your second `console` statement should output the index position of the substring `"learning"` from the `learningIsFunSentence` variable. + +```js +assert.match(code, /console\.log\(\s*learningIsFunSentence\.indexOf\(\s*(['"])(learning)\1\s*\)\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +const lastCharacter = subject[subject.length - 1]; +console.log(lastCharacter); + +const learningIsFunSentence = "Learning is fun."; + +console.log("Here are examples of finding the positions of substrings in the sentence."); + +console.log(learningIsFunSentence.indexOf("Learning")); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7142e588c4a407a51cdb6.md b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7142e588c4a407a51cdb6.md new file mode 100644 index 00000000000..57b2e764b89 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-teacher-chatbot/66b7142e588c4a407a51cdb6.md @@ -0,0 +1,126 @@ +--- +id: 66b7142e588c4a407a51cdb6 +title: Step 18 +challengeType: 1 +dashedName: step-18 +--- + +# --description-- + +The last console statement outputs `-1` because the substring `"learning"` is not found in the `"Learning is fun.` sentence. + +The `indexOf` method is case-sensitive. So the substring `"learning"` is not the same as the substring `"Learning"`. + +Now that you understand how some common string methods work, you can complete the workshop by logging one last message to the `console`. + +Add a `console` statement that outputs the message `"I hope you enjoyed learning today."` to the `console`. + +And with that final message, you have completed the workshop! + +# --hints-- + +Your `console` statement should output the message `"I hope you enjoyed learning today."`. + +```js +assert.match(code, /console\.log\(\s*(['"])(I\s+hope\s+you\s+enjoyed\s+learning\s+today\.)\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +const lastCharacter = subject[subject.length - 1]; +console.log(lastCharacter); + +const learningIsFunSentence = "Learning is fun."; + +console.log("Here are examples of finding the positions of substrings in the sentence."); + +console.log(learningIsFunSentence.indexOf("Learning")); + +console.log(learningIsFunSentence.indexOf("fun")); +console.log(learningIsFunSentence.indexOf("learning")); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```js +console.log("Hi there!"); + +const botName = "teacherBot"; + +const greeting = `My name is ${botName}.`; +console.log(greeting); + +const subject = "JavaScript"; +const topic = "strings"; + +const sentence = `Today, you will learn about ${topic} in ${subject}.`; +console.log(sentence); + +const strLengthIntro = `Here is an example of using the length property on the word ${subject}.`; +console.log(strLengthIntro); + +console.log(subject.length); + +console.log(`Here is an example of using the length property on the word ${topic}.`); +console.log(topic.length); + +console.log(`Here is an example of accessing the first letter in the word ${subject}.`); + +console.log(subject[0]); + +console.log(`Here is an example of accessing the second letter in the word ${subject}.`); +console.log(subject[1]); + +console.log(`Here is an example of accessing the last letter in the word ${subject}.`); + +const lastCharacter = subject[subject.length - 1]; +console.log(lastCharacter); + +const learningIsFunSentence = "Learning is fun."; + +console.log("Here are examples of finding the positions of substrings in the sentence."); + +console.log(learningIsFunSentence.indexOf("Learning")); + +console.log(learningIsFunSentence.indexOf("fun")); +console.log(learningIsFunSentence.indexOf("learning")); + +console.log("I hope you enjoyed learning today."); +```