Test-Taker Experience on our Front-End Environment
The user interface of Mercer | Mettl's front-end environment (FES) includes many key components such as a coding window for writing and editing code with switchable tabs for HTML, CSS and JavaScript respectively, a results tab that shows the output of the written code in real-time, a console tab and various other features which make it easier for the test takers to adapt to the interface and focus on solving the coding problems at hand.
This simulator is used to evaluate the front-end development skills of test-takers and helps assess their capability to implement web designs and solve problems using front-end technologies. This article aims to give the test taker a look and feel of the simulator and resolve any queries they might have with respect to the user interface.
Walkthrough
This section gives a guided tour to the test taker on how to use the platform.
It starts automatically as soon as the front-end question appears, and test-takers can revisit it anytime by clicking on the How to attempt button on the left side of the page, above the problem statement.
Problem Statement
The problem statement contains specific instructions on the desired output and on how to proceed further.
Code Editor
In the programming section of the simulator, test takers are provided with a designated area where they can write, edit and test their solution to the problem statement. There may be some pre-existing code as well to help them get started.
The test-taker can click on the tabs above the editor to switch between HTML, CSS and JavaScript as and when required.
Meanwhile, test-takers can also click on the fullscreen button to shift the text editor to the left side of the screen and the result tab to the right side of the screen. This view is highly recommended as it provides the test-taker with ease in writing code.
Editor Features
There are various features around the editor that the test-taker can access such as Editor Modes, Themes, Word Wrap, etc.
Test-takers can leverage these options and create an environment that lets them code more efficiently.
Result Tab
Whatever syntactically and logically correct code the test-taker writes will be reflected immediately in the result tab. The test-taker also has the option to refresh the result tab manually by clicking on the refresh button and can enable/disable the auto-refresh by clicking on the settings button above the result tab.
Once the test-taker is done writing all the lines of code that give an output that is synonymous with the instructions given in the problem statement, they can move to another question or end the test by clicking on the Finish Test button.
Console
The console area is situated next to the result tab. The test-taker can view all the console messages and errors by clicking on the console tab.
It will show the JavaScript errors in the test-takers code. They can also use the console object to access and print debugging messages to this console.