 Welcome to our presentation on the Web Application Cubans, which stands for Comprehensive Utility Board for Equations, Texts and Shapes. Our group members consist of Abhijeet Roy. He worked on the Equation Editor of our project. Then Akash Singh, who worked on the database backend and the synchronization. Then Ankur Singh, he worked on the user interface of our project. Surbhi Nani, that's me. I worked on the graphics animations. Arun, who worked on the graphical shapes. Ruchita Parmar, who worked on the integration and the synchronization. And Bhagishri, who worked on the text editor. The topics we're going to be covering today is the objectives of our project, the metrics and statistics involved, the features, the demonstration which we will present to you in video form, the challenges and learnings and the future scope. So basically our project objective was to create a content editor where lecturers and teachers can add their chapters and concepts and bring a static web page to life using effects and animations. Our project was created on the fact that we wanted to make learning more visual friendly and graphic friendly so that topics which are interesting can be learned in a much more fun way in classrooms as well as at home. These are the metrics involved. Our total lines of code was about 7.4K and since it was a front end oriented project, that's where the bulk of our code went. Okay, now talking about the features, our web application consists of three layers. There's graphics, there's equation and then text. What's special about the equations layer is that it comes with an inbuilt equation parser. What this does is it basically makes typing equations very simple. Let's say I have to type an integration sign so I want to write a lower limit and an upper limit. Now doing that normally you'll have to press the shift key again and again to go to superscript, subscript. All this hassle is removed because of the equation parser. Abhijeet will talk more in detail about it later. Coming to the text and equations part, you can obviously make all sorts of formatting on it. You can change the font style, font color, make it bold, flick. The graphics, the size can be changed, you can shrink the shape, you can stretch it, you can fill it with colors, change the stroke style, stroke width. Now that was about the editing part. Once that is done, let's come to animations. Animations can be of two types. They can be on click or one after the other. So you select an element, you give it an animation effect. You can give it a duration so that that animation effect will play for that long. You can also give it a delay so that let's say the delay is 1000 milliseconds. So the animation will start playing after one second. You can group a lot of elements. I have four elements, I group them, I give them a group order. Now inside these elements can be given an animation order so that inside the group they will play in that order. We also have hints. So each element can be given a hint. The hint can be short, it can be a description and it can even be a URL for further reference. On hovering over that element, you can see the hint button and on clicking it, you can view the entire hint. Now once you've created everything, we have a preview button so that the teacher can see whatever animations he has given so far. And if he's satisfied with the work, he can name that activity and save it. Now once it is saved, all this information goes to the database and when on the learner's side the viewer requests for the activity, it is retrieved from the server and then it can be viewed. Now Abhijeet here, he will give us a demonstration of how to create a tutorial and how it looks on viewing. So we start by making a text box. Now we can see the text box has all the major features. You have all the fonts, you have text sizes, you can have text in different styles. You can also add images, GIS, anything can be embedded in the text box. So like we'll be typing a text right now. So text has been typed and we have different fonts so we've colored the text as well. So now we are into the graphics layer. So using the graphics menu, you see that we've created the lens using an ellipse and now we are creating its various features using different kinds of dashed and smooth lines. And all of this is possible using the graphics package of Fabric.js. And using those, we have different buttons on the menu. One is the remove button that can remove an element as easily. Then you can see that we're using the triangle and we're going to fill it with black to make it an arrow point. And we can copy it using the generic copy and paste button on the left side. That's the copy and paste. Now that's the equation editor that he's going to talk about. So we come to the equation editor. Now what we have on the web is that most of the equations that we have, mainly images. What a UI developer does on web is that he makes an image of a equation and he just embeds the image into the website. But that is not the web standard. The web standard suggests that equations should be in MathML. MathML is relatively, it's a relatively new language. It is now being incorporated into most of the browsers. It is the web standard for writing equations. And what our equation parser does is it uses MathML to create the equations. But for this, the user need not know anything of MathML. It provides a robust interface by which the user can simply create equations. Whatever equations he likes, he can create. He simply has to input all the variables. Like now he'll be creating an equation here. So like whatever we require, like if you require a fraction, we can have a fraction. If you want to go back, like edit something, we can have that as well. The code that is generated, the MathML code, it is auto-generated. It is more like an IDE. The MathML code will be auto-generated for you. You can simply style the equations as well. You can make them bold. Everything is done for you. You can even copy paste any MathML code from anywhere and it will still work. We are inputting more text boxes. The entire scene creation is taking place. We are creating the entire tutorial one by one. More equations are being put. You can drag all the equations. Everything is draggable. You can drag it in groups as well. So these are some of the equations that we are making. We are coloring some of the graphics elements as well. So these many equations can be made. You can make as many equations as you like. All the equations will be stored for you. You can come back, edit all the equations, do anything. It is literally an IDE for you. So we are now adding animations. We can add animations to... We have many animations. Text animations, equation animations and graphics animations. All the animations have been hand-coded by us. Now we are adding animations to graphic elements. The speed is user-controlled. The user can define whatever speed he likes. He, she likes whatever. We are adding animations right now. So now we will be grouping elements. We have selected the elements to be grouped. And now we will be creating groups of elements. We have already created four groups. This is the fifth group. On the groups we can even specify events. Like onclick events, automatic after, whatever events we like. We are adding hints currently. We select an element and then click on the add hint button, which adds the hint. We have a brief hint and we have long hints. We can even embed the URL so that the user can go to the hints position. Hints have been added. And lastly we are saving the activity. Once we save the activity, all the data is saved and the teacher or the user can come back and edit the activity from the position that has been saved. Now we will go on with the tutorial portions. So this is what the student will see. The animations are coming one by one. So onclick events have been added. So whenever the student clicks, they will get animations as and when he wants. We can even skip to the last portion, like directly skip if the student is in a hurry. He can skip to the last, like skip all the animations and view the entire tutorial. Like these are the hints. If you hover, you can see the hints. You can go to the hint button and you will get all the hints present. You can also go to the link and it will open up the link for you for a bigger side. We have another tutorial which shows the other features. So this is regarding the volume of a right-circular cone. Speed is user-controlled. So if we have a non-click event, the student can simply click and he can navigate. So this is the animation which is coming. So we will have another animation. We can skip to the end. Okay, we have GIS which can be embedded into the animation. So you can literally create a huge amount of animations and huge tutorials can be created on this site. So we will go on with the presentation. Okay, so the learning part. Since we started creating this project from scratch, we got to experience this whole idea to implementation journey. We began with creating a lot of prototypes. Some of them were, some of them didn't. In terms of technology, for Frontend, we used HTML, JavaScript and CSS. We also had an exposure to a wide amount of JavaScript libraries and how to extend them to suit our requirements. The three major libraries which we used were Fabric.js for the graphics part, the CK Editor for the text editor and MatJax to build the equation parser. At the back end, we used Java, JSP and JDBC to create the data views we used in MySQL and to load new content onto the page without having to refresh it, we used Ajax. Now needless to say, there was an enormous amount of troubleshooting and debugging involved. We learned a lot of soft skills such as working under pressure and how to either hurt two deadlines and of course, we learned collaboration and teamwork. Some of the challenges that we faced were building the equation parser and making it as user-friendly as possible. Also, integrating of the three different layers, graphics, equations and text into one web application and making sure that it synchronizes and works well. That was taxing. Coming to Futurescope, since our architecture has layers, more layers can be added. In the future, we can add a layer for graphs and charts. There's a library called Chart.js for this. We can give timed quizzes to students and assess their progress and for this, we will require user registration and login system that can also be added. Currently, the equation parser supports MathML format. Later, we can modify it so that it also supports ASCII ML and Latex. What we want to do is create a mechanism so that Cubans can be used as a tool. It can be embedded into any web page or web application as a support system. So, maybe we can even create a browser plugin after fit in the future. There are many possibilities to this. Right now, this is all we have. I hope you liked it. Thank you. The only question I have is why did you choose MathML and not Latex as a starting point? Sir, like MathML is the XML format. Yes. So, the web standard that is being dictated like most of the browsers are... But see, your rendering is not very good. If I see the Latex output that you get Yeah, you can see the... It's present. There's a button where you can click and you can see the entire MathML code. No problem is when I actually click, click, click, click button so many things happen. If I can write a Latex small expression and then you parse it internally. Means, the entire motive was to remove user control. User need not know anything of these codes. Like, if you have editors on web You see, I feel it is more difficult for mathematics people. So, people who are used to mathematics, they know Latex very well. They don't like you know, user interface. So, we choose MathML mainly because it is the web standard like dictated by most of the browsers. I know MathML. But that is okay if you are displaying equations somewhere one or two. But if you want to write series of equations then I think it is tiring. Sir, we created quite a lot of equations till then. It did not cause any problem in terms of page rendering or anything. It was quite quick. There was no such problem. We created around 20 equations as well. My question is finally, what is the quality you get? Sir, in terms of quality the output of Latex I have used Latex and MathML. So, have you seen the quality difference? Sir, the output is almost the same in terms of rendering if you... No, it won't be the same. Because it is meant for equations and they precisely put even the integration that they write has a predefined angle, the shape, the curve the way it is created. I don't know whether MathJax does have that. Anyway, it is fine. In terms of rendering the equation, I think as many features as Latex as MathML also has the same features. MathML is specifically for mathematics. MathML is just an ML mathematical language which is an XML, by the way. And what renders inside is another engine there. Yeah, output processors. So, that engine may not be very good. Sir... Okay, pointy. So, I don't know now whether that engine is good or not but you will have to check to see whether that engine is as good as the Latex engine. Sir, that can be part of the future scope. Yeah. Any other questions? Okay. Good job overall. Not only for the development part but I think you also presented it very well. So, it was nice. One thing which I wanted to ask and which was also one of your bullet points that you make it user friendly. So, who are your users? So, basically the equation is part of it and like Sir said that mathematicians they find using Latex better. What we want is people who don't have that sort of knowledge they should also be able to write equations. I asked, who are your users? So, users for the editing part would be the lecturers, teachers, professors who want to create lectures and bring it to life on static web pages. And the learner view can be students or any kind of people who want to see those lectures. Exactly. So, now the point is when you create sample content like rightly said, you created 20 of them. The point is that when you want to say that it has to be user friendly, have you asked some of the users to actually try this out? Sir, like our UI developer, he was not involved with the, he just created the UI. So, we let him create some of the tutorials. Okay. So, he was one of our test cases. Oh, he is one of your samples. Sample users. Okay. So, yeah, I want you to tell me about it. Can you just have them? Okay. So, what was your one of the challenges with the? Sir, I regularly guided him the problems. Initially I faced a little bit problem regarding making the equations. So, I repeatedly asked him to make all the corrections and in the same way he proceeded further and made it more user friendly like how can we like she said that lower limit and upper limit can be inserted without pressing shift button. So, that was what I suggested. And even that latex one also I suggested that we can see the online mathematical equation editors that are available and we can also take the guidance of them. So, I was the regular user of them. Yeah. So, like what we had earlier in the equation. So, we only had the code where they had to put it inside the text like the ML. They had to edit whatever they want inside the tag but that was not user friendly. So, that was what we had earlier but then we made it into this. So, that now we have two modes. There's the math mode and there's the text mode. In the text mode you directly enter whatever you want and it gets rendered and in the math mode you are able to see the tags as well. So, you know you can also learn math ML while typing this even if you have no prior rejected many of our UIs over the past two months and we went crazy bringing it to the standards that he wanted. So, we reduced the number of buttons and we reduced the number of bars and that's the least amount of buttons we can have that can make it user friendly. Yeah, exactly. So, I think that needs to go into the documentation part about because you have done with couple of users maybe one and So, we have a user manual even on this as a part of the documentation as well. So, even on the web page there is the Yeah, the most of the observations which we are mentioning right now are coming from your own experience. Like this is complicated. This is difficult. So, we changed it. I'm saying if you ask probably the actual users by conducting a survey or just sending Google Form to 20 of the professors around who want to write such kind of thing, you will probably get more insights about what the actual problems are rather than imagining and setting in isolation and imagining that okay maybe this is good for them. So, instead of deciding for them it would be ideal if you can follow that process so that you will get a first hand feedback of people and then you can easily act upon it and also go back to them to test it whether this solves their problem. I'm sure this is one of the problems of using shift and it is definitely there. It would be further strengthened if you have data supporting it. Saying that okay, we asked 20 people and this was one of the top most problems, therefore we did it. Instead of saying we thought this will be a problem and we did it. That's just the difference. Definitely sir, thank you. Any more questions? Thank you.