For this assignment, you will be performing a task that is relatively common within web design: creating a layout consisting of a header, three columns of content, and a footer.

Specifically, you will be creating a menu for a restaurant. The header will contain the name of your restaurant, the columns will contain sections of menu items, and the footer will contain disclaimers and extra information.

While such a layout seems as though it should be trivially easy to create, it is rather cumbersome to do with standard CSS functionality. This is where libraries like Bootstrap come into play. As was discussed in class this week, Bootstrap gives its users the ability to create complex layouts, interactive pieces of functionality, and clean, consistent, professional design in very easy and intuitive ways.

The Template

We have created a template HTML file containing menu items and sections that can be downloaded here:

HTML Menu Template

JSBin version (NOTE: Remember that Bootstrap’s layouts are fluid, so what you see may be affected by using smaller windows, as in JSBin.)

This file contains the CDN links necessary to incorporate Bootstrap CSS and Javascript libraries. You are free to update the menu as you wish, or create your own items.

Your task is to take this template and change it to match the format above. With Bootstrap’s grid system, this should be relatively simple as compared to standard CSS-only techniques.

Actually, your task is to try out bootstrap and make the menu nicer – at a minimum make it multi-column (as we did in class) – but try adding other stuff. Make the menu as cool as possible. Although, we understand that during exam season, doing the minimum (making it multi-column) might be all that people do.

Turn-in mechanism

Your final assignment should be a self-contained HTML file. But it doesn’t have to be (a link to anything that solves the problem is fine). JSBin links are totally fine (you might not need the debugger for this assignment, so JSBin can be fine).

We’ll turn things in via a graded discussion: on canvas. Please make a posting with a link to your menu. You can also ask questions and give feedback to your peers.

To get credit for this assignment you need to make 2 posts: one with a menu (that at least tries to get multi-column), and one either answering a question or giving someone else some feedback.

This assignment is due when exams start (December 17th) – but we will accept late assignments until we do grading (maybe on the 20th of December, maybe the 21st). I recommend you do it before the 20th in case we start early – once we’ve done grading, we can’t go back to add things.

Resources

Bootstrap’s documentation is quite thorough and can be found here: http://getbootstrap.com/getting-started/

There have also been a number of tutorials developed, including that by W3 schools: http://www.w3schools.com/bootstrap/

This reading is a bit different…

I want you to read about design. I want you to learn about how to think about making things that look nice, communicate well, seem planned, etc.

This is a whole subject unto itself – you could get a degree in Design rather than Computer Science. Instead, We’re going to do “Design School in a Day”. Except we’re going to do the shortened version.

(If you want to see the original Design School in a day from last year’s class, you can look here. But that was a 3 credit class so I asked the students to do more).

To get you thinking about design, I want you to read Chapters 2-6 of The Non-Designer’s Design Book by Robin Williams. This is a great book since it distills out some basic principles for those of us who aren’t designers. This is clearly not all there is, but it’s a good start. These chapters are short, and get the points across quickly. She distills things down to four principles: Contrast, Repetition, Alignment and Proximity. CARP, since she has enough design sense not to pick the other acronym.

The Chapters (and the order to read them)

1. A page from Chapter 1 and Chapter 6 – this is a summary of the ideas. Read it first.
2. Chapter 2 – Proximity
3. Chapter 3 – Alignment
4. Chapter 4 – Repetition
5. Chapter 5 – Contrast

The assignment for this is a little different: you need to find some things and critique them according to the principles. How do the 4 principles apply? Pick something good and something back (make 2 posts). It can be a web page (give a link), or a menu, or a flyer, or an ad, or …). But give a link (or include the picture), and critique it according to the 4 principles. Does the good one follow the principles? Does the bad one not follow the principles?

You will get more out of this assignment if you look at more things and start to really think about the principles. So contribute to the discussion in your group!

The reading discussion to post to is: on Canvas.

I’d like you to do the reading and the initial posting before class on 11/24 (so we have something to talk about). The second posting and discussion can happen after that.

