Qualified Embed SDK
Docs for how to use embed a Qualified code challenge into your site.
Quick Start Example
There are two main ways to use the embedded editor: authenticated and public.
- Public Means using individual challenges with the
embeddableflag set. These challenges will not save solutions back to the Qualified service. This mode lets you build your own system around individual challenges.
- Authenticated Means inviting a user using the Qualified API, and supplying an
authTokento have the candidate take the embedded challenge similar to a full assessment.
You can mix both techniques in the same page, within the same manager. This can be useful for including practice or example challenges within a larger assessment.
For configuring group of challenges, please use
. Once you've set up your manager, you can create individual editors using
QualifiedEmbeddedEditor for the editor functions.
If you do not need to interact with the challenge and you do not want to use the
QualifiedEmbeddedManager, you can directly embed an iframe and configure some options via the URL. This could be used for static site generators, where you might not have easy access to injecting the embed library.
To learn more about this,
see the .
The Embed SDK includes a lot of functionality to fine-tune your editors. Options can be set on the manager (for shared options across all editors), and further customized on each editor individually.
A complete list of options is available at
ChallengeOptions. Below will highlight some of the more useful options.
These options will help you configure the style and visible components of the editor.
can be set to
restrictedto change how editing and saving works.
can be forced to be one of
dark. If you don't set the theme, the user can change the theme in the
idesettingstab, and it will sync across editors.
can be used to hide challenge tabs you do not want, such as
TAB_IDSfor common tab names.
can be set to
trueif you want to wrap the Qualified editor with your own custom controls.
is an advanced option that lets you configure exactly where each editor tab shows up.
Challenge Content Options
These options will help you set up the challenge correctly.
is used to set the language on multi-language classic code challenges.
is used to override the contents of the files used within the challenge.
can be set to automatically back up and restore the editor's contents within the browser's localStorage.
The editors provide several callbacks throughout its lifecycle.
is called once after the challenge is loaded. It includes information about the loaded challenge.
is called every time the editor's contents change (debounced to prevent too much noise). Use this to build a custom save/restore along with
is called after every completed run of the code. It includes a lot of detailed information about the run results.