Collaborative Note Taking In Lecture Settingsdocx

=== Collaborative note-taking in lecture settings ===

UNIVERSITY OF CRAIOVA

FACULTY OF AUTOMATION, COMPUTERS AND ELECTRONICS

COMPUTERS AND INFORMATION TECHNOLOGY DEPARTMENT

BACHELOR PROJECT

STUDENT

CONSTANTIN STEFAN

COORDINATOR

ASSOC. PROF. DR. ELVIRA POPESCU

JULY 2015

CRAIOVA

UNIVERSITY OF CRAIOVA

FACULTY OF AUTOMATION, COMPUTERS AND ELECTRONICS

COMPUTERS AND INFORMATION TECHNOLOGY DEPARTMENT

BACHELOR PROJECT

COLLABOTARTIVE NOTE-TAKING TOOL IN LECTURE SETTINGS

STUDENT

CONSTANTIN STEFAN

COORDINATOR

ASSOC. PROF. DR. ELVIRA POPESCU

JULY 2015

CRAIOVA

TABLE OF CONTENTS

1. INTRODUCTION

1.1 PROJECT THEME

1.2 SOLUTION OVERVIEW

1.3 THESIS STRUCTURE

2. THEORETICAL BACKGROUND

2.1 E-LEARNING

2.2 COLLABORATIVE LEARNING

2.3 NOTE TAKING IN EDUCATIONAL SETTINGS

2.4 SIMILAR SYSTEMS

3. TECHNOLOGIES AND FRAMEWORKS

3.1 HTML AND CSS

3.2 BOOTSTRAP

3.3 JAVASCRIPT AND JQUERY

3.4 KENDO

3.5 PHP

3.6 MYSQL

3.7 ANDROID DEVELOPER TOOLS (ADT)

3.8 RESTFUL WEB SERVICES

4. EDµNOTES – MOBILE APPLICATION

4.1 REQUIREMENTS SPECIFICATION

4.2 SYSTEM ARCHITECTURE

4.3 DATABASE STRUCTURE

4.4 IMPLEMENTATION DETAILS

4.5 USER MANUAL

5. EDµNOTES – WEB APPLICATION

5.1 REQUIREMENTS SPECIFICATION

5.2 SYSTEM ARCHITECTURE

5.3 IMPLEMENTATION DETAILS

5.4 USER MANUAL

6. CONCLUSIONS

6.1 ACHIEVEMENTS

6.2 FUTURE DEVELOPMENT

7. REFERENCES

INTRODUCTION

In this chapter we will provide a short overview of the project theme. In section 1.2 we will give a solution overview to our project theme outlining the main functionalities of the two applications: mobile and web application. This chapter ends with section 1.3 where the thesis structure is presented.

1.1 PROJECT THEME

With more rapid development of technology, came the need of its use in the modern techniques of teaching-learning. A big challenge among students nowadays is the ability to extract important information from lectures and the ability to organize information extracted.

Throughout teaching evolution, it was observed that collaborative learning is more efficient than individual learning. The idea underlying the collaborative learning is that students who cooperate in achieving certain tasks are able to apply knowledge acquired in varied and complex ways, learning much better than in individual learning.

This project tries to combine the two ideas mentioned above and that are the use of modern technology for extracting useful information from courses and the notion of collaborative learning, through the two application EdµNotes. EdµNotes mobile application, helps the students to write down the main ideas of the course in real time, organize notes taken and share them with other participants in the course. Web application EdµNotes, comes to help teachers to a better progress of the classes, but also for a better monitoring of the activity of students in the classroom.

EdµNotes throughout mobile application, provides students with the opportunity to note important ideas from a specific course and lecture, but also offers the possibility to see in real time notes taken by other participants at the course, or to mark certain notes as favorites so that you can view later in the mobile application or web application, and also the possibility to make different filtering in the note list.

Through the web application, EdµNotes offer teachers the opportunity to see in real time student annotations and thereby to see if there is a need for additions at what was presented, also they can see in which proportion the course was understood by students. In the same time the teacher has the ability to add grades to the students depending on their activity.

1.2 SOLUTION OVERVIEW

Collaborative note-taking tool in lecture settings is an application designed to be used for educational purposes. As structure, project theme consists of two individual applications as follows: a mobile application designed specifically for use in the classroom by the students, and the other application, a web application intended to be used by teaching staff: teachers or members of the secretariat but also by students outside classroom.

The mobile application is specially designed so that students can take notes in the classroom but also to view the activity of other participants at the course. Also students can select course and lecture for which they want to make various annotations. As a first functionality of mobile application, we can note that students can add an annotation at a certain course or lecture. Also they can reply to the annotations added by other participants at that course or lecture. Another very useful functionality for the student is that they can mark an annotation as favorite to view it later from the mobile application or web application.

Also students will be able to make various filters on annotations corresponding to previously selected course. The can filter by author name, which can be inserted fully if it is fully known, of partially if it is not completely known, after certain keywords that can be found in the text of annotations, after a certain slide number from the course selected earlier, or by a certain tag.

Another important functionality of mobile application is that students can rate annotations considered useful or important, making in this way a classification depending of the degree of utility. Annotations can be public, private or addressed to a particular student. Notes marked as public can be seen by all participants at the course, the private ones can be viewed or searched only by the author and those addressed, and those addressed to a certain student can be seen only by him.

And as a last functionality of mobile application, the student can manage his account, by changing his password or email address, or both.

The web application is an application designed for use by students outside the class, teachers as well as administrative staff (secretariat). In the web application there are three roles: the role of student, teacher and administrator.

As administrator you can add teachers, courses and students enrollments to courses.

As a teacher you can add lectures to your courses with corresponding portable document file; you can give grades to students depending of their activity, but also you can view annotations with various filters. From the role of teacher you can select course and lecture for which you want to visualize annotations, and then you will see corresponding portable document file and all the notes from that course and lecture. Also you can do diverse sorting as by rating, tag, author, by slide number or annotation text.

In the same time, the teacher can search annotations after their tag, which can be entered partially or entirely. The teacher can also make searches after the author’s name and after certain keywords in the annotation text.

As a student you can select the course and lecture within which you want to view annotations, with different filters in a way very similar to the view as teacher. After selecting the respective course and lecture, the student will be able to view the portable document file (pdf ) associated of that course, and the corresponding annotations. Here you can view your own notes in “My notes” section, and notes marked as favorite in the mobile application, in “Favorite notes” section. At the same time the student can view all notes in “All notes” section, can search by notes tag (introduced partially or fully), after the author (introduced partially or fully) and after a keyword.

Also, within each section, the student can filter notes by rating, text, slide number, author or tag. Also in the web application, the student can view marks introduced by the teacher, depending of course in which is enrolled.

1.3 THESIS STRUCTURE

This thesis is structured on 7 main chapters as follows:

Chapter 1 – Introduction . This chapter describes our goal to achieve an application aimed to be used during courses, based on a collaborative note-taking system. In section 1.2 we will give a solution overview to our project theme outlining main functionalities of the two applications : mobile and web application.

Chapter 2 – Theoretical backgrounds. 2.1 section is a brief introduction to e-learning, and also we present the main advantages and disadvantages of this method compared with traditional methods of learning. Also in section 2.2 we present the notion of collaborative learning and how it improves teaching at the course. Also in this chapter, in section 2.3 we describe note-taking in educational settings. The chapter ends with a short presentation in section 2.4 of similar systems of collaborative learning.

Chapter 3 – Technologies and frameworks describe the main technologies and frameworks used within this project such as: HTML & CSS, Bootstrap and Kendo frameworks, JavaScript & JQuery & Ajax, PHP programming language, Mysql SGBD, ADT Plugin for Eclipse and REST architecture.

Chapter 4 – EdµNotes – Mobile Application. This chapter describes first part of our project – the mobile application. Also in this chapter in section 4.1 we present the main functionalities and some use case diagrams. In section 4.2 and 4.3 is presented system architecture and database structure. In section 4.4 are presented some implementation details and the technical solutions adopted. Chapter 4 ends with section 4.5 where is presented a user manual for the mobile application.

