This HTML/CSS, Angular, TypeScript, Node.js, and MongoDB Online Test Separates Good From Bad Hires

Which of the following statements about components in Angular are correct?

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.

The following code initializes three types representing the colors: red, green and blue.

type ColorType = [string, number, number, number];
let red: ColorType = ['Red', 1, 0, 0];
let green: [string, number, number, number] = ['Green', 0, 1, 0];
let blue = ['Blue', 0, 0, 1];

Select the statements that are correct.

You work for a mail delivery company and the tracker system uses MongoDB with the following document schema for the "Packages" collection:

{
  "_id": { "bsonType": "objectId" },
  "destination": { "type": "string" },
  "state": { "enum": ["preparing", "in transit", "delivered"] }
}

Select all the correct statements about the Packages collection.

The following code initializes strings as three different types and attempts to make them uppercase. Which statements about the behavior of the typescript compiler are correct?

let stringType: string = "string type";
stringType.toUpperCase();

let anyType: any = "any type";
anyType.toUpper();
anyType.toUpperCase();

let objectType: Object = "object type";
objectType.toUpperCase();

Consider the following component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'welcome',
  template: `<h1>Welcome to {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class WelcomeComponent  {
  @Input() name: string;
}

Select the statements about its use (in another components template or module) that are correct.

Consider the following component, which can be used to model an animal and the noise it makes.

import {Component, Input, Output} from '@angular/core';

@Component({
  selector: 'animal-noise',
  template: `
    <span>{{animal}}</span>
    <button (click)="makeNoise()">Make noise</button>
  `
})
export class AnimalNoise {
  @Input('animal') animal: string;
  @Input('noise') noise: string;

  makeNoise() {
    alert(`${this.noise}`);
  }
}

Select the statements about the AnimalNoise component that are correct.

You're working on a MongoDB database for a video game where players can sell their items, such as planks, to other players.

The Mongo Shell code to trade planks between players is the following:

// The seller and buyer variables were set to the ids of the seller and the buyer, respectively
// They both exist in the database
sellerPlayer = db.Players.findOne({ _id: seller });
buyerPlayer = db.Players.findOne({ _id: buyer });
if (sellerPlayer.planks >= 100 && buyerPlayer.gold >= 350) {
    db.Players.update({ _id: seller }, { $inc: { gold: 350, planks: -100 }});
    db.Players.update({ _id: buyer }, { $inc: { planks: 100, gold: -350 }});
}

What can be said about the code above in cases with no disconnections from the server?

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.

The Circle class is used in a prototype for a game engine. Finish the class so that:

• It inherits from the GameObject class
• It has one more public field, radius
• It has only one constructor, that sets the radius, and sets the x and y fields using the GameObject class

For example, executing the following code:

let circle = new Circle(10, 50, 8);
console.log(circle.x, circle.y, circle.radius);

should print "10 50 8".

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.

Finish the ShoppingList component. The component will receive an array of strings as the items array. It should render one li element per item in the array.

For example, if the items array is ["Bread", "Eggs", "Milk"], the rendered HTML should look like:

<ul>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
</ul>

The code for running the example case locally is provided here.

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:

Finish the AddressListComponent's template so that it renders one li element per address and it correctly one-way binds each field of the AddressComponent field.

For example, if the addresses array is:

[{ street: "Third Avenue‎", city: "New York", zipCode: "10001" },
 { street: "Constitution Avenue", city: "Washington", zipCode: "20001" }]

the template should render to:

<ul>
  <li>
    <app-address>
      <p>Third Avenue</p>
      <p>New York</p>
      <p>10001</p>
    </app-address>
  </li>
  <li>
    <app-address>
      <p>Constitution Avenue</p>
      <p>Washington</p>
      <p>20001</p>
    </app-address>
  </li>
</ul>

The code for running the example case locally is provided here. 

Fix the bugs in the following HTML code.

Your company assigns each customer a membership ID, and you are implementing a check digit for those IDs.

The check digit should be calculated by adding up all digits in each membership ID. If the result of the sum is a number with more than a single digit, another iteration is required, and the digits of the result should also be added together. This process should repeat until a single-digit number is calculated.

For example, for the membership ID "55555" the sum of all digits is 25. Because this is not a single-digit number, 2 and 5 would be added, and the result, 7, would be the check digit.

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));
}

Extend the Permission enum so that it has the following fields:

• Read, which should have a value of 1
• Write, which should have a value of 2
• Execute, which should have a value of 4

Extend the getPermissionList function so that it accepts a combination of several Permission enums and returns an array of strings which are the names of the Permissions.

For example, executing:

getPermissionList(Permission.Read | Permission.Write);

should return [ 'Read', 'Write' ] in any order.

Consider the following application module:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent }        from './home.component';
import { ItemDetailComponent }  from './item-detail.component';
const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home',  component: HomeComponent },
    { path: 'detail/:id', component: ItemDetailComponent, outlet: 'route1' }
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

Which of the following statements about the routers behavior are correct?

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?

Consider the following code:

class Positionable {
  locationX: number = 0;
  locationY: number = 0;
  moveTo(toX: number, toY: number) {
    this.locationX = toX;
    this.locationY = toY;
  }
}

class Rotatable {
  orientation: number = 0;
  rotate(orientation: number) {
    this.orientation += orientation;
  }
}

class MovingObject {
  locationX: number = 0;
  locationY: number = 0;
  orientation: number = 0;
  printPosition(){
    console.log(this.locationX, this.locationY);
  }
}

function applyMixins(derivedCtor: any, baseCtors: any[]) {
  baseCtors.forEach(baseCtor => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
      derivedCtor.prototype[name] = baseCtor.prototype[name];
    });
  });
}

applyMixins(MovingObject, [Positionable, Rotatable]);
let mover = new MovingObject();

Select the statements that are correct.

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.

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!".

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 ImageGallery component that accepts a links input and renders the gallery described above so that the first item in the links input 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.

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>

The code for running the example case locally is provided here.