Digital Content Editor with Markdown Support

Abstract

During Covid-19, up to 94% of students got affected. Not just students, but largely teachers faced even more difficulties to adjust with online teaching. It became crucial to have a well-formed study material, in order to teach online effectively. Any well written material isn’t enough for students to study. It needs to be interactive. Present tools available to create interactive content are either not sufficient or expensive to use. Most of them are tedious to operate, when used to create a scale. This editor tool aims to provide a platform that overcomes all the problems mentioned regarding the study content to students. Making online content creation easy, effective and joyful for educators in the pandemic times as well as for the future. This research paper focuses on creating a comprehensive digital content creation tool that supports parameters that are required for creation or modern digital content, using markdown, katex. It aims to satisfy the needs of multiple user groups, especially educators, institutes and teachers.

Introduction

I. INTRODUCTION

Content creation is a thing that every educator uses almost every day in making their own notes or material for students. Yet, this part of the job is often underestimated and less efforts towards making a good understandable digital content are made, as it is often seen as a burden. [1]. Nowadays there are many solutions for generating digital content on websites, many of which are free to use. That makes it easy for institutes or educators to easily build content with least expenses. But while these tools work fine, they lack certain support parameters like image representation in different aspect ratios, video player options. These tools even lack facilities for technical courses like code snippets, syntax highlighter, mathematical expressions, flowcharts and other UML diagrams. Even if some tool is near to provide these features it is paid or easy to access for educators, such tools make digital content creation difficult. Although Markdown aims to have a simple syntax that should be easy to read and write [3], Markdown provides an easy syntax to insert code blocks, diagrams, tables and other content management operations.

Considering the fact that many educators throughout the nation are also old and the process of making the digital content should be very handy and comfortable to make. Lack of resources with people is also an issue, so to provide them with a free online content development tool would be a great solution. This is something we need to keep in mind while making this editor.

II. LITERATURE REVIEW

Despite the enormous growth of e-learning in education and its perceived benefits, the efficiency of such tools will not be fully utilized if the users are inclined to not accept and use the system. Therefore, the successful implementation of digital content development tools depends on whether or not the educators, institutes are willing to adopt and accept the technology. Thus, it has become imperative for practitioners and policy makers to understand the factors affecting the user acceptance of content management tools in order to enhance the student’s learning experience (Tarhini et al., 2014a). However, recent studies have shown that content management tool implementation is not simply a technological solution, but also a process of many different factors such as social factors (Schepers and Wetzels, 2007; Tarhini et al., 2014b; 2015), and individual factors (Liaw and Huang, 2011), organizational such as facilitating conditions (Sun and Zhang, 2006) in addition to behavioral and cultural factors (Masoumi, 2010).Such major factors play an important role in how an information technology is developed and used (Kim and Moore, 2005).

The COVID-19 pandemic has created the largest disruption of education systems in human history, affecting nearly 1.6 billion learners in more than 200 countries. Closures of schools, institutions and other learning spaces have impacted more than 94% of the world’s student population. This has brought far-reaching changes in all aspects of our lives. Social distancing and restrictive movement policies have significantly disturbed traditional educational practices. Reopening of schools after relaxation of restriction is another challenge with many new standard operating procedures put in place. Within a short span of the COVID-19 pandemic, many researchers have shared their works on teaching and learning in different ways. Several schools, colleges and universities have discontinued face-to-face teachings.

The COVID-19 pandemic has provided us with an opportunity to pave the way for introducing digital learning. Digital learning is only possible with great digital content. Thus, the past recent years has taught us the importance of such online content development tools that cover all the aspects of content creation and cover use-cases for multiple user groups.

Content Development tools have played a crucial role during this pandemic, helping schools and universities facilitate student learning during the closure of universities and schools (Subedi et al., 2020). While adapting to the new changes, staff and student readiness needs to be gauged and supported accordingly. The learners with a fixed mindset find it difficult to adapt and adjust, whereas the learners with a growth mindset quickly adapt to a new learning environment. There is no one-size-fits-all pedagogy for online learning. There are a variety of subjects with varying needs. Different subjects and age groups require different approaches to online learning (Doucet et al., 2020). Online learning also allows physically challenged students with more freedom to participate in learning in the virtual environment, requiring limited movement (Basilaia & Kvavadze, 2020).

