CSS 450: Programming Assignment #1

Warmup and data binding

Due time: Please refer to out course web-site

Objectives

This assignment is designed to achieve the followings:

· Lead you to set up the development environment

· For many of us, first hands-on with JavaScript/HTML/AngularJS

· Experience some self-learning on finding the necessary information

· Experience the frustration and learn the skills of working with JavaScript and AngularJS

· Experience and gain insights into the nice data-binding feature provided by AngularJS

· Understand (and hopefully internalize) the importance of data-binding in multi-tier systems

More advance (and optional): for those who are looking for challenges, check out ng-repeat

· Make sure you understand that a new scope is created and (probably for radio buttons), you need to bind to the $parent.

· No worries, I will share and discuss my implementation in class after the assignment is due.

Approach

You will build a simple web-site, based on AngularJS, to collect and response to two multiple choice questions. As illustrated in the following screenshot:

Choose any questions you like to ask, here are the requirements:

· Question 1: The question must have at least five (5) choices for answer. You must support three (3) ways of allowing your users to answer the question:

o A dropdown menu with choices that are descriptive

o A radio button set

o A input box where user can type their choice

The following figure focuses on the first question and the three ways for the user to enter their choice.

· Question 2: The question must have at least four (4) choices for answer. You must support two (2) ways of allowing your users to answer the question:

o A dropdown menu with choices that are descriptive

o A radio button set

The following figure focuses on the second question and the two ways for the user to enter their choice.

· Status echo: include a status echo summarizing the user’s choice. The following figure focuses on the state of user’s choice.

Requirement: at all point the different options for the user must always reflect consistent states. This means, in your implementation, two-way binding must be established for each of the answers.

Make sure your application do not encounter any errors at any point. E.g., your system should detect the situation when the user enters an invalid result in the text selection box of Question 1 and generate proper output (e.g., nothing is selected) in the status echo area.

Hints:

· Suggested implementation steps:

· Question-2, dropdown menu and status echo first. Make sure that works.

· Integrate radio button into Question-2. Make sure two-way binding is maintained between the dropdown menu and the radio buttons.

· Implement Question-3 Question-1.

· Look at ng-repeat, and simplify the implementation.

Unless, you know JavaScript and AngularJS well, I would recommend getting the basic working before looking at ng-repeat.

· To learn more about …

· Dropdown menu: https://docs.angularjs.org/api/ng/directive/select

i. Pay attention to ng-click: call back when mouse click-select

· Radio button: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

i. Pay attention to ng-click: call back when mouse click-select

· Check out ng-repeat and how that can help with populating dropdown and radio buttons: https://docs.angularjs.org/api/ng/directive/ngRepeat

i. Pay attention to the fact that ng-repeat creates a new scope, thus, if you want to bind to parent variables, make sure you use the $parent directive (http://stackoverflow.com/questions/14775981/angularjs-using-ng-repeat-to-create-sets-of-radio-inputs).

Credit Distribution

Here is how the credits are distributed in this assignment:

1.	Question 1: at least 5 choices and three input methods		35%
	a. Proper formatting of question b. Dropdown menu selection c. Radio button selection d. Textbox enter to change selection e. Three input methods are properly two-way bind	5% 5% 5% 10% 20%
2.	Question 2: at least 4 choices and two input methods		25%
	a. Proper formatting of question b. Dropdown menu selection c. Radio button selection d. Three Two input methods are properly two-way bind	5% 5% 5% 20%
3.	Proper echo of user choices at all time		10%
	a. Proper echo of Question 1 result b. Proper echo of Question 2 result	5% 5%
4.	Overall page appearance		10%
	a. Attempts at formatting b. Looks reasonable	10% 10%
5.	Proper Submission		20%
	a. General program efficiency/style b. Proper submission c. Zip file names with NO SPACES

A word about credit: Notice, the subfields do not add up to the allocated percentage. E.g., Item-1, worth 35%, but you add up the five sub-parts of item-1, it is 45%. The way to parse this is, if you miss an item, you will lose the corresponding credit, but you cannot lose more than the total allocated credit. For example, for item-1, if all your input methods are working, i.e., the dropdown menu works, the radio button operates correctly, and the input box also works, but you did not get data-binding implemented. This means, you will lose 20% of the 35% allocated for item-1.

Extra Credit:

Show/Hide each question section (2pt): define a button (or check box) to hide/unhide the entirety of each question.

Fancy display (1pt): do some fancy formatting, show us how we can make this look nice.

Anything you want to do (?pt): Do anything extra, and make sure to tell us in the submission feedback. We will look at it, and I will decide how much extra credit your work will receive. Show us what you know about web development! J.

This programming assignment will count 4% towards your final grade for this class.

Warnings:

1. Start today: You should start working on this assignment today!

a. Test out on-line submission.

b. Download and install the IDE and test things out.

c. Download all the class examples and start trying things out.

d. Find questions for me! Remember, the assignment is due on coming Tuesday Thursday!

2. Do your own work: This is much more so than in any other classes. The pace of this class is fast, and there will be a large amount of programming. If you get behind by this weekend, I guarantee you will not be able to catch up! The next assignment will be quite a bit more complicated than this one, and it requires you to completely understand this assignment. Work on this assignment and make sure you understand the tools you are using.

3. A work about debugging. Besides output to console, you should get familiarize with at least the following two debugging methods.

· NetBeans supports insertion of breakpoints. Try that out!

· When your program is running in Chrome (when you can see your page) you can bring up the “Chrome Developer Tools” to examine all the details of the page. To bring up the developer tools, you can:

i. Type ctrl-shift-I … or alternatively

ii. Click on the “Chrome Customization and Control Menu” (by default, this is at the top-right corner of the browser window), and go to “More Tools”

Start get comfortable with this environment NOW. JavaScript is powerful, but it is not friendly. One typo can cause you large number of house. Same goes with AngularJS, and very soon, WebGL. The amount of code, I think, will increase quickly. Start to know your environment, and know it well. Things are about to move, very fast.