In July 2014, I was in India, not knowing what lies in future for me. This was the first time I was coming to USA and was going to be here for my masters in computer science. Fortunately, I was selected as Student Innovation Fellow right from day one of my studies at GSU. This gave me enough time to plan on project that was of substantial size and have considerable impact on the student life at GSU.

The plan was to pick up a project and work on it. The project was also intended to be presented as my masters’ project so this gave me more time, apart from regular SIF hours, to work on it. Valuable ideas were discussed with Justin, Will, Heidi, Thomas, Sruthi, Siva and Rushitha. We iterated through various versions of the deliberation map.  This type of team work resulted in looking at the product from various perspectives and prioritizing of ideas.

Finally, when the implementation was to be done, we thought that one person working on it would be sufficient. As and when required, we could involve more people at later point of time to make the deliberation mapping tool into a full fledged product. With this thought process, I started to implement the project using ASP.NET technology with MSSQL backend. This was done with an intention to eventually integrate the tool with brightspace being used at GSU.

After working on the project in Fall 2014 and Spring 2015, I got opportunity to be intern at Facebook HQ in California. I got good back-end system experience by working on an internal tool which moved data between data centers. This was the best job experience I have ever had in any company. I learnt python, java and XHP and worked on various back-end systems and met so many awesome people who were also incredible engineers.

Fall 2015, was different ball game altogether. This was the semester in which I had much more free time, as deliberation map was the only project that I was working on. However, this was my final semester at GSU. So, I had to start looking for jobs. I applied aggressively all across USA. Thanks to my Facebook internship, I got interview calls from various companies like EAI technologies, Spectra Logic, Offer Up, NVIDIA, Bloomberg, Fidessa, Two Sigma, Expedia, Cisco, AirBnB, Pivotal, Yelp, Twitter, Apple, Linkedin, Google and many more. The interview experiences were awesome. It was an opportunity for me to travel to various places in USA like Wisconsin Madison, San Francisco, Palo Alto, Seattle, New York, Colorado, etc. I really am enjoying these experiences and look forward to the opportunities that lie in future for me.

I presented Deliberation Map as my masters project and it was accepted. The committee really appreciated the idea. Thanks to Justin, Will and Tylor for agreeing to attend my final project presentation. It will the moment that I will cherish for the rest of my life. I am so happy that I came to Georgia State University, Atlanta and USA. I have enjoyed each and every experience that I have had here. I hope that my happy journey continues …………

This semester I have been working majorly on deployment of the deliberation map. The available options were Azure and free websites. We opted for free hosting website.  The hosted deliberation map can be accessed at http://deliberationmap.somee.com . The username is admin and password is a. If you would like to check things out, try it and let us know how you feel about it by replying to this blog.

Further, I added the feature of multiple deliberation maps support in the tool. This required substantial amount of work and addition of few more tables to our database. This version of the tool is yet to be hosted.

I presented the complete project as my Masters project. I am happy that Will and Taylor were able to be there for my final masters project presentation. The detailed report of the project can be found at.

https://drive.google.com/file/d/0B62SqMl4r7JxMGp2d0laN0NWNFE/view?usp=sharing

Further, for the rest of the semester, I will be working on deliberation map to add analytical features such as showing the active users, active deliberation maps, etc. I would also like to work on the look and feel of the tool to make it look better.

I have been working on the Deliberation Map for two semesters, Fall 2014 and Spring 2015, it has been an awesome experience throughout. From the conception of the tool to seeing its version 1.0 it has been a long journey.

Heidi had the basic idea of the tool and other team members like Justin, Will, etc have helped me in making the tool a concrete entity. Broadly, Fall 2014 semester was dedicated to discuss what kind of features needs to be in the tool and to learn the technologies that are required to build it as a product. During Spring 2015, version 1.0 came into existence. The technologies used were ASP.NET, C# and MSSQL database.

I was doing my internship in summer and did not get time to work on deliberation map. The good news is that, I am back to school for my final semester and have been working on the tool. Currently, I am using my time to host the deliberation map on a website so that people can access it from anywhere using URL. Further, we are having discussing as to how to improve the tool to be more suitable to class room usage.

The tool has been hosted at http://deliberationmap.somee.com. This is on a free hosting website which has the software stack required for our tool.

The plan ahead for this semester would be to add the immediately required features like dashboard and analytics like number of posts by a particular user, and to package the software into a logical module so that it can be used and improved by people working on it in future.