Chapter 5 – EdµNotes –Web Application. This chapter describes the second part of our project – the web application. Also in this chapter in section 5.1 we present the main functionalities and some use case diagrams. In section 5.2 we present system architecture. In section 5.3 are presented some implementation details and technical solutions adopted. Chapter 5 ends with section 5.4 where is presented a user manual for the web application.

In Chapter 6 – Conclusions are presented our achievements and future development of this project.

Chapter 7 is represented by References, where are presented all the sources used to achiev this documentation.

2. THEORETICAL BACKGROUND

2.1 E-LEARNING

The term of e-learning can be considered as representing all teaching-learning methods that are using elements of Information Technology and Communications. As etymology the term comes from Anglo-Saxon literature, referring to learning through electronic and informatics methods. In the e-learning focus is on computer use and all multimedia materials used as course support as well as evaluation.

Also e-learning can be considered a method of teaching-learning at distance, materials and communication between teachers and students being achieved in present through the Internet, but also through other modern means of communication.

There are multiple forms of e-learning such as:

– Lessons stored on CD, servers on Internet or Intranet

– Use of media elements, such as videos, pictures or audios to deliver the content.

– Use of examples, practice and feedback to promote learning.

– May be made by an instructor or made for individual study

– E-learning which helps learners to build new skills and knowledge linked to individual learning goals.

In the process of e-learning we can define three types of participants: one that teaches – teacher or instructor; the learner – student; and the system administrator.

As the advantages of e-learning compared to traditional means of teaching – learning we can consider the following:

– reduced costs and smaller length of time, due to fact that students are no longer required to go to the premises of faculty, teaching being done from home in front of computer

– better organization of learning materials due to fact that courses can be stored on servers specially created.

– is a discrete method of learning, because some people do not feel comfortable to learn in large groups, especially when they are the only ones who do not understand certain things.

As disadvantages of this method we can consider the fact that there is no teacher – student interaction or student-student interaction.

2.2 COLLABORATIVE LEARNING

Collaborative learning as learning technique can be considered any situation in which two or more students learn together or works together to solve a problem.

The idea to encourage students to learn in small groups became increasingly pronounced in the learning sciences. According Dillenbourg (1999a) collaborative learning can be defined as “a process by which individuals negotiate and share meanings relevant to the problem under discussion. Collaboration is a coordinated, synchronous activity that is the result of a continued attempt to build and sustain a shared conception of the problem”.

Collaborative learning consider individuals as group members, but also involves phenomena like the negotiation and sharing of meanings – including construction and maintenance of shared conceptions of tasks – that are accomplished interactively in group processes. Collaborative learning involves individual learning, but is not reducible to it. The relationship between viewing collaborative learning as a group process and to the contrary, what appears as an aggregation of individual change is a tension at the heart of collaborative learning. (Stahl, G., Koschmann, T.&Suthers, D., 2006).

The term of Collaborative learning firstly appeared in the 1950s and 1960s in Great Britain, and began to be widely used in the 1980s by American teachers. Collaborative Learning roots are found in need of making a rapid development of education. ( Kenneth A. Bruffee, 1984).

Collaborative learning is based on the idea that learning is a social act in which participants discuss among themselves, learning taking place through talk. There are a lot of definitions of collaborative learning among which we can mention:

-Learning is an active process in which students assimilate new information and relate this knowledge to prior knowledge

-Students benefit from being exposed to different viewpoints

-Learning develops more rapidly in an environment where learners converses between them

A branch of the collaborative learning very used nowadays is Computer-supported collaborative learning or CSCL which is concerned with how students learn together with the help of computers. The rapid development of technology and computers is very important in this branch of collaborative learning, increasing access to computers and technology in schools being in present a worldwide goal. (Stahl, G., Koschmann, T., & Suthers, D. ,2006).

Koschmann (2002a) presented a programmatic description of CSCL in his inaugural speech of the conference CSCL 2002: “CSCL is a field of study centrally concerned with meaning and the practices of meaning in the context of joint activities, and how these practices are mediated through designed artifacts.” (p.18)

Because CSCL is widespread there are many scenarios of use of Computer-Supported Collaborative Learning from where we can mention:

-collaborative writing – here we can consider anything from a research paper, a book or a story. Blogs or interactive boards can be used to share work, form ideas or write synchronously.

-group exploration – refers to discovery of a place, activity or environment by more than two people. Here we can mention physical experiments or exploring of a technology.

-project-based learning – in this case of collaborative learning are established team roles and are set goals. Team members have to make a project together and they can use any file share tool.

Even if the purpose of computer-supported collaborative learning is to collaborate with other students, the teacher still has an essential role in learning. It must make an introduction to the work to be performed using computerized means for a better understanding of the facts. At the same time the teacher has to manage learning process and to ensure that students follow the best path in covering the information. Lastly, the teacher must engage in assessment, in whatever form the design calls for, in order to ensure objectives have been met for all students.

Another responsibility of the teacher is to make students aware of what their purposes are, how to interact with the others, the main technological concerns and the time-frame for the exercises.

Although the use of computer-supported collaborative learning lead to an improvement in education there are also some barriers that must be overcome for the use of it. In computer-supported collaborative learning students or participants at learning process must have access to technology and Internet and also teachers must be trained in use of computers.

2.3 NOTE TAKING IN EDUCATIONAL SETTINGS

Notes can be defined as short condensations of a source material that are generated by writing them down while simultaneously listening, studying and/or observing. Their function is to gather information distributed in a lecture, a book or in any other situation that need to me remembered. In other words, notes are external memories whose content is more or less explicit (Hartley, 1976; Kiewra, 1989; Kiewra & Frank, 1988; Kiewra, DuBois Christensen, Kim, & Lindberg, 1989).

Taking notes frequently occurs in various situations of everyday life: to make a purchase, for future plans, to study, to prepare for a speech and in other many situations. Despite the diversity of reasons and contexts, all the notes represent information recorded from one or more sources.Each recorded information represents a stable external memory which should help in the planning of future activities in learning or creation. (Annie Piolat, Thierry Olive and Ronald T. Kellogg (2005))

People often note down notes or information they want to remember or which serve as reminder of something to do later. (Hartley 2002, Hawkins 2010). Note-taking help students learn by concentrating a large amount of information into smaller parts, but also to customize the information obtained. Also note-taking increases student’s attention and facilitates encoding of information to long-term memory. It was proven that review of notes can help to a better recollection of the course content. Note-taking is closely linked with one’s cognitive abilities, such as working memory, and facilitates learning and growth.

Nowadays many students are unaware of the benefits of effective note taking and how important is the cultivation of note-taking skills over the course of their education. This can be improved by:

-writing summarized notes with your own words

-review notes several times to the exam instead of reading them during the session

-test yourself on the content of your notes

-right choice of taking notes: pen on paper or laptop

Note-taking can also be used in professional settings to help people make better decisions, solve problems, and work more efficiently as a group. The act of note-taking also improves recall of applicant facts for job interviewers, while the act of reviewing notes improves judgment accuracy.

2.4 SIMILAR SYSTEMS

Currently, there are few similar systems that combines collaborative learning system with note taking principle. Here we can remember systems like Tsaap-Notes (Franck Silvestre, Philippe Vidal, Julien Broisin, 2014), CLAS (The Collaborative Lecture Annotation System) and MRAS (Microsoft Research Annotation System). Next we will present some details about the three similar systems.

Tsaap-Notes (Franck Silvestre, Philippe Vidal, Julien Broisin, 2014) is a micro-blogging platform specially created for collaborative note-taking which can be used as a standalone application or can be integrated in existing environments.