In lecture on 11/17, we will learn about selector-based programming and how many JavaScript libraries take advantage of CSS selectors to select elements in the DOM and operate over them. While libraries like jQuery and D3 exist to simplify adding properties to elements, they can be done in straight JavaScript as well. For example, JavaScript’s Document.querySelector() function (see MDN article, esp. querySelectorAll() for a list) is the analog for jQuery’s $("") selector syntax.

The purpose of this assignment is to get you comfortable with selecting sets of entities from the DOM and reading/changing their properties.  The elements of the DOM can hold state (e.g. is this checkbox checked or not?), which can affect how functions operate over given data.

Look over this assignment before lecture on 11/17 to form questions to ask. The actual programming assignment itself is due on Monday, 11/23.

The Template

We’re using an HTML form to use as our base for our JavaScript exploration in this assignment.  These elements have unique IDs, some are contained within named divs, and a subset have a class associated with them.  Your goal is to use these identifiers to appropriately select relevant elements and operate over them (change or read their properties, based on user input).

It doesn’t do anything too fancy, here it is: http://jsbin.com/qevoka/edit?html,css,js,output

For your assignment, add the following functionality (some template code has been started in the JavaScript file):

• When the user clicks on the ‘Are you a student’ checkbox, enable all the student questions and disable all the non-student questions.
• If the user selects any odd option (1st, 3rd, 5th, etc.) option, fill in the ‘Does that make you tired’ text box with ‘Yes’.
• When the user clicks on the ‘Does your job have you interact with dust?’ question, fill in the below text box (‘Do you like your job?’) with ‘It’s too dusty!’  When the checkbox is cleared, clear the same text box, iff (if and only if) the text is the same as the checkbox entered.
• Similarly, when the user clicks on the ‘Do you use a desktop computer […]’, fill in the below text box with ‘No, I wish I were outside!’.  When the checkbox is cleared, clear the same text box iff the text is what was filled in by this checkbox (like above).

Turn-in mechanism

By Monday, 11/16 you need to have at least looked over the assignment – it’s a good way to bring questions to class.

By Monday, 11/23 you need to turn in your final program. You can turn in a link: either to a JSBin, or you can put it into your handin directory. For this assignment, there is a handin link – we won’t do it by discussion.

There will also be a discussion board. Post here if you have a question, or if you find a resource for learning how to do it, or can answer someone else’s question. To get credit for this assignment, you must both make a meaningful post in the discussion (a reasonable question counts) and hand in a working program.

• Canvas Hand-in
• Canvas Discussion

Notes

Selector-based programming can be very powerful, and data visualization libraries like D3 use it to bind data to elements on the page.  Though D3 binds data to SVG elements (which look like HTML elements!), the selection concepts stay the same: one can give SVG elements IDs, classes, and select based on the type of tag and its position in the object hierarchy.

Here’s a nice demo that shows how object selection works in D3: http://prcweb.co.uk/lab/selection/.  You can see that it is similar to jQuery and vanilla JavaScript, but the semantics are different.  If you want a peek ahead, running through the Object Pattern D3 tutorial shows how selector-based programming can make drawing data-driven objects easier.

Some people were having problems when they ran their P4 assignments from a secure JSBin or from their handin directory.

