Unit 2 Assessment#

This assessment will cover objects, arrow functions, array iteration methods, HTML, CSS, DOM manipulation, and event handling. Work hard and don’t forget your resources (lecture slides, notes, lab exercises, MDN, etc.)

Getting Started#

Please read all of the instructions below before you get started on your assessment.

Setup#

Download the starter code and open the project directory in VS Code.

$ dmget wb-assess-2
$ cd ~/src/wb-assess-2
$ code .

Run the commands below to add all files (excluding the ones in .gitignore) to Git and make an initial commit:

$ git add --all
$ git commit -am "initial commit"

Create a public GitHub repo and push your code to the repo.

Where to find assessment files#

This assessment includes coding questions, a question where you’ll write HTML and CSS, DOM manipulation questions, and an optional coding question for extra credit. All the files you’ll edit during the assessment can be found in the wb-assess-2/src directory.

Here’s a breakdown of all the relevant files:

  • wb-assess-2/src/objects.js: coding questions related to objects.

  • wb-assess-2/src/arrow-fns.js: coding questions related to arrow functions.

  • The HTML and CSS portion of this assessment uses two files:

    • wb-assess-2/src/index.html, an HTML page

    • wb-assess-2/src/styles.css, the stylesheet for the elements in index.html

  • The DOM manipulation and event handling portion of this assessment uses two files:

    • wb-assess-2/src/js-dom.html, an HTML page—you don’t need to edit this page.

    • wb-assess-2/src/js-dom.js, the JavaScript file meant to work with js-dom.html—this is the file you’ll edit for this section.

  • wb-assess-2/src/further-study.js: an optional coding question for extra credit.

You can also find the tests for all coding questions in the wb-assess-2/src/tests directory.

How to set up and run automated tests#

To install the tests, make sure you’re in your project directory and run:

$ npm install

You should only need to run npm install once.

After you’ve installed the tests, you can start the test server with the command below. It should look something like this:

$ npm start
No tests found related to files changed since last commit.
Press a to run all tests, or run Jest with --watchAll.

Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
jest-html-reporter >> Report generated (wb-assess-1-report.html)

About the test server#

The test server will watch your files and automatically run the tests related to the latest changes you’ve made. It’ll give you a summary at the end. You can use this summary to track your progress.

Useful keybindings for using the test server

  • To bring up the Watch Usage instructions again: press w

  • To run all the tests again: press a

  • To quit the test server: press q

Running tests manually#

If you don’t want to use the test server, you can press q to quit the server and run your tests manually with the command below.

$ npm run test

This will also open a test report page in your browser.

Submitting Your Assessment#

Read the next part carefully

The instructions below are very important so please read them carefully!

When you finish a part of the assessment, take a screenshot of your test report and send it to your assigned staff member in Discord. Follow the steps below to generate the test report and take a screenshot. We strongly recommend doing this in Google Chrome.

  1. Run the command below to re-run all tests and open the test report in your browser (you will need to quit out of the test server before you can run this command):

    $ npm run test

  2. In your browser, open the developer tools (for most browser, the keyboard shortcut is Cmd+Opt-I or Ctrl+Alt-I).

  3. In the developer tools window, launch the command palette with Cmd+Shift-P or Ctrl+Shift-P. Then, type Capture full size screenshot and hit Enter to run the command.

  4. A screenshot of the entire page will be downloaded into your browser’s downloads folder (usually located in ~/Downloads).

At the end of the assessment period, submit the link to your GitHub repo and all screenshots of test reports.

You should submit the screenshots even if you haven’t completed a section so you can get partial credit.

Assessment Instructions#

Part 1: Coding questions#

Write code to complete the function stubs in objects.js and arrow-fns.js.

Part 2: HTML and CSS#

Your task here is to add HTML and CSS to index.html in order to make it look like the following screenshot:

HTML/CSS Screenshot

Make your page look like this.#

The page should contain:

  1. An HTML form, containing the following:

    • A text input for the character name

    • Radio buttons for “Jedi” and “Sith”

    • A dropdown with 4 colors: Blue, Green, Red, and Purple.

    • A submit button.

  2. A table containing the data shown in the screenshot.

    • All cells in the table (as well as the table itself) should have a 1px white border.

    • Table cells should have 5px of padding on all sides.

    • There should be 50px of space above the table.

  3. The entire page should have a black background, white text, and sans-serif font.

If you open index.html in VS Code, you should see that it contains a stylesheet link to styles.css. Your CSS styles should go in the styles.css file.

Part 3: DOM manipulation and event handling#

Each of the prompts in js-dom.js correspond with a <section> element in js-dom.html. Add code to js-dom.js to complete each prompt.

You should open js-dom.html in your browser and in VS Code so you can refer to the HTML elements you’ll be interacting with. Note that js-dom.js has already been imported into js-dom.html for you. You should not edit the HTML in js-dom.html. You will only edit js-dom.js for this part of the assessment.

Optional: Further study#

There are optional coding questions in wb-assess-2/src/further-study.js that you can solve for extra credit.

To manually run tests for the further study questions and generate a test report, run:

$ npm run further-study

Assessment Rubric#

Excellent

Good

Needs improvement

Unsatisfactory

Coding: Objects
(25 points)

100–90% of tests are passing.
(25–22)

>75% of tests are passing.
(21–19)

<75% of tests are passing.
(18–1)

Section wasn’t attempted or no tests are passing.
(0)

Coding: Arrow functions
(25 points)

100–90% of tests are passing.
(25–22)

>75% of tests are passing.
(21–19)

<75% of tests are passing.
(18–1)

Section wasn’t attempted or no tests are passing.
(0)

HTML and CSS
(25 points)

100–90% of tests are passing.
(25–22)

>75% of tests are passing.
(21–19)

<75% of tests are passing.
(18–1)

Section wasn’t attempted or no tests are passing.
(0)

DOM manipulation and event handling
(25 points)

100–90% of tests are passing.
(25–22)

>75% of tests are passing.
(21–19)

<75% of tests are passing.
(18–1)

Section wasn’t attempted or no tests are passing.
(0)

Further study
(2 points of extra credit)

Tests passed for the question.
(2)

Tests failed for the question.
(0)

Total points#

Area

Total (100 points)

Coding: Objects

25 points

Coding: Arrow functions

25 points

HTML and CSS

25 points

DOM manipulation and event handling

25 points