jQuery Online Test
About the test
The assessment involves solving work sample tasks such as:
- Handling user events and manipulating DOM to build responsive web pages.
- Using jQuery selectors to select proper HTML elements.
- Initiating and handling asynchronous events.
Sample public questions
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://bit.ly/3lmYVna" alt="First"> <button class="remove">X</button> </div> <div class="image"> <img src="https://bit.ly/3flyaMj" 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://bit.ly/3flyaMj" alt="Second"> <button class="remove">X</button> </div>
The createProductCodeForm function is used to create a new form that accepts a product code from a user.
The current version of the form contains the hint: 'The product code can be found on the label'. This hint is currently always visible to the user.
Improve the form so that the hint is only rendered when the input element is the focused element.
Write the function newMessage, which receives the name of the topic as the parameter. Function should change the background color of the p tag to red where the data-topic-name is topicName. A topicName that doesn't have a matching data-topic-name should be ignored.
For example, if the HTML is:
<div> <p data-topic-name="discussion">General discussion</p> <p data-topic-name="bugs">Bugs</p> <p data-topic-name="animals">Animals</p> </div>
After calling newMessage("discussion") the HTML should be:
<div> <p data-topic-name="discussion" style="background-color: red;">General discussion</p> <p data-topic-name="bugs">Bugs</p> <p data-topic-name="animals">Animals</p> </div>
An HTML div element contains lists of endangered species grouped by continent and the species population status.
<div> <ul data-continent="North America"> <li data-species="California condor">Critically Endangered</li> <li data-species="American bison">Near Threatened</li> </ul> <ul data-continent="Europe"> <li data-species="Cave bear">Extinct</li> </ul> </div>
Implement the function endangeredSpecies that returns how endangered a species is on a particular continent.
For example, endangeredSpecies('North America', 'American bison') should return 'Near Threatened'.
A website needs a list where users can rank their favorite foods. Write the setup function, which should register click handlers on all Up! and Down! buttons. The Up! button should move the list item one place up in the list, while Down! button should move the list item one place down in the list.
For example, consider this code:
document.body.innerHTML = `<ol> <li><button>Up!</button>Taco<button>Down!</button></li> <li><button>Up!</button>Pizza<button>Down!</button></li> <li><button>Up!</button>Eggs<button>Down!</button></li> </ol>`; setup();
If the button Up! button in Pizza list item is clicked, Pizza should be the first item in the list, while Taco should be the second item.
The following HTML represents a family tree:
<James> <Dave></Dave> <Mike></Mike> <Sarah></Sarah> </James>
Implement the closestRelative function so that when a parent jQuery object is passed, the function returns the parent's closest relative whose name matches the relativeName, and obeys the following rules:
- The parent parameter is the jQuery object of which the closest relative will be a descendant.
- Each member of the family, including children, may also be a parent to one or more children.
- Children are more closely related to the parent than grandchildren.
- If several children in the same generation have the same name, then the first child in the tree is considered the closer relative.
- If no matching relative is found the function should return null.
For example, the below code should print 'MIKE' for the given family tree:
let parent = $('James').eq(0); let relative = closestRelative(parent, 'Mike'); console.log(relative && relative.prop("tagName")); // prints MIKE
For companies: premium questions
Buy TestDome to access premium questions that can't be practiced.
Get money back if you find any premium question answered online.
13 more premium jQuery questions
Skills and topics tested
- Attribute Manipulation
- DOM Manipulation
- Dialog Box
- Event Handling
- Content Manipulation
- Asynchronous Calls
- Error Handling
For job roles
- jQuery Developer
- Web Front-End Developer
Sample candidate report
What others say
Simple, straight-forward technical testing
TestDome is simple, provides a reasonable (though not extensive) battery of tests to choose from, and doesn't take the candidate an inordinate amount of time. It also simulates working pressure with the time limits.
Jan Opperman, Grindrod Bank
Solve all your skill testing needs
150+ Pre-made tests
From web development and database administration to project management and customer support. See all pre-made tests.
Mix questions for different skills or even custom questions in one test. See an example.
How TestDome works
Choose a pre-made test
or create a custom test
Invite candidates via
email, URL, or your ATS
a test remotely
Sort candidates and
get individual reports