 First presentation, Advanced HTML X-Block for OpenEDX. Very good evening to everyone. I am Srinand Rai Choudhury from Content Team. And this is Prabhulika. And that is Ashutosh. And our project was titled Advanced HTML X-Block for the OpenEDX platform. So I will be taking you through the first part of our presentation, where I'll be talking about the platform that you worked on and the limitations of the current HTML component in the platform. So what is OpenEDX? So OpenEDX is basically an open source MOOC platform, which was developed by professionals at MIT and Harvard. The centerpiece of the OpenEDX architecture is the edX platform, which consists of the LMS and the CMS. Students take the courses to the LMS, and the CMS is for the course content to create the courses and publish it. And also some of the notable features in edX is that the courses are created using modules which are called Xbox. And the courses can be imported and exported without touching the content itself and keeping all the course settings intact. Secondly, there are also many other components of OpenEDX, which includes nodes, catalogs, analytics, et cetera, and many more. In short, we can call edX platform as an Xbox runtime, because it's an application which hosts Xbox. Moving on, what are basically Xbox? Xbox are the basic component architecture of OpenEDX. They are specific units which provides a different functionality to both the learners and the users. Xbox can be anything ranging from an image, a video, a web page, or even a small paragraph or text. In the present, there are many already implemented Xbox in the OpenEDX platform, like the HTML editor, then video component, the interactive questions, et cetera. Now talking about Xbox, we must also mention the precursors, which are Xbox modules. So Xbox modules was the initial component design in the OpenEDX architecture. But now almost every Xbox module is being replaced by Xbox, because Xbox produce gives us more flexibility and more scalability, because any third party developer can develop an Xbox integrated very easily with OpenEDX platform. So this is the basic difference, which we referenced from a Google group discussion, that Xbox is the newer API, and Xbox was the first component design, and it's still in OpenEDX, but at limitations. So Xbox better designed to support third party developers to extend the OpenEDX platform. Next, we will be talking about the HTML components in OpenEDX through which course creators create courses. So basically, there are two editing interfaces. One is the raw editor and one is the visual editor. The visual editor is basically a word processing type environment where you can edit text without having to code in HTML. And the raw HTML editor helps us to directly mark up our content in HTML and view them. The templates provided are text, announcement, iframe tool, and raw HTML editor. And presently, the editors that are currently being implemented OpenEDX are as follows. TANEMC is the visual or the specific editor. That is what you see, what you get. CodeMirror is the raw HTML editor for TANEMC. WND is an editor which is used in discussion forums and emails. And the current versions are as follows. TANEMC is 4.0.20, CodeMirror is 3.27. And WND version is not exactly unknown, as ZX just forked the code in 2012. Next, we will talk about the issues that are limitations, we should just say, of the current HTML components. These are the screenshots. The first screenshot is taken from the raw HTML editor. It's taken from instance of the IT Bombay server provided to us for testing. So first thing you notice here is that there is no code indentation. So all the code is cramped in a single place. Secondly, the features like code folding is absent. So these are the two main limitations. And also now, suppose we want to add our custom style, as we did there, which is properly indented. And so this should be rendered as internal CSS and produce the desired effect. But as soon as we press OK, the CSS gets spilled all over the web page. So there is no isolation between our HTML component and the whole web page. The CSS gets applied everywhere. Secondly, so this is the limitation that internal CSS is not supported presently in the raw HTML. Only inline CSS is supported. Secondly, when we try to re-edit it, we can see, first of all, our indentation is lost. And secondly, tiny mcs weirdly commented our style tag. And it's not visible anymore. So this is one of the issues. And if you publish the code, the similar effect is shown in the LMS. This is the LMS. The students sees this. So it's the same effect. So why does this happen? Well, Xbox are mainly displayed in our course, in a web page using Xbox fragments, which contain all the resources needed to display the Xbox, such as HTML, JavaScript, and CSS. So currently, there is no isolation between our Xbox contents and the web page. Suppose we consider the whole web page as an UI, which contains its own internal CSS, internal JS. And when we add our own style tag inside the Xbox, it gets automatically contaminated to the internal CSS of the web page using this fragment. So this fragment can isolate between two fragments and thus produces the effect as shown. So based on these limitations, our main objective is where it follows, to improvise the present raw estimator so that it includes these three features. Wasp was a pretty indentation. Wasp was code folding. And secondly, was auto-completion of text. Second was full support of internal CSS. Then full support of all the HTML and HTML5 tags, because presently, there are many tags which are not working very well in the raw estimator. Secondly, was fixing the cursor placement issue, and next was supporting JavaScript. So I will now hand over to Pravalika. We will explain the solutions and the approaches we do. Based on the objectives, we have to clear our objectives, working on our objectives. We have come to some conclusions, like we have observed some things. The first thing is the editors, the editors which are being used in the open edicts have been stopped, like they were not updated from the August 2016. So if we include the latest versions of the code mirror and TinyMC editors were, code mirror has got the editor of version of 5.3.8, 5.38.0. So while updating these editors are basic, like some of our objectives like code folding, indentation and autocomplete will be achieved. And the second thing is we have found that the TinyMC, a plugin for TinyMC is found in code mirror, like the TinyMC has a code mirror plugin, which will merge both the VCB editor as well as the raw HTML editor. And the plugin which is being used will take any version now for TinyMC, which is 4.xxxx. And the working of both the raw HTML editor as well as the visual editor is based on this X module, which is html.module pi, and which handles all the operations of the HTML editor. So, based on these observations we have come up to two approaches, which are first approaches updating the both the editors, so that some of our major objectives will be achieved. And in this we have even, we've chose this approach compared to our second approaches integrating a third party open source editor into an open edX platform, like brackets or notepad plus plus or content tools, which have got much better features compared to the present versions of TinyMC and code mirror, which are being used in the present current version of open edX. But we have chose the approach one because an approach one completely upgrading something is much better easier compared to integrating a completely from a new thing. And as well as in approach one, we have used iFrames for the CSS part for the internal CSS, which where these iFrames will be accessing, like these iFrames are used for accessing even the bootstrap thing, which will be beautifying the course content much more. Initial approaches, so based on the approach one, initial approaches for supporting internal CSS, wrapping the complete HTML content in an iFrame, setting the width of the iFrame to 100% and height equal to the height of the content of the frame and setting the border of the iFrame to zero. By doing this, we have achieved an invisible iFrame, which will be loading all our HTML content. Our second approach for achieving internal CSS was using JavaScript. Here we have separated the CSS and the HTML content and wrap the complete HTML content into a div tag by giving it with a unique ID. And later calling each and every unique ID and entering styles to it. But we have chosen the first approach of CSS because due to this event we can even include bootstrap as well as by including an iFrame or any tool, there's no merging of two blocks of CSS in the LMS of Studio. So the first approach, the local integration, it includes first we need to download both the versions of the TinyMCE as well as the code mirror into our local system and integrate both of them. Here to integrate the code mirror for TinyMCE plugin we have to integrate code mirror for TinyMCE plugin in the TinyMCE init.tinymce page and then test this hybrid editor and then integrate this editor with the Django because edX uses Django as its backend and test the Django integration. What we have found out after our local integration was most of the HTML tags and the attributes work. Like all we checked, complete HTML file, all the attributes, elements, tags, as well as we have checked the CSS and bootstrap too and everything worked pretty fine and most of the CSS styles and attributes even worked and CSS animation and external CSS such as bootstrap works and the complete link of all the testings which we have done have been in this link one which we have even provided in our link on our source code and in our report. And the source code for the integration of both the two editors is even provided in the link two where it is even provided in our report and wrapping the content, complete CSS to enable CSS, internal CSS. We have wrapped the complete content in an iframe which is even given in link two and the second phase of the first approach is the open edX integration. So for open edX integration, we have to install an instance of open edX on a local system. We have used DevStack for a project since it is most suited for the developers. For the DevStack thing, we had even installed some virtual environment, we needed a virtual environment. For that we have used Docker and in the basic starting stages we have issues with Docker like proxy issues and installing Docker was a bit tough because we have skipped some steps in the between but we have to be careful that every each and every step of Docker installation should be taken and later add the latest version of code mirror 5.3.8 to the source code of open edX leaving the old version untouched. We have not touched the old version which is the same that 5.0 and we have just included our editor version which we have. Now we have configured the TinyMCE to the open the updated version of code mirror. Here we have changed, we have included the code mirror plugin in edit.js file and later the results which after open edX integration we have found some results. They were TinyMCE open as an instance of code mirror we the latest version and in its raw HTML editor and later that future features such as cold folding cold folding and indentation works pretty fine but we had small issues with this. Those were that the effect of the internal CSS was only visible inside the visibility editor. Like only the code mirror part only only the TinyMCE editor works fine. Like the effects were not seen in the LMS part. Once we have saved or progressed the open edX backend automatically it removes the style tag. Like once we have added a style tag the complete style tag is being removed by the open end backend. So we had issues so we had to change our approach which will be told by Ashutosh. Okay so because of these hurdles we tried to research a lot, a lot, a lot. We again faced some hurdles because of which we had to change our approach. So while we were changing approach we had this idea, I mean we were reading about open edX more and more and we came across the idea of X blocks. So what we thought was we can develop whatever we have done till now into an standalone X block which will be even a better approach. So I'll explain how it was a better approach. So it's basically a standard way of extending open edX platform. It is one of the standard ways of extending open edX platform. They can be installed pretty easily and also uninstalled pretty easily. So it's not a load on system at all. The X blocks are optional. So if someone does not want our advanced HTML editor like code folding, nice styles, nice JavaScript, they can use the current HTML editor and be fine with it. And lastly, that was our first approach that caused our first approach to fail. It keeps the open edX source code intact. So even if our X block fails, open edX system does not fail. So that was the biggest advantage. Now we'll just go through the features of our advanced HTML editor. So we completely support CSS. We support all CSS attributes including animations and we can also include external CSS through a link. Then we have JavaScript support. The JavaScript support is fairly secure. It does not allow you to redirect you to another sites and all we have taken care of it. Then it supports all HTML and HTML5 tags. Previously, audio tags and video tags were not working. They are working fine now in our X block. And all the editor is on steroids now. It's completely like sublime text and all you'll feel good. So we'll just quickly see how our X block can be used to create interactive courses. We have a demo video. So this is a demo course about CSS animations. So as you can see, we can have really interactive and really good looking course by using our X block. See those, yeah. Okay, so we can see the source code right over there and the live action of CSS animation right below. So students will be able to understand much better. And also the course content creator won't have to stylize that color highlighting won't, he can just use highlight JS for the source code, source code highlighting. So that was not possible before. Now JavaScript is supported. So he can just load highlight JS from CDN and he can use it very well. Or if he has some, his own JavaScript or CSS library, then he can upload that CSS and JavaScript to files and upload section in open edX course. And then he'll get the link and he can use that as well. Now we'll see how this works. So every X block has a student view and a studio view. Student view is what is shown to students in LMS and studio view is what is shown to course creator when he clicks on edit. So studio view is fairly simple. It's just a instance of code mirror 5.38.0 with a live preview panel. We'll see it in further slides. But student view is somewhat different from traditional. So it's an iframe. In a nutshell, it's an iframe. It has a unique ID. And because of this unique ID, you can include as much blocks in your course on same page, they'll load just fine. It has invisible borders. So you won't be able to recognize that this is a iframe or it's actual content. So it's a good user experience and secure JavaScript. So when we were using iframes, there was a biggest security concern if some course content creator access window.top, then he can literally modify the system, modify that page any way he wants. So we have sandboxed it and we have prevented window.top access to anyone in that iframe. So all the iframe and CSS is limited to iframe itself. So now we'll see how it looks in studio. So whenever you add our xblock, this is the default content that you'll get. And it's the same gradient background, gradient animating background that we saw in LMS. When you click on edit, this is where the studio view comes in. So on the left-hand side, we have our editor with a nicely indented code, automatic indentation. And you can also see code folding letters. I'm not exactly sure if they are visible. Okay, they're there. And on the right-hand side, you have a live preview panel. So whatever changes you do in editor, or you can see live preview, you can live preview them in live preview panel. So coming to settings tab, we provide basic settings. You can change the display name. Also, if you don't want live preview panel and you want a full-width code editor, then you can disable the live preview panel. And you'll have a full-width code editor like this. So it's nice for editing purposes. Then this is actually live preview in action. So I've edited a couple of things there and they have reflected instantly in the live preview panel. And obviously, after saving, you can see the contents in a studio as well. So coming to future work, we are looking for a more autocompleteness in our editor. So right now, our editor can autocomplete tags. So if you open a tag, let's say a tag, and then close it, then it will automatically indent the code inside it properly, a nice way. Obviously, you can undo it. If you don't want. But so we are focusing on autocompleteness like, let's say you are typing a CSS property called background color. And you type background, then you should have a panel showing you more background properties. Let's say background color, background transition, and stuff. And so that is an autocomplete feature. Then second is setting the common CSS to entire course. So this is actually we are focusing more on. So this includes, so let's say a course content creator wants to have a common CSS to be included in each and every advanced HTML X block under single course. So what he can do is, what he should be able to do is, he should be able to upload a common.css and common.js in files and uploads. And our X block should be able to automatically fetch them. So that will save a lot of time for course content creators to have their layouts. They can just add text for their new units and they'll be styled according to common.css. So we are currently researching on this. This will require Django settings and Django backend settings to be checked very nicely if X blocks are allowed to access them. If they are global to all the X blocks within a single course, we are still researching on that. And lastly dark theme in editor is always appreciated like for me, like I use dark themes, okay. So coming to conclusion, I would say our X block has opened up way to a new world of interactive courses whose functionality is only limited by imagination of course creator. And lastly, I would like to thank our mentors and all the summer internship 2018 mentors who helped us throughout the process to have this working however, basically our open edX system working. And lastly, I'd like to thank Professor Fatak for giving us an opportunity to come here to stay at IIT Bombay for seven weeks. Thank you. The links that you mentioned in your presentation I think. So one is of course Ashutosh B. Sathe which is okay, but that is Github link. The other one is Google Docs. Now I'm a bit concerned about Google. Given that in my opinion Mr. Trump is a American avatar of Shiv Sena, you never know what will happen to these companies providing services all across the world and so on. So I much rather prefer a Github kind of thing. In any case, we should have all of these in our repository as well. So actually committed in a Github in Ashutosh account itself. So the link is present in Ashutosh. Just the report link is on. Complete report link. No, no, no, that is different. I'm talking about going forward, going forward we should have. So for example, the OER repository that we're building. So do you know we discovered a very interesting thing that our video team led by Sajjan actually makes multiple versions of every video including high resolution, low resolution, et cetera, et cetera and keeps that in a common directory in IIT Bombay servers. We are accessible course. But the content team which finally creates the dot SRT files with all the, what you can say, sorry, no, not just separators. All the basically transcripted versions instead of saving it on the, they save it on their local machine temporarily, but upload on YouTube. All of them are available on YouTube. But again, if something was to happen to YouTube or to their services or those services have to be where to become costed services, what would happen to thousands of hours of recorded final versions which are only on YouTube. So I've told the content team that when we open our OER repository all those final versions should be available physically on this story. I think it is unfortunate, but India may have to safeguard all these contents for our own sake later. You said that you converted to X-Block approach after doing a lot of jugglery. So roughly how much time you spent in that jugglery to understand that this is difficult, that is difficult, et cetera. Like exactly we started X-Block on 20 June. On 20 June. So just about 15 days. Very good. I think that is good work. It should also tell us that X-Block approach is probably the best approach. You did not notice the back end eating up your content like in the other case. It is working. Your X-Block is working. So somehow you have made yourselves immune to the back end of edX. Yes, also platform independent, so they can. I know, I know, I know, I know. To Hawthorne, from Ginkgoo to Hawthorne are forward also. In the first approach, we were planning to integrate the whole advanced thing into the current HTML editor. But then it would have been a problem. This is the best approach. Because if the... Thank you.