As main functionalities of Tsaap-Notes (Franck Silvestre, Philippe Vidal, Julien Broisin, 2014) micro-blogging platform we can remember the possibility to create annotations, questions and the possibility to make different filters on annotations. Tssap-Notes also provide the feature to access all existing notes, reply to a note, post a new note, delete your own notes or add a note as favorite. Also an interesting feature which we have also used in our application is their possibility to display the slide presentation of a course and the notes related with current slide. In the same time Tssap-Notes (Franck Silvestre, Philippe Vidal, Julien Broisin, 2014) uses an hash tag system which can be used further to make filters and to provide information about the content of a note. As a user/student you can choose to display all the notes, your own notes or the notes marked as favorites.

Another interesting feature of Tssap-Notes (Franck Silvestre, Philippe Vidal, Julien Broisin, 2014) is that teacher can test students through the “notes as questions” feature. This feature maps a note to an interactive question. Teachers can choose the time period on which a question is available and after closing a question all students can see the results.

By viewing the results, teachers can make an idea on the level of knowledge regarding a topic or a course. Also teachers can give additional information about the course if they consider that students did not understood the topic very well.

In conclusion we can say that Tsaap-Notes (Franck Silvestre, Philippe Vidal, Julien Broisin, 2014) implement five of six requirements that a collaborative note-taking application should implement:

-support of annotations

-support of unlimited space

-support of collaboration

-adaptability to a specific context

-notes on blank pages (REF)

Another similar system is CLAS (The Collaborative Lecture Annotation System). CLAS is a video annotation tool which was developed to make the extraction of important information a collaborative process and also to provide teachers with tools to analyze the measurement of the level of understanding of the course.

CLAS (Evan F. Risko, Tom Foulsham, Shane Dawson and Alan Kingstone, 2013) underlying concept is that while there is shown a video with a certain lecture, student are asked to press a button when they notice something important in the course. Each button press means an annotation was added and indicates that something important for the user has happened. After finishing the video, student have the possibility to upload annotations on a server and once uploaded there is created a personal graph that contains video in time and the points where were created annotations. Here students have the ability to click on a certain point in the graph and the video plays from that point. Also students have the opportunity to create a public graph with all annotations from all students.

MRAS (David Bargeron, Anoop Gupta, Janathan Grudin, Elizabeth Sanocki) ,or Microsoft Research Annotation System is a platform for collaborative video annotation that presents the lecture the slides and the annotations anchored to time points in the lecture. Annotations are represented by comments and replies to comments. Annotations can be public or private annotations.

Fig.2.1 – MRAS System Overview (REF)

3. TECHNOLOGIES AND FRAMEWORKS

This chapter provides a short overview of the main technologies and frameworks used within this project.

3.1 HTML AND CSS

The World Wide Web or also known WEB is a network of information resources. The Web is composed of three parts which make resources available to audience:

Hypertext Markup Language (HTML) used to navigate among resources.

Hypertext Transfer Protocol (HTTP) used to access resources over the Web

Uniform Resource Identifiers (URI) used to locate resources on the Web.

Every resource available on the Internet has a unique address encoded by a Universal Resource Identifier or “URI” A URI is composed by 3 elements as follows: the protocol used to access the resource for example “http”, the name of the machine which hosts the resource for example www.ace.ucv.ro and the path to the resource “/about/”.

HTML was firstly developed in 1990 by Tim Berners-Lee, an engineer from CERN (European Organization for Nuclear Research), and used by the first available browser Mosaic developed by NCSA.

HTML or HyperText Markup Language is considered to be the Web’s core language for creating documents and web pages. HTML is a language based on tags enclosed by brackets as <tag>. Every tag must be opened and closed after that. Open tag is called start tag and closed tag is called end tag. Any tag must be closed by </tag>. However, there are certain tags that should not be closed as tag used for images <img> or tag used for break line <br>.

HTML code is read by Web browsers and rendered into web pages. HTML tags are used to interpret the content of the page and it is not displayed on page by the browser.

Every HTML file must begin with <html> tag and must be ended with </html>. Also each HTML file must have a <head></head> section and <body></body>. In the <head></head> section it is defined page title within <title></title> tags or added references to external scripts between <script></script> tags. <body></body> section contains the page content.

HyperText Markup Language is rather a markup language than a programming language because of his feature to describe the structure of a website semantically.

HTML is based on SGML, which is a language used to define generalized markup languages for documents. With the evolution of HTML, more presentation elements are replaced by other mechanisms such as style sheets. Separating the structure of a document by its presentation brings a gain of portability across multiple types of device, and gives a better organization of the document.

CSS or Cascading Style Sheets is a language used in web design to describe the way in which a document written in a markup language looks. With help of Cascading Style Sheets we can work on the appearance of HTML pages such as text color, fonts, paragraph spacing, background images or colors and a lot of other visual effects. The main use of CSS is to style web pages, and it is always used in combination with HTML and JavaScript.

One of the biggest advantages of CSS is that you can write code once and use it in multiple pages. CSS code can be written inside HTML document within <style></style> tags, or can be written separately in .css file which can be further used within the HTML document.

In present Cascading Style Sheets language is at third recommendation which is still under development.

3.2 BOOTSTRAP

Bootstrap is a front-end toolkit used to develop web applications. In fact Bootstrap is an open-source collection of HTML and CSS elements, provided by Twitter. Bootstrap provide stylish elements such as buttons, forms, grids, navigation elements and typography. Bootstrap has emerged as a necessity to have a library to meet front-end requirements.

The Bootstrap framework aims to make easier the web development.

Present versions of Bootstrap are supported by all the browsers existing on the market such as: Google Chrome, Mozilla Firefox, Internet Explorer, Opera and Safari.

Another interesting feature of Bootstrap is that it supports responsive web design. By supporting responsive web design it means that the layout of the page adjust dynamically depending on sizes of the device (screen height and width). This feature is very important for the developers who make web applications available for mobiles or tablets.

Bootstrap is basically just CSS code but is built with LESS, a pre-processor that offers more flexibility as normal CSS. Being only CSS code compiled with LESS, Bootstrap has two major advantages: it still remains very easy to implement and once compiled it contains only CSS code without other elements that hinder running as images or JavaScript code.

We have used Bootstrap in our project at Web Application, for the interface and to realize the forms needed to insert data into database. When realizing the interface, we have used a very useful feature of Bootstrap, his Grid System. Bootstrap’s grid system allows the developers to split the page into a maximum number of twelve columns. This grid system is responsive, and the columns will re-arrange depending on the screen dimensions.

Bootstrap Grid System contains four classes:

– xs (for phones)

– sm (for tablets)

– md (for desktops)

– lg (for larger desktops)

3.3 JAVASCRIPT AND JQUERY

JavaScript or JS is an interpreted object-oriented programming language based on the concept of prototypes. JavaScript is often confused with Java programming language but there is no connection between the two programming languages. JavaScript was firstly developed by Brendan Eich from Netscape Communications Corporation under the name of Mocha and then LiveScript and finally was called JavaScript. JS is most known for being the scripting language of Web pages, but it is also used in a lot of other many non-browser environments.

If HTML defines the structure of web pages, CSS defines how a page looks, JavaScript adds interactivity to a web page and create rich web applications. The core language of JavaScript is considered to be ECMAScript, which is used also in non-browser environments such as node.js. In present the current version of ECMAScript is 5.1 and it is supported by all major Web browsers.

ECMAScript defines:

– language syntax

– error handling mechanisms

– types

– the global object

– a prototype-based inheritance mechanism

-built-in objects and functions

JavaScript code is interpreted by the browser, unlike other scripting languages like PHP where code is interpreted by the server.

JQuery is a JavaScript developments platform, created to improve processes such as crossing the HTML DOM tree, animations and AJAX-type applications. In essence JQuery is a library designed to be as small as possible and supported by all existing browsers. It was firstly unveiled by John Resig in 2006.

JQuery contains features like:

– HTML DOM manipulation

– CSS manipulation

– HTML event methods

– AJAX

– Effects and animations

3.4 KENDO UI