First version of Deliberation map was successfully implemented. So, we thought of moving forward and adding new features for the 2.0 release. The following are the features that we thought might make it a useful pedagogical tool :-

1. Zoom functionality. The user should be able to view the map at different zoom levels to get a better view of the map.
2. Color coding the edges so that we know the type of the reply to the post by looking at the color of the edge connecting the post to its reply.
3. Login screen : So, that different users can login and have their own list of deliberation map. That is, one user can be “enlisted” in many deliberations. As of now there is only one deliberation map, so we need to make separate instances of the deliberation map for this usecase.
4. Time slider : The user should be able to slide to a point of time in the past and be able to see how the deliberation map looked at that point of time. So, by using the slider the user should be able to track or visualize the evolution of the deliberation.
5. Number of replies, agrees or disagrees, the color of the node should be changed. One cool idea for this was to make the node look like a pie chart to represent the statistics for that node.
6. Support for Image and video to be added in a post.
7. User Interface at 2.5 D : When a user highlights a node, the sub-tree below that node should get highlighted and the rest of the deliberation map should “fade”. Thus, giving us an illusion of 3-D, while it still being 2D.
8. As of now, the nodes in a level are arranged in chronological order. We wanted to change it to a view wherein the children of a node will be present under the node and in chronological order. So, if node 1 is to left of node 2 in a level, then in the next level all the children of node 1 come before any child of node 2.
9. There should be an option for the user to specify a specific user and see all the posts made by that user. So, its a filter of the whole map based on particular user.
10. Administrator screen: There should be a control panel, for the administrator, through which all the instances of deliberation map and the list of users who can login can be maintained. Further, the assigning of users to a deliberation map is also done by the administrator.
11. Last but not the least, we need to host the tool on a server so that people can login and test it and suggest new features or modifications to the existing system.

I hope this gives a perspective on the things to come. I am excited to have got a chance to do this project and look forward to the day it can be put into actual use. Please do feel free to suggest any new ideas that might help the evolution of the tool.

Project: Online Deliberation Mapping Tool Development

As planned, version 1.0 of deliberation map was completed. It includes following features:

1. There can be only one seed for the deliberation map. When the map starts, it will look like this.

2. Any body can post and reply, without logging in. So, it is open to public. When deliberation map is running on a server, whosoever gets access to the URL of the deliberation map, can add posts to it. As a consequence, two users, probably from two different computers, can view and edit the map at the same time. Changes made by one user will be reflected to all others when the map is refreshed at the viewer’s end.

3. Currently map refreshes at a particular client computer when a new post is added by a user at the client computer, it is NOT refreshed at all other clients viewing the map.

4. The view is in a tree like fashion. Reply to a post is in the next level. Within a level posts will be in chronological order with earliest on the left and the latest on the right.

5. When a post is added, the map rearranges and scales dynamically to adjust the display to show all the posts on the map. The nodes, representing the post, decreases in size automatically to fit into the display. For example, the map changes to look as follows:

Technical Details

• The deliberation map has been implemented using ASP.NET technology.
• It has been developed based on MVC (Model View Controller) architecture.
• Back-end or server end details:
  • The database contains two tables, first table, named posts, holds the data which is required to show the structure of the map while the second table, named content, contains the actual content of the posts. The columns in table posts is post_id, father_id and post_type and the columns in the table content are post_id and post_text.
  • Stored procedures are used to update the database. The store procedures are:
    • get_one
    • get_all
    • clear_all
    • add_post
  • Database access is done using a C# class called DBAccess, which calls the stored procedures of the database. The functions in the DBAccess class have the same name as the stored procedure they call. For example, function get_one calls stored procedure get_one.
  • Each post will be an instance of C# class Post with fields corresponding to the columns in the database, viz., post_id, father_id and post_type.
  • Deliberation map is shown in the page display.aspx . In the code behind this aspx page, i.e, display.aspx.cs, the functions get_one, get_all and add_post are defined and exposed as web-methods. These functions have been so named because they call the functions with same name in the DBAccess class. The functions in the code behind which are in C# will be called from the client from their javascript code.
