Place a programming challenge on your site


Sphere Engine Problems Widget allows you to embed programming problems on a website. More precisely, it allows you to integrate the Problems module of the Sphere Engine service via a component known as the widget, that's ready to be embedded on a website. Sphere Engine Problems is a service that allows you to manage programming problems and automatically verify solutions to these problems. Detailed information about the Sphere Engine Problems module can be found in the introduction.

Note: Sphere Engine Problems can also be integrated with learning management systems (e.g. Moodle, Canvas, Blackboard). More information can be found in the dedicated guide.

See how it works

Below we present an embedded programming problem in the form in which it will be visible to end-users after integration.

Try the widget on your website

Embedding the widget on your own website is very easy. Below is a method which will allow you to embed the widget in two simple steps.

First, place the following JavaScript code directly after the <body> tag:

<script>(function(d, s, id){
  SE_BASE = "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"));</script>

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

<div class="se-widget" data-widget="RxNUuo16JO4"></div>

Create your own widget

Following the steps below allows you to create and configure the widget and then embed it on your website.

1. Register with Sphere Engine

The registration form is available at sphere-engine.com/signup. After completing the registration form, you will have to activate your account using the link sent in the welcome message.

2. Log in to the system and go to the widget configuration

After a successful login, you will be redirected to the user's panel. Next, go to the widget configuration page (Menu > Problems > Widgets).

3. Create a new widget

Clicking the Create widget button will start the configuration process.

4. Configuration: programming problem selection

The first step of configuration requires you to select a programming problem from the list. The selection must be confirmed with the Next step button.

5. Configuration: selection of programming languages ​​and restrictions

In the next step of configuration, you can set the available programming languages ​​and the default programming language. In addition, it is also possible to configure restrictions (the period in which submissions can be sent, the source code's length limit, 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.

6. Configuration: privacy and security settings

In the third step of configuration, you have access to the widget's security settings which, among others, prevent its unauthorized use. Privacy settings allow you to specify the visibility of the ranking and data of other users.

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

7. The widget is configured and ready for integration

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.

8. Widget's integration with the website

The process of integrating the widget with the website is identical to the one described in the Try the widget on your website section.

In the Javascript SDK section of the Get the code tab, there is a personalized snippet of JavaScript code that should be placed directly after the <body> tag:

<script>(function(d, s, id){
  SE_BASE = "<personalized_link>";
  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"));</script>

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

<div class="se-widget" data-widget="<personalized_widget_code>"></div>
9. The widget with the programming problem is ready for use

After going to the website on which the widget has been embedded, it will be displayed and the programming problem will be ready for use.

What's next?

Further information on integration with the Sphere Engine Problems Widget is covered in subsequent documents:

Alternative integration method via the RESTful API has been described in: