Overview - Temple University



Tutorial Proposal (Homework)Overview The "Tutorial" is an open-ended assignment in which you will write your own JavaScript Component, demonstrate its use, and then explain the various code snippets that make up your component. For the purposes of this assignment, a component is a JavaScript object (with public/private data members and methods), as well as a user interface and event handling code. This “Tutorial Proposal” assignment consists of: a PDF in which you say what you plan to do for your Tutorial Assignment and Proof of Concept code (HTML page with related artifacts) to demonstrate how one of your component instances might look. In a previous homework, you wrote a component that converted an array of JS objects into a slide show component, then in another homework, you converted an array of JS objects into a click sort-able HTML table. When designing/implementing your component for your tutorial assignment, try to come up with a different and creative way of showing JSON data. You can use the same JSON data that you used for your click-sortable HTML table or you can enhance it (e.g., more fields, extra records), or you can come up with something entirely different (but try to keep with the overall topic of your web site, if possible). You can allow the user to reorder or filter the data, to reveal more data or provide some animation when one element is clicked or hovered over. You could create a visual expression of numeric data (larger numbers -> bigger bar). There are many, many things you can do with your component. Make sure that the component you are planning:has some JS event handling built in (for example, something happens visually when the user clicks or hovers over your component or a part of your component). makes sense having more than one on a page (this helps us know you designed your component correctly with no reliance on anything global). To see simple examples of creative ways to show data, visit the “How To” page. Select effects that involve (or can involve) substantial JS coding. The amount of code that you write for your component should be about as much as in the click sort-able HTML table sample code. To ensure that you will have enough to code, plan on combining two or more effects (from the W3Schools “How To” page) into your (single) MakeComponent function. If one of your effects is very simple, better choose three effects. By combining the code from different examples, you’ll get a deeper understanding of the code. The Proof of Concept is like a prototype. It only has to “look” like you want it to look. It does not have to be the final, nicely designed, reusable code. When you actually write your final version of code, your component should be well designed, have no global variables, no hard coded HTML tags, and you must demonstrate the code was written correctly by placing at least two instances of your component on one page. But for your Proof of Concept you only have to show (any way you can) how you want one instance of your component to look.Note: you are not limited to the w3schools How To page. You can google around to find ideas for your widget. The only problem with this approach is that the code you are likely to find will probably already be in “provider style” (and very abstract and so difficult to understand) AND you’ll be tempted to copy/paste their code without modifying it. The widget you implement for your tutorial MUST be your own work, not some complicated code that was written by someone else.If you already had some web development experience, you may want to choose a topic outside of what was outlined above, but you would need instructor approval for this.Step One: Browse the InternetI recommend that you start out by looking at the page you find when you google “W3Schools How To” and looking at the various effects and ideas presented there. Then try to think how two (or more) effects might be combined in a component that you might write. Step Two: “Claim” Your Component When you think you have found a couple of effects that will combine well into a single component, make a short post indicating the effects you are choosing. Also provide a link to each How To page that shows your selected effects. If you are a self-motivated problem solver, you may select effects found elsewhere on the internet, but make sure that whatever you select is tutorial level (beginner level) code because otherwise, you’ll have a lot of trouble deconstructing the code to make it simple enough to be understood by you and your classmates – you cannot just submit someone else’s code.Before making your discussion post, read all the other student’s posts and make sure you are the first to suggest your particular combination of effects. Step Three: Create Proof of Concept CodeProof of Concept code does not have to be well designed or reusable. Anything goes as long as you are able to demonstrate what you are planning to do. You can copy/paste code from the w3schools how to page. You don’t need to use any JSON data. You can hard-code values (e.g., in HTML and/or CSS and/or JS). You can combine the effects straight in the HTML page or CSS file and you can use “hard coded”/ global JavaScript references.You can show just one component on the page, but make sure that whatever you are planning to implement would “make sense” having two components on a page. Being able to have more than one component on a page shows that you designed your component correctly using object oriented encapsulation, with nothing global. FYI: if you put two click sort-able HTML tables on a page, they should both work great (and one independent from the other). Store your proof of concept code in a file named tutorial/poc.html.Step Three: Write Up Your ProposalWrite up your plans including the following: A representative name for your component.Description of the functionality your that your component will provide. Be sure to discuss JS event handling that you are planning.Links to the pages that provided your inspiration for the component you plan to implement. Store your proposal in a file named tutorial/proposal.pdf.Project Organization The two deliverables for this Tutorial Proposal assignment will be stored in tutorial/proposal.pdf and tutorial/poc.html. Feel free to add any additional artifacts, such as CSS files, pic folder with images, etc. You will add the other artifacts (that are shown in the tutorial folder) later, once you actually implement your component and then explain how you did that.You need just these two files need for the proposal. The rest of the files of the tutorial folder you’ll add later, when you actually implement…Blog and Navigation As always, add an entry in your blog content area, telling what you found easy/hard/confusing about this assignment and linking to your two deliverables: tutorial/proposal.pdf and tutorial/poc.html. Also add links under your tutorial drop down menu in your nav bar, so we can get directly to your proposal and Proof of Concept code. For all links under your Tutorial Drop Down menu, add target="_blank" (as shown) so that the links open up a whole new page in a new tab. Users can close out the new tab if they want to return to your Single Page Application. Example link: <a href="tutorial/poc.html" target="_blank">Tutorial Proposal</a>SubmissionAs always, test locally, then publish, then test what you published. Then upload a zip file into the Canvas assignment. You don’t need a self assessment.Example Deductions-9: Not uploaded to Canvas (in case of questions about grades, we go by what's uploaded in Canvas).-9: Not published -OR- work not linked from published site (neither from blog nor from drop down list).Up to -2: missing/insufficient blog entry and/or not linking to your work.Up to -3: Did not provide links to inspiration/idea.Up to -7: proposed a topic that will not entail enough complexity of JS code (needs to be at least as much work as creating click sort-able HTML tables from scratch). Combine multiple effects, if necessary, to get the desired complexity.Up to -7: It would not make sense to place two or more (of your chosen) components on a single page.Up to -7: Not original enough. Each student should have read all the discussion posts before posting their (at least) two effects that they plan to apply to some JSON data. The student who posted first gets the topic. The second published gets a deduction and has to choose another topic.Up to -8: Little or no Proof of Concept Code. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download