Candidate’s guide for solving UI / UX questions

The DoSelect IDE enables you to create full-fledged applications in an isolated, cloud-based environment easily. The following page is shown when you start the test.

Select the framework from the dropdown and then click on the “CREATE SOLUTION IDE” button. Framework one selected will not be changed later, hence choose wisely.

The solution IDE creation may take some time, meanwhile, you can read the problem description.The IDE will automatically open once ready as shown below.

Once you have entered the IDE , the problem description can be viewed by clicking on the PROBLEM button on the top right corner, click the same button to close the problem description.

The DoSelect UI/UX IDE enables you to create full-fledged UI/UX projects in an isolated, cloud-based environment easily. The live preview feature enables you to run your application live and see the results in real-time. The features of the IDE are discussed below:

File browser: Lists files and folders of the workspace.

• Left-clicking a file opens the file in a new tab
• Left-clicking a folder opens up files in the folder as a subtree
• Right-clicking a folder opens up a context menu that has the following options

• New File creates a new file with a user-specified name in the current directory's context
• New Folder creates a new folder with a user-specified name in the current directory's context
• Copy Path copies the folder path to the clipboard
• Delete deletes the folder
• Rename renames the folder

WORKSPACE manager:

The Green dot indicates the connectivity is good and IDE is online.

The Orange dot indicates the connectivity is poor and IDE operations won’t work until connection is live.

*Note: on network disconnection, IDE tries to re-establish the connectivity.

Reload workspace allows you to refresh the workspace tree

Create new file allows you to create a file/folder in the root

Create new folder allows you to create a file/folder in the root directory of the workspace.

Editor:

• Click on a file from the File Browser pane.
• The file will be opened in a new tab.
• Make changes to the file.
• To save press the usual key combination (Ctrl / Cmd + S).
• Click the close button to close a tab.

List of additional handy features:

• All changes made to the files are temporarily stored locally. Unsaved file changes would not be lost on network disconnection or browser window/tab refresh.
• Right-clicking on the editor allows you to cut/copy/paste the selection to Clipboard.

• You may open multiple tabs by clicking on a file from the File Browser pane.
• Syntax Highlighting and auto-completion is enabled for all supported languages.
• When file changes are not saved, the file is in a dirty state (non-saved state) and a pencil icon would be displayed on the specific tab.

• When a file is in a dirty state, that tab cannot be closed. 

Menu bar:

The Menu bar consists of all the actions related to the IDE categorized under respective menus. Most options are self-explanatory.

Action bar:

The Action bar consists of buttons for repetitive actions with a single click. The following are the available actions (ordered left to right)

• Toggle sidebar: Toggles the visibility of File Browser & Workspace Manager.

• Upload workspace enables you to upload your local workspace (in zip format) which replaces the existing workspace.
• Download workspace enables you to download the current workspace locally. 
• The Upload & Download workspace options can be disabled by your Test Admin.
• Save All saves all the unsaved files in the workspace.
• Live preview opens an integrated preview box. You don't need to download or install anything to see your code changes. The changes are updated in real-time.

Info bar:

Info bar consists of the following:

• Test end countdown timer showing the remaining time of the test.  
• Problem button to show the problem statement without moving out of IDE as discussed earlier.
• Submit button to submit the solution for evaluation.
• Close button to close the IDE 

Live Preview:

Upon clicking the Live Preview icon IDE is switched to the following screen.

The “Go to IDE” button takes you back to the IDE.

 The “Close” button brings you back to the starting page as below:

You can Open the IDE or the Live Preview using the respective buttons. You can also submit the solution for evaluation using the SUBMIT button.

 Finishing up

After you're done,you can submit the solution in 2 ways:

1)Clicking the SUBMIT button from the test UI.

2) Clicking the SUBMIT from the IDE.

 After submitting the solution it may take some time to evaluate and show the results.

3 scenarios - when trying to submit 

1)ACCEPTED:  When all the test cases passed successfully.

2)PARTIALLY ACCEPTED: When some test cases have passed and some cases have failed.

3) REJECTED: When no test cases pass.

Clicking the “SHOW RESULTS” button displays the evaluation details where you can check the status of the individual test cases and the evaluation logs.

Evaluation Logs: Helps you debug your code. It has logs of the test runners which are one of the following: NightWatch, Jest or Mocha. You can debug your code from here if you know how to interpret these logs.

• Passed Test case:
• Failed Test Case:

Once you are done solving all the questions in the given test, click the “FINISH AND SUBMIT ASSESSMENT” button which is present at the bottom of the page.

Once you have submitted the assessment, the following feedback page occurs. 

Please let us know your experience with the platform.

Thank you.