The Wolters Kluwer code test for Sr. Front-End Designer / Design Technologist:

<h2 class="section-heading">Challenge 1</h2>

<!--
  How would you improve the markup below?
-->

<div id="first">
  <form>
    <button type="button">Not Confirmed</button>
  </form>
</div>

<button aria-label="luggage">
  <svg aria-hidden class="svg-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
  <path class="wk-icon-path" d="M16.8,4.8V1.6H7.2v3.2H0v17.6h24V4.8H16.8z M8.8,3.2h6.4v1.6H8.8V3.2z M18.4,6.4v14.4H5.6V6.4H18.4z M1.6,6.4H4v14.4H1.6
  V6.4z M22.4,20.8H20V6.4h2.4V20.8z"></path>
  </svg>
</button>

<h2 class="section-heading">Challenge 2</h2>

<!--
  How could you improve the markup below? 
-->

<div>
	<ol>
    <li><a href="javascript:void(0);" alt="Post about the worst animals">Blog Post Title</a></li>
    <li><a alt="Post about the best animals"><a href="javascript:void(0);">Blog Post Title</a></li>
    <li><a href="javascript:void(0);" alt="Worst animals of the US">Blog Post Title</a></li>
  </ol>
</div>

<h2 class="section-heading">Challenge 3</h2>

<!--
  1. Position a small red square to the top right of this container
  2. Apply a drop shadow to the red square
-->

<div class="container">
  <div class="square"></div>
</div>

<h2 class="section-heading">Challenge 4</h2>

<!--
  Make the small red square scroll with the content of the page
-->

<div id="fourth" class="container">
  <div class="square">The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.</div>
</div>

<h2 class="section-heading">Challenge 5</h2>

<!--
  1. Create a 3 column layout with equal heights
  2. Demonstrate 2 ways to achieve this
-->

<div id="fifth">
  <!--
<div class="method1">
    <div>one</div>
    <div>one</div>
    <div>one</div>
  </div>
-->
  <div class="method2">
    <div>two</div>
    <div>two</div>
    <div>two</div>
  </div>
</div>
  

<h2 class="section-heading">JS Challenge</h2>


var strA = "hi there";
var strB = strA;
strB="bye there!";
console.log (strA)

var objA = {prop1: 42};
var objB = objA; 
objB.prop1 = 90;
console.log(objA) 

var arrA = [0,1,2,3,4,5];
var arrB = arrA;
arrB[0]=42;
console.log(arrA)

var salary = "1000$";

(function () {
  console.log("Original salary was " + salary);

  var salary = "5000$";

  console.log("My New Salary " + salary);
})();


foo();
bar();

var foo = function() {
  // Some code
}
function bar () {
  // Some code
}



var salary = "1000$";

(function () {
  console.log("Original salary was " + salary);

  var salary = "5000$";

  console.log("My New Salary " + salary);
})();

