Skip to main content
⏱ 0:04est. 12 min

Propertyloop

// MCQs ---
/*
What is the use of the `getInitialProps` function in Next.js?
It gets the initial state of your Redux store
It fetches some data and passes it as props to your page
It specifies the layout of your page
It determines the initial viewport size of your page
How does Next.js handle 404 pages?
By declaring a 404 route in your server code
By creating a `404` directory inside `pages`
By handling 404 errors in the `next.config.js` file
By creating a custom `404.js` file inside the `pages` directory
What is a potential drawback of using `getInitialProps` in Next.js?
It disables Automatic Static Optimization
It can lead to memory leaks
It can only fetch data from an API
It causes slower page loads
Which method in Next.js can be used for client-side navigation?
Router.push
Router.navigate
Router.prefetch
Router.route
How can you share state between pages in a Next.js app?
By using a state management library like Redux or MobX
By passing props from the `_app.js` file
By using the `useState` hook in the `_document.js` file
By using the `getServerSideProps` function
In Next.js, how can you add environment variables that will be available only on the server side?
By adding the variable to the `env` property in `next.config.js`
By using the `process.env` object in your server-side code
By prefixing the variable name with `NEXT_PUBLIC_` in the `.env.local` file
By adding the variable to the `.env` file
What does `fallback: blocking` do in the `getStaticPaths` function in Next.js?
It generates the page at request time if the page was not generated at build time, and the user will not see the page until it`s fully generated
It blocks access to the page if the page was not generated at build time
It causes a 404 error if the page was not generated at build time
It serves a fallback version of the page while the page is being generated in the background
How can you make a Next.js application fully server-rendered?
By exporting an async `getInitialProps` function from `_app.js`
By using `getServerSideProps` in every page
By using `getStaticProps` in every page
By setting `serverRendered: true` in `next.config.js`
In Next.js, how can you generate a static site with data that needs to be fetched from an API?
By fetching the data in the `_app.js` file
By fetching the data in the `next.config.js` file
By fetching the data in the component`s `render` method
By using `getStaticProps` and fetching the data inside this function
In Next.js, how can you pass data from `getServerSideProps` or `getStaticProps` to your page?
By returning an object with a `props` key from these functions
By using the `useEffect` hook inside these functions
By passing the data as a parameter to the page function
In JavaScript, how can you copy an object by value, not by reference?
Using Object.assign() or the spread operator
Using the assignment operator (=)
Using the JSON.parse() and JSON.stringify() methods
Using the copy() method
In JavaScript, what does the `this` keyword refer to inside an arrow function?
The object that the arrow function is a method of
The first argument passed to the function
The global object
The context in which the arrow function was defined
Which Git command enables you to pick up commits from a branch within a repository and apply it to another branch?
git commit
git cherry-pick
git apply
git merge
What are Hooks in Git?
Scripts that Git runs only after an event like commit, push, update or receive.
Scripts that Git runs once a pull request is merged.
Scripts that Git runs before or after an event like commit, push, update or receive.
Scripts that Git only run before an event like commit, push, update or receive.
Which CSS framework includes a responsive grid system, Sass variables and mixins, and prebuilt components such as navbars and carousels?
Bootstrap
Tailwind CSS
AngularJS
Vue.js
In the context of CSS, what is a `pseudo-class`?
A keyword added to selectors that specifies a special state of the selected element(s)
A class that only applies to elements when they`re active or focused
A special class that applies styles to elements when they`re hovered over
A class that applies a specific style to all child elements
In SQL, how would you rename a column in a table?
Using the RENAME COLUMN command
Using the CHANGE COLUMN command
Using the MODIFY COLUMN command
Using the ALTER TABLE command
Which CSS property is used to change the text color of an element?
font-color
color
text-color
color-change
What`s the difference between `display: none` and `visibility: hidden` in CSS?
`display: none` removes the element from the layout, `visibility: hidden` makes it invisible but still occupies space
`display: none` and `visibility: hidden` have the same effect
`display: none` makes the element invisible but still occupies space, `visibility: hidden` removes it from the layout
`display: none` hides the element and its children, `visibility: hidden` hides only the element
Which pseudo-class in CSS is used to select elements based on a specific position in a list of elements?
:first-child
:nth-child()
:last-child
:middle-child
*/

// Nodejs question ---
/*
Node.js Age Counting
In the JavaScript file, write a program to perform a GET request on the route https://coderbyte.com/api/challenges/json/age-counting which contains a data key and the value is a string which contains items in the format: key=STRING, age=INTEGER. Your goal is to count how many items exist that have an age equal to or greater than 50, and print this final value.

Example Input
{"data":"key=IAfpK, age=58, key=WNVdi, age=64, key=jp9zt, age=47"}

Example Output
2
Browse Resources
Search for any help or documentation you might need for this problem. For example: array indexing, Ruby hash tables, etc.
*/

// SQL question ---
/*
SQL Member Count
Your table: maintable_EYML7

MySQL version: 8.0.23

In this MySQL challenge, your query should return the names of the people who are reported to (excluding null values), the number of members that report to them, and the average age of those members as an integer. The rows should be ordered by the names in alphabetical order. Your output should look like the following table.


Browse Resources
Search for any help or documentation you might need for this problem. For example: array indexing, Ruby hash tables, etc.

Sol:
SELECT ReportTo, COUNT(*) as "Members", CEILING(AVG(AGE)) as "Average Age"
WHERE ReportTo IS NOT NULL
GROUP BY ReportTo
ORDER BY ReportTo;
*/

// React question ---
/*
React Context API
We provided some simple React template code. Your goal is to modify the application so that when you click the toggle button, the favorite programming language toggles between the items in the languages array. The default value should be the first item in the array.

You must use the Context API for this challenge, which means you have to use the React.createContext and Context.Provider functions. You are free to add classes and styles, but make sure you leave the component ID's and clases provided as they are.

Submit your code once it is complete and our system will validate your output.
Browse Resources
Search for any help or documentation you might need for this problem. For example: array indexing, Ruby hash tables, etc.

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const languages = ['JavaScript', 'Python'];

function App() {
  // implement Context here so can be used in child components
  return (
    <MainSection />
  );
}

function MainSection() {
  return (
    <div>
      <p id="favoriteLanguage">favorite programing language: null</p>
      <button id="changeFavorite">toggle language</button>
    </div>
  )
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
*/