Kendo UI is an HTML5 and Jquery based framework used to build modern web applications. Kendo framework provides a lot of UI widgets, a rich data visualization framework, data source, templates, drag-and-drop components and an auto-adaptive mobile framework.

Kendo UI is basically a collection of styles, scripts and images. Some of the technologies reunite by Kendo UI are:

– JavaScript

– HTML5

– CSS3

-JQuey

Kendo UI provides three categories of UI widgets:

– Web – with full featured grid with paging, sorting, filtering and custom templates

– DataViz – also called data visualization widgets used in development of desktop and mobile websites

– Mobile – provides an adaptive rendering technology for iOS, Android and Blackberry

Kendo UI is supported by the majority of available browsers on the market.

3.5 PHP

PHP also known Hypertext Preprocessor is a scripting language, open-source, widely used in development of web application, with possibility to be integrated in HTML code.

The main difference between PHP and JavaScript is that, PHP code is executed on the server, it returns an HTML response which is then sent to the client unlike JavaScript where code is executed on the client side on the browser.

There are three main areas where PHP scripts are used:

– server side scripting

– command line scripting

– desktop applications

One of the most powerful facility of PHP it is supporting a wide range of databases. Writing a web page that access a database is very simple using one of extensions for database working for example MySQL or utilizing a level of abstraction like PDO.

PHP can also communicate with other services using protocols like LDAP, IMAP, HTTP, POP3, COM and others.

PHP can convert a static webpage that has content which has to be changed by hand into a dynamic one that can display content based on any criteria. It is one of the most used scripting language because it can run on various platforms (Windows, Linux, Unix) , it is compatible with almost all servers used today, it is open source, it offers support for a wide range of databases and it is easy to learn.

Another interesting thing is that PHP can create, open, read, write and delete files from the server, also PHP can collect form data, send and receive cookies and add, delete or modify data from databases.

In our project PHP was used in creating the Web Application, to collect form data, to add, modify and delete data from database. In the Mobile Application, PHP was used to connect with the database and to retrieve data from database.

3.6 MySQL

MySQL is one of the most popular open-source database management systems, developed by Oracle.

Its main characteristics are:

– MySQL databases are relational

– MySQL is a database management system

– MySQL software is open-source

– MySQL Database Server is very fast, reliable, scalable and easy to use

– MySQL Server works in client/server or embedded systems.

MySQL is part of the LAMP or WAMP platform (Linux/Windows-Apache-MySQL-PHP/Perl/Python). The most often, MySQL is used in closely connection with PHP, the link between the two being called Dynamic Duo.

A database is a collection of data that exists over a long time and is managed by a Database Management System. The data in a MySQL database are stored in tables. A table is a collection of related data, and it consists of columns and rows. Databases are useful for storing information categorically.

A Database Management System has the following main characteristics:

– supports storage of a large amount of data over a long period of time

– allow users to retrieve and modify data from database through a user interface

– supports multiple user access to the same data

In our project we have used MySQL through phpMyAdmin, which is an open source tool used to handle the administration of MySQL with help of a web browser. Through phpMyAdmin we can make various tasks such as creating, modifying or deleting databases, tables, fields or rows; Also we can execute SQL statements or manage users and permissions at the database.

3.7 ANDROID DEVELOPER TOOLS (ADT)

Android Developer Tools (ADT) is a plugin for Eclipse that provides a suite of tools that are integrated with the Eclipse IDE. It offers access to many features that helps you to develop Android applications. ADT provides GUI access to many of the command line SDK tools as well as a UI design tool for rapid prototyping, designing, and building of your application’s user interface.

One of the features provided by ADT plugin, is his custom xml editor which helps you to create and edit Android manifests, layouts or menu. Android Developer Tools (ADT) comes with a possibility to edit xml file in a xml markup mode or in graphical mode. You can choose in each form you want to edit from the pair of tabs at the bottom of each custom XML editor.

ADT plugin provides a few custom form-based XML editors such as:

– Graphical Layout Editor

– Android Manifest Editor

– Menu Editor

– Resource Editor

– XML Resource Editor

Graphical Layout Editor provides a lot of features to allow an easy development of user application’s user interface. These features can be accessed by opening XML layout files in Eclipse. Android Manifest Editor gives you the possibility to edit Android manifests with a simple graphical interface.

Another important part of Android Developer Tools is his Layout Refactoring Support. In both the graphical and XML layout editor, you can refactor your layout with Change Layout option. You can change the layout very fast, and in the same time re-render the canvas automatically.

3.8 RESTFUL WEB SERVICES

Representational State Transfer (REST) is an architectural style for distributed systems like world wide web (WWW). REST is based on HTTP protocol and on web standards. Representational State Transfer architecture style was firstly developed in 2000 by the W3C Technical Architecture Group (TAG) in parallel with HTTP 1.1. Architectural Style REST imposes certain restrictions that must be considered when developing applications:

-Client-server – A uniform interface which divides client from the server. This means that client doesn’t take care of storing data and server is not concerned about the user interface

-Stateless – This principle ensures that no client context is stored on the server between requests. Each session is stored on the client.

-Cacheable – Clients may retain responses in cache memory

-Layered – A client can not realize from the common interface if it is connected directly to the server or to an intermediate proxy.

A Restful Web Service is based on the principles of the REST architecture and on the HTTP methods. These methods are:

– GET

– PUT

-DELETE

-POST

The GET method retrieves whatever information is identified by the Request-URI. A disadvantage of GET method is that it can not support transmission of big data (for example in Internet Explorer through GET method you can transmit only 2003 characters). The PUT method requests that the enclosed entity be stored under the supplied Request-URI. If the request refers to an existing resource then the enclosed entity should be considered a modified version of that residing on the server. The DELETE method requests that the origin server delete the resource identified by the Request-URI. This method has the disadvantage that can be overridden by human intervention on the server.

The POST method is used when you want to make modification on the server. An advantage of this method is unlimited amount of data, data sent through post method doesn’t appear into the URL, and data sent are not stored in browser cache.

4. EDµNOTES – MOBILE APPLICATION

In this chapter, we will provide a short description of the requirements specification, about system architecture and also about database structure. The end of this chapter will provide some details about implementation and a user manual for the mobile application.

4.1 REQUIREMENTS SPECIFICATION

EdµNotes – Mobile Application is an application designed to be used for educational purposes, within courses, for a better evolution of them. The application tries to combine two current concepts in modern education: collaborative learning and the use of modern technologies in the learning process. The application tries to replace the countless pages of notes, allowing storage of written notes into a database, but also to offer a better organization of them.

The main actor of the mobile application is the student, which can use the application in different ways as follows:

Fig.4.1. Use Case diagram – EdµNotes Mobile Application

Firstly students must login into the application with their username and password.

After that they have to select the course, and depending on the course previous selected they must select the lecture at which they want to add notes. After selecting the course and lectures, the main menu is opened. Here students can select to view notes added at that course and lecture, can search notes, add notes, write a summary note and can manage their account.

When students select to view notes, it is opened a page with all notes related to the course and lecture previously selected. Here they can view further notes details, by selecting one specific note from the list. After that they can view full text of note, author and timestamp. Also they can mark selected note as favorite, can rate the selected note or can reply to it.

When student select to search notes, it is opened a page with an input field and a dropdown list where they can select the criteria, and below are displayed the notes as a list. Here they can search after slide number, after author name which can be introduced partially or fully if it is known, after note tag or after a keyword. Also they can view note details by selecting a specific note from the list, without option to add a note to favorite, rate and reply to a note.

By selecting to add a note, students can insert and save a note to database, by inserting note tag, note text, privacy which can be public, private, teacher, student or group and slide number.

When students want to add a summary note, they have to insert note tag, summary text and privacy which can have the same values as adding a note: public, private, teacher, student or group.

By selecting their name from the main menu, students can logout from the application, or manage their account. Here they can modify their current password and their e-mail address, or both of them.

4.2 SYSTEM ARCHITECTURE

Packages diagram

