Problems
Widgets - How to embed

This tutorial will show you how to create and integrate a Problems module widget. For detailed information about integrating Sphere Engine Problems Widget go to the Problems widget integration documentation.

Important: To successfully go through this tutorial you need to have a working Sphere Engine account. Register for a Sphere Engine account by filling in the sign-up form.

Step 1: Logging in to the panel

After creating your account and successfully logging in, you will be redirected to the client's dashboard.

Step 2: Creating a new widget

Next, go to the widget configuration page (Menu > Problems > Widgets). Press the Create widget button to create a new widget.

Step 3: Configuring: programming problem selection

Select a programming problem from the list. The selection must be confirmed with the Next step button.

Step 4: Configuring: programming languages ​​and restrictions selection

Set the available programming languages ​​and the default programming language. You can also configure restrictions (the period in which submissions can be sent, the limit of the source code length, the limit on the number of submissions sent, the time limit for solving the problem).

The selection must be confirmed with the Next step button.

Step 5: Configuring: privacy and security settings

Access the widget's security settings which, among other things, prevent its unauthorized use. Privacy settings allow you to specify the visibility of the ranking and data of other users.

For testing purposes, you can use the default settings and confirm with the Create widget and get the code button.

Step 6: Integrating the new widget with your website

For testing purposes, it is possible to display the problem by pressing the Preview button. In the Get the code tab, you will find the configuration data necessary for the integration of the widget with the site.

The process of integrating the widget with the website is identical to the one described in the Sphere Engine Compilers Widget overview section.

In the Sphere Engine client panel's Problems>Widgets>WIDGET NAME>Get the code section find your customized snippet of JavaScript code that should be placed directly after the <body> tag on the website you want to integrate the widget with:

<script>(function(d, s, id){
  SE_BASE = "<customer_id>.widgets.sphere-engine.com";
  SE_HTTPS = true;
  SE = window.SE || (window.SE = []);
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = (SE_HTTPS ? "https" : "http") + "://" + SE_BASE + "/static/sdk/sdk.min.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "sphere-engine-jssdk"));

SE.ready = function(f) {
  if (document.readyState != "loading" && document.readyState != "interactive") f();
  else window.addEventListener("load", f);
};
</script>

Next, place the following HTML code in the exact place in which you want to display the widget:

<div class="se-widget" data-id="example-widget" data-widget="<personalized_widget_code>"></div>

Step 7: The widget is ready to use

After visiting the site on which the widget has been embedded, the widget will be displayed and ready to use.

  Contents