III. METHODOLOGY

Incremental Model Approach is followed while developing this tool. In this online content editor, from user interface of managing content, edit content and preview content to content display is done module wise. Requirements are divided into multiple standalone modules of the software lifecycle. Each module consists of Requirement analysis, Designing and Development, Testing and Implementation. Incremental approach will help us to provide features to clients in a module-by-module manner.

IV. TECHNOLOGIES

1. JavaScript: JavaScript is an interpreted programming language mainly known for its use in web browsers, though it is also used in other environments - for example NodeJS. As the browsers improve, the web technology specifications are bound to change. Most often these changes bring along new features, make the specifications less vague or deprecate some less known or experimental APIs.

2. React & JSX: React is a JavaScript library for building user interfaces across a variety of platforms. It allows programmers to design simple views while React will efficiently update and render only the components that have changed. Declarative views make the code more predictable and easier to debug. React can be used on the server side using NodeJS, in the browser or it can even be used to build mobile applications using React Native. JSX looks similar to a templating language but is actually an extension of the JavaScript language that was designed specifically for React. JSX is used in React to describe what the user interface should look like, but it is not the only way to write React. JSX embraces the fact that the rendering and other UI logic are inherently coupled together - including event handling, state changes or data preparation.

3. Django:  Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

4. SQLite Database: It is a database engine, written in the C Language. It is not a standalone app; rather, it is a library that software developers embed in their apps. As such, it belongs to the family of embedded databases. It is the most widely deployed database engine, as it is used by several of the top web browsers, operating systems, mobile systems, and other embedded systems.

5. Markdown: is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form.

6. Katex: KaTeX is a cross-browser JavaScript library that displays mathematical notation in web browsers. It puts special emphasis on being fast and easy to use. It was initially developed by Khan Academy, and became one of the top five trending projects on GitHub in September 2014.

7. Syntax Highlighting: Syntax highlighting is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Its internal working included certain regexes for different programming languages.

V. EXISTING SYSTEMS

Today, the education industry has gained better knowledge about the potential of virtual classrooms and e-learning web apps. Virtual classrooms with advanced e-learning web apps have made students access more educational content from anywhere at any time.

As web apps have made learning easy for students, many educational institutions have already started embracing it.

Existing E-Learning Web Apps:

A. Google Classroom

Google Classroom is a suite of online tools that allows teachers to set assignments, have work submitted by students, to mark, and to return graded papers. It was created as a way to get rid of paper in classes and to make digital learning possible. But creation of digital content is not possible and users have to rely on other google products to collaborate.

B. Educative Inc

Educative provides interactive courses for software developers. They are changing how developers continue their education and stay relevant by providing pre-configured learning environments that adapt to match a developer’s skill level. For instructors, Educative provides the authoring platform for creating interactive content with just a few clicks.

VI. RESULTS & DISCUSSION

After all the discussion, requirement analysis, UI designing and testing of this tool has led to development of the Digital Content Development Tool.

Panel to add different types of tools for content creation. This panel also gives users flexibility to shift their different sections and rearrange them as needed. Users can remove them, move them up and down.

Image selector with support for 2 aspect ratios depending upon the image size which suits better. Caption for images can also be added.

Code snippets has multiple programming language support like C++, C, JAVA, SQL and many more. Users can select the language and add their code. The code is represented with syntax highlighting for easy understanding and reading.

Often educators demand to add video links of their online lectures or someone else for reference, so here is the support to add URLs along with captions. This also has support to play the video.

Conclusion

The result of this research paper is a fully working online content management tool that supports adding of video URLs, to display these videos, image upload support with two aspect ratio support, adding of code snippets, syntax highlighter support, mathematical expression can be added to content, UML and other diagrams, markdown support and WYSIWYG editor editing. It is a user tested application that is deployed on an amazon web service server. As the application supports dynamic content creation and management, it is currently planned to start real-world testing of the application. The application should be mostly production-read, but due to the smaller than expected user testing group, some usability issues might still arise. There are also some known areas that would deserve further improvements. The application will be released to a group of educators for content creation satisfying real world needs, further feedback and improvements from them if it is updated in this tool. There also were some good UX improvements that would make this editor more user friendly. could not be included. Some improvements in uml diagrams support that will enable some left diagrams support in this tool.

