Have interactive tutorials

[agcolom]

This is for https://github.com/jquery/gsoc/wiki/GSoC-2016-Ideas-List#jquery-learning-center---interactive-tutorials-for-learn-and-other-sites

The "Interactive tutorials" project for the jQuery Learning Center should provide a full learning experience, with articles/lectures and a tutorial to test the acquired knowledge. The project should run on our current infrastructure and it should be completely integrated in the Learning Center website. The latter is a WordPress-based website.

Under the technology point of view, this means that the project should be based on PHP and MySQL for the back-end. In particular, to create a seamless experience, we favor the idea of creating the project as a WordPress plugin.

For what concern the front-end, in addition to HTML5, CSS, and JavaScript we want the project to be built using jQuery. As the jQuery Foundation we love our projects and we want to share our experience and expertise with the student. We don't dictate any methodology for the CSS code or any language that compiles to CSS, but the use of Sass and BEM is recommended. At this stage of the project we are only aiming to create a desktop experience, thus smartphones will be out of scope.

Our aim isn't to compete with Codecademy, Code Wars, Code School, or similar services. We want to create a better experience for the users that visit our learning center by providing them with some tests. These tests will help them in retaining the knowledge they acquire by reading our articles and tutorials and by watching our videos. For this reason, we aren't interested in any rank system or in storing users data.

Our idea is to store only the description, some hints, and the proposed solution for each test. A test can be either a question with some preset answers or a request to write some code. Hints should be only shown on user's request to give some guidance about the solution. The test should be placed at the bottom of each page containing the tutorial or the video, and should only be shown on user's request (e.g. by clicking a button).

[nilmadhab]

Abstract (short description)

we need javascript and jquery for many applications. More than 90 % website use JS in some form. So developing a framework for the development and presentation of interactive tutorials is going to be very useful.

1. We can have interactive quiz to test knowledge of javascript and jquery.
2. We can have php/python/node.js backend and database (mysql or any other) to store study materials, quiz, questions, possible options and correct answer, as well as hints.
3. we need to develop a admin panel to control all other functionalities , manage database, quiz and study items. We can use framework like YII, CODEIGNITER (php) or DJANGO (python) . I am quite proficient in all three frameworks and have experience of more than 2 years.
4. Students will be provided interactive learning material in form of lecture video or pdf document, which will be fetched from database,depending on user's request.
5. A framework will be created to test student's knowledge and task will be assigned to them. They will solve the problem and submit their solution. The framework will evaluate the solution and will provide necessary feedback.
6. Depending upon difficulty level some hints will be generated.
7. A leaderboard will be generated, which will contain names and details of top 5-10 students based on the score they obtained in the tutorials.

[ghost]

@agcolom 3 questions

1. Please provide more details on

   needs to plug into the learning centre

2. should be compatible with existing systems/websites (node is preferred)

   Within node their is no framework restriction right ? I mean students can come up with express, koa, hapi, sails etc. and similarly for the front-end and justify their use case, or is there some restriction on what is or is not allowed ?

3. For the proposal, do we need to only list the proposed features and a basic implementation idea, or do we need to exactly specify all the details related to the implementation of every feature proposed? The reason I am asking this is because I may propose to implement a feature one way, but when I actually get down to writing code, I may like some other way better and do that.

Cheers!

[AchoArnold]

@agcolom I'll really like to get the answers to the questions which @suyash posted

[devs4v]

@agcolom I would like to contribute to this project. I have assembled my ideas in the following doc. It would be really awesome if you could provide feedback on the same.

https://docs.google.com/document/d/1-tuqZw7DR31jnxvldJHt6Ol8a4GbtgRiHR79ki98jNQ/edit?usp=docslist_api

Thank you

[ludovicbonivert]

Codecademy has created a new way for non-developers to taste programming. I would like to expand this experience to the Jquery learning center. The problem with Codecademy is that it isn't enough challenging. You have a few courses to follow, but no coding challenges or problem sets.

We need examples and tutorials for the jQuery framework + extra 'open' projects.