the problem is… the link for fakeserver was an http link, not a secure link (https). if your program is from a secure place (it was from https://), then it is a security error to load a non-secure thing

the answer:

load fakeserver via a secure link:

https://pages.cs.wisc.edu/~cs638-1/Puzzle4/fakeserver.js

This is a harder puzzle. It’s not that much bigger.

The idea is for you to see what it’s like to program using callbacks and the asynchronicity of working with web services. Except that we’ll fake the web service.

Your task is to make the “flight status board” like you see in the airport. You need to query the different airlines to get their flights, and present them to the user in a nice list/table.

The catch is, that the airlines all have different servers to provide you with the information. So you need to make requests to each airline to get their data, and assemble it all into a single list.

The web servers will be “faked” – you’ll be provided with a JavaScript module that generates random info. But it will behave like a web server. When you make a request, it might take a while. Or it might fail. Or it might take a while and fail. (actually, failures aren’t implemented in the current version).

What your program needs to do:

• It needs to make a request to each airline to get a list of its flights for the day.
• It needs to make a request to the airline to get the information about each of those flights.
• It needs to assemble all this information into a single table, sorted by time.
• Good feature: It should update the display as it comes – the servers might take different amounts of time to respond, and results will come in out of order. Your table should update as stuff comes in.
• Bad feature: do not do this serially, send out as many requests and take them as they come back. Otherwise, it will take too long

If you do this right, the table will start to fill in as you get more information.

Handing this in

The program is due on Monday, November 9th. Post a link to your solution in the discussion group. If you are not able to get it to work, post a question – and maybe look at other people’s assignments to get ideas. It’s your first posting that is due on the 9th. But you should post more than a placeholder. You should have a final program by Friday, November 13th.

You are required not only to submit your own solution, but also to comment on other peoples. Either give help, or give feedback. Each person must make at least 3 postings (beyond their own program).

You can put your program on JSBin. Or you can put your solution into your Puzzle2 handin directory (since most of you didn’t use that). Or put it on some other server you have access to. Wherever you put it, post a link in the Canvas discussion.

Canvas discussion for giving links to turn things in.

Evaluation

To get a passing grade you must turn in a working program, and comment on other people’s programs (or give them help).

But if you really wanted a decent grade, make it work asynchronously and have the table fill in as new thing come. But since we’re not giving grades, you should do this because you want to learn. And help others learn.

The “fake server”

The fake server provides a single object: Airlines. This object has one field “airlines” that provides a list of the airlines. It provides one “real” method: request, and one method for testing “testreq.” The data will not change during a run – airlines won’t come and go, and if you ask an airline for what flight it has, it will return the same list each time (although on different runs of the program, a different list of airlines and flights might be generated).

The request method takes two parameters: a string with a request, and a callback function that is called when the data from the request is returned. The callback function should take a single parameter that will hold a javascript object with the result of the query.

The testreq method takes one parameter: a string with a request. It returns the result of the request immediately. It does just what the request method does, just faster and without the callback interface. As its name implies, its there for testing. Don’t use it in your final program.

You can, of course, look into the code for the fake server. But please don’t part of the idea is for you to figure out how it works from the (intentionally limited) documentation, and by trying it out. This is like the real world: you want to use something, but it’s never as good as you had hoped.

Request format: All requests have the form “airline?query”. Where query is either “flights” (which produces an array of integers with flight numbers) or a flight number (which produces an object with information about the flights).

So here is an example dialog with the server. With each request, the answer is “returned” after a delay by calling the callback with the value. This assumes one of the airlines is called “united” (remember to check what airlines).

request(“united?flights”) –> [10, 20, 30]

request(“united?10”) –> { flight:10, from:”ORD”, to:”MSN”, arrive: 819192240000, airline:”UA”}

Note that times are in milliseconds since 1970 – see the JavaScript Date Documentation for info.

Getting Started

You can access fakeserver at: https://pages.cs.wisc.edu/~cs638-1/Puzzle4/fakeserver.jsNOTE: if you access it as “https://” then it will load whether your program is from an https source or not.

Note: you should load this script from that address – it might be updates as bugs are fixed. I’d like to have it do a little more realistic simulation of the delays, for example.

There’s a simple program that tries out a function or two on JSBin to help you get started. http://jsbin.com/zacaso/4/edit?js,output (notice that it loads the script in the HTML).

Start by making an HTML file that includes the “fakeserver.js” file. Then try to see what happen when you try different requests. If you get stuck, try using testreq instead of request.

Try just making an un-ordered list of all flights first. Then figure out how to put them in order.

Try just writing things out in an ugly way (see the example output below). Then make it prettier.

How big is this?

A minimal version that does not sort the flights can be done in about 10 lines of code! (plus an HTML file that puts it together – which has 2 lines of actual code). A version that does sort (but uses testreq) is a little longer.

A Sample output

Very ugly. And this was done using testreq. Make yours less ugly. And don’t use testreq.

DL121 from:LGA arrives:09:16:32
UA725 from:ORD arrives:09:28:32
DL982 from:MSP arrives:09:30:32
UA307 from:ORD arrives:11:26:32
DL622 from:DTW arrives:11:28:32
AA116 from:ORD arrives:12:11:32
UA637 from:DEN arrives:13:07:32
AA585 from:ORD arrives:14:21:32
UA747 from:EWR arrives:15:55:32
UA830 from:EWR arrives:16:03:32
DL365 from:MSP arrives:16:30:32
AA391 from:DFW arrives:17:23:32
DL768 from:LGA arrives:17:50:32
UA221 from:ORD arrives:17:54:32
UA857 from:ORD arrives:18:58:32
UA589 from:DEN arrives:19:14:32
DL285 from:DTW arrives:20:33:32
AA760 from:MIA arrives:21:11:32
DL297 from:DTW arrives:21:34:32
AA653 from:ORD arrives:21:36:32
AA339 from:DFW arrives:21:48:32
DL860 from:LGA arrives:22:15:32
DL549 from:ATL arrives:22:38:32

Due: October 27th

This is a very short puzzle. Think of it as a Quiz. Since we don’t have class on Tuesday, October 27th, do the puzzle in that time slot. It shouldn’t take 45 minutes – but if you don’t get it in 30 minutes, post the first part and see what other people come up with.

Note: the puzzle isn’t just to solve the problem – it’s to understand why the example solution works the way that it does.

The problem:

Write a program that takes all of the buttons on a web page, and changes them so that when they are clicked, an alert pops up that says the number of the button. (so the first button says “1”, the second says “2”, etc.)

The example solution:

Here is a solution that doesn’t solve the problem. Before clicking on the buttons and seeing what it does do, figure it out by reading the code (all 8 lines of it!): http://jsbin.com/pewatov/edit?html,js,output

Part 1: Why does it do what it does?

Part 2: Create a solution that does the right thing. (note: do it with a loop over the list of buttons, don’t hard code it).

Post your answers to the discussion on Canvas. Even if you don’t get part 2, post  solution to part 1.

I am really curious what people come up with. My first solution isn’t as nice as I would have hoped.

By the way, the title of the assignment is a big hint.

Disclaimer: this quiz is inspired by the example on “interviewcake”. Thank you to Michael who pointed me at that.

Maybe I wasn’t clear enough about process – but as we move into the second puzzle and wrap up the first, I should probably try again.

1. If you don’t get the puzzle at first, you are expected to keep trying – after you see the other solutions, the discussion in class, have questions answered, … Right now, my preference is that you leave your old solution (but say “there’s a newer one below”) and post the newer one separately.
2. Part of this assignment is to collaborate with others. If you get it, answer other people’s questions and review other people’s solutions. You’ll learn from it – and you’ll give useful feedback to others.
3. Canvas discussions are not a great mechanism for this. But it’s what we have right now. You can edit your old posts (or reply to them) to say that a question has been answered, or that you figured things out, or that you have a new and improved version.
4. There is an expectation that everyone should make multiple posts. The first post (either a question or a solution) is just the start. There should be discussions (either helping or getting help), commentary (giving feedback), and revised versions (either making your non-complete assignment work, or your working assignment better).

I have no way to force the collaborative learning aspects. But I am going to try to encourage it.

Edit 10/18/2015 – I am giving you my solution from the start, since it may make the instructions less confusing. But try to do it yourself before looking at my code.

Warning – this is a lot bigger than the previous puzzle.

Write a program that…

1. Allows the user to add a pair of cities (that are connected by a flight). Note: it doesn’t make a difference what order the flight is specified in. (so if I say “MSN <-> NYC” or “NYC <-> MSN” it doesn’t matter – there is an assumption that routes are bi-directional). (better feature: You should prevent the user from adding redundant route.)
2. Shows a list of all of the direct routes.
3. Creates a list of cities for which there are routes – as buttons (or some widget).
4. When you click on the button for a city, it shows all of the places that connect to that city. For example, it could light up everything on the list of routes that was a destination you could reach from the city.
5. Fancier feature – also show all the things that are two hops. For example, you could use one color to show the directly accessible cities, and two colors to do the two hop cities, …

A few ground rules…

1. Don’t use jQuery. If you know jQuery already, this will be a good lesson for why things like jQuery are more useful. If you’re able to use jQuery, use your JavaScript prowess in a manner that will be good demonstrations for others.
2. Simple first, fancy later.
3. Try first, but then seek help before you get too stuck. This time I will post a (not so great, but functioning) solution before the deadline (but after you had a chance to think about it), so you’ll have at least something to look at.
4. If you’re stuck – post a question, not broken code. If your bug was easy, you would have found it. Finding someone else’s hard bug is hard. It’s a worthwhile skill to have. But you can’t count on that much generosity from people.
5. It’s a team effort – the goal is that everyone learns to do it. Just because you got it easily doesn’t mean the “team” has succeeded. I don’t know how to put this into mechanism (I was thinking that your grade requires everyone in your group to succeed, but that doesn’t quite work).
6. Use good development tools. I was going to say “don’t use JSBin” – but JSBin actually has some advantages (it has syntax and style checking, allows for rapid feedback). I think it’s better to start using some pro-level tools (go see that posting for ideas). I recommend investing some time in learning the tools.
7. You are encouraged to submit improved versions of your program! If you submit a version that works on the first Monday, submit a better version later. Please don’t delete the posting with your initial submission (although, if you want to edit it to say “this is an old version, look below for the newer one” that might be helpful. If you submit a broken version, submit a better one later. We probably need some better mechanism for turning in multiple versions. But for now, we’ll try to just use postings in the Canvas discussion.
8. I will post my solution – to each of the group discussions – sometime after Monday (maybe Tuesday after class). So you’ll have at least one to look at. I have posted my solution. Use it to see what is intended. You can look at the code if you get stuck, but my code is ugly. My program is in “my handin directory” https://pages.cs.wisc.edu/~cs638-1/handin2015/Puzzle2/gleicher/airroutes.html (note, like all handin directories, you must authenticate to the CS servers in order to see stuff).

The mechanisms:

1. I will provide a place for you to host your solutions on the CS web server. We ran into a snag, so I can’t tell you about it yet. Hopefully we’ll have it soon. In your posting, you can post a link to your assignment in this space. Or (for this assignment at least) you can turn things in via JSBin.
2. Once again, we’ll use a discussion forum on Canvas. It’s not perfect, but it seems to work again. There will be a time by which everyone must have made an initial posting. Then another round of time for help. Hopefully, everyone won’t wait until the last minute before asking for help (or going to provide it).
3. When we “grade” we will check to see that people really did interact with others. You must make more than 2-3 (good) postings. Asking a good question is a good posting. Answering a good question is a good posting. Giving someone constructive feedback on their program is a good posting. (of course it’s pass fail, so we have little in terms of rewards – but the gratitude of your classmates and the extra learning you get should be its own reward).

The schedule:

• Initial posting due – Monday, October 19th. By Midnight. Yes, I realize lots of people will do it at the last minute, so not a lot of dialog will happen before class on Tuesday. But, since this assignment is going out late, … The most important thing is that everyone at least looks at the assignment enough that we can play the index-card game again on Tuesday.
• At least 1-2 iterations after the original – Friday, October 23rd. By Friday, everyone should have “gotten it” – if you got it originally on Monday, you should have ideas on how to make it better – so have an improved version.
• At least 2-3 comments on other people’s assignments – Monday, October 26th.

For the initial hand-in, I suspect that some people will get it and turn that in. Many people will get stuck – which is OK. When you get stuck, post a question. And come to class with an idea of a question to either ask or write on an index card. Over the course of the week, I hope that the collaborative learning thing will work, and by Friday, everyone will have a solution to the problem. And then over the weekend, you can give each other feedback.

The Canvas discussion thread is: here. Some commentary about how programming puzzles should work is here.

This is the first of  (what will hopefully be) a series of small programming assignments to get you thinking about what we’re learning about in class.

These should be easy enough that you can get the basic version done relatively quickly. If you find yourself getting stuck, ask for help.

I am trying to separate the mechanics of how we turn them in, evaluate them, and peer learn with them from the assignments themselves – but that is part of it.

For this time: we’ll try the mechanism of a Canvas discussion. Turn your program in as your initial posting on the Canvas discussion. Then your groupmates will be able to see your program and comment/discuss. If you are stuck, make your initial posting be a question explaining where you got stuck. And then either someone might be able to help you, or you’ll get to see other people’s solutions which will give you hints.

For handing things in, give a link to a place where the code is running. It can be a link to an online IDE (like JSBin), or a link to a place where the code is running (if you have access to a web server. you can always use your CS account – which provides web access in the “public/html” directory of your AFS home directory). If you do put it on JSBin, I recommend writing your code somewhere else first (so you have a debugger) and then move it there. (that’s what I am starting to do).

This is an experiment… we’ll see how it works.

Due date: make your initial posting (with either your working program, or a question to help you get unstuck) by Monday, October 12. You are also required to comment on other people’s code (by replying to their posting) – which might be answering a person’s question. So you’ll have to look at things after the 12th as well.

The Canvas things:

• The discussion for this puzzle (where you put your answer and discuss other people’s)
• A discussion for clarifications about puzzles (if you don’t understand the problem description)
• A discussion for Reading 5 (if you have questions about manipulating web pages with JavaScript)

Now for the puzzle…

The Puzzle: To Do List

Your task is to make a simple to do list. Everything is stored on the web page (no server) – so it’s not that practical. But it will get you making and re-arranging elements, and using closures to write functions that respond to events.

You program should make a to-do list. At the top of the page, there should be a type-in box (an “input” element of type text), and a button that causes what has gotten typed in to be made into a to-do list item. If you want to just have the user press enter after typing something, that’s fine too.

When a todo list item is created, it should be added to a list on the web page. With a checkbox.

When the checkbox for an item is checked off, that item should be moved to the “Done” list.

My basic one is 26 lines of JavaScript, and a shorter HTML file. It’s really basic.

If you get the basic one working, add some bells and whistles!

• allow the user to set a priority for each item, and have the list be sorted appropriately
• make it look nice
• add a due time to each to do item, and allow the list to be sorted by either time or priority
• something creative

This is not meant to be a big project. (as I said, mine was 26 lines of code – although its quite basic). The important thing is to try to use some of the functional mechanisms we discussed to give behaviors to the checkboxes, and to see how to manipulate the web page programmatically.

Some hints (if you need them):

• If you know JQuery, it is less code to manipulate the web page with JQuery than with plain JavaScript functions. For this, don’t try to learn JQuery. In fact, don’t even use JQuery.
• I think it’s easier to create a function (with a closure) that handles the “click” of a checkbox when the checkbox is created.
• We haven’t discussed event handling much in class. But, for a checkbox element, you can set its “onchange” field to be a function that gets called.
• For some reason, my program doesn’t always work in JSBin.

In order to try out some of the ideas we’ve learned in the early part of class, we need to know how to make our programs do stuff in the web browser, so we can write programs that do something.

The readings for this part are 3 chapters in Eloquent JavaScript.

• Chapter 12 JavaScript and the Browser
• Chapter 13 The Document Object Model
• Chapter 14 Handling Events

Don’t expect to get all the pesky details. In practice, when you do this kind of programming you are constantly searching the web for a reference (what is that attribute called again?)

For these readings, there will be no discussion. But, there will be some small programming puzzles so you can try out the ideas.

Even though there is no check that you’ve done the readings, please:

1. Give them a quick skim either before the October 6 lecture, or shortly after
2. Really read them before the October 13th lecture

I’ve created a Canvas discussion for people to ask (and hopefully answer) questions. We’ll see if that works.