Creating an HTML or CSS or JavaScript Question

Overview

You can create questions to evaluate candidates' HTML, CSS, or JavaScript development skills. Front-end developers create the basic design and layout of the website, including the images, content, buttons, links, and navigation. They also ensure that the flow of the website is smooth and error-free. Back-end developers then use this front-end structure to add business logic and connect databases and processes.

Candidates have to write HTML, CSS, and JavaScript according to a prompt to prove that they know how to structure, design, and add logic to web pages. Candidates can render their code in the browser by simply clicking a button. This article will walk you through creating an HTML/CSS/Javascript question.

Tip: If you want to test candidates on a specific part of your technology stacks like Angular or jQuery, add a <script> tag to the HTML whose src attribute downloads the code you want. The candidates can then use that technology to answer.

Steps to Create an HTML or CSS or Javascript Question

• Click on the Library tab on the home page and click on the Create Question button.

• In the 'Select Question Type' dialog box, click on the HTML/CSS/JavaScript question type.

Problem Statement

On the Problem Statement page, specify:

A. Problem Name

• The problem name should be short and topical. It should not give any hints to solve the problem.

B. Score

• While you can assign any score you want for the questions you create, we use specific standards for assigning scores to the questions we create that you might find helpful. 

C. Tags

• Tags are words or phrases that help with the searchability and organization of your questions. You can add the existing tags or create new tags and set the difficulty level for your question by associating the tags as Easy, Medium, or Hard. Alternatively, associate custom Tags to identify your question by its complexity or levels.
  • Click on the Tags drop-down, and type a keyword—example, Easy.
  • Click on the Add option. The "Easy" tag is associated with the question.
• When you view your Questions in the Library, the associated tags will be indicated for every question. You can use these Tags to generate candidate reports and performance graphs. Refer to Associating the Tags for Questions for more information.

D. Problem Description

• A good problem statement should comprise a clear and detailed problem description. It should clearly state how elements should appear in the final output on the web page. Ideally, an image should be included to show the final output. Any elements that are supposed to behave dynamically must be stated as well.

E. Interviewer Guidelines

• Interviewer Guidelines are for later reference. You can include a rubric about scoring the questions or write solutions to the problems in this section. These can be used by your team while evaluating the test.

 Note: Interviewer Guidelines are only visible to your team and you; however, candidates cannot view these notes.

You can support your problem statement and internal notes by attaching a relevant reference file in these sections. Refer to the How to Attach a File to a Problem Statement topic for more information.

• Click on the Save & Proceed button.

Design Stubs

On the Design Stubs page, perform one of the following operations:

• The Enable candidate to code in 3 simple tabs, one each for HTML, CSS & Javascript option is enabled by default. Retain this selection to allow candidates to write HTML, CSS, and JavaScript in three separate tabs.

You can provide them with a code stub for any or all three languages, as required.

Note: Candidates can edit the provided code stub. If you do not want them to edit any particular part of the code, you can add it in the comments in the stub.

• Select the Enable multiple file support option to upload the folder structure for the front-end code project.

i. Click on the current structure option to download the default multiple files projects. You can make changes to this folder instead of creating the folder from scratch.

ii. Click on the Choose file button to upload the project folder.

This method is recommended if you want to see how candidates organize their front-end code in a real project. Our in-browser code editor replicates the folder structure you provide. The candidates can then write code in more than one HTML, CSS, or JavaScript file.

• Click on the Save Question button to save the question and exit. Alternatively, click on the Save & Add another button to save this question and proceed to create another one.
• The Questions you create are stored in the HackerRank Library under the "My Company questions" tab. The Question type and the associated tags are indicated below every Question title as shown below.

 While in the Library, you can proceed to create more questions or add Questions to your Tests.