Fig.4.2 – EdµNotes – Mobile Application – Packagesdiagram

Fig.4.3 – Class diagram for package ro.ucv.sendToWebService

Fig.4.4 – Class diagram for package ro.ucv.edunotes

Fig.4.5 – Class diagram for package ro.ucv.classes

Fig.4.6 – Class diagram for package ro.ucv.getFromWebService

4.3 DATABASE STRUCTURE

The database consists of 10 tables as in the next image:

Fig.4.7 – Database Diagram

Fig.4.8 – Detailed Database Diagram

4.4 IMPLEMENTATION DETAILS

As a first mobile application’s functionality we can remember logging into the application. This was made possible by realizing a suitable interface where the user must enter his username and password wherewith was recorded. The two inputs in which user must enter his username and password are represented by two TextView objects. After introducing username and password the user has to select login button. Login button is represented by an ImageButton object. The main idea behind logging is that the user has to introduce username and password and then click on the login button. When pressing the login button triggers setOnClickListener method where the action on the button happens. Here it is established the database connection and users and passwords existing in database are extracted from table “students” with help of a restful web service that returns a response from the server as a json string. This string is then interpreted by the application to be able to compare the data entered from the keyboard with those extracted from the database.

loginbutton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

LoggedStudent.setUsername(usernameView.getText().toString());

if (passwordView.getText().toString().length() < 6) {

Toast.makeText(getBaseContext(),"Minimum length for password is 6",

Toast.LENGTH_SHORT).show();

}

else { LoggedStudent.setPassword(passwordView.getText().toString());

for(int i=0;i<dldusers.Students.size();i++){

Usernames.add(dldusers.Students.get(i).getUsername()); if(LoggedStudent.getUsername().equals(dldusers.Students.get(i).getUsername())&&LoggedStudent.getPassword().equals(dldusers.Students.get(i).getPassword())){ LoggedStudent.setStudentId(dldusers.Students.get(i).StudentId);

Intent intentMain = new Intent(getApplicationContext(),SelectCourseActivity.class);

startActivity(intentMain);

}

}

}

}

});

If the password entered by student has a size less than 6 characters then it will be displayed a message with password length < 6.If the data introduced by the student match with one entry from the database then logging is allowed and it will be displayed another activity from where students must select their course and lecture.

The interface was realized using Graphical Editor provided by ADT plugin. It was made on a RelativeLayout and it consists of two EditText object, one ImageButton for Login Button and some ImageView objects for the other images like Logo.

The web service which retrieves data from database was realized with PHP and MySQL languages and consists of connection to database part and query part where data is extracted from database.

<?php

include("DatabaseConnection.php");

$result = mysql_query("Select * FROM Student");

while($row = mysql_fetch_assoc($result)){

$output[]=$row;

}

print(json_encode($output));

mysql_close($link);

?>

After logging in students have to select course and lecture to proceed further to making operations on notes. Here we have user two Spinner objects populated with data from database. Select Course spinner is populated with all the courses available in the database, and Select Lecture spinner will be populated with lectures available at course previously selected from the database. Data from database will be also retrieved with help of restfull webservices like at logging part. The interface is made on a RelativeLayout where are added two spinner objects, one ImageButton and some TextView and one ImageView for the Logo. Here it is also displayed the username with which student has logged. If the student did not selected course and/or lecture from the two spinners, it will be asked to select them to proceed by displaying a message:

Toast.makeText(getBaseContext(),"Please select course & lecture",Toast.LENGTH_SHORT).show();

After selecting the course and lecture it will be displayed a new activity which represents the main menu of the application. Here students can view notes added at course and lecture selected previously, can search notes, can add notes or even write a summary note. Also here students can change personal data account like password or email or can logout from the application.

When they want to manage account settings or logout they have to click on their username and it will be displayed a dropdown list from where can select what to do. By selecting Account Setting it will be opened an activity from where you can change your password or e-mail address or even both of them. By selecting corresponding radio buttons from each task you will enable the inputs and will be able to introduce data. To change your password you have to check “Change Password” radio button. After that you will have to introduce your current password, your new password and to confirm it. The same thing happens for changing the e-mail. You will have to enable the inputs by selecting “Change-e-mail address” and then to introduce your new e-mail address. By Selecting “Save” button it is triggered setOnClickListener method where firstly is checked if you want to modify both password and e-mail or one of them. If you want to change your password it will be compared old password introduced with your current password. It they match then the new data is sent to webservice, from where it is updated in the database.

saveButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if (modifypass.isChecked() && modifyemail.isChecked()) { if(MainActivity.LoggedStudent.Password.equals(oldPasswordT.getText().toString())) {

newPassword = newPasswordT.getText().toString();

newEmail = changeEmailT.getText().toString();

sendDates(URL + "profile.php?StudentId=+UserOptions.getUserId() + "&&Password="+UserOptions.getNewPassword() + "&&email="+ UserOptions.getNewEmail());

Intent intentMain = new Intent(getApplicationContext(),OptionsActivity.class);

startActivity(intentMain);

finish();

}

} else if (modifypass.isChecked()) {

if (MainActivity.LoggedStudent.Password.equals(oldPasswordT.getText().toString())) {

newPassword = newPasswordT.getText().toString();

sendDates(URL + "profilepassword.php?StudentId="+ UserOptions.getUserId() + "&&Password="+UserOptions.getNewPassword());

Intent intentMain = new Intent(getApplicationContext(),OptionsActivity.class);

startActivity(intentMain);

finish();

}

} else if (modifyemail.isChecked()) {

newEmail = changeEmailT.getText().toString();

sendDates(URL + "profileemail.php?StudentId="+ UserOptions.getUserId() + "&&email="+ UserOptions.getNewEmail());

Intent intentMain = new Intent(getApplicationContext(),OptionsActivity.class);

startActivity(intentMain);

finish();

}

}

});

}

Another functionality of the mobile application is viewing notes. This can be done by selecting in main menu View Note Icon. After selecting this it will be displayed a new activity where users can see a list of notes available at course and lecture previously selected. This was done by creating a Custom adapter class which extends BaseAdapter class. This custom adapter let us to display in the same row the two images corresponding to privacy and note type and also part of note text. This was done in getView method of class CustomListViewAdapter. Here are taken the two images and one TextView from layout and are set corresponding images from resources:

public View getView(final int position, View convertView, ViewGroup parent) {

ListViewItem item=items.get(position);

View vi=convertView;

if(convertView==null)

vi = inflater.inflate(R.layout.item_row, null);

ImageView imgThumbnail=(ImageView)vi.findViewById(R.id.imgThumbnail);

ImageView imgThumbnail2=(ImageView)vi.findViewById(R.id.imgThumbnail2);

TextView txtTitle = (TextView) vi.findViewById(R.id.txtTitle);

imgThumbnail.setImageResource(item.ThumbnailResource);

imgThumbnail2.setImageResource(item.ThumbnailResource2);

txtTitle.setText(item.Title);

return vi;

}

The list is populated with notes from database with help of a web service written in php:

<?php

include("DatabaseConnection.php");

$Course = $_GET["Course"];

$result=mysql_query("SelectIdNote,Text,Author,Timestamp,SlideNo,Privacy,RatingReplyTo FROM note Where Course='$Course'");

while($row = mysql_fetch_assoc($result)){

$output[]=$row;

}

print(json_encode($output));

mysql_close($link);

?>

In application, all the communication with the web service (all the reads from database) are made in background, because in android you can not make database operations (reading/writing/modifying) on the main thread. This is achieved with help of AsyncTask, and all the communication with the web service is made on doInBackground method of each class from packages getFromWebService and sendToWebService.