• Front end or client side details:
  • The client side is where heavy processing will happen, this is for scalability reasons. All that is requested from the server is the structure of the deliberation map, which is nothing but the data residing in the posts table of the database.
  • On page load, the javascript included in display.aspx makes an ajax call to web-method get_all to get all data from the posts table of the database. This data is required for deciding the structure of the deliberation map, i.e, to decide which post should be on which level and the order of posts within a level. Further, the color coding of edges based on the response type is decided by this data.
  • The client sends request to the server whenever a user wants to see the details of the post. In the current version, this request is made when the user hovers over a node of the map. A user is going to see utmost one post at any point of time, we take advantage of this and have only one tool tip window. We position this tool tip at the node where the user is hovering the mouse and updated the data in the tool tip with the data corresponding to the post that the node represents. This is done though a ajax call to the server’s webmethod get_one.
  • When a new post is added by pressing reply button on the tool-tip, a ajax call add_post is made to the server, using the data populated in the tool-tip.
  • The layout of nodes in the UI has been handled by javascript function draw(). This function derives the levels of every node and also the position of the node within its level. The whole display is divided into uniform rectangular regions. The height of a rectangular region is decided by the number of levels in the tree, while its width is decided by the number of nodes in the most populated level. Once, the grid is setup, the nodes are drawn in their respective regions.
  • Whenever a mouse is moved, its position is analyzed to detect which rectangular region it is hovering over. Further, within a region, it is detected whether the mouse is hovering over a node. If yes, a reverse mapping from region to node is used to find the post which has to be pulled from the database, using get_one web-method.
  • All the ajax calls, send and receive data to and from web-methods using JSON object, this was preferred over XML because JSON is faster.

Reference

• JSON (vs) XML

Project: Online Deliberation Mapping Tool Development

Before we start implementing the project, we need to decide the timelines and milestones so that the product can evolve in a systematic fashion. To do this, we needed to prioritize the features and decide which features are going to be in the version 1.0 of the product. Further, we needed to fill in the gaps, that is, those aspects of the tool which may not be features per se but would be necessary for the product to be functional.

The priority features for the version 1.0 are :-

• Structure of display of the posts would be in a tree line fashion. We tried time line representation and concentric circle representations and various flavors of tree representations, finally we decided to go with a tree model which would make the deliberation intuitive to follow and easy to contribute to. An approximate sketch of the tree representation is :-
• Time slider : Users entering the conversation should be able to see the state of the deliberation at any previous point in time.
• Types of connections between posts. A reply to a post can be of neutral, agree or disagree type. These will be represented by different colored edges connecting the appropriate posts. Another distinct color will be allocated for edges representing connection between a post and a question to that post.
• There should be visual cues to the annotations to a post. We came up with a name “annotaticons” for such visual cues.

Subsequent questions that arose during design phase:-

•  Should a user be allowed to delete a post made by him/her?
  • To this question, we thought that a user should not be able to delete a post because there might be many subsequent posts which might have resulted from this particular post. If we allow a user to delete a post, the context for the posts which were reply to this particular post will be in jeopardized. The user might own a post but he cant own the subsequent conversation. Hence, to maintain the integrity of the conversation, we have to disallow users from deleting their post.
    • However, a question arises. Can we distinguish between a delete which can disturb the context of the deliberation from a genuine error, say a misspelled word, in the post ? This seems to be a complex question for version 1.0.
• Should the deliberation map be updated in real time ?
  • I thought of this while trying to design the code in the ASP.NET platform. The complexity development of the tool will increase by leaps if we have to allow the map to be updated in real time. However, if we want to, we can use SignalR library of ASP.NET platform to implement it. Definitely, we are not going to do this in version 1.0.
•  How will the tree be represented in database ?
  • This is a non-trivial question. As we need the number of calls to the database to be minimum. There has been considerable research into this problem.
• How many seeds (independent post) do we allow in one deliberation map?
  • We restricted it to one for version 1.0, so that the tool remains simple. We call such a post to be the SEED of the conversation.

To sum up, lot of implementation related questions are arising while developing the tool. I would interested to know if you can foresee any question that might arise. Or if you think the questions that I have raised might have been tackled differently. Even suggestions for new features are welcome. Please do feel free to reply to this post. Further, I will be sharing the issues that I face while I implement the tool, in my subsequent posts.

References:-

• http://en.wikipedia.org/wiki/SignalR
• http://stackoverflow.com/questions/4048151/what-are-the-options-for-storing-hierarchical-data-in-a-relational-database

Project: Online Deliberation Mapping Tool Development

