This HTML/CSS, Vue.js, Node.js, and SQL Online Test Separates Good From Bad Hires

Every user on your website has an image avatar that is displayed when they post a comment. You want to style these images differently from other images on your site. Add a CSS class named avatar that fulfils the following requirements:

1. The avatar's border is rounded, so that it appears as a circle.
2. The avatar's width and height are both 150px.
3. The avatar has a solid border, has a width of 2px, and be colored gray.

For example, the avatar in the template should look like:

Consider the following package.json for a Node.js application:

{
  "name": "skill-measure-app",
  "private": true,
  "version": "1.0.0",
  "main": "lib/main.js",
  "scripts": {
    "build": "npm run cleanup & npm run test & npm run publish",
    "cleanup": "rm -fr ./lib",
    "test": "jest",
    "publish": "npm publish lib"
  },
  "dependencies": {
     "jest": "^23.0.1",
     "custom-package": "file:../custom-package"
  }
}

Select all the correct statements.

Page contains an anchor element and a paragraph below it. The paragraph's visibility should be toggled by clicking on an anchor element with the following logic:

• At start, paragraph should not be visible
• After a click, paragraph should be visible
• After another click, paragraph should not be visible again

Implement the following logic by adding missing attributes to anchor and paragraph elements.

Given the following data definition, write a query that returns the number of students whose first name is John.

TABLE students
   id INTEGER PRIMARY KEY,
   firstName VARCHAR(30) NOT NULL,
   lastName VARCHAR(30) NOT NULL

A table containing the students enrolled in a yearly course has incorrect data in records with ids between 20 and 100 (inclusive).

TABLE enrollments
  id INTEGER NOT NULL PRIMARY KEY
  year INTEGER NOT NULL
  studentId INTEGER NOT NULL

Write a query that updates the field 'year' of every faulty record to 2015.

A company hosts its website and a product API on same server using the code below:

let http = require("http");

let commonResponse = function(response){
  response.writeHead(200, { "Content-Type": "text/html" });
  response.write("Request Completed");
}

let handleApi = function(req, res){
  if(req.method == "POST"){
    commonResponse(res);
    res.end();
  }
}

let handleWeb = function(req, res){
  commonResponse(res)
  res.end();
}

http.createServer(handleApi).listen(4513);
http.createServer(handleWeb).listen(4514);

Select all the correct answers.

Information about pets is kept in two separate tables:

TABLE dogs
  id INTEGER NOT NULL PRIMARY KEY,
  name VARCHAR(50) NOT NULL

TABLE cats
  id INTEGER NOT NULL PRIMARY KEY,
  name VARCHAR(50) NOT NULL

Write a query that select all distinct pet names.

See the example case for more details.

A new social network site has the following data tables:

Select data that will be returned by the following SQL query:

SELECT users.name, COUNT(*) as count FROM users
LEFT JOIN friends
ON users.id = friends.user1 OR users.id = friends.user2
WHERE users.sex = 'f'
GROUP BY users.id, users.name;

Update the website's HTML, without using JavaScript or CSS, to make use of semantic elements so that:

• The classless outer div element is replaced with a more appropriate element.
• The divs with the image and caption classes are replaced with self-contained content elements.
• The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.

App usage data are kept in the following table:

TABLE sessions
  id INTEGER PRIMARY KEY,
  userId INTEGER NOT NULL,
  duration DECIMAL NOT NULL

Write a query that selects userId and average session duration for each user who has more than one session.

See the example case for more details.

You've been sent a snippet from a spreadsheet, and have been asked to re-create it for display on the company's internal website.

Re-create the following spreadsheet using HTML, in a table appropriately captioned "Purchase Orders".

Write CSS so that the link <a href="http://www.testdome.com">Check documentation</a> looks like the one in the image below, and the cursor looks like a question mark when hovering over the link:

Each item in a web shop belongs to a seller. To ensure service quality, each seller has a rating.

The data are kept in the following two tables:

TABLE sellers
  id INTEGER PRIMARY KEY,
  name VARCHAR(30) NOT NULL,
  rating INTEGER NOT NULL

TABLE items
  id INTEGER PRIMARY KEY,
  name VARCHAR(30) NOT NULL,
  sellerId INTEGER
  FOREIGN KEY (sellerId) REFERENCES sellers(id)

Write a query that selects the item name and the name of its seller for each item that belongs to a seller with a rating greater than 4. The query should return the name of the item as the first column and name of the seller as the second column.

See the example case for more details.

Fix the bugs in the following HTML code.

A website requires a page for adding users to the table Users. Users can be added in two ways:

• By specifying their first name and last name with input elements, and then clicking on "Add user" button. After user is added, input elements should be cleared.
• By executing the following JavaScript code: vm.users.push({firstName: "John", lastName: "Doe" })

After a user is added, it should be listed in the table Users, where the index column should start from 1.

For example, after executing vm.users.push({firstName: "John", lastName: "Doe" }) and adding Ann Franklin through UI, the tbody part of the Users table should be:

<tr>
  <td>1</td>
  <td>John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>2</td>
  <td>Ann</td>
  <td>Franklin</td>
</tr>

The createEmitter function should create a new EventEmitter and register "open" and "close" event listeners. The callbacks for those events should be onOpen and onClose arguments, respectively. The opened and closed methods should raise the "open" and "close" events on the EventEmitter they will receive as emitter arguments. The callbacks should only be invoked once per emitter.