public Void doInBackground(String… urls) {

String url = URL + "getNote.php?Course=" + SelectCourseActivity.SelectedCourse.getShortName();

if (PartialNoteText != null)

PartialNoteText.clear();

String result = "";

InputStream isr = null;

try {

HttpClient httpClient = new DefaultHttpClient();

HttpPost httpPost = new HttpPost(url);

HttpResponse response = httpClient.execute(httpPost);

HttpEntity entity = response.getEntity();

isr = entity.getContent();

} catch (Exception e) {

e.printStackTrace();

Log.e("log_tag", "Error in http connection " + e.toString());

}

// convert response to string

try {

BufferedReader reader = new BufferedReader(new InputStreamReader(isr), 8);

StringBuilder sb = new StringBuilder();

String line = null;

while ((line = reader.readLine()) != null) {

sb.append(line + "\n");

}

isr.close();

result = sb.toString();

} catch (Exception e) {

e.printStackTrace();

Log.e("log_tag", "Error in converting result " + e.toString());

}

// parse json data

try {

JSONArray jArray = new JSONArray(result);

for (int i = 0; i < jArray.length(); i++) {

JSONObject json = jArray.getJSONObject(i);

if (json != null) {

NoteID.add(i, Integer.parseInt(json.getString("IdNote")));

NoteText.add(i, json.getString("Text"));

PartialNoteText.add(i,json.getString("Text").subSequence(0,15) + "…");

Timestamp.add(i, json.getString("Timestamp"));

Author.add(i, json.getString("Author")); SlideNo.add(i,Integer.parseInt(json.getString("SlideNo")));

Privacy.add(i, json.getString("Privacy"));

Rating.add(i, Integer.parseInt(json.getString("Rating")));

ReplyTo.add(i, Integer.parseInt(json.getString("ReplyTo")));

}

}

} catch (Exception e) {

e.printStackTrace();

Log.e("log_tag", "Error in parsing data " + e.toString());

}

return null;

}

Here, if the user selects one specific note from the list, it will be able to see notes details. After selecting a note, it will be opened a new activity where users can see the full text of the note (in the list is displayed only 75% of the characters of the note text for a better management of the interface), the time when the note was created in Timestamp, and the author of the note.

lv.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {

setEntireText(Notes.get(position).getText());

setTimestamp(Notes.get(position).getTimestamp());

setAuthor(Notes.get(position).getAuthor());

setNoteID(Notes.get(position).getNoteId());

ReplyTo = Notes.get(position).getReplyTo();

setSlideNumber(Notes.get(position).getSlideNo());

Intent intentMain = new Intent(getApplicationContext(),ViewNoteDetails.class);

startActivity(intentMain);

ViewNoteDetails.setState(true);

}

});

}

Also here users can mark a note as favorite, can rate a note and can reply to a note. By selecting to mark a note as favorite, the application make a query to database to see which is the index of last entry from table “favorite note” and after that are inserted into the database next available index, student id and note id. The same thing happens when students want to rate a note. Here the data is inserted in table “noterating” at next available index, student id, note id and rating. Also here is made an average on the rating of the same note, which is further inserted into the note table in the Rating column, which represents the rating which will be displayed for the users into the web application.

<?php

error_reporting(0);

include("DatabaseConnection.php");

$number_of_notes=$_POST[“nr_notes”];

$i=mysql_query( "SELECT MAX(IdNote) FROM note");

for($i=0;$i<$number_of_notes;$i++){

$result = mysql_query("Update note set Rating=(SELECT AVG(rating) FROM noterating where IdNote='$i' )where note.IdNote='$i'");

}

while($row = mysql_fetch_assoc($result)){

$output[]=$row;

}

mysql_close($link);

?>

By selecting to reply to a note, it will be displayed a new activity where users must introduce reply text, reply tag and also select privacy. Privacy can be public, private, teacher, student, or group. If the user selects student privacy, he/she will be able to select a student name, and the reply will be available only for that student.

From the main menu users also have the possibility to add a new note at the course previously selected by clicking on the Add Note button. By clicking on that button it is triggered an action which is made into the addNoteButton.setOnClickListener method as follows:

addNoteButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent intentMain = new Intent(getApplicationContext(),

TakeNoteActivity.class);

startActivity(intentMain);

setSummaryOrNote(0);

}

});

After this it will be opened a new activity, TakeNoteActivity where users have to input all the note data like: note tag, note text, privacy and slide number. After that the data will be sent to a web service through GET method and here the data will be written into the database. Also the writing into the database (through web service) is made in background with help of AsyncTask.

If in the main menu the users select “Search Note” it will be opened an activity, SearchNoteActivity, where users can see an input field, can select the criteria to search and also they can view a list of notes with the results. Here users can select to search after slide number, after author, note tag or a keyword from note text. The list is made with help of a standard ArrayAdapter object. The list is updated after each search. Also is users select one note from the list, they will can view details of that note as in case of ViewNote, but without option to reply to that note. This is possible with help of a listener set on listView elements.

listViewText.setOnItemClickListener(new OnItemClickListener() {

public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {

setTimestamp(searchToNote.Timestamp.get(position));

setAuthor(searchToNote.Author.get(position));

setText(searchToNote.NoteText.get(position));

Intent intentMain = new Intent(getApplicationContext(),SearchNoteDetails.class);

startActivity(intentMain);

}

});

The criteria of which will be made the search can be introduced partially or fully. For example at the author name can be introduced only the first name or the second name.

4.5 USER MANUAL – EDµNOTES – MOBILE APPLICATION

First thing that you have to do as user of mobile application you have to login

Fig.4.9 – Login Activity

After logging you have to select the course and lecture where you are:

Fig.4.10 – Select Course

Fig.4.11 – Select Lecture

After selection course and lecture, you will be able to see the main menu:

Fig.4.12 – Main Menu

Here if you select your name, you will have the possibility to manage your account or to logout from application:

Fig.4.13 – Main Menu – personal settings

In account settings screen you can change your password, your e-mail address or both of them:

Fig.4.14 – Account Settings

If you select to view notes, it will be displayed a list with all available notes and their type:

Fig.4.15 – View Notes

Also if you select a specific note from the list, you will be able to see note details, where you can add that note to favorites, rate or reply to that note as follows:

Fig.4.16 – View note details

Fig.4.17 – Reply to a note

If you select from the main menu to search for a note, you can search it by different criteria like slide number, author, tag or a keyword:

Fig.4.18 – Search notes

By selecting to add a note from the main menu, you will be asked to introduce all the notes data like tag, text, privacy and slide number:

Fig.4.19 – Add new note

Also if you select add write summary it will be displayed a form like that from add note where you will be able to input note data like tag, text and privacy.

Fig.4.20 – Add summary note

5. EDµNOTES- WEB APPLICATION

In this chapter we will provide an overview of requirements specifications, including a short description of the main functionalities of the web application and also use scenarios. In 5.2 section we will speak about system architecture including some class diagrams and also system diagrams. This chapter will also include in section 5.3 some implementation details with all the functionalities of the application and the technical solution adopted and an user manual in section 5.4.

5.1 REQUIREMENTS SPECIFICATION

EdµNotes – Web Application is an application intended to be used by students outside the classroom and also by the teachers during lectures and by the administrative staff like secretariat. Therefore here we have three main actors: student, teacher and administrator each of them with different tasks as follows:

Fig.5.1 – Use case diagram – Student Role – EdµNotes Web Application

Fig.5.2 – Use case diagram – Administrator role – EdµNotes Web Application

Fig.5.3 – Use case diagram – Teacher role – EdµNotes Web Application

As a student you have to introduce your username and password and select your status. After that you will be able to view notes, view grades or logout from the application.

If you select to “View Notes” than you have to select the course and corresponding lecture from a list populated from database. After that you will be able to see the pdf file of the lecture selected and below the notes associated with that lecture where you can make different filters. Here you can view your own notes in “My Notes” section, your favourite notes in “Favourite Notes” or all notes available for that course and lecture in “All Notes” section. Also as a student you can search notes by their author in “Search by Author” tab, by their tag in “Search by Tag” or by a keyword in “Search by Keyword” tab.

If you select to “View Grades” you will be able to see your grades from all courses, and also you will be able to make sort the grades after course title or after the value of grade.

