From e7e0388dc744cfb243a7760d6b0364b8643cb8b3 Mon Sep 17 00:00:00 2001 From: Zaira <33151350+zairahira@users.noreply.github.com> Date: Wed, 4 Sep 2024 02:41:30 +0500 Subject: [PATCH] feat(curriculum): add fortune teller lab (#55888) --- client/i18n/locales/english/intro.json | 7 +- .../lab-fortune-teller/index.md | 9 ++ .../_meta/lab-fortune-teller/meta.json | 11 ++ .../66c06d618d075c7f7f1b890a.md | 144 ++++++++++++++++++ 4 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 client/src/pages/learn/front-end-development/lab-fortune-teller/index.md create mode 100644 curriculum/challenges/_meta/lab-fortune-teller/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 101dde46719..589c3962a0a 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -1919,7 +1919,12 @@ "rwac": { "title": "139", "intro": [] }, "hxwa": { "title": "141", "intro": [] }, "xkbo": { "title": "142", "intro": [] }, - "nkxq": { "title": "143", "intro": [] }, + "lab-fortune-teller": { + "title": "Build a Fortune Teller", + "intro": [ + "In this lab, you will build a fortune teller by randomly selecting a fortune from the avaialble fortunes." + ] + }, "wfyg": { "title": "144", "intro": [] }, "guqy": { "title": "145", "intro": [] }, "nkge": { "title": "146", "intro": [] }, diff --git a/client/src/pages/learn/front-end-development/lab-fortune-teller/index.md b/client/src/pages/learn/front-end-development/lab-fortune-teller/index.md new file mode 100644 index 00000000000..70a0418ccb1 --- /dev/null +++ b/client/src/pages/learn/front-end-development/lab-fortune-teller/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Fortune Teller +block: lab-fortune-teller +superBlock: front-end-development +--- + +## Introduction to Building a Fortune Teller + +In this lab, you will build a fortune teller by randomly selecting a fortune from the avaialble fortunes. diff --git a/curriculum/challenges/_meta/lab-fortune-teller/meta.json b/curriculum/challenges/_meta/lab-fortune-teller/meta.json new file mode 100644 index 00000000000..4c311de03d7 --- /dev/null +++ b/curriculum/challenges/_meta/lab-fortune-teller/meta.json @@ -0,0 +1,11 @@ +{ + "name": "Build a Fortune Teller App", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "blockType": "lab", + "dashedName": "lab-fortune-teller", + "order": 143, + "superBlock": "front-end-development", + "challengeOrder": [{ "id": "66c06d618d075c7f7f1b890a", "title": "Build a Fortune Teller" }], + "helpCategory": "JavaScript" +} diff --git a/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md b/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md new file mode 100644 index 00000000000..4106d397a6e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md @@ -0,0 +1,144 @@ +--- +id: 66c06d618d075c7f7f1b890a +title: Build a Fortune Teller +challengeType: 14 +dashedName: build-a-fortune-teller +--- + +# --description-- + +In this lab, you will define five fortunes and randomly select one of them to display the fortune to the user. + +**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. + +**User Stories:** + +1. You should initialize the five variables `fortune1`, `fortune2`, `fortune3`, `fortune4`, and `fortune5` with a string value of your choice. You can use the below options if you like: + + - `"Your cat will look very cuddly today."` + - `"The weather will be nice tomorrow."` + - `"Be cautious of your new neighbours."` + - `"You will find a new hobby soon."` + - `"It would be wise to avoid the colour red today."` + +2. You should select a random number between 1 and 5, inclusive, and assign it to the variable `randomNumber`. + +3. You should create a `selectedFortune` variable and assign the appropriate fortune based on these rules: + + - If `randomNumber` is 1, assign the value of `fortune1` to `selectedFortune`. + - If `randomNumber` is 2, assign the value of `fortune2` to `selectedFortune`. + - If `randomNumber` is 3, assign the value of `fortune3` to `selectedFortune`. + - If `randomNumber` is 4, assign the value of `fortune4` to `selectedFortune`. + - If `randomNumber` is 5, assign the value of `fortune5` to `selectedFortune`. + +4. You should log the `selectedFortune` to the console. + +# --hints-- + +You should initialize `fortune1` with a string value. + +```js +assert.isNotNull(fortune1); +assert.isString(fortune1); +``` + +You should initialize `fortune2` with the a string value. + +```js +assert.isNotNull(fortune2); +assert.isString(fortune2); +``` + +You should initialize `fortune3` with a string value. + +```js +assert.isNotNull(fortune3); +assert.isString(fortune3); +``` + +You should initialize `fortune4` with a string value. + +```js +assert.isNotNull(fortune4); +assert.isString(fortune4); +``` + +You should initialize `fortune5` with a string value. + +```js +assert.isNotNull(fortune5); +assert.isString(fortune5); +``` + +You should use the `Math.random()` method to generate a random number. + +```js +assert.match(__helpers.removeJSComments(code), /Math\.random\(\)/); +``` + +You should generate a random number between 1 and 5, inclusive, and assign it to the variable `randomNumber`. + +```js +assert.isNotNull(randomNumber); +assert.include([1,2,3,4,5], randomNumber); +``` + +You should have a `selectedFortune` variable that is assigned a value based on the value of `randomNumber`. + +```js +assert.isNotNull(selectedFortune); +``` + +The `randomNumber` should correspond to its fortune. For example, if `randomNumber` is 1, the `selectedFortune` should be equal to `fortune1` and so on. + +```js +const condition1 = randomNumber === 1 && selectedFortune === fortune1; +const condition2 = randomNumber === 2 && selectedFortune === fortune2; +const condition3 = randomNumber === 3 && selectedFortune === fortune3; +const condition4 = randomNumber === 4 && selectedFortune === fortune4; +const condition5 = randomNumber === 5 && selectedFortune === fortune5; + +assert(condition1 || condition2 || condition3 || condition4 || condition5); +``` + +You should output the `selectedFortune` to the console. + +```js +assert.match(__helpers.removeJSComments(code), /console\s*\.\s*log\s*\(\s*selectedFortune\s*\)\s*;?/); +``` + +# --seed-- + +## --seed-contents-- + +```js + +``` + +# --solutions-- + +```js +const fortune1 = "Your cat will look very cuddly today."; +const fortune2 = "The weather will be nice tomorrow."; +const fortune3 = "Be cautious of your new neighbours."; +const fortune4 = "You will find a new hobby soon."; +const fortune5 = "It would be wise to avoid the colour red today."; + +let randomNumber = Math.floor(Math.random() * 5) + 1; + +let selectedFortune; + +if (randomNumber === 1) { + selectedFortune = fortune1; +} else if (randomNumber === 2) { + selectedFortune = fortune2; +} else if (randomNumber === 3) { + selectedFortune = fortune3; +} else if (randomNumber === 4) { + selectedFortune = fortune4; +} else { + selectedFortune = fortune5; +} + +console.log(selectedFortune); +```