For example, after executing the following code, it should print "Opened!" and then "Closed!":

let emitter = createEmitter(
  () => console.log("Opened!"), () => console.log("Closed!")
);
opened(emitter);
closed(emitter);

Implement the getInParallel function that should be used to invoke multiple API calls in parallel. The function accepts an array of functions that return a Promise. The function should return a Promise which should resolve to an array of results from the apiCalls argument.

For example, calling the following code should print "[ 'First API call!', 'Second API call!' ]":

let promise = getInParallel([() => Promise.resolve("First API call!"),
                             () => Promise.resolve("Second API call!")]);
if(promise) {
  promise.then((result) => console.log(result)).catch((err) => console.log(err));
}

You're making the 'Buy' button for a movie ticket website, which has the class buy-button.

The buy-button class has the following CSS:

.buy-button {
  width: 100px;
  height: 100px;
  background: Orange;
  /* Make it a circle */
  border-radius: 50%;
  /* Center horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

A 1 second animation named wiggle should be added to it so the button wiggles when the mouse hovers over it.

Rotating to 25 degrees clockwise (first 0.33 s), then to 25 degrees counterclockwise (second 0.33 s) and then returning to the original position.

It should look like this:

Which of the following would produce the desired animation?

With the new HTML5 features, modify the form so that:

• The formula input field suggests the following options when the user starts to type: "sin", "cos", "tan" and "cot".
• The iterations input field is a slider with possible values from 1 to 10.
• The precision input field is a number picker with possible values from 1 to 100, where 50 is the default value.

The following data definition defines an organization's employee hierarchy.

An employee is a manager if any other employee has their managerId set to this employee's id. That means John is a manager if at least one other employee has their managerId set to John's id.

TABLE employees
  id INTEGER NOT NULL PRIMARY KEY
  managerId INTEGER
  name VARCHAR(30) NOT NULL
  FOREIGN KEY (managerId) REFERENCES employees(id)

Write a query that selects only the names of employees who are not managers.

See the example case for more details.

A company uses a Node.js application that checks several data sources for requested information. Since each request to a data source is performance heavy, the application should try to check the next source only if the request failed at the current data source. That functionality was extracted into the firstSuccessfulPromise function.

The firstSuccessfulPromise function accepts an array of Promises as a promiseArray parameter. The function should return a Promise which should resolve to the first successful result from the promiseArray.

If no Promise from the promiseArray returns successfully, the function should return undefined.

For example, if the following code is executed:

firstSuccessfulPromise([new Promise((resolve, reject) => reject()), 
              new Promise((resolve, reject) => resolve("Success!"))])
  .then(result => console.log(result));

It should print "Success!".

The following two tables are used to define users and their respective roles:

TABLE users
  id INTEGER NOT NULL PRIMARY KEY,
  userName VARCHAR(50) NOT NULL

TABLE roles
  id INTEGER NOT NULL PRIMARY KEY,
  role VARCHAR(20) NOT NULL

The users_roles table should contain the mapping between each user and their roles. Each user can have many roles, and each role can have many users.

Modify the provided SQL create table statement so that:

• Only users from the users table can exist within users_roles.
• Only roles from the roles table can exist within users_roles.
• A user can only have a specific role once.

See the example case for more details.

A developer team wants to have a component that is made from a label and an input element. Implement a Vue.js component so that reusable element defined as:

<labeledinput id="username">Username: </labeledinput>

is rendered as:

<div>
  <label for="username">Username: </label>
  <input type="text" id="username">
</div>

The component should be usable with any root Vue instance, and developers should be able to specify different values for an element's id and an element's content.

Using CSS only (without adding additional HTML attributes), style articles so that they occupy the whole browser window and have the following properties:

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://bit.ly/3lmYVna">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://bit.ly/3flyaMj">
    <button class="remove">X</button>
  </div>
</div>

Implement the image-gallery component that accepts a links prop and renders the gallery described above so that the first item in the links prop is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

The component should be usable with any root Vue instance.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://bit.ly/3flyaMj">
    <button class="remove">X</button>
  </div>
</div>

An insurance company maintains records of sales made by its employees. Each employee is assigned to a state. States are grouped under regions. The following tables contain the data:

TABLE regions
  id INTEGER PRIMARY KEY
  name VARCHAR(50) NOT NULL

TABLE states
  id INTEGER PRIMARY KEY
  name VARCHAR(50) NOT NULL
  regionId INTEGER NOT NULL
  FOREIGN KEY (regionId) REFERENCES regions(id)

TABLE employees
  id INTEGER PRIMARY KEY
  name VARCHAR(50) NOT NULL
  stateId INTEGER NOT NULL
  FOREIGN KEY (stateId) REFERENCES states(id)

TABLE sales
  id INTEGER PRIMARY KEY
  amount INTEGER NOT NULL
  employeeId INTEGER NOT NULL
  FOREIGN KEY (employeeId) REFERENCES employees(id)  

Management requires a comparative region sales analysis report.

Write a query that returns:

• The region name.
• Average sales per employee for the region (Average sales = Total sales made for the region / Number of employees in the region).
• The difference between the average sales of the region with the highest average sales, and the average sales per employee for the region (average sales to be calculated as explained above).

Employees can have multiple sales. A region with no sales should be also returned. Use 0 for average sales per employee for such a region when calculating the 2nd and the 3rd column.

See the example case for more details.