As a teacher after login part you will be able to add new lectures to your courses, to view notes, add grades to student or logout from the application. If you select to “Add Lectures” it will be opened a page where you have to input all the data needed to add a new lecture like course, lecture title, date and pdf source file.

By selecting to view notes, you will be able to select the course and lecture from two dropdown lists and after that you will see the pdf file associated to that course and lecture and below that all the notes related to this. Here you can see only all notes in section “All Notes” and make some search by tag, author or keyword.

If you want to add a student grade, than you have to select the course, student and grade from dropdown lists and after that you will be able to add a new grade.

As administrator you can add new courses, teachers, students and student enrollments to courses. If you select to add a new course you will have to introduce course title, his short name and teacher name. When you want to add a new teacher you will have to complete a form with personal data about the teacher. If administrator wants to add a new student it will have to complete a form similar with that from add teacher section. By adding enrollments you have to select a course and a student from two dropdown lists and then submit it.

5.2 SYSTEM ARCHITECTURE

Fig.5.4 – HyperText Stucture Model

5.3 IMPLEMENTATION DETAILS

EdµNotes – web application is an application designed to be used outside the classroom by students, teachers and secretariat, each of them benefiting from various functionalities. Firstly we will describe the functionalities available for students and how they have been implemented.

For the beginning, all the 3 actors have to login by introducing their username, password and also by selecting their status. For the interface we have used a bootstrap form with two input fields, a select element for the status, and a button to submit the form.

After inserting the username, password and role, the user has to press submit button, and then the data will be submitted to a php script with help of POST method. Here we have to connect to the database through a php script,

<?php

error_reporting(0);

$server = "127.0.0.1";

$user = "root";

$password = "";

$database = "edunotes";

$link = mysql_connect($server, $user, $password, $database);

if (!$link) {

die('Could not Connect: ' . mysql_error());

}

mysql_select_db($database, $link);

?>

and after that we have to validate the form, by checking if all the fields were completed and if they meet the requirements.

if (empty($_POST["username"])) {

$UsernameErr = "Username";

} else

$Username = $_POST["username"];

if (empty($_POST["password"])) {

$passwordErr = "Password";

} else $Password = $_POST["password"];

If the validation is not done then the user will be required to introduce data again or to complete all the fields. If the validation was done then depending on the role, the script will search into the right table from the database, and it will extract all the usernames and passwords from that table. After that it will compare the data introduced by keyboard with data from the database. If password and username match then the user will be logged in, if there is no match between username and password and data from the database, the user will be asked to introduce personal data again.

Being logged in as a student, you can choose to view notes or to view your grades.

If you select to view Notes, than you will have to select the course and lecture at which you want to view notes. The two selects were populated with courses and lectures from database. Lecture select is populated with data from database only when you select the course. After selecting the course and lecture, it will be displayed the corresponding pdf file which is stored on the server. The pdf file is displayed into a div element, which change his content dynamically according to course and lecture previously selected. This change is made with help of an ajax call made in a javascript function:

function openpdf(valoare){

if (valoare != "All")

{

$.ajax(

{

type: "POST",

url: '<?php echo $_SERVER['PHP_SELF']; ?>',

data: {lecture: valoare},

success: function (response) {

$('#pdfcontent').html(response);

}

});

}

else

{

$('#pdfcontent').html("Please select a value.");

}

document.getElementById('notes').style.visibility = 'visible';

}

Below the displayed pdf file students can select to view their own notes, favorites notes, all notes, can search by a note tag, by an author or by a keyword. If the users selects to view his own notes, it will be displayed a grid table made in Kendo UI, and here user can sort notes by slide number, text, tag or rating. Table is populated dynamically with data from the database with help of a php script:

<?php

session_start();

$Author = $_SESSION["Username"];

$CourseTitle = $_SESSION["course"];

$result3 = mysql_query("Select ShortName from course where Title='$CourseTitle'");

$row3 = mysql_fetch_array($result3);

$ShortName = $row3[ShortName];

$_SESSION["shortname"] = $ShortName;

$query1 = mysql_query("Select * FROM note where Author='$Author' AND Course='$row3[ShortName]' order by Rating Desc ");

while ($row = mysql_fetch_array($query1)) {

$query2 = mysql_query("Select Tag from notetag where IdNote LIKE '%{$row[IdNote]}%' ");

$row2 = mysql_fetch_array($query2);

echo "<tr>";

if ($row[SlideNo] == -1)

echo "<td width='10%'>" . "whole course" . "</td>";

else

echo "<td width='10%'>" . $row[SlideNo] . "</td>";

echo "<td width='2%'>" . $row[Text] . "</td>";

echo "<td width='10%'>" . $row2[Tag] . "</td>";

echo "<td width='10%'>";

for ($i = 0; $i < $row[Rating]; $i++)

echo"&#x2605";

echo"</td>";

echo "</tr>";

}

?>

The same technical solution was chosen for display notes in all the other fields.

If user wants to see his grades, he must select View Grades from the menu bar. Here, it is taken the username from the login part and after that is searched into the database the corresponding student id. After that is made a query on grade table by student id previously found. Finally it is made a query on the course table to select course title depending on course id from previously query as follows:

<?php

session_start();

$Author = $_SESSION["Username"];

$query2 = mysql_query("Select StudentId from student where Username='$Author'");

if (mysql_num_rows($query2) > 0) {

$StudentId = mysql_fetch_row($query2);

$StudentId = $StudentId[0];

}

$query1 = mysql_query("Select CourseId,Grade FROM grades where StudentId='$StudentId' ");

while ($row = mysql_fetch_array($query1)) {

$query3 = mysql_query("Select Title from course where IdCourse ='$row[CourseId]'");

while ($row3 = mysql_fetch_array($query3)) {

echo "<tr>";

echo "<td width='6%'>" . $row3[Title] . "</td>";

echo "<td width='2%'>" . $row[Grade] . "</td>";

echo "</tr>";

}

}

?>

All the results are displayed into a grid table made with help of Kendo UI.

Being logged in as administrator, you will benefit of four functionalities as follows: add courses, add teachers, add students and finally add enrollments.

By selecting to add a course, administrator is required to introduce needed to insert the course into database as course title, short name and teacher. For the teacher we have chosen to make a select element in which we display all the teachers available in the database. After administrator press submit button, the data is submitted from the form to a php script with help of POST method. In the php script, firstly we make form validation, to check if all the inputs where completed or correctly completed. After that we will take teacher id corresponding to teacher username selected in the interface. With the teacher id selected we make a query on the database, with which we insert data into the database. If the data was successfully saved, it will be displayed into the interface a message. This alert message was done in function afiseaza_alerta(param);

function afiseaza_alerta($mesaj){

echo '<script type="text/javascript">alert("'.$mesaj.'");</script>';

$_SESSION["mesaj"] = false;

}

When administrator saves a course into the database, on the server is created a folder (if it doesn’t exists) which will be used to save lectures pdf files for that course. This was done with help of mkdir() function from php language:

mkdir('C:\wamp\www\EduNotes\Lectures/' . $CourseShortName, 0777, true);

First parameter represent the directory path into the server, second parameter 0777 represents the mode. 0777 means the widest possible access. The third parameter allows the creation of nested directories specified in the pathname. The same technical solution was adopted for the add teacher and add students functionalities.

For the “add enrollment” functionality, we have chosen to make two select elements populated with data from the database. The user has to select the course and student and after that to submit the data to a php script with help of which is written into the database.

Being logged in as a teacher you benefit for three main functionalities: add lectures, view notes and add grades to students. If you select to add a new lecture to one of your courses, you will have to select the course from a dropdown list, to insert lecture title, date on which it will be, and also to select the pdf file for the lecture. For the interface we have used Bootstrap grid system, with one select element, and three input elements: two text inputs and one file input. After you select a file for your lecture, the file name will be saved into the database table “lecture” in PdfFile column, and the file will be stored on the servers, into the corresponding folder created previously by the administrator. After selecting “Submit” button, the data will be passed to a php script through POST method, and it will be saved into the database.

