How to create a front-end programming question via Mercer | Mettl UI
To create a front-end programming question via UI in your Mercer | Mettl account, follow the steps given below:
1. After logging in to your Mercer | Mettl account, click on the My Questions tab on the top and then click on the Add Question button on the top-right.
2. Click on Select Question Type and go to Application Based Questions in the drop-down options and then select Frontend Coding Question.
3. Provide a topic name to which the question is supposed to be added by clicking on the Select Topic button. In case the topic is not one that already exists, you can create a new one.
4. After selecting the question type and specifying the topic, you will be redirected to the question creation screen. Enter the question-specific information in various fields like the image given below:
a. Difficulty Level: Assign a difficulty level to your question. You can set it to Easy, Medium, or Difficult by clicking on the drop-down.b. Question Details: The description of the question will come here, which should include the problem statement or essentially output requirements that would be fulfilled on writing code in HTML, CSS and JavaScript.For instance, “Complete the following tasks:Write "Hello" inside the H1 tag in the HTML code.Write a code in CSS to apply a class named "elementText" to each element.”
Note: You can make use of the editor menu on top to add specific formatting in the problem statement such as images, code snippets, etc.
c. Question Tags (Optional): This field stores the meta-data about the question.
5. After filling in the question specific information, fill the Project Explorer tab below Base Question Information. It contains three text editors for writing code in HTML, CSS, JavaScript respectively.
The code that is written in these three text editors is what appears to the candidate as pre-written code when attempting a front-end programming question. There is also a result screen which dynamically shows the output of the code written in these three text editors.
Note: The output would be visible on the result tab only if the code is syntactically and logically correct.
6. Front-end programming questions can be graded both manually and automatically. If you select manually, the solution submitted by the candidate will be evaluated after the assessment is over. If you select automatically, you’ll have to define testcase(s).
7. To evaluate a candidate's response, you'll have to compare its code with your pre-defined test cases. To define and write these test cases in JavaScript, you need to define the Java pre-condition. You may leave the Java pre-condition option unchecked and proceed with test cases in CSS, in case it is not required.
Please note: In CSS, the system does string to string comparison. So, if the candidate's code does not match with the desired code (even if the candidate is able to get the desired output), candidate would not be awarded with marks on this.
8. Finally, click on the Save button given on top right to save your question.
Dry Run of a Front-End Simulator Question
You can test a Front-End Simulator (FES) question in your question bank. This helps the question creator in validating and identifying any bugs left in the grading scripts. To try dry running a question users can follow the steps listed below:
1. In your account, click on My Questions tab.
2. Now select the question bank / topic name under which your question resides.
3. Navigate to the respective question and hover your mouse on it to see a new Dry Run button. (Shown Below)
4. Clicking on the Dry Run button will open a FES code editor (as it would appear on candidate test screen).
5. Write your code and click on the Grade button to see the results.
The Results tab lists the percentage of marks scored for the graded code and the status of individual test cases.
If you wish to change any test case or JavaScript pre-conditions, you can click on the edit button and continue editing the same.