As the fall semester was about to end, we were about to finalize the design and functionality of our tool. Starting from where I left in my last post, we went on to step 4 of our design sprint. In this step, each one of us, individually, made a storyboard using the materials from mind map and the crazy eight phases. The storyboard would highlight the most important functionality desired by that individual from the tool.

The storyboard was to be stand alone, anonymous and with a catchy title. These requirements were needed so that the storyboards can be reviewed without any bias and the best ideas for the tool would surface. There were three rounds of review of the ideas in the storyboards. First, the silent review round. In this round, people walked around going through the posters looking for cool ideas. Then, in the second round, each person described the idea which he liked the most. If there were some important aspects of this idea which was being missed, the actual contributor of the idea would fill in. Finally, in the third round, there were special stickers given to use. Each one of us would pick two features that we definitely want the product to have.

By the end of the design sprint, we had clear idea as to what needs to be in the tool and how important or novel each feature was. So, we were setting the stage to move to the next phase of tool development, that is implementation.

I have been working as a SIF for about 2 months, I am excited about the projects that I am working on. Here is a status update regards what is happening to our main project and how things are shaping up.

Project 1 Online Deliberation Mapping Tool Development

This is our primary project. We had a design sprint meeting for the project, the participants were Heidi, Will, Justin, Nathan and the usual suspects Ram, Siva, Rushitha and Sruthi. The design sprint involves the following stages : –

1. Understanding the problem
2. Creating user stories
3. Diverging of ideas
4. Creating buggy notes

Understanding the problem involves mapping the problem and the issues thereof. Here we discussed asynchronous spaces wherein there is lack of feel of shared experience, flow of conversations, development of ideas and their inter-dependencies. Most often in online spaces, the big picture is difficult to find and making the user not see the wood for the trees.

This understanding of the problem at hand helped us define our goals for a space for asynchronous generative conversations. Participation is motivated by shared purpose, so the tool has to support formation and deliberation for a shared goal or purpose like solving or defining a problem, making a decision and to develop shared understanding. All these goals were defined from a pedagogical perspective. Possible solutions regarding the tool were discussed.

User stories from the perspectives of instructor, early contributors, mediators and late contributors were discussed. With these broad use case scenarios, we proceeded to the next step.

Diverging of ideas involved mind mapping of the user stories we took about half and hour to make our individual mind maps by filling in the specifics. After the mind mapping phase, next was crazy eights phase, in which we had to rapidly draw variations of our ideas so that we focus on the implementation and production rather than being creative.

In our next meeting, we are going to review our storyboards and later decide upon the functionality that we want in the tool.

 References

• http://www.gv.com/lib/the-product-design-sprint-understandday-1
• https://www.gv.com/lib/the-product-design-sprint-divergeday2

For the front end of Deliberation mapping tool, we had the choice of either using HTML5 or flash. HTML 5 is supposed to the future of web development and flash is getting less popular for websites. Hence, this lead to the design decision of using HTML 5 over flash.[1][2]

In HTML 5, animations can be shown using canvas element. To ramp up my knowledge about HTML 5 canvas element, I started exploring the web for examples having clickable elements on canvas [3]. In the example, circular regions are created on canvas elements and the clicks are handled using jQuery and iterating over each circular region to find out whether the region corresponding to it has been clicked.

This lead to me reading up about jQuery, which I shall describe in my next post.

References

1. http://myoocreate.com/why-adobe-flash-is-dying/
2. http://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash
3. http://pterkildsen.com/2013/06/28/create-a-html5-canvas-element-with-clickable-elements/

In this series of posts, I will be talking about the web development projects that I am working on and my approach. I had zero work experience with web development when I started to work on these projects. So, my experience can be a good guide for someone starting to learn web development.

Web pages are hosted on web servers, so when we access a web page we are actually getting the page from the server. The user who accesses the webpage is client. In web development, there are two broad divisions client side programming and server side programming. The client side program runs on the computer that client uses, while the server side program actually runs on the server.

In our project we plan to use HTML, CSS and Javascript for client side programming while server side programming is done using PHP and mySQL backend.

Project 1 Online Deliberation Mapping Tool Development: This project is aligned with the “Online collaboration and communication” theme of CII. The work will involve development of a visual representation of discussion forum.  This tool, when complete, can be integrated with Desire2learn system to enrich the learning experience of student.