// ************************************************************************************************************************************
//   instructions:
//      0. Fork the exercise to clone the workspace and assign a unique url. (anon is fine, you don't need to create an account on codepen)
//      1. Solve as many challenges as you want, partial credit for attempting.
//      2. Email me the link for grading
// 			
//   about-jasmine:
//     if you are coming from a C# testing background then expect(actual).toBe(expected); behaves exactly like Assert.AreEqual(expected, actual) 
//
//   notes:
//    * This is not timed, complete at your own pace.
//    * You may use any resources you like, but you need to be able to explain your answers.
//    * Consult the TODO comments for instructions.
//    * Do not modify expect() calls unless there is an INCOMPLETE value. This is how each test is judged for correctness.
//    * After each edit, the tests should re-run automatically. (a green is good, red is bad).
//    * If the results ever STOP displaying, it means you have done something to break the javascript parser.
//    * The "Discussion:" points can be filled in if you know the answer, otherwise we can talk through them in more detail.
//    * Bonus points for style.
// ************************************************************************************************************************************
describe("a good javascript developer", function () {
  "use strict";
  
  it("should understand bools", function() {
    // some people just don't get bools. prove to me that you do.
    function boolean(x, y) {
      if(x || y === 10) return true;
      return false;
      // todo: fill in this function body so that it returns true if the value of x is true, 
      // OR the value of y is EXACTLY 10, 
      // otherwise return false.
    }

    expect(boolean(true, 99)).toBe(true);
    expect(boolean(false, 10)).toBe(true);
    expect(boolean(false, 99)).toBe(false);
  });

  it("should REALLY understand bools", function() {
    function test(val) {
      /* 
      TODO: write a function which returns TRUE if the provided value is one of
      the following javascript values: 0, null, false, '', "", []
    */
    }

    expect(test(0.000)).toBe(true);
    expect(test(null)).toBe(true);
    expect(test(false)).toBe(true);
    expect(test('')).toBe(true);
    expect(test([])).toBe(true);

    expect(test("hello")).toBe(false);
    expect(test(1)).toBe(false);
    expect(test([1])).toBe(false);
  });
  
  it("should understand strict equality", function() {
   
    function strictEqual(x, y) {
      // TODO: this function should return true only if X and Y are the same value AND type.
      // i.e. a Number and a String representing are NOT strictly equal.
    }
    
    expect(strictEqual(5, 2 + 3)).toBe(true);
    expect(strictEqual(10, "10")).toBe(false);
    expect(strictEqual(null, 0)).toBe(false);
  })
  
  it("should understand variable hoisting", function() {
    var y = -1;

    // DISCUSS: Why does this work before the variable is declared? Wouldn't this introduce a global?
    x = ++y;
    x++;

    var x = 1;
    // TODO: fill in a value for INCOMPLETE that matches the expected value of X.
    expect(x).toBe(INCOMPLETE);
  });
  
  it("should be able to write a for loop", function() {
    var sum = 0;
    // TODO: sum the EVEN integers in the range [1 to 50] (inclusive)
    expect(sum).toBe(650);
  });
    
  it("should understand object literals", function() {
    // TODO: declare an object literal which has the fields 'name' and 'age' 
    // set name to "Bob" and age to 30
    var p = INCOMPLETE;

    expect(p.name).toBe("Bob");
    expect(p.age).toBe(30);
  });
  
  it("should understand constructors", function() {
    // TODO: define a constructor function called 'Person' which has the fields 'name' and 'age' 
    // set name to "Bob" and age to 30
    var p = new Person();
    
    expect(p.name).toBe("Bob");
    expect(p.age).toBe(30);
  });

  it("should be able to work with arrays", function() {
    
    var nums = [ "2", 3, 5, 6, 9, 12, 15, 17, 20 ];
    var factors = [];
    // todo: copy all the numbers evenly divisible by 5 to a new array called fizz.
    
    expect(factors).toEqual([5, 15, 20]);
  });

  it("should understand regular expressions", function() {
    
    // TODO: write a regex to test if a given string is an integer.
    var validator = /TODO/;
    
    expect(validator.test("1234")).toBe(true);
    expect(validator.test("one23four")).toBe(false);
  });
  

  it("should understand closure", function() {
    var super_secret_key; 

    function match (test) {
      return test === super_secret_key;
    }

    // TODO: Fill in the two INCOMPLETE values for the expectation.
    var before = match("xyz");
    expect(before).toBe(INCOMPLETE);

    super_secret_key = "xyz";

    var after = match("xyz");
    expect(after).toBe(INCOMPLETE);
    // Discussion: Why does this work?
  });
  
   it("should understand privacy in javascript", function() {
    function maker() {
      // TODO: Write a function which produces a function which counts the number of times it has been 
      // called and returns that value. (Two instances of the function should NOT share the same count.)
    };

    var func = maker();
    var func_2 = maker();

    expect(func()).toBe(1);
    expect(func_2()).toBe(1);
    expect(func_2()).toBe(2);
    expect(func()).toBe(2);
  });
  
  it("should be able solve generic interview type questions", function () {
    function palindrome(p) {
      // TODO: Write a function which tests an input string to determine 
      // whether it is the same forwards and backwards.
    }
    
    expect(palindrome("rats live on no evil star")).toBe(true);
    expect(palindrome("this is not a palindrome")).toBe(false);
  });

  it("should understand functional programming concepts", function() {
    // TODO: Write a function which captures some original value and *produces* a function which
    // returns true if the parameter matches the original value.
    // You don't want to leak the secret to the caller, you just want to tell him if he's right or not.
    var remember = function (secret) {
      
    };
    
    // imagine this function is passed to untrusted code.
    var match = remember(10);
    var other = remember("bob");

    expect(match(10)).toBe(true);
    expect(match("10")).toBe(false);
    expect(other("bob")).toBe(true);
    expect(other(10)).toBe(false);
  });
  
  it("should understand callbacks", function() {
    // remember: don't panic
    // these are just functions I can test to see if they've been called.
    var done = jasmine.createSpy('done');
    var fail = jasmine.createSpy('fail'); 
    
    function isGreaterThanTen(value, done, fail) {
      // it invokes a callback function
      if(value>10) { done() }
      // 'done' if the value is greater than 10, and 'fail' otherwise.
      else { fail() }
    }
  
    isGreaterThanTen(11, done, fail);
    
    expect(done).toHaveBeenCalled();
    expect(fail).not.toHaveBeenCalled();
  });
  
  it("should understand promises", function(done) {
    var url = 'https://httpbin.org/status/500'
    
    spyOn(window, 'get').and.callThrough()
    
    // assume that the function `get()`, has the following signature get(resource: string, cb: callback) : Promise
    // it supports a callback or promise for the result.
    // this code uses the callback form, but callbacks lead to deep nesting
    // and should be avoided whenever possible.
    
    // TODO: update the code to use the promise result instead of the callback.
    get(url, function(res) {
        expect(res.ok).toBe(false)
        expect(get).toHaveBeenCalled()
        // just to prove that you didn't use the callback form.
        expect(get).toHaveBeenCalledWith(url)
        done()
    })
  });

  it("should understand the switch statement", function () {
    function translate(number) {
      // TODO: Use a switch statement to convert the numbers 1, 2, 3, 4 
      // to their english language equivalents (one, two, three, four)
      // this function should have a SINGLE return statement.
    }

    expect(translate(1)).toBe("one");
    expect(translate(2)).toBe("two");
    expect(translate(3)).toBe("three");
    expect(translate(4)).toBe("four");
  });

  it("should understand object lookups", function () {
    function translate(number) {
      // TODO: Convert the switch statement to a lookup table
      // with the same functionality as before.
    }

    expect(translate(1)).toBe("one");
    expect(translate(2)).toBe("two");
    expect(translate(3)).toBe("three");
    expect(translate(4)).toBe("four");
    
    // discussion: What is the relationship between code and data?
  });

  it("should appreciate the elegance of data structures", function() {
    function translate(number, language) {
      // TODO: Using this same lookup table scheme, extend the function so that 
      // it can translate the numbers to localized spanish (country-code es) values as well. 
      // 1-4 in spanish is "uno", "dos", "tres", "quatro"
    }

    expect(translate(1, 'en')).toBe("one");
    expect(translate(2, 'en')).toBe("two");
    expect(translate(3, 'en')).toBe("three");
    expect(translate(4, 'en')).toBe("four");

    expect(translate(1, 'es')).toBe("uno");
    expect(translate(2, 'es')).toBe("dos");
    expect(translate(3, 'es')).toBe("tres");
    expect(translate(4, 'es')).toBe("quatro");
  });
  
  // -----------------------------------------
  // ADVANCED - these might take a little bit longer  
  // -----------------------------------------
  it("can think recursively", function() {
    // note: the codepen editor supports collapsing this region if you're tired of seeing it.
    var org_chart = {
      root: {
        title: "CEO", 
        employees: [
          { 
            title: "Chief Financial Officer", 
            employees: [
              {
                title: "VP Finance",
                employees: [
                  {
                    title: "Financial Accounting Manager",
                    employees: [
                      {
                        title: "Financial Accountant III"
                      },
                      {
                        title: "Financial Accountant II"
                      },
                      {
                        title: "Financial Accountant I"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          { 
            title: "Chief Information Officer", 
            employees: [
              { title: "Admin. Assistant" },
              { 
                title: "VP Information Security", 
                employees: [
                  { title: "Director Information Security" }
                ] 
              },
              { 
                title: "VP Enterprise Data", 
                employees: [
                  { 
                    title: "DBA Lead", 
                    employees: [
                      { title: "DBA II" },
                      { title: "DBA I" },
                    ] 
                  },
                  { title: "Data Developer III" },
                  { title: "Reporting Analyst II" },
                ] 
              },
              { 
                title: "VP Network Infrastructure",
                employees: [
                  { title: "Sys Ops Manager" },
                  { title: "Network Ops Manager" },
                ]  
              }
            ]
          }
        ]
      }
    };
     
    function employee_count (node) {
      // TODO: given this data structure for an organization,
      // provide the total employee count for the entire company.
    }
  
    expect(employee_count(org_chart.root)).toBe(20);
  });

  it ("can design quality code", function() {
    function exactChange(total, given) {
      // TODO: write a function which computes the exact quantity
      // of bills (max: 20) and coins to return to a customer to make exact change.
      // This will be a shared library function for other members of your team to use,
      // so it should be simple and well documented
    }

    // TODO: write some tests below to validate that your function works correctly
    expect(false).toEqaul(true); // todo: remove me
  });

  it ("can solve weird problems", function() {

    // TODO: pretty-print numbers
    function stringify(number) {

    }

    expect(stringify(0)).toBe("zero");
    expect(stringify(10)).toBe("ten");
    expect(stringify(10875212)).toBe("ten million eight hundred seventy-five thousand two hundred twelve");
  });
});