• Each tutorial/project is focused on a few features of jQuery. The user/learner will be guided to each of those functionalities and at the end of the tutorial he will have mastered those functionalities of the framework. Videos are nice but text is better. We need to cap the exercises to a maximum of 15 minutes each. It is a learning website, not a frustration place.
• The center need an easy to add tutorial where admins can add a tutorial with text, hints and expected results. Adding content to the center needs to be easily done. A whole CMS system needs to be created for that.
  1. The content creator can choose what the expected results needs to be
  2. The content creator can choose what hints he can give.
  3. The tutorial has a certain difficulty level.
  4. The center will be a learning place but also an exposure place for featuring projects of the students. That will motivate and engaging the future developers.

[jiabaowu]

Hello I am a prospective GSoC student,

I am excited about this idea and here is my proposal: https://www.google-melange.com/gsoc/proposal/review/student/google/gsoc2015/jiabao_wu/5803402760028160

I would love to hear feedback from anyone, I tried to include all the requirements in the new architecture for content creators. It also shows how each of these components will be used by the framework to create the interactive tutorials described here.

[ghost]

Hey! I'm interested in the 'learning' project? who will be my mentor and where can i get started? Thanks.

[arschmitz]

@supergray please see https://github.com/jquery/gsoc/wiki/Getting-started-for-students and the first paragraph of https://github.com/jquery/gsoc/wiki/GSoC-2015-Ideas-List

[ghost]

Yes sir I read that but how can I get started and who will be my mentor if I can ask. Thanks already and good to see you back @arschmitz.

[arthurvr]

how can I get started

@supergray That's exactly what that page explains :p

who will be my mentor if I can ask.

@agcolom will

[arschmitz]

@supergray this is not the place for discussion of GSoC only the specifics of this issue in general if you have questions related to GSoC please try #jquery-content on freenode like the task asks.

[VamsiSangam]

Thanks a lot for the links @arschmitz sir....! I am absolutely new to GSOC and GitHub, I desperately wanted a place to start.... Looking forward to do some great contributions to the jQuery Learning Center...! :)

[ghost]

I can intersted in this project , i request mentor to see my GSoC 2015 proposal i am Burhanuddin Bhopal Wala .

[manrajgrover]

Hey @agcolom!

I was just going through the jQuery's ideas list and found great interest in this one. I'm an Open Source Enthusiast and have previously contributed to jQuery, Mozilla and Privly and would like to take this one up for GSoC 2016. I also have prior experience in working for startups like Zomato and Refiral and good competitve profile.

Few doubts that I have regarding this project are:

1. How to check if user has completed the task? HackerRank recently started new type of competitions where they give designing task and judge it. I believe they have their own set up for the same. Need more information on this.
2. Video tutorials would be recorded by the student or they have already been done? This is something not mentioned.
3. Backend will be on node or student can choose his/her own language? I would have to brush up node, if yes to that. Otherwise PHP along with MySQL looks good for this.

Please share more information for the same. Thank you. :-)

[Pc6]

Hi@agcolom

I am new to GSoC. I got interested in this project after looking through the idea lists and i hope to make contributions to the project. It would be really nice if you provide feedback. https://docs.google.com/document/d/1XES6QD8bB5p81YsXf0xpUsLy0h_nsojgpUwec08oxms/edit?usp=sharing

Thank you

[manrajgrover]

Hey @AurelioDeRosa , @jzaefferer :-)

Its been a while and I believe mentor is busy. I have tried asking the same in IRC as well. Please help me with this as proposal period has already started. Thanks in advance.

[neelansh]

@agcolom Hi, i am interested in this project and have many doubts about it

1. please elaborate on point "needs to plug in learning centre"? can we not redirect user to a separate tutorial page?
2. can we use Django backend?
3. can we modify jquery-wp-content for this project?

I tried to reach mentors on irc but think they were unavailable. So i am posting here

[thilinapiyadasun]

Hi , I am interested in this project and I have the same doubt about the "plug in learning centre".

[AurelioDeRosa]