References

[1] J. Stettina and W. Heijstek, “Necessary and neglected? An empirical study of internal documentation in agile software development teams”, in Proceedings of the 29th ACM international conference on Design of communication - SIGDOC ’11, ACM Press, 2011, p. 159, isbn: 9781450309363. doi: 10.1145/2038476.2038509. [Online]. Available: http://dl.acm.org/citation.cfm?doid=2038476.2038509. [2] ClickHelp LLC, What is software documentation? [Online]. Available: https://clickhelp.com/software-documentation-glossary/soft ware-documentation/. [3] J. Gruber, Markdown: Syntax. [Online]. Available: https://daringfi reball.net/projects/markdown/syntax. [4] S. K. Kar, “Teachers\' Attitudes towards Online Teaching (E-learning) during Covid-19 Lockdown”, Journal of Performance of Constructed Facilities, vol. 10, no. 8, pp. 51–61, 2020. [5] K. G. Gazzeh, “E-learning: an efficient tool of sustainable higher education”, Journal of Performance of Constructed Facilities, vol. 9, no. 7, pp. 18–19, 2018. [6] A. A. M. Musawi , “E-Learning Development Based on Internet of Things and Blockchain Technology during COVID-19 Pandemic”,Mathematics, vol. 5, no. 8, pp.16, 2021 [4] Amasha, M.A.; Areed, M.F.; Alkhalaf, S.; Abougalala, R.A.; Elatawy, S.M.;m Khairy, D, “The future of using Internet of things (loTs) and context-aware technology in E-learning. In Proceedings of the 9th International Conference on Educational and Information”, Journal of Performance of Constructed Facilities,Technology, Oxford, UK, 11–13 February 2020. [7] Z. F. H. Homavazir, “Impact of E- learning on student learning and employability – A study in India”, Journal of Performance of Constructed Facilities, vol. 9, no. 7, pp. 18–19, 2015. [8] E. L. Luaran , “A study on the student’s perspective on the effectiveness of using e-learning”,Faculty of Education, Universiti Teknologi MARA, vol. 2, no. 10, pp.10, 2013 [9] S. S. N. Noesgaard, “The Effectiveness of E-Learning: An Explorative and Integrative Review of the Definitions, Methodologies and Factors that Promote e-Learning Effectiveness”,Faculty of Education, Universiti Teknologi MARA, vol. 2, no. 10, pp.10, 2019. [10] A. Angeli,‘Transforming a teacher education method course through technology: Effects on preservice teachers’ technology competency’, Computers & Education, vol. 45, no. 4, pp. 383–398, 2015. [11] G. Alinier, G., Hunt, B., Gordon, R. and Harwood, C. \'Issues and innovations in nursing education: Effectiveness of intermediate-fidelity simulation training technology in undergraduate nursing education\', Journal of Advanced Nursing, vol. 54, no. 3, pp. 359–369, 2006. [12] M. Cone, An overview of markdown, how it works, and what you can do with it. [Online]. Available: https://www.markdownguide.org/ getting-started/. [7] ——, Applications and components that support markdown. [Online]. Available: https://www.markdownguide.org/tools/. [13] Marked, Marked documentation. [Online]. Available: https://marked. js.org. [14] E. Jacobs, Markdown-to-jsx. [Online]. Available: https://github.com/ probablyup/markdown-to-jsx. [15] npm trends, Remark-parse vs marked vs markdown-to-jsx. [Online]. Available: https://www.npmtrends.com/remark-parse-vs-markedvs-markdown-to-jsx. [16] Javascript | mdn. [Online]. Available: https://developer.mozilla. org/en-US/docs/Web/JavaScript. [17] Node.js, Node.js. [Online]. Available: https://nodejs.org/en/. [18] ——, About. [Online]. Available: https://nodejs.org/en/about/. [19] F. Copes, The NodeJS handbook.

Copyright

Copyright © 2022 Mandeep Katre, Jaya Gaur, Manas Srivastava, Ritik Gupta, Sourodeep Ghosh Roy. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.