Quickstart

Introduction

With Socratease Infra, you can enable eLearning functionalities on your website with just a few lines of JavaScript code.

Imagine your website is yoursite.com. You choose to enable eLearning on the path yoursite.com/learning.
For this, all you have to do is return an HTML file that initializes the Socratease JS library. You will initialize the library with parameters like the username.
Once the library is initialized, it takes over the navigation within. So, for example, if the user initially loads a screen where they can create a quiz, and they click on a button that Previews the quiz, the browser's URL will automatically change to the Preview link.
So, you will have to just serve one entrypoint to your users.

Minimal Example

<head>
  <script src="https://cdn.socratease.co/socratease.js"></script>
  <link rel="stylesheet" href="https://cdn.socratease.co/socratease.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>

<body>
  <div id="soc-main-app"></div>
  <script>
    const clientId = "LszSmFPb";
    const clientSecret = "kAoEz0SKXzd2EVn";
    const payload = {
      username: CryptoJS.lib.WordArray.random(3).toString(),
      user_details: {first_name: "User"},
      path: "/cms/home"
    };
    const jsonPayload = JSON.stringify(payload);
    const hmacPayload = CryptoJS.HmacSHA256(jsonPayload, clientSecret);
    const hmacPayloadB64 = CryptoJS.enc.Base64.stringify(hmacPayload);
    const options = {"ui": {"navbar": {"brand_name": "Your Website"}}};

    window.addEventListener("load", () => {
      Socratease.init(clientId, jsonPayload, hmacPayloadB64, options);
    });
</script>
</body>

Explanation

We include the Socratease JS and CSS files, and the CryptoJS library (required only for the demo)
We include a <div/> into which the Socratease library will inject all elements
The clientId and clientSecret are keys you get when you create an account on Socratease. We are showing the clientSecret key here for demo purposes. DO NOT MAKE THE CLIENT SECRET KEY PUBLIC!
Payload has information about the user, what screen must be shown, etc
hmacPayloadB64 is the Base 64 encoding of the SHA256 HMAC of the payload expressed as a JSON string. You will use your clientSecret to calculate the HMAC
The Options key has some configuration variables that determine the UI, etc
On load, you will initialize the Socratease variable with the arguments shown above. Socratease should then show the component that was requested and load the user's data

Payload

The payload is a dictionary and has these keys