Getting Started

this guide will show you how to add e learning features to your site with just a few lines of code creating your account visit https //socratease co/tenant/register this form will ask for following details admin username your username as on your own website admin email id your email id root url this is the domain on which your property will be hosted it can be something like https //yourwebsite com you can change this later route prefix you may want all of socratease to get served on something like https //yourwebsite com /learning in this case, /learning is your route prefix brand name if you enable the socratease navbar, this string will be shown on the top left of the navbar for example, on the socratease website, "socratease" is the brand name once your account has been created, you will be redirected to your website's super admin homepage you should now see a pop up saying "you are viewing the contents of your site" even though you are on socratease co , all your activities are as if you are on your own website for example, if you create a quiz here, and you later integrate socratease with your website, this quiz will automatically be available on your site client id and secret keys apart from admin related tasks on the super admin homepage, you will also see your client id and client secret keys you need these keys to integrate socratease with your site but, even before you do the integration, you can explore all the features directly on the socratease website creating content visit https //socratease co/cms/home let's start by adding a quiz the quiz creation form is fairly self explanatory this article on creating a https //app archbee io/docs/sspphfbw4nwxfxfsnkbzn/ibnmtwiwazsnw3ps3wryz has more details this https //socratease co/content/qer nyh iat/ shows you how a quiz would look apart from quizzes, you can create lessons, video courses, etc you may explore other features of the socratease product what is important to note is that any feature that you see on the socratease site will also be available on your site integration you can enable elearning functionalities on your website with just a few lines of javascript code for this part, we need those client id and client secret keys imagine your website is you choose to enable elearning on the path for this, all you have to do is return an html file that initializes the socratease js library with the code snippet shown below you can check details about each parameter you have to pass for initializing the socratease js library https //app archbee io/docs/9jhfu1se6bxsrsy7xphvc/bt bs6flmf e2wdgl4o p 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 the code snippet below shows a minimal example it is very important that you understand hmac and base64 encoding the article on docid 8aduf2rekmmbja fvq9bx explains this in detail this code on the https //codesandbox io/s/cms home xyc4v playground shows you a frontend only version of how everything comes together if you are using a code editor and running a server from within it, the code will not run properly you will have to serve this from a backend (localhost would work too), but you must ensure that if the browser redirects to a different route due to the socratease sdk, the new route is also served by this very file html \<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> \<script> window\ addeventlistener("load", () => { 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" } } }; socratease init(clientid, jsonpayload, hmacpayloadb64, options); }); \</script> \<div id="soc main app">\</div>