diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index bed24cb45d1..6a1cfd36400 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2169,7 +2169,10 @@ }, "dvnt": { "title": "164", "intro": [] }, "ekdb": { "title": "165", "intro": [] }, - "ezek": { "title": "166", "intro": [] }, + "lab-quiz-game": { + "title": "Build a Quiz Game", + "intro": ["For this lab, you will build a quiz game."] + }, "lab-factorial-calculator": { "title": "Build a Factorial Calculator ", "intro": ["In this lab, you will build a factorial calculator."] diff --git a/client/src/pages/learn/front-end-development/lab-quiz-game/index.md b/client/src/pages/learn/front-end-development/lab-quiz-game/index.md new file mode 100644 index 00000000000..76982b97d25 --- /dev/null +++ b/client/src/pages/learn/front-end-development/lab-quiz-game/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Quiz Game +block: lab-quiz-game +superBlock: front-end-development +--- + +## Introduction to the Build a Quiz Game + +In this lab you will build a quiz game. diff --git a/curriculum/challenges/_meta/lab-quiz-game/meta.json b/curriculum/challenges/_meta/lab-quiz-game/meta.json new file mode 100644 index 00000000000..6435fbfa90d --- /dev/null +++ b/curriculum/challenges/_meta/lab-quiz-game/meta.json @@ -0,0 +1,11 @@ +{ + "name": "Build a Quiz Game", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "dashedName": "lab-quiz-game", + "order": 166, + "superBlock": "front-end-development", + "challengeOrder": [{ "id": "66f17db06803d11a1bd19a20", "title": "Build a Quiz Game" }], + "helpCategory": "JavaScript", + "blockType": "lab" +} diff --git a/curriculum/challenges/english/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md b/curriculum/challenges/english/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md new file mode 100644 index 00000000000..6305ef28bc3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md @@ -0,0 +1,186 @@ +--- +id: 66f17db06803d11a1bd19a20 +title: Build a Quiz Game +challengeType: 14 +dashedName: lab-quiz-game +--- + +# --description-- + +**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. + +**User Stories:** + +1. You should create an array named `questions`. +1. The `questions` array should contain at least five objects, each having the keys `category`, `question`, `choices`, and `answer`. +1. The `category` key should have the value of a string representing a question category. +1. The `question` key should have the value of a string representing a question. +1. The `choices` key should have the value of an array containing three strings, which are alternative answers to the question. +1. The `answer` key should have the value of a string, representing the correct answer to the question. Also, the value of `answer` should be included in the `choices` array. +1. You should have a function named `getRandomQuestion` that returns a random question object from the `questions` array. +1. You should have a function named `getRandomComputerChoice` that takes the array of the available choices as a parameter, and returns a random answer to the selected question. +1. You should have a function named `getResults` that takes the selected question object and the computer choice as its parameters and returns `The computer's choice is correct!` if the answer is correct. Otherwise, it returns `The computer's choice is wrong. The correct answer is: `, where `` is the value of the correct answer to the chosen question. + +# --hints-- + +You should create an array named `questions`. + +```js +assert.isArray(questions); +``` + +The `questions` array should contain at least five objects, each having the keys `category`, `question`, `choices`, and `answer`. + +```js +assert.isAtLeast(questions.length, 5); +questions.forEach(question => { + assert.isObject(question); + assert.hasAllKeys(question, ['category', 'choices', 'question', 'answer']); +}); + +``` + +The `category` key should have the value of a string representing a question category. + +```js +questions.forEach(({category}) => assert.isString(category)); +``` + +The `question` key should have the value of a string representing a question. + +```js +questions.forEach(({question}) => { + assert.isString(question); + assert.include(question, '?'); +}) +``` + +The `choices` key should have the value of an array containing three strings. + +```js +questions.forEach(({choices}) => { + assert.isArray(choices); + assert.lengthOf(choices, 3); + choices.forEach(choice => assert.isString(choice)); +}) +``` + +The `answer` key should have the value of a string. + +```js +questions.forEach(({answer}) => assert.isString(answer)); +``` + +The value of `answer` should be included in the `choices` array. + +```js +questions.forEach(({answer, choices}) => assert.oneOf(answer, choices)); +``` + +You should have a function named `getRandomQuestion` that returns a random question object from the `questions` array. + +```js +assert.isFunction(getRandomQuestion); +assert.isObject(getRandomQuestion()); +assert.deepInclude(questions, getRandomQuestion(), "getRandomQuestion did not return one of the objects inside questions"); +``` + +You should have a function named `getRandomComputerChoice` that takes the array of the available choices as a parameter, and returns a random answer to the selected question. + +```js +assert.isFunction(getRandomComputerChoice); +const randomArray = ['a', 'b', 'c']; +assert.oneOf(getRandomComputerChoice(randomArray), randomArray) +``` + +You should have a function named `getResults`. + +```js +assert.isFunction(getResults); +``` + +If the computer choice match the answer, `getResults` should return `The computer's choice is correct!` + +```js +assert.equal(getResults(questions[0], questions[0].answer), `The computer's choice is correct!`); +``` + +If the computer choice doesn't match the answer, `getResults` should return `The computer's choice is wrong. The correct answer is: `, where `` is the value of the correct answer to the chosen question. + +```js +assert.equal(getResults({category: 'misc', choices: ['a', 'b', 'c'], question: "question?", answer: "b"}, "a"), `The computer's choice is wrong. The correct answer is: b`) +``` + +# --seed-- + +## --seed-contents-- + +```js + +``` + +# --solutions-- + +```js +const questions = [ + { + category: "science", + question: "What is the chemical symbol for potassium?", + choices: ["P", "K", "Pt"], + answer: "K" + }, + { + category: "science", + question: "What is the unit of electrical resistance?", + choices: ["Ohm", "Coulomb", "Sievert"], + answer: "Ohm" + }, + { + category: "geography", + question: "What is the capital city of Australia?", + choices: ["Sidney", "Canberra", "Wellington"], + answer: "Canberra" + }, + { + category: "literature", + question: 'Who wrote "1984"?', + choices: ["Ray Bradbury", "Aldous Huxley", "George Orwell"], + answer: "George Orwell" + }, + { + category: "sport", + question: "How many players are on a standard volleyball team?", + choices: ["6", "7", "12"], + answer: "6" + } +] + +function getRandomQuestion() { + const randomIndex = Math.floor(Math.random() * questions.length); + return questions[randomIndex]; +} + +function getRandomComputerChoice(choices) { + const randomIndex = Math.floor(Math.random() * choices.length); + return choices[randomIndex]; +} + +function getResults(obj, computerChoice) { + return computerChoice === obj.answer + ? "The computer's choice is correct!" + : `The computer's choice is wrong. The correct answer is: ${obj.answer}`; +} + +const questionObj = getRandomQuestion(); +const { question, choices } = questionObj; + +console.log(question); +console.log(`Choices: ${choices}`); + +const computerChoice = getRandomComputerChoice(choices); +console.log(`Computer chooses: ${computerChoice}`); + +const results = getResults(questionObj, computerChoice); +console.log(results); + +```