React.JS and Front End Development : Added two more questions with an…

…swers (Ebazhanov#2846) * Added two more questions with answers Added two more questions with answers * Added two more questions with answers Added two more questions with answers * Added source Co-authored-by: Zhenja <[email protected]>
appleneilAM · Dec 23, 2021 · a1d0b01 · a1d0b01
1 parent a993b7d
commit a1d0b01
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/front-end-development/front-end-development-quiz.md b/front-end-development/front-end-development-quiz.md
@@ -522,4 +522,22 @@ console.log(currencies);
 - [ ] a new font format that allows a single font to display at different styles and weights
 - [ ] a next-generation PDF format that offers a smaller file size and better accessibility than standard PDF documents
 
-[Source: Google Developers](https://developers.google.com/speed/webp)
+[Source: Google Developers](https://developers.google.com/speed/webp)
+
+#### Q55. Your website uses CSS Grid Layout extensively, and a visitor who navigates using the keyboard tells you that they seem to jump erratically all over the screen when navigating. What is the most likely problem?
+
+- [ ] The visitor's browser does not have full support for CSS Grid Layout.
+- [x] Items have been positioned in such a way that they are in a different order to the source.
+- [ ] The browser has a keyboard navigation bug.
+- [ ] You need to add the tabindex attribute to elements.
+
+[Source: MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+
+#### Q56. What is the definition of the phrase “Time to Interactive”?
+
+- [ ] when the browser displays the first bit of content from the DOM
+- [x] when the user can consistently interact with all of the page elements
+- [ ] when HTML has loaded, but not necessarily JavaScript, CSS, or images
+- [ ] when the user can see the webpage on the screen
+
+[Source: MDN Docs](https://web.dev/interactive/)
diff --git a/react/reactjs-quiz.md b/react/reactjs-quiz.md
@@ -985,3 +985,32 @@ render() {
 - [ ] Add a key prop with the same value to each item the list.
 - [ ] Clear the console warnings.
 - [x] When iterating over the list items, add a unique property to each list item.
+
+#### Q85. How would you generate the boilerplate code for a new app that you are building to collect underpants?
+
+- [ ] npm create-react-app collect-underpants
+- [ ] npx start-app collect-underpants
+- [ ] react new collect-underpants
+- [x] npx create-react-app collect-underpants
+
+[Source: React Docs](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
+
+#### Q86. Add the code that will fire the photon torpedoes when the button is clicked.
+
+```javascript
+class StarTrekkin extends React.Component {
+  firePhotonTorpedoes(e) {
+  console.log("pew pew");
+}
+render() {
+  return // Missing code
+ }
+}
+```
+
+- [ ] `<button onClick={firePhotonTorpedoes()}>Pew Pew</button>`
+- [ ] `<button onClick={firePhotonTorpedoes}>Pew Pew</button>`
+- [ ] `<button onClick={this.firePhotonTorpedoes()}>Pew Pew</button>`
+- [x] `<button onClick={this.firePhotonTorpedoes}>Pew Pew</button>`
+
+[Source: React Docs](https://reactjs.org/docs/handling-events.html)