2014 ICS2O SOFTWARE ENGINEERING PROJECTS

PROJECT 'CHALLENGE' RATING (offered to assist you with project management strategies)
Routine
Typically some deep thinking required, but not necessarily a lot of coding.
Hard
Likely involves either a multiplicity of new concepts, designs and/or algorithms.
Really Hard
Start immediately, think hard, employ a stepwise refinement strategy and post concerns as required to our ICS2OForum conference.

HTML5 Markup Sampler. In this assignment you will put your String skills to work with most everything else you've learned in this introductory coding course. There is simply no better way to prepare for the final exam than applying your full abilities to the comprehension and completion of this assignment.

The purpose of this page is to provide your viewers with a sense of how to markup is used to render content on a web page. It does this by allowing the viewer to wrap up to three levels of tags around some basic text. When the user clicks the Sample button, both the HTML markup and the rendered text appear in the table below. A common subset of tags appear in the three select boxes. Thse should include, <u>, <em>, <strong>, <sub> , and <sup>. In addition, none is offered should the user wish to skip a level.

Task.

  1. Research HTML's select tag. Here's a starting point for your research. From there, dig deeper...
  2. Copy your Shell.html page to Markup.html and create content similar to the image, above right (click to enlarge).
  3. Enhance your page with CSS styling consistent with your web site.
  4. Revisit HTML Entities. You'll find information on this page applicable to this assignment. Note: The chapters that immediately follow this link offer access to a rich set of arrows, symbols, and other miscellaneous UTF-8 characters to enhance your future pages.
  5. Develop the page in keeping with the specifications above.
  6. Submit fully documented, formatted and efficient code to handin under the indicated Subject Line, by the deadline.

Remember, a thorough execution of this project is simply the best way to prepare for our final exam.


The Quadratic Equation. The main purpose of this interactive JavaScript assignment is to enable you to gain familiarity with JavaScript's if statement. In completing this task you will also solidify your understanding of quadratic equations that you have studied in mathematics and how to begin to format typeset-quality mathematics on a web page. TBD...