For the “View Notes” functionality we have chosen a similar technical solution to that of the “View Notes” from students, with difference that here you can view only all notes, and all the other searches. As a teacher you don’t have your own notes, or favorite notes.

At “Add Grades” functionality we have chosen to use three select html elements, populated with data from database. After you select a course, the second select element will be populated with students enrolled at that course. The third select element contains grades, form 1 to 10. After pressing “Submit” button, the data will be passed to a php script and then saved into the database.

5.4 USER MANUAL WEB APPLICATION

As Administrator you can add courses:

Fig.5.5 – Add courses

Also you can add teachers:

Fig.5.6 – Add teachers

You can add students:

Fig.5.7 – Add students

And add students enrollments to courses:

Fig.5.8 – Add enrollments

As teacher you can add lectures to your courses:

Fig.5.9 – Add lectures

Also you add grades to students:

Fig.5.10 – Add grades

Being logged as a teacher you can also view notes added to your courses:

Fig.5.11 – Select Course and lecture

Fig.5.12 – View Notes

As a student you can select the course and lecture at which you are end you can also see the corresponding pdf file with all the associated notes:

Fig.5.13 – Select course and lecture

Fig.5.14 – View all corresponding notes

Also as a student you can view your grades:

Fig.5.15 – View grades

6. CONCLUSIONS

In this chapter we will present our achievements obtained during implementing this application and also we will present some future improvements to our applications.

6.1 ACHIEVEMENTS

We have presented in this paper a note-taking tool project composed by two applications one for mobile created to be used within classroom by the students, and the other a web application created to be used outside the classroom by teachers, students and also administrative staff like secretariat. Our system offers the possibility to link a note to a specific content from courses, also students benefit of unlimited space to save their notes on the server. Through mobile application, students have the possibility to save their notes, to mark a note as favorite, to rate a note and also to mark a note as favorite.

Another functionality that we have achieved was the possibility to reply or comment to a note. Also students can use our complex mechanism of searching through existing notes. Here they can search a specific note by its author, they can search by a keyword, by note tag or by a specific slide number from the course.

Through web application we managed to implement different features for both students and teachers and also for secretariat staff. Here as administrator you can register a new teacher, can register a new student into the system, you can also add a new course and finally you can make students enrollments.

For teachers we have implemented the possibility to add lectures to your own courses, to view notes and to grade a student. For the view notes functionality we have implemented the option to view all the notes, and here make different filters (by text, by slide number, by author or by rating), also we have implemented the option to search a note by a specific author or by a specific note tag. Also teachers have the possibility to search notes by a certain keyword from note text.

For students we were able to implement the possibility to view notes with a very large amount of filters, and also we were able to develop the possibility to view your own grades.

6.2 FUTURE DEVELOPMENT

As future development, we intend to bring some improvements both to the mobile application and web application.

For EdµNotes – A feature that we want to add to our mobile application is the subscription to notifications. In this way a student can receive messages when his note has a reply or when something has happened with his note, like rated or added to favorites. Also a future feature of the mobile application would be that the student would not have to select the course and lecture, this would be automatically selected by the application based on the schedule and week number. As a final future feature we can make an option to send private messages to other students or teachers (as questions).

For EdµNotes – Web application, in future we want to add some new features for students and also for teachers. As a student you will be able to view recommended notes (based on peer similarity), evaluate peers activity, and to follow/ un-follow peers.

As a teacher you will be able to add notes through the web interface during lecture (e.g. questions) or to answer to students notes added like questions to lectures. Another future feature for the teachers would be that you can view some statistics like notes frequency, length or type. And as a last future feature for teachers we will make the option to classify each note for further research or grading.

7.REFERENCES

“CSCL”, https://en.wikipedia.org/wiki/Computer-supported_collaborative_learning, Last retrieved on 02.06.2015

“HTTP methods”, http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html, Retrieved on 2015-06-05

“Note-taking”,http://www.oxfordbibliographies.com/view/document/obo-9780199756810/obo-9780199756810-0110.xml, Last accessed on 05.06.2015.

“The worlds of Database Systems” available at http://infolab.stanford.edu/~ullman/dscb/ch1.pdf

“What is collaborative learning”, http://www.gdrc.org/kmgmt/c-learn/what-is-cl.html Retrieved on 05.06.2015

“What is mysql “ http://dev.mysql.com/doc/refman/5.1/en/what-is-mysql.html

About ADT, http://developer.android.com/tools/help/adt.html Last accessed of 2015-05-15

Annie Piolat, Thierry Olive and Ronald T. Kellogg , Cognitive effort during note taking, (2005).

Bootstrap, https://blog.twitter.com/2011/bootstrap-twitter, Last accessed on 2015-05-11

David Bargeron, Anoop Gupta, Janathan Grudin and Elizabeth Sanocki, Annotations for Streaming Video on the Web: System Design and Usage Studies – available at http://research.microsoft.com/en-us/um/people/jgrudin/publications/multimedia/asynch-annotate/mraswww.pdf.

Dillenbourg, P. (1999a). What do you mean by "collaborative learning"? In P. Dillenbourg (Ed.),Collaborative learning: Cognitive and computational approaches (pp. 1-16). Amsterdam,NL: Pergamon, Elsevier Science.

E-learning , http://ro.wikipedia.org/wiki/E-learning Retrieved on 2015-05-10

Evan F. Risko, Tom Foulsham, Shane Dawson, and Alan Kingstone , The Collaborative Lecture Annotation System (CLAS): A New Tool for Distributed Learning (2013).

Franck Silvestre, Philippe Vidal, Julien Broisin, Tssap-Notes – An Open Micro-Blogging Tool for Collaborative Notetaking during Face-to-Face Lectures (2014).

Hartley, J. 2002. Notetaking in non-academic settings: A review. Applied Cognitive Psychology 16:559–574

Hawkins, M. 2010. Help them retain what you train. 

HTML – Intro, http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html#h-2.1, Last accessed on 2015-05-10

HTML-CSS,ftp://ftp.micronet-rostov.ru/linux-support/books/programming/HTML-CSS/[Wiley.%20Wrox]%20-%20Beginning%20CSS,%203rd%20ed.%20-%20[Pouncey,%20York]/[Wiley.%20Wrox]%20-%20Beginning%20CSS,%203rd%20ed.%20-%20[Pouncey,%20York].pdf, Retrieved on 2015-05-10

JavaScript – tecnologies overview, https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview Retrieved on 2015-05-11

JQuery – Intro, http://www.w3schools.com/jquery/jquery_intro.asp, Retrieved on 2015-05-11

Kenneth A. Bruffee (1984), Collaborative Learning and the “Conversation of Mankind”.

Kiewra, K. A., & Frank, B. M. (1988). Encoding and external storage effects of personal lecture notes, skeletal notes, and detailed notes for field-independent and field-dependent learners. Journal of Educational Research, 81, 143–148.

Kiewra, K. A., DuBois, N. F., Christian, D., & McShane, A. (1988). Providing study notes: a comparison of the three types of notes for review. Journal of Educational Psychology, 80(4), 595– 597.

Koschmann, T. (2002a). Dewey's contribution to the foundations of CSCL research.

MySQL-Intro, http://www.w3schools.com/php/php_mysql_intro.asp, Retrieved on 2015-06-20

Php, http://php.net/ Retrieved on 2015-05-12

phpMyAdmin – About , http://www.phpmyadmin.net/ last accessed on 2015-06-20

REST, https://en.wikipedia.org/wiki/Representational_state_transfer Last accessed on 2015-06-01.

Stahl, G., Koschmann, T., & Suthers, D. (2006). Computer-supported collaborative learning: Anhistorical perspective.

What is Kendo, http://blog.shubhamsaxena.com/what-is-kendo-ui/ Last accessed on 2015-05-123