About Final Project

Goal

At SFC, we aim to learn the skills to identify and solve problems. Be conscious of the following methodology when you work on a porject.

Planning
Generate as many ideas as possible, discuss, set a goal.
Survey
Find out knowledge and skill necessary to achieve the goal.
Implementation
Create something. Inspect if your goal is achieved or not.

Assignment

  • Make a web site that consist of 4 types of files: HTML, CSS, JavaScript and image.
  • JavaScript program must include conditional branch and iteration (automatic iteration or manual iteration driven by clicking buttons).
  • You must make mutiple pages connected by links.
  • You may use existing HTML templates or JavaScript libraries, provided you clearly write what you used and which part you wrote by yourself.
  • Make it accessible via http://web.sfc.keio.ac.jp/~(your login ID)/info1/final.html.

Hints on Choosing a Topic

Shopping site
Show images and descriptions of products. Users put an amount and click ‘Buy’ button, then the total is displayed. You may add features such as delivery charge and discount.
Moving picture book, Game book
If users click a sentence or a picture, something happens. Users can select an action of the hero to change the story after that.
Personality test, Fortunetelling
Users are requested to answer some questions. Then something is displayed.
Game
Game whose progress is driven by mouse clicking. For example, concentration, treasure hunting (sample in Japanese). It is possible to make a whack-a-mole if utilizing timer events (fairly difficult, though).

How to Implement

  1. Draw a rough sketch of the screen.
    • In case of a shopping site, layout of product pictures, descriptions, fields for amount, fields for total, etc. is necessary.
  2. Decide flows of ‘Input -> Process -> Output’
    • For example, Input is amounts and ‘Buy’ button, Process is calculation of total and Output is displaying the total.
    • It may be complicated if ‘Buy’ button put a product into the shopping cart, and the total is calculated afterward.
  3. Make a screen with HTML and CSS. In this step, fixed parts and the initial stage of variable parts are concerned.
    • Course materials are only starting points. Be active to search for knowledge.
    • If you want to do something, searching for ‘HTML something’ or ‘CSS something’ on Internet will probably bring some results. If you cannnot understand them, ask the teacher or TA/SA.
    • Note that some information is obsolete or applicable only to a specific browser.
  4. Make a JavaScript program.
    • Make a function for each flow of ‘Input -> Process -> Output’.
    • If it does not work, or works oddly:
      1. Look js file with debugger to confirm the program is accessible. Wrong file name? Different directory? Missing script element? Forget to save after editing?
      2. Set a breakpoint with debugger. If it does not stop at the breakpoint, you fail to call the function. Wrong function name? Wrong event handler (such as onclick)?
      3. If it stops at the breakpoint, check the values of variables.

How to Write Reports

It is important not only what you made but also to explain how you made it. So, you need to write a report about the project. You had better make memo or draft while working because details are easily forgotten.

Structure of the report is roughly as follows:

  1. Introduction: Motivation or background why you wanted to make it.
  2. Design: Explanation about your plan. It may be different from the end result. It is a good idea to explain turned-down plans as well as the adopted plan.
  3. Implementation: Explanation about what you made. Structure of HTML files, description of JavaScript programs, etc. You must clearly write which parts you actually made if you use others’ work such as HTML templates, JavaScript sample programs, etc. You must specify your share if the project is done by a group.
  4. Evaluation: Was the project achieved as planned? If not, why? Are you satisfied with the result? Any idea to improve it?
  5. Reference: See SFC Guide p.55-56.
  6. Acknowledgements: Acknowledge your friends who kindly give you advices.