This assignment involves formatting text, which is mainly covered in Chapter 6 of CSS3: The Missing Manual by David Sawyer MacFarland (both the 2nd & 3rd editions). However, the assignment includes a twist: the text you are to format will be read from a data structure, not hard-coded within your HTML pages.
The data structure we will use is JSON, which is introduced on pages 370-373 of JavaScript & jQuery: The Missing Manual, which is also by David Sawyer MacFarland. That introduction involves Ajax, which is beyond the scope of this assignment, as do most of the references and tutorials that you can easily find on the web with a Google search. We’re going to use JSON in this assignment much more simply than that, although, as always, students who are familiar with JSON are welcome to use more advanced techniques if they like. Wikipedia has a good, simple introduction to basic JSON syntax at http://en.wikipedia.org/wiki/Json. You need only be concerned with the sections 1 and 2 of this article, which I have captured as a PDF. Patrick Hunlock has also written a nice, clear introduction to JSON in his blog post of April 10, 2007. Again, you need only be concerned with the first part of this post, which I have also captured as a PDF.
The use of JSON also requires a bit of JavaScript, which we haven’t covered yet, either. But again, we will only use a few very basic techniques to illustrate the fact that CSS can be applied to dynamic as well as static text. This is the critical lesson to take away from this assignment. As often requested, you can see my rudimentary solution to this assignment here. Please note that my solution is not meant to be complete. There is always much more that you can do.
As usual, we will spend class time to go over everything you need to know to use JSON and JavaScript in this assignment.
Your CSS code must be in a separate file from your HTML file, in a subdirectory name css. This is the industry-standard way to organize websites. You might use inline CSS and/or an internal style sheet during development, but you must move all your CSS to a separate, external file before you submit your assignment. That external file should have an extension of .css.
Your code must pass both validators or you must explain why it does not.
As always, submit your assignment using the Assignment Submission Form. This form will lead you through providing all the information we need to evaluate your work, confirming that it is correct, and then e-mailing that information to me with a copy to yourself. Be sure to select 91.461 Assignment No. 5: Formatting Dynamic Text from the assignment drop-down list on that form.
Important Note: Don’t forget to click the “Submit Assignment” button on the Assignment Confirmation Form page! You should then receive an e-mail from the system within a few minutes confirming that your assignment has been submitted. If you do not receive an e-mail after clicking the “Submit Assignment” button, neither will we. In that case, something has gone wrong somewhere. Please try submitting again or contact me.
This assignment will be graded on a 40-point system with points awarded as follows. Please note that the lists of features provided below are not meant to be exhaustive. They are merely representative of the types of things we are looking for in each grading category. Also, please note that 8 points — 20% of your grade — are for documentation.
The fact that this assignment is graded on a 40-point system while the previous ones were graded on a 20-point system is merely to give us more leeway in assigning points. All assignments are normalized to 100 points. The weight of this assignment in your final average is therefore the same as that of our previous two assignments.
| Criteria | Possible Points |
Program Integrity / Design
|
32 |
Source Code Documentation and Formatting
|
8 |