JavaScript Online Test

A client has a web page with a series of tasks. They want to implement a reordering feature that behaves like the following example:

After performing the clicks shown in the animation above, the document's body should be:

<div>
    <span>Read emails</span>
    <button class="downButton" type="button">&darr;</button>
</div>
<div>
    <span>Prepare presentation</span>
    <button class="downButton" type="button">&darr;</button>
    <button class="upButton" type="button">&uarr;</button></div>
<div>
    <span>Monthly report</span>
    <button class="upButton" type="button">&uarr;</button>
</div>

Implement the initialize function to apply the described functionality. The body tag will be prepopulated with the initial HTML which includes all the div, span, and buttons tags. The feature should work with any number of tasks.

A megastore offers three types of discounts, which are represented as DiscountType object.

Implement the getDiscountedPrice function which should take the total weight of the shopping cart, the total price, and the discount type. It should return the final discounted price based on the discount schemes as shown in the promotional video below:

(Open full-size video in a new tab)

For example, the following code:

console.log(getDiscountedPrice(12, 100, DiscountType.Weight));

should print:

82

An RPG game lets you assign points to the strength and speed attributes of your character. The video below shows how 5 points are supposed to be assigned.

The available points are passed in the totalPoints parameter to initialize the UI.

Complete the initialize function so that the UI behaves as shown in the video. When initialized, all points should be available, and both attributes should start at 0.

A turn-based strategy game has a grid with water and land. The grid contains a true value where it's water and false where it's land.

The player controls a boat unit with a particular movement pattern. It can only move to fixed destinations from its current position as shown in the video below:

The boat can only move in a direct path through water to the possible destinations, so a destination will become unreachable if there is land in the way.

Implement the canTravelTo function, that checks whether a destination is reachable by the boat. It should return true for destinations that are reachable according to the pattern above, and false for unreachable or out of bounds destinations which are outside the grid.

For example, consider the following code:

const gameMatrix = [
  [false, true,  true,  false, false, false],
  [true,  true,  true,  false, false, false],
  [true,  true,  true,  true,  true,  true],
  [false, true,  true,  false, true,  true],
  [false, true,  true,  true,  false, true],
  [false, false, false, false, false, false],
];

console.log(canTravelTo(gameMatrix, 3, 2, 2, 2)); // true, Valid move
console.log(canTravelTo(gameMatrix, 3, 2, 3, 4)); // false, Can't travel through land
console.log(canTravelTo(gameMatrix, 3, 2, 6, 2)); // false, Out of bounds

The following image shows valid and invalid destinations when the boat is in the position (3, 2):

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

<div class="image">
  <img src="https://tinyurl.com/im-gal-1st" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="https://tinyurl.com/im-gal-2nd" alt="Second">
  <button class="remove">X</button>
</div>

Implement the setup function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent <div> element 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 class="image">
  <img src="https://tinyurl.com/im-gal-2nd" alt="Second">
  <button class="remove">X</button>
</div>

A gaming company is working on a platformer game. They need a function that will compute the character's final speed, given a map and a starting speed.

The terrain on which the game character moves forward is made from various pieces of land placed together. Implement the function calculateFinalSpeed which takes the initial speed of the character, and an array of degrees of inclination that represent the uneven terrain.

The speed of the character will increase or decrease proportionally to the incline of the land, as shown in the image below:

The magnitude of the angle of inclination will always be < 90°. The speed change occurs only once for each piece of land. The function should immediately return 0 as the final speed if an incline reduces the speed to 0 or below 0, which makes the character lose 1 life.

For example, the below code:

console.log(calculateFinalSpeed(60, [0, 30, 0, -45, 0]));

should print:

75

An HTML div element contains a list of the most endangered species for each continent.

<div>
    <ul>
        <li data-continent="North America">California condor</li>
        <li data-continent="Europe">Cave bear</li>
    </ul>
</div>

Implement the function endangeredSpecies that returns the species's name for a particular continent.

For example, endangeredSpecies("North America") should return "California condor".

