22
edits
Changes
Summer of Code/2015/Kushan Javascript (view source)
Revision as of 10:30, 19 March 2015
, 10:30, 19 March 2015no edit summary
<br>
<br>
<br>
<br>
<b>DOM :</b> I assume the student already knows HTML (thanks to the sister project WEB confusion), showing a beautifuly tree will add to the learning experience. As javascript is known for DOM manipulations. When a student will actually see her javascript code appending an element to DOM tree, she will actually be learning by visuals and visual learning has a very high memory retention. The DOM illustrator will also help when a student has to find a particular element. She can go through the tree and better decide her strategy for tackling the problem.
<b>DOM :</b> I assume the student already knows HTML (thanks to the sister project WEB confusion), showing a beautiful tree will add to the learning experience. As javascript is known for DOM manipulations. When a student will actually see her javascript code appending an element to the DOM tree, she will actually be learning by visuals and visual learning has a very high memory retention. The DOM illustrator will also help when a student has to find a particular element. She can go through the tree and better decide her strategy for tackling the problem.
</p>
</p>
http://s23.postimg.org/akbk8kybv/html.jpg
http://s23.postimg.org/akbk8kybv/html.jpg
<p><b>HTML:</b> The student must be able to type in the desired HTML code, for which he plans to add Javasript. In the design above, student is actually solving a problem statement which requires her to append some elements to an already existing ul element. The student would be guided through a help section right at the top in the nav bar. Whenever he she is stuck can see the objectives of the current problem and also get a hint. The simulated problem part is a feature of this application. A student can also work on a blank project.</p>
<p><b>HTML:</b> The student must be able to type in the desired HTML code, for which he plans to add Javasript. In the design above, student is actually solving a problem statement which requires her to append some elements to an already existing ul element. The student would be guided through a help section right at the top in the nav bar. Whenever he she is stuck can see the objectives of the current problem and also get a hint. The simulated problem part is a feature of this application. A student can also work on a blank project.</p>
http://s3.postimg.org/cp6curokj/preview.jpg
http://s3.postimg.org/cp6curokj/preview.jpg
<p><b>Preview:</b> Preview of the HTML code is a basic necessity for learning javascript. The student upon clicking the Preview button will see the live preview of code uptil that moment. In case she makes changes, she will have to click the run button at the top again.
</p>
<p><b>Console:</b> The console part is very important, as the interactivty we wish to achieve wouldnt be possible without it. The console shown in the mockup, will provide basic outputs like console.log, errors, etc. The user can anytime query any variable just like the console which comes with modern day browsers. </p>
http://s8.postimg.org/vvslkrbg5/help.jpg
<p><b>Help:</b> As I mentioned earlier to aid the learning of javascript, the user can opt to go through basic tasks. As shown in the design, the user is shown what she has to do in this task and upon completion can move to the next advanced task. The help button will also fascilitate as guide to interface, just like its done in the web version of turtle . https://turtle.sugarlabs.org.</p>
</td>
</td>
</tr>
</tr>
<tr>
<td style="width:60px"> </td>
<td style="max-width:900px">
<p style="font-weight:600">Early stage version of the app</p>
<p> To actually show the working of my idea, I created this very early prototype of the app. <i>(Please note it currently only supports alert() for outputs, and has no way to interact with HTML elements.) I request you to try it out. </i></p>
<div style="border:1px solid #ccc; padding:6px 12px; color:#333; background-color:; margin:1px; font-size:100%; margin-left:30px; margin-right:30px; text-indent:">https://dl.dropboxusercontent.com/u/35525804/JS-Interpreter/index.html]
</div>
</table>
</table>
<p style="font-size:larger; font-weight:700">Who are you making it for, and why do they need it?</p>
<p style="font-size:larger; font-weight:700">Who are you making it for, and why do they need it?</p>
<p> This project is entirely focused on the learning part of javascript, by no way it intends to be a substitute to professional suites like JSfiddle. The students who will be using this app, can consider this as a stepping stone to a wide array of web technologies. Getting the gist of the programming language and being profecient in it, is all that is required according to me. Experience will always come with time, no technology or app can skip the need for experience.</p>
<p style="font-size:larger; font-weight:700">What is the name of your project?</p>
<p style="font-size:larger; font-weight:700">What is the name of your project?</p>
<p style="font-size:larger; font-weight:700">What technologies (programming languages, etc.) will you be using? </p>
<p style="font-size:larger; font-weight:700">What technologies (programming languages, etc.) will you be using? </p>