ACES Pizza & Grill. ACES Pizza & Grill (it exists) likes Pizzaiolo's Create Your Own Pizza (CYOP) Order Form (click on Create Your Own Pizza) and has decided it needs a similar page for its site. ACES has launched a contest to have someone design their page (they obviously need some help: look at the title that appears in the browser's tab when you open their home page) Contest submissions must be received no later than midnight Saturday May 3 in our handin folder. The top three vote-getters, as decided by you, will invite three of their friends to join them for a chow-down on a Pizzaiolo Party Pizza of their choice, courtesy of our ACES budget. Here are the page specifications.

  1. Copy your current ACESPizza.html page to, CreateYourOwnPizza.html. This must be the only file attached to the submission, however you are free to reference supporting files, of your own creation (css, images, scripts, etc.), from your web site. As can be seen by their logo (right), the company colours are black (#000), white (#FFF), and red (#F00). They require you to limit your colours to these three and include this logo, at least once, on your CYOP page by referencing it in from the URL:
     http://darcy.rsgc.on.ca/ACES/ICS2O/images/ACESPizza300W.png
      
  2. Whereas you are permitted to use whatever CSS styling you author YOURSELF based on additional research YOU undertake, you are NOT permitted to use any JavaScript language strategies we have not discussed as a class.
  3. The Pizzaiolo site offers many options. You are to restrict yourself to the ones we have discussed: Size, Toppings, Conveyance, and Payment.
  4. A table similar to the one below (restricting yourself to a combination of the three ACES colours, only, of course), summarizes the order. The innerHTML of the table cells are to be updated whenever the user presses your Place Order button.
  5. Display a minimum of ten toppings. There is no need to separate them into Meat, Vegetables, etc. The toppings should be counted and displayed similar to the manner below.
  6. Prices are to be applied as follows. Size: $7.95, $9.95, $11.95, $13.95, $15.95; Each Topping: $1.00, $1.50, $2.00, $2.50, $3.00; Conveyance: add $2.50 for delivery, Payment: subtract 5% for cash.
  7. Your table should display and apply the Harmonized Sales Tax (HST) of 13% to the Total amount.
  8. All page content should appear 'above the fold' (ie. do not require your users to scroll down).
  9. Attach ONLY CreateYourOwnPizza.html to an email to handin by the deadline of midnight Saturday May 3, under the Subject Line: ACES Pizza & Grill. Buon appetito!


Boolean (Logical) Operators. The purpose of this interactive JavaScript assignment is to enable you to familiarize yourself with JavaScript's boolean type and its associated operators. In completing this task you will also solidify your understanding of the main digital logic gates and their associated truth tables, introduced in your hardware course last fall. Note: You are not to use the if statement in this assignment.

Task.

  1. Copy Shell.html to Boolean.html. Modify the opening comments and title. Since this is the only file you will be submitting, ALL external files you require will be referenced online. This includes your favicon and css files and the image files that are requested from my site.
  2. Develop the page to resemble the screen capture to the right (click to enlarge). This includes setting all of the defaults values on startup, as indicated. This will require a good understanding of tables, radio buttons, and images, in addition to basic HTML skills.
  3. In place of the elementary styling I have provided, the highest credit will be reserved for those students that apply their own, referencing an external CSS from their Web Publishing folder that is uniformly consistent with the themes (fonts, colours, etc.) they employ over their entire web site.
  4. The six images of the digital logic gates are to be referenced with the URL,
    	http://mail.rsgc.on.ca/~cdarcy/Gates/XXX.png
    where XXX is replaced with EQU, NOT, AND, OR, NAND, and NOR, as required.
  5. Users of your page can check radio options within the three independent sets of inputs offered. Pressing any one of the six logic buttons results in the reading of the corresponding input states, the processing of this input using the appropriate JavaScript boolean operators and the subsequent display of the boolean outcome in the Output column, accomplished by modifying the innerHTML of the cell contents. As well, your code is to update the graphic image of the respective logic gate in the Process column. This can be achieved by modifying the src property of the respective <img> element. Note 1. Be sure to size the table cells in such a way that the table remains stable when the image changes.
  6. Note 2. Javascript (like most languages) only provides boolean operators for NOT (!), AND (&&), and OR (||) logic. These are sufficient as all other logic gates can be implemented as specific combinations of some or all of these three.

JS: Stock Trade Entry Form and Confirmation.
The goal of this assignment is to encourage you to consolidate as many of your HTML, CSS and JavaScript skills as possible to produce a simple HTML input form identical to the one below that, when activated, yields a confirm box identical to the one to the right (Chrome's look).

Task.

  1. Copy your Shell.html template to StockTrade.html.
  2. Maximizing both your HTML and CSS styling skills, duplicate the table-based entry form below as closely as possible using preferred techniques. Duplication includes matching colors, spacing, cell padding, borders, font characteristics, etc.
  3. For the four text input boxes, provide the given defaults.
  4. When the users presses the Continue button, your JavaScript code will retrieve and assemble the user's input for the purpose of presenting the data to the user for final approval though a confirm box. Match the contents of the confirm box exactly as indicated.
  5. You WILL document all areas of your code neatly, consistently, and thoroughly.
  6. You are NOT to use ANY external files such as images, CSS, and Script files. All code is to be contained within your single StockTrade.html file.
  7. You are NOT to use any code you did not write yourself. You can research techniques by reading online or printed resources, learn from them, and author it for yourself, including comments that contain citations and reference URLs, but you are NOT to simply copy and paste code from external sources into your code, calling it your own.
  8. Finally, do NOT mount your work on your web site until Sunday's Feedback email has been read and you've made any necessary edits and improvements.


Case Study: Chapter 3. Modify your previously assigned Case Study as requested on pp. 116-127 and update your online presence.

Case Study: Chapter 2. Each chapter in the text includes a running Case Study to which new code and techniques are incorporated. The table below indicates the Case Study for which you are responsible for developing over the balance of this course. Complete your Case Study (found on pp. 66-72) as indicated, ensuring it passes the W3C Validation Service, upload the site to an appropriately-named folder within your Web Publishing folder, and add a link from your index.html home page.

Section 1 Section 2 Case Study
SB DB
JavaJam Coffee House
JD RC
Fish Creek Animal Hospital
GE MC
Pacific Trails Resort
QH DC
Prime Properties
CK AD
JavaJam Coffee House
JL KE
Prime Properties
RP SF
Pacific Trails Resort
NR RH
JavaJam Coffee House
JS JLi
Fish Creek Animal Hospital
BT JaL
JavaJam Coffee House
DT BM
Fish Creek Animal Hospital
DV JM
Prime Properties
MW EM
Prime Properties
PW CM
Fish Creek Animal Hospital
JY CR
Fish Creek Animal Hospital
  JR
Prime Properties
  FS
JavaJam Coffee House
  LS
Pacific Trails Resort
  MW
Fish Creek Animal Hospital