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 pagewb-assess-2/src/styles.css
, the stylesheet for the elements inindex.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 withjs-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. Pressa
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.
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
In your browser, open the developer tools (for most browser, the keyboard shortcut is Cmd+Opt-I or Ctrl+Alt-I).
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.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](_images/html-screenshot.png)
Make your page look like this.#
The page should contain:
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.
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.
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 |
100–90% of tests are passing. |
>75% of tests are passing. |
<75% of tests are passing. |
Section wasn’t attempted or no tests are passing. |
Coding: Arrow functions |
100–90% of tests are passing. |
>75% of tests are passing. |
<75% of tests are passing. |
Section wasn’t attempted or no tests are passing. |
HTML and CSS |
100–90% of tests are passing. |
>75% of tests are passing. |
<75% of tests are passing. |
Section wasn’t attempted or no tests are passing. |
DOM manipulation and event handling |
100–90% of tests are passing. |
>75% of tests are passing. |
<75% of tests are passing. |
Section wasn’t attempted or no tests are passing. |
Further study |
Tests passed for the question. |
Tests failed for the question. |
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 |