![]() This app should allow a seemless and intuitive way to export the project to various other activities. Įxport: The code created by the student shouldn't be just limited to this platform. The help button will also fascilitate as guide to interface, just like its done in the web version of turtle. 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. Help: As I mentioned earlier to aid the learning of javascript, the user can opt to go through basic tasks. The user can anytime query any variable just like the console which comes with modern day browsers. The console shown in the mockup, will provide basic outputs like console.log, errors, etc. In case she makes changes, she will have to click the run button at the top again.Ĭonsole: The console part is very important, as the interactivty we wish to achieve wouldnt be possible without it. The student upon clicking the Preview button will see the live preview of code uptil that moment. Preview: Preview of the HTML code is a basic necessity for learning javascript. A student can also work on a blank project. The simulated problem part is a feature of this application. Whenever he she is stuck can see the objectives of the current problem and also get a hint. The student would be guided through a help section right at the top in the nav bar. In the design above, student is actually solving a problem statement which requires her to append some elements to an already existing ul element. HTML: The student must be able to type in the desired HTML code, for which he plans to add Javasript. She can go through the tree and better decide her strategy for tackling the problem. The DOM illustrator will also help when a student has to find a particular element. 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. As javascript is known for DOM manipulations. On the right half of the screen, lie three interesting thingsĭOM : I assume the student already knows HTML (thanks to the sister project WEB confusion), showing a beautiful tree will add to the learning experience. The pink line in the design mockup will show the line at which program is at. This will be of great help as the student can actually see the whole program working sequentially right infront of her. She can copy paste any code here, and can also use the builtin stepover button to go through her code line wise. OOn the left side the user can enter the code she desires. ![]() The UI of the app has to be consistent with the XO, below is a mockup of the design of the application I intend to develop this summer.Īs you can see, I intend to divide the screen into halves. That is one thing that differentiates scripting language from others, you dont need to compile and worry stuff related to that. The application I intend to develop will have HTML functionality embeded in the whole app experience. No learning of javascript is complete without involvement of HTML. You are given a task and if you complete it successfully you are rewarded virtually and you proceed on to the next level. I aim to add different levels of learning, just like a video game. The interactivity of this whole project can be brought upon on various levels. The developer must have this in mind while developing the shell. This project is geared towards learning javascript, unlike other similar projects on the internet.
0 Comments
Leave a Reply. |