Frontend SDK: Embedding TrustExam Proctoring

Loading the SDK

Add the script tag to your page:

<script src="https://cdn.trustexam.ai/extension/app.js"></script>

Initialization

'''javascript'''

Proctoring.initialize('.wrapper', {
  language: 'en', // 'en' / 'ru' / 'kz'
  token: 'external_session.token from backend API response',

  protector: {
    match: '.question-wrapper',
    textColor: '#000'
  },

  onMounted: function () { /* SDK mounted */ },
  onConfigured: function () { /* config loaded */ },
  onStarted: function () { /* exam started */ },
  onFinished: function () { /* exam finished */ },
  onAction: function (action) { /* events / actions */ },
  onError: function (error) { /* error handling */ }
});

'''javascript'''

Proctoring.initialize('.wrapper', {
  language: 'en', // 'en' / 'ru' / 'kz'
  token: 'external_session.token from backend API response',

  protector: {
    match: '.question-wrapper',
    textColor: '#000'
  },

  onMounted: function () { /* SDK mounted */ },
  onConfigured: function () { /* config loaded */ },
  onStarted: function () { /* exam started */ },
  onFinished: function () { /* exam finished */ },
  onAction: function (action) { /* events / actions */ },
  onError: function (error) { /* error handling */ }
});

'''javascript'''

Proctoring.initialize('.wrapper', {
  language: 'en', // 'en' / 'ru' / 'kz'
  token: 'external_session.token from backend API response',

  protector: {
    match: '.question-wrapper',
    textColor: '#000'
  },

  onMounted: function () { /* SDK mounted */ },
  onConfigured: function () { /* config loaded */ },
  onStarted: function () { /* exam started */ },
  onFinished: function () { /* exam finished */ },
  onAction: function (action) { /* events / actions */ },
  onError: function (error) { /* error handling */ }
});

Parameters

• selector (string)

  CSS selector of the container (e.g. .wrapper) where proctoring UI is mounted.

• language (string)

  UI language: "en", "ru", or "kz".

• token (string)

  The external_session.token returned from the backend API.

• protector (object, optional)

Used for Content Protect:

• match – selector for the element to protect (e.g. .question-wrapper).

• textColor – text color inside the protected container (for rendering).

Callbacks

• onMounted() – called when SDK is mounted in the DOM.

• onConfigured() – configuration successfully loaded.

• onStarted() – exam attempt started.

• onFinished() – exam attempt finished.

• onAction(action) – called on internal actions (e.g., violations).

• onError(error) – called when an error occurs.

Core Methods

1. Proctoring.start()

'''javascript'''

Proctoring.start()
  .then(() => console.log('started'))
  .catch(err => console.log(err));

'''javascript'''

Proctoring.start()
  .then(() => console.log('started'))
  .catch(err => console.log(err));

'''javascript'''

Proctoring.start()
  .then(() => console.log('started'))
  .catch(err => console.log(err));

Starts the exam attempt after initialization is complete.

2. Proctoring.finish()

'''javascript'''

Proctoring.finish()
  .then(() => console.log('finished'))
  .catch(err => console.log(err));

'''javascript'''

Proctoring.finish()
  .then(() => console.log('finished'))
  .catch(err => console.log(err));

'''javascript'''

Proctoring.finish()
  .then(() => console.log('finished'))
  .catch(err => console.log(err));

Explicitly finishes the exam attempt (e.g., on submit).

3. Proctoring.startNewAttempt()

'''javascript'''
Proctoring.startNewAttempt()
  .then(() => console.log('new attempt started'))
  .catch(err => console.log('cannot start new attempt'));

'''javascript'''
Proctoring.startNewAttempt()
  .then(() => console.log('new attempt started'))
  .catch(err => console.log('cannot start new attempt'));

'''javascript'''
Proctoring.startNewAttempt()
  .then(() => console.log('new attempt started'))
  .catch(err => console.log('cannot start new attempt'));

Starts a new attempt if allowed by assignment settings.

4. Helper Methods

• Proctoring.isFinished() – returns true if the assignment is already finished.

• Proctoring.isCanStartNewAttempt() – returns true if a new attempt is allowed.

Content Protect

Content Protect prevents:

• Screenshots and screen recording of protected content,

• Remote-control tools capturing the exam area.

To enable:

• Backend: set content_protect: true in assignment.settings.proctoring_settings.

• Frontend: pass the protector object in Proctoring.initialize:

  protector: { match: '.question-wrapper', textColor: '#000' }

Where:

• match – selector of the element to protect.

• textColor – text color in that container.