MutationObserver is a built-in Javascript API created to meet the need of listening to changes in the DOM and react to them in an efficient way without compromising on the performance. The observer fires a callback function whenever the mutations occur in the DOM tree.

In the last decade, there has been significant progress with regard to the user interface of websites. The web designers all over the world are churning out websites that are fast, and dynamic to provide great value and smooth experience to visitors.

Real-time feedback to the user during the interaction with the websites has become substantial. The frequency of the DOM changes depends on the complexity of your web applications. Therefore, responding to the instant changes to the DOM tree on the web app has taken the center stage.

How we arrived at MutationObserver for Talscale?

Since inception, the number of assessments and coding interviews through Talscale has increased many folds. A large number of tech aspirants take up coding assessment on TalScale in their pursuit of landing a dream job.

The greater number of Test takers brought the challenge to maintain high standards in fair conduct of assessments. The proctoring features were effective to keep an eye on a candidate’s conduct during the assessment. However, there were a few instances where some of the candidates could mutate the DOM tree on the Test interface. Mutation of the models that are necessary to effectively observe unfair practices during the Test allowed certain candidates to get an edge in clearing the assessment.

As a result, our team decided to incorporate the MutationObserver concept for Talscale to facilitate fair conduct of assessments.

The concept

The basic syntax of a MutationObserver goes like;

observer = new MutationObserver(callback);
observer.observe(target, options);
observer.disconnect();

The first line here calls for a new MutationObserver with the help of constructor MutationObserver(). A callback function is one of the arguments given to the constructor which is triggered when there’s a change in the DOM as specified in the second line.

The second line observer.observe(target, options) specifies any user agent to observe given target and record mutations based on criteria given by the options.

The target can be the node or node tree and the options arguments are the MutationObserverInit object that defines the configuration for the observer which can be any of these

childList
attributes
characterData
subtree
OldValue
characterDataOldValue
attributeFilter

Refer this article to know more about the object members

The third line observer. disconnect() stops observing for any changes specified in the observer. observe(target, options)

The callback function is executed based on the mutations that occur in the target element. The callback function returns with mutation records object that contains the details of the changes made in the specified target element.

MutationObserver in Talscale

The above concept can be used to do multiple things. You can either record the mutations occurring on the DOM or just monitor them to provide a better user experience. The MutationRecord makes sense in case of an editable content on the webpage or to store every mutation in the database.

In TalScale we have employed MutationObserver to monitor the changes made to the specific models on the interface and stop the user from mutation attempts.

In the proctoring settings, currently, we have incorporated MutationObserver to the Full-screen mode feature. If enabled, the candidate cannot mutate the permission access model in the Test interface before starting the assessment. He/she should allow the required permissions to begin their assessment. Thus, giving no room for unfair practices during the assessment.

MutationObserver

In the above image, the candidate has to agree to take the assessment in the full-screen mode and can not be able to mutate the code of the model.

Leave a Reply