A playlist is considered a repeating playlist if any of the songs contain a reference to a previous song in the playlist. Otherwise, the playlist will end with the last song which points to undefined.

Implement the method isInRepeatingPlaylist that, efficiently with respect to time used, returns true if a playlist is repeating or false if it is not.

For example, the following code prints "true" as both songs point to each other.

let first = new Song("Hello");
let second = new Song("Eye of the tiger");

first.nextSong = second;
second.nextSong = first;

console.log(first.isInRepeatingPlaylist());

As part of a data processing pipeline, complete the implementation of the pipeline function:

• The pipeline function should accept a variable number of functions, and it should return a new function that accepts one parameter arg.
• The returned function should call the first function in pipeline with the parameter arg, and call the second function with the result of the first function.
• The returned function should continue calling each function in pipeline in order, following the same pattern, and return the value from the last function.

For example, calling pipeline(x => x * 3, x => x + 1, x => x / 2), and then calling the returned function with 3 should return 5.0.

Function appendChildren should add a new child div to each existing div. New divs should be decorated by calling decorateDiv.

For example, after appendChildren is executed, the following divs:

<div id="a">
  <div id="b">
  </div>
</div>

should take the following form (assuming decorateDiv does nothing):

<div id="a">
  <div id="b">
    <div></div>
  </div>
  <div></div>
</div>

The code below should do the job, but for some reason it goes into an infinite loop. Fix the bugs.

Implement the ensure function so that it throws an error if called without arguments or the argument is undefined. Otherwise it should return the given value.

Implement the removeProperty function which takes an object and property name, and does the following:

If the object obj has a property prop, the function removes the property from the object and returns true; in all other cases it returns false.

Write a function that converts user entered date formatted as M/D/YYYY to a format required by an API (YYYYMMDD). The parameter "userDate" and the return value are strings.

For example, it should convert user entered date "12/31/2014" to "20141231" suitable for the API.

The JavaScript function getAppSettings returns the config settings for the app. The code below shows the function in use:

function getAppSettings(detailed) {
  if (detailed) {
    return {
      env: "Linux",
      language: "Python",
      userAgent: "Chromium"
    };
  }

  return "Linux";
}

const info = getSystemInfo(false);
console.log(info["env"].trim());

The code causes the following runtime error:

Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

Explain in short why the runtime error occurred.

(An answer up to 40 words is sufficient)

You are working on a calculator application where users can input a mathematical expression such as: (3 + 5) * (2 - 4).

To correctly evaluate this expression, the application needs to validate the expression and ensure that the parentheses are balanced. The balanced parentheses are crucial for determining the order of operations and evaluating the expression correctly.

You have used an AI assistant to generate the following function to check if the parentheses in an expression are balanced:

function isBalanced(parentheses) {
    let stack = [];
    let opening = new Set(['(', '[', '{']);
    let closing = new Set([')', ']', '}']);
    let pairs = {
        ')': '(',
        ']': '[',
        '}': '{'
    };

    for (let c of parentheses) {
        if (opening.has(c)) {
            stack.push(c);
        } else if (closing.has(c)) {
            if (stack.length === 0 || stack[stack.length - 1] !== pairs[c]) {
                return false;
            }
            stack.pop();
        }
    }

    return stack.length === 0;
}

What is correct for the given function?

A Mathematics tutoring web application for kids has a button that highlights all even numbers (in span), using 'yellow' as the background color. Clicking the button again removes the background. All further clicks add or remove the 'yellow' background alternately.

Currently, the button doesn't work as expected. For the given HTML markup and JavaScript function, select all options that will identify and fix the bugs in the JavaScript function:

<div id='numbers'>
 <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
 <button id='btn' onclick='toggleEvenColor()'>Toggle even number highlighting</button>
</div>

1: function toggleEvenColor() {
2:   let spanElements = document.querySelectorAll('#numbers span');
3:   spanElements.forEach(function() {
4:     item.style.backgroundColor = 'transparent';
5:   });
6: }