Summer of Code/2015/Web Confusion Sanchit

About Me

What is your name?

Sanchit Kapoor

What is your email address?

sanchitlucknow@gmail.com

What is your Sugar Labs wiki username?

Sanchit Kapoor

What is your IRC nickname on irc.freenode.net?

darkprince.

What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)

My first language is Hindi but I am proficient in English as well. So the language won't be much of a problem to me.

Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)

I live in India. (Lucknow City, Uttar Pradesh) My time-zone is UTC/GMT +5:30. Usually I will be free from 6 PM to 2 AM in normal days but during June-July I will be free from 2 PM to 12 AM (With some little breaks included) as in those two months I will be having my End Semester break/vacation. From August onwards my college reopens so I will be back to my normal routine of 6 PM to 2 AM but I will most certainly find extra time if needed, if I fall short of time, or if I have a break from college.

Have you participated in an open-source project before? If so, please send us URLs to your profile pages for those projects, or some other demonstration of the work that you have done in open-source. If not, why do you want to work on an open-source project this summer?

I am rather new to the world of open source with just 4-5 months of experience but I have created some projects under my name and gave it my all to them. Given a chance to prove my mettle this summer, I will surely stand up to it and give it my best. Open Source has started to intrigue me very deeply and since it is for the good and benefit of the world we live in, this project will make it all the more, worth taking up. I have made a few projects under myself. The following is one of them which I consider to be worth noticing.

I have made 2 Javascript Games in the past “Floating Leaves” and “Colour Match”, in 10 hours, both of which require flexible thinking of the brain. Here's the link to both of them.

Link: https://darkprince304.github.io/

About your project

What is the name of your project?

Web Confusion

Describe your project in 10-20 sentences. What are you making? Who are you making it for, and why do they need it? What technologies (programming languages, etc.) will you be using?

This might be a little longer than 10-20 sentence so here goes.