Hi @ghost.

1. The jQuery Learning Center is a WordPress-based website. Our request is that whatever system we develop doesn't conflict with it. Thinking at it, it could even make sense to create a set of plugins to integrate with WordPress itself. Would you agree @agcolom? This might be a reasonable alternative as developing a full CMS in a few weeks might result in a very incomplete project.
2. In case the proposal is to use Node, we don't require any specific framework. As far as it serves the project and we achieve the goal, the framework doesn't really matter.
3. I'd say that you should provide a good amount of details of the architecture so that we can evaluate your proposal

[AurelioDeRosa]

Hi @jiabaowu.

I tried to access your proposal, but the link doesn't work.

[AurelioDeRosa]

Hi @devs4v.

I've read your proposal and I have a few questions:

Basically a small question after every critical piece of information.

Do you mean that you want to create a system where the video potentially pause at a given point and the software prompts a question to the user?

The interactive editor would be able to say what was the mistake when the learner makes one. For example, incorrect call would indicate and list the prototype for the same function.

Do you mean something like "the if condition doesn't go there" or something else? How would you approach this problem?

The editor can include warnings when the learner types in a potentially incompatible/bug-prone code.

Something like "variable hello has been declared but never used"? How would you approach this task?

Standalone pages would be a good idea because they can be interlinked with the existing article based learning center and referenced from other places with a permalink.

Standalone pages for each lesson? Also, do you mean static pages or dynamic pages?

---

As a final note, you have written:

I'm not sure but I guess it should be a good idea to include a section on how to correctly submit plug-ins to the jQuery plug-ins library.

I guess with jQuery plug-ins library you meant plugins.jquery.com. However, we discontinued that service in favor of npm a while ago.

[AurelioDeRosa]

Hi @ManrajGrover.

1. One way to check if a task is completed is to implement a unit-test system. For example, the system asks the user to create a sum(a, b) function. Once the user has written the body of the function, the system could run some tests. If the expected and the actual results match, then the code is said to be correct.
2. I'd say the video are pre-recorded. Do you agree @agcolom?
3. Personally, I'd like students to have their own take and explain the reason for the choices.

[AurelioDeRosa]

Hi @Thilina-Piyadasun.

Can you post here your questions?

[AurelioDeRosa]

Hi @neelansh.

1. I think the idea is that we already have quite a few websites in place (api, jquery.com, jquery.org, learn, and so on) and because we have already a website dedicated to learn more about jQuery, it makes sense to keep everything in one place.
2. Probably a PHP or Node.js application is better as we already use them
3. I'd like you to come with a proposal and then we can comment on it. Personally, I'm more keen to have plugins to use that implement the features we want.

[AurelioDeRosa]

Hi @Pc6.

I've read your proposal and I think it's a bit vague. Can you describe the architecture you want to propose? What languages you'd like to use? Any particular feature you think is worth adding?

[theJian]

I'm not sure if is too late, here is my proposal

I would like to receive any feedback. Thank you!

[neelansh]

it might be late but if you can review my proposal : https://docs.google.com/document/d/1RMgxUJQrzRL53x8LqcZD9CZaH_z6lN-LQGilklfpqF8/edit?usp=sharing

[AurelioDeRosa]

Hi @nilmadhab, @ghost, @najela, @devs4v, @ludovicbonivert, @jiabaowu, @VamsiSangam, @burhanbhopal, @ManrajGrover, @Pc6, @neelansh, @Thilina-Piyadasun, @theJian, @neelansh.

I've just updated the description based on all the feedback we've provided so far. Please, updated your proposals and submit them.

[AurelioDeRosa]

Hi @neelansh.

Overall the proposal is good but we can't use Python. I've read that you have used PHP in the past. Would you be comfortable in using PHP and WordPress? Another point is that you mention that the videos will be uploaded on YouTube. Consider that we might want to embed video that are uploaded on our infrastructure.

[manrajgrover]

Hi @AurelioDeRosa,

I have shared my proposal through GSoC portal. Please review it. Thanks in advance. :)