Sugar provides a learning platform for children across the globe. Programming is considered to be a skill of beneficial use which people unknowingly use in their everyday life as algorithms. One important objective of sugar is to help children learn programming through activities like Turtle Blocks. One more such activity is “Turtle Confusion” which requires the user to draw shapes and patterns using Turtle Blocks. A new similar initiative is planned by Sugar which will have the children design HTML/CSS Web Pages. The actual confusion in this case would be the Web Pages. The user shall be given a set of challenges based on HTML and CSS which will be the tools. The challenges will be based on an online HTML/CSS tutorial ( http://www.goer.org/HTML/ ) where children can learn new techniques for building a web page. Web Confusion actually gives the children a chance to try what they learnt on something practical. Since children like and learn better when actually given the opportunity to try a creative act like this will give them exactly what they want, along with challenges so that their concepts also get cleared when they learn.

The challenges will be of varying types such as fixing the bugs in code, predicting the output of the given code, enhancing a given web page or modifying it or even designing a complete web page from start. One of the important aspect of this project is that it focuses on those children who are deprived of internet access and don't have access to learning resources, so this would take care that they are not deprived of learning, since learning at this age is one of the most important factors of growing up according to me. Web Confusion would also have a Gallery feature for enabling the children to upload and share their creations on a single web page for others to view, along with the source code. (This will require internet access) Also, automated testing of results will also be featured in the project. Web Confusion might not be only useful to people using Sugar but it can also prove to be something of general purpose. I see Web Confusion as something which will be a product of creativity so I have a broad vision of it considering its possibilities so I will definitely keep thinking of new features or additions for this project and welcome any ideas given by other people.

Prototype: Below is a prototype of an interactive tool that I will be designing for the summer along with a Description of the little tools featured in it.

The above image gives a good picture of the wireframe style to be used in the project.

Needless to say the left side of the screen will be the part where the coding is to be done in the HTML/CSS divisions. The right half of the screen shows the resulting web page. This editor is real-time which means that you don't need to click any “Submit” button or anything like that to see the result. The application automatically refreshes itself whenever something new is typed.

There are two buttons, “Next” and “Previous”, for traversing between the challenges.

The tool has a “Challenge” button visible on the right-most part side of the screen which on getting clicked opens up, albeit in a scroll-esque manner to show the challenge to be completed.

The picture below provides a look of it.

Web Confusion also provides a feature for the learner to make their own Web Pages from scratch and share their creations in a Gallery or save them for later use. The UI of this picture also has a similar wireframe design to the earlier one shown above with little modifications.

The two buttons are “Save” and “Share” buttons which perform the functions as their names signify.

The idea is to keep the design simple-yet-cool and focus more on the creativity and the difficulty of the challenges while also keeping in mind that the learner is left with no doubts about any concepts. There can also be tutorials for advanced topics not covered by Pocket-HTML.

Web Confusion will be mostly focusing on the small age-group but anyone who needs to begin Web Designing or programming will find this really interesting and not get bored. To be completely honest, this project along with “Javascript Interactive Shell” might not only serve XOs but also those not having it.

Why am I making this project? As I mentioned earlier I consider programming to be a skill which must be honed by every person. According to me one of the best ways to begin programming is through web designing because children like to be creative and are fascinated by nice images and stuff they see. Consider, making a web page of the Solar System and clicking on the planet takes you to the web page of that planet. When someone immediately sees beautiful results, that is when the person gets the feel of programming and gets intrigued by it. So I think Web Confusion will serve as an important path for this aim.

The challenges will be divided into Beginner, Intermediate and Advanced levels based on the difficulty and level of thinking required for a topic. The speciality of these challenges will be that the user will know when to stop tweaking. The challenge will be from a spectrum of categories with each challenge giving the student a gist of problem solving skills that is required in programming. (Bug Fixing, Coding from scratch, Tweaking the code) The trick here is that the learner on solving the challenges will get the idea of the concepts inside out.

Example Challenges

• One example is shown in the above screenshots which has the learner modify the code in such a way as to align the images properly.

• The learner is challenged to make a Web Page similar to the image given below and has to modify the page and put the names and description of his/her friends.

• Make a web page to display the following output:-

  Cradled in our cranium,
  Is where you'll find our brain-ium,
  Enables us to think and do,
  Remembers what! Remembers who!

  When we're feeling fine, or pained,
  We're utilizing our large brain,
  Like we do,
  When we think...

  Let’s us see, makes us blink…
  some functions are involuntary,
  Breathing air is one of many,

  Digesting food!
  Our beating heart!
  Controlled by brain!
  Our crucial part!

  Connects straight-up with spinal cord,
  Synapse, nerve,
  It's never bored,
  Gives us feelings,
  Does great things!

  Let's thank our brains for all they bring!
  Link to the poem:-

  http://sciencepoems.net/sciencepoems/brain2new.aspx

  NOTE:- The text in italics is actually EMPHASIZED.
  And for the link the students will use the <a href> tag.
  Note that this is a relatively easier challenge which will be presented in the Beginner level of the challenges

• One of the topics in Advanced Level of Challenges include the usage of SVG elements. One such challenge in the beginning of SVG Challenges requires the learner to make an SVG like the following:

• When the learner has knowledge of CSS, classes and divisions, he/she will be presented with the following challenge.

• One Advanced Challenge needs you to modify the classic cursor in https://www.sugarlabs.org to this type of cursor.

• There are more challenges that I have decided and I have the given the link to those challenges below.

Link: https://github.com/DarkPrince304/Challenges-Web-Confusion/blob/master/Challenges.odt

Technologies to be used:

The HTML and the CSS to be used for creating the challenges will be HTML5 and CSS3 compatible with the latest version of webkit supported by the XO. I will be using the CodeMirror API for providing layout to the code (such as line numbers, identation,etc). For the Gallery feature the model of deployment suggests that the school will have a server with about 1 TB or so of space where children can upload their creations in a compressed format which will then be replaced by a new uncompressed folder. This is relatively straightforward since the school server has Apache and in Apache we just need to create a folder and give it a url (e.g. http://schoolserver/school/username (where the directory is given the name of the school and username is the XO nickname).

Automated testing of results has also been planned for this project which could require the use of Regular Expression or having the user click at a particular feature of the page to test its layout.

I'll be using Javascript and some of its libraries like AngularJS, jQuery for the front-end work. Some Ajax techniques are also to be used to show the content on the Web Page.

What is the timeline for development of your project? The Summer of Code work period is from May 25 - August 28; tell us what you will be working on each week. (As the summer goes on, you and your mentor will adjust your schedule, but it's good to have a plan at the beginning so you have an idea of where you're headed.) Note that you should probably plan to have something "working and 90% done" by the midterm evaluation (3 July); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then.

Time Period	Task
Before 25th May	Discuss features, ideas and challenges to be implemented in this project and create a full list of challenges for the project.
26th May – 6th June	Start implementing the features and functionality to the “Challenges” part of Web Confusion, and test it so as to provide a base for implementing Challenges.
7th June – 13th June	Start preparing tutorials for the Advanced Challenges and add half the number of Challenges to the deployment.
14th June – 20th June	Add the remaining number of challenges to the deployment, test all the challenges and prepare a working patch of the project made so far.
21st June – 27th June	Add the automated testing feature to the deployment, testing it and getting feedback from various people. (IRC, Mentors, Mailing Lists and other places)
28th June – 3rd July	Searching and fixing of bugs. Brush up the modules. Prepare a report of the project made so far and submitting it for Mid – Term Evaluations
4th July – 11th July	Start implementing the features for the “Gallery” part of Web Confusion and create working “Save” and “Share” buttons, testing them and adding them to the deployment.
12th July – 25th July	Completing the “Gallery” feature along with implementing the Server functionality and getting feedback from the mentor
26th July – 2nd August	Testing the complete project, deploying it for the XO and then put a working version of the project for the schools to get a feedback of the problems faced by them.
3rd August – 15th August	Making a list of the feedback and solving the issues priority wise. Cleaning up the UI, sandbox the code, preparing final modules and wrapping up
16th August – 28th August	Adding finishing touches, little tweaking, making a small guide and a little documentation for making the work for the learner easier. Submitting the project for final evaluation.

Convince us, in 5-15 sentences, that you will be able to successfully complete your project in the timeline you have described. This is usually where people describe their past experiences, credentials, prior projects, schoolwork, and that sort of thing, but be creative. Link to prior work or other resources as relevant.

I have already made a working version of the Code Editor that I plan on using for the deployment. It uses Ajax techniques to display the result in an iframe. Here's the link to it's github repository.

Link: https://github.com/DarkPrince304/HTML-CSS-playground

And as I have shown above I have also started compiling a list of challenges already and have thought of many ideas.

I was the admin of a site 6 years ago when I was 15 and did most of the HTML/CSS related work in it. Like adding a stylized mouse cursor which was an easy task.

Link: http://anime-island.forumotion.com/

Hacked a Pokemon Game (Pokemon Fire Red) for the Game Boy Advance console 6 years ago and made new scripts, events and did sprite editing. Unfortunately I hadn't heard of Github at that time so I don't have any link to the source code of the game but here's a link to a video of the game that I luckily uploaded that time.

Link: https://www.youtube.com/watch?v=v2LejEgneeQ

I think I will be able to complete this project in time cause I am already involved in it from now and since it will somehow indirectly benefit the world (since kids are the future of the world) it makes me want to take up this project even more. And since I find it interesting I can say it without a doubt that I won't lose interest in this. Since this project focuses more on Creative Thinking I can say that thinking of new ideas won't be much of a problem to me.

I have good skills in Algorithms and Data Structures. I take part in competitve programming on an Online Judge platform called “CodeChef” and have a Long Challenge Global rank 3384 and Long Challenge Country rank of 2449.

Link to my Codechef profile: http://www.codechef.com/users/darkprince

You and the community

If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.

Me: This project would serve as an introduction to the learner to the world of text-based programming and most importantly Web Designing. Web Confusion along with its sister project “Javascript Interactive Shell” will be a complete package that will be required by the learner to begin Web Development. With this project completed, Sugar will be able to provide experience to the learner in almost all the spheres of education.

Tony Anderson (Mentor): The beauty of the computer is that you immediately know whether you understand or you need to do more exploring. Further, the computer never frowns if you make a mistake.The goal of this project is to provide fuel for the student's creativity so they can learn to design and build their own web pages. The confusion may be actual web pages which the students can try to build on their own before looking at the page source, or challenges to customize the design (e.g. insert a picture of their school taken by their XO) or sketches suggesting the layout and content of a web page the students are to create. The Web Confusion gives them a chance to try what they have learned on something real. As a second step, they would learn javascript programming. It is hard to teach javascript by example, but an interactive javascript player is an inexpensive way to try things out and confirm your understanding (or clarify it!). There are existing tools that do this (e.g. jsfiddle). However, I haven't found one that is available by GPL or similar. The product produced in 'javascript interactive shell' could be of general interest beyond its immediate use with the XO.

Walter Bender: Some learners thrive in a more structured environment, so providing them a sequence of challenges will help them excel. This project is about providing a sequence for learning Javascript, so it will hopefully entice some of our users to engage with programming.

What will you do if you get stuck on your project and your mentor isn't around?

Well, no organization has ever been succesful without team effort. No man has been succesful who has tried to do everything all by himself, that's what friends, comrades and co-workers are for. If I get stuck I will try to find the solution of the problem by myself if I think that it is an easy problem and I should be knowing this. If not, then #sugar channel has plenty of helpful people who care for your work and always have a valuable feedback to give. I have learned most of the things myself through the internet. The internet has a lot of resources. My problem should be solved by now but if all else fails I will try diverting my mind to something different for some time and work on something else and then come back to this problem. Besides books always have everything to offer. So I'll not give up trying to solve the problem. My College also has loads of helpful people and there's also an Open Source community here so I could also get help from them.

Link to the Open Source community of my College:

https://www.facebook.com/groups/jiitlug/

How do you propose you will be keeping the community informed of your progress and any problems or questions you might have over the course of the project?

I will be using IRC, Github and Mailing Lists to keep the community informed about the progress of my project along with that I with that I'll also be requesting feedback from them. I am also planning to create a Wiki Page which will also include the Documentation of the project. I will be updating the Documentation as I succesfully complete the tasks little by little.

Miscellaneous

We want to make sure that you can set up a development environment before the summer starts. Please do one of the following:

Send us a link to a screenshot of your Sugar development environment with the following modification: when you hover over the XO-person icon in the middle of Home view, the drop-down text should have your email in place of "logout". Send us a link to a pull request or merge request you have made on a Sugar or Sugar activity bug. It's normal to need assistance with this, so please visit our IRC channel, #sugar on irc.freenode.net, and ask for help.

Describe a great learning experience you had as a child.

Well I was and I am a big fan of Pokemon so there was a day when I flunked my school tests. That day in the evening I saw one episode which motivated me to never give up and just enjoy what you do and hold on to your dreams. The main protagonist failed many times but still carried on pursuing his dream so I thought I should do that as well. After that I started looking at the positive side of everything. This was, and is, in my opinion the most valuable learning experience I ever had.

Is there anything else we should have asked you or anything else that we should know that might make us like you or your project more?

Well, nothing much really but I think there aren't many interactive HTML/CSS tutorials available for beginners so this project would really serve its purpose. I won't be having any commitments during the summer so this project will be my top priority. I would have my academic activities beginning from first week of August but that won't be a problem since I will be able to devote 10-12 hours a day to the project.