Monday, August 10, 2009

Enticing Computer Science Majors

What enticed you to become what you are today?  For me, Computer Science enticed me by giving me the following:

  • A way to solve problems.  I love trying to figure out new stuff and make things work.  In computer science, we are given a problem and a processor, and then we have to get the processor to solve the problem.

  • A way to build something useful.  One of my most satisfying projects was to build the BYU Intramural Activities scheduling and online registration system.  I had played Intramurals many times and it was exciting to build something that I knew I would use, along with 10,000 other BYU students per semester.  It was also fun to see people explain the new rules (that I helped create) to me, having no idea I created the site they were using.  (They have put a new look on it, but I believe they are still using my system today.)

  • A way to learn about how things work.  I have had a hard time understanding why people don't want to know how something works, because I have to know how everything works.  From cars to the ocean tides, I want to know how it works.  It strikes me odd that most Computer Science graduates have a very limited understanding on how a computer actually works.  They might know a little bit about the CPU, but they really don't know how all of the I/O devices, and the operating system all function together.  For the most part, they are completely content just knowing that it works and writing programs that run on top of it all.  (Of course, I am sure the reason why people don't want to know how everything works is due to a limited amount of time.  No?  Okay, so maybe I am just a weirdo.)

Anyway, as I have been developing lots of programming projects to torture my students, I have realized the best assignments have some sort of excitement factor.  In order to create the best labs, I really need to know what entices students.

One way is with graphics.  Many students like creating graphics, or so I have been told.  This is why they created Alice.  Unfortunately,  Alice has very little appeal to me.  I can't really solve any new problems with it.  I don't know why, but making a girl skate around on the ice for hours isn't all that motivating to me.  So when some of my colleagues suggested that I make everything in Computer Science graphical, it really bothered me.  Mostly because once they graduate, chances are they are going to be typing text into a text editor or an IDE 8 hours a day.  So, (to me) their goal was to trick the students into liking Computer Science by making it fun - ie. graphical.  I used to think, "Computer Science should be fun by itself, it doesn't need skating ballerinas.  If they don't like it, they should probably choose another major."

Don't get me wrong, I was never against including more graphics in my assignments.  I just wasn't motivated to spend hours trying to create labs that did have graphics in them.

When one of my colleagues introduced a graphics lab where students draw beach huts that can be posted on a web page, it made me think a lot about my previous opinions about graphics in Computer Science.  It was easy to tell that some of the students spent a lot of time making their hut.  I then thought about what motivates them to spend 3-4 extra hours on their lab when they probably have a lot of other assignments and, here in Hawaii, a lot of surfing to do. Okay, so I had to admit that this lab had some sort of excitement factor to it.  Then, does that mean that everyone who spent extra time to make their hut prettier has the wrong motivation, and will eventually be really upset that we tricked them to think that Computer Science is really just making fun pictures?

So here are some of the possible factors that motivated these students:

  • Being an artist.  They liked painting their canvas by typing words like drawCircle.

  • A sense of accomplishment by actually creating something they can show people, just like I liked being the Intramural site creator.

  • Overcoming a challenge.

Can you think of others?

So, if the students are motivated only by the first factor that I mentioned, my guess is that they have a major disappointment coming their way.  However, if they are motivated by the other factors, they could be hooked enough to trade their surf board for a new computer.

So, are graphics the only way to motivate people into Computer Science?  Maybe so, and this is why.  Most beginning CS having only interacted with the graphical aspects of a computer.  Surfing the web is highly graphical, especially with flash ads on every page.  Even writing a report has many graphical elements (how long do you spend formatting?).  So, when a student actually builds something graphical he can feel like he created something that fits into his paradigm of a computer program.

Not until they catch a vision of  all of the other things computers do behind the GUI will they start to appreciate what programming really is.  For a beginning programming class, graphics will probably do a lot of good, but we have to transition them to the real Computer Science by having them explore behind the GUI.  So, I guess I have to say, "Skate on ballerina."

Friday, May 22, 2009

Ruby on Rails - RESTful Drag and Drop

Ruby on Rails and the script.acul.ous library make drag and drop really easy.  Just by adding one line of code, and you can make anything in your page draggable.  With another line of code, you can make anything receive a draggable element.

However, I struggled in making my drag and drop interface RESTful, and I also struggled in sending the new coordinates to the server to update the model.  I will first address how I made my drag and drop RESTful and then how I managed to get the right coordinates of the drop.

So here is the setup:  I have list of element on the web page, and then a div tag into which the user can drag one of the listed elements.  Then the user can drag the element around the div as well as drag the element off of the div to remove it.  I want the server to remember what elements have been placed on the div and where they are.  That way the user can re-visit the page and see it like he left it.  These three actions easily fit into RESTful actions:  Dragging an element on will call the create action,  Moving an element will call the update action, and dragging an element off will call the destroy action.

So the problem comes when droppable (or the receiving element) receives the draggable.  You need to know the url of the RESTful action before anything has been dropped.  This isn't a problem for the create action, it is a POST to /draggable_elements (where draggable_element is the model that stores the elements that have been placed on the map with their X and Y coordinates).  However update and delete's url is a PUT or DELETE to /draggable_elements/id respectively.  However you don't know the id until the element has been dropped, and once an element is dropped, an AJAX request is immediatly sent to the specified action with one parameter: the DOM id of the element that is dropped.  You cannot specify the correct action because you don't know the element's id until after it is dropped, and you probably don't want your DOM id's to be just the numerical id of draggable_element.  Also, the AJAX request doesn't contain any information about where the drop occurred.

I first tried to solve this problem with the :with option in the drop_receiving_element call.  This allowed me to add additional parameters like the X and Y, but it didn't allow me to change the action of the AJAX request.  Here is my code in the view using the :with option:

<%= drop_receiving_element :droppable, :accept => "draggable", :hoverclass => "hover", :url => draggable_elements_path, :method => :post, :with => "'element_id='+encodeURIComponent('_').last()) +
'&x='+ encodeURIComponent(Element.getStyle(element,'left')) + '&y='+ encodeURIComponent(Element.getStyle(element,'top')) ">

I called split('_').last() on the to get the actual id number out of my DOM id of the element that was dragged in.  I set the DOM ids of the draggable elements to item_id where the id is the database id of that element.  split and encodeURIComponent are both javascript methods.

I almost gave up on being RESTful, but then looked into the onDrop option.  With this option I can get the drop_receiving_element to call a javascript function instead of sending an AJAX request when it receives a draggable.  I then created hidden forms on my page, one for create, and an update and delete form for each element already dragged in. This worked out great because I could use the remote_form_for helper methods and just pass them instances of the draggable_elements (with a blank one for the create form).  Now, each form will have the correct action coded into it.  The javascript method just has to tell the right form to submit after updating the values.

(If you want the form to send an AJAX request you need to call form.onsubmit() not form.submit().  form.submit() will send an http request.)

The big payoff to all of this is that it really simplifies the controller code.  In fact, I think the only change from the scaffolding code that you would need to make is to delete the new and edit actions, since you won't be using them. (I didn't use the scaffolding so I am not sure about this.)

I also wanted to send the new X and Y coordinates of the drop.  In the code above, I am sending the element left and top for X and Y.  The problem with that is that the positions are relative to where the draggable element is on the page.  Therefore if the user scrolls the page down, zooms in, etc. the coordinate positions will change.  After searching for a solution, I found out that in order to find the absolute position, you have to recurse through all the parents object and find the offset of each parent item and add them up.  Put it all together, and you have a RESTful drag and drop that stores the absolute coordinates of the draggable elements.

Here is my code:

For enabling the draggable elements:

<% @items.each do |item| -%>
<%= draggable_element "item_#{}", :revert => true, :ghosting => true%>
<% end -%>

My droppable:

<%= drop_receiving_element :dropDiv, :accept => "draggable", :hoverclass => "hover", :onDrop => "itemDropped"%>

My Create form:

And my javascript:

function itemDropped (draggableElement, droppableElement, event){
form = document.getElementById("new_item");
form.elements["draggable_element[element_id]"].value ='_').last();
dropDiv = document.getElementById("dropDiv");
dropPosition = getPosition(dropDiv);
draggablePosition = getPosition(draggableElement);
form.elements["draggable_element[x]"].value = draggablePosition[0] - cmapPosition[0];
form.elements["draggable_element[y]"].value = draggablePosition[1] - cmapPosition[1];

function getPosition (obj){
var curLeft = 0;
var curTop = 0;
do {
curLeft += obj.offsetLeft;
curTop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curLeft,curTop]

Notice that the get position adds up all of the parents offsets. This isn't my complete code, it only sends the create form, but hopefully it is enough to get you started.

Tuesday, April 21, 2009

Rails Pagination with AJAX

When I upgraded to Rails 2.0, I quickly found out that pagination was removed from the rails code base.  In order to get it you have to install a plugin.  After searching on the web I found two possible plugins: classic pagination, and will_paginate.  I choose will_paginate because it is more efficient and works directly with the model.

However, the author suggests not to use link_to_remote to implement an "AJAXified" pagination.  Instead he gives some pretty ugly javascript code that does it.  Since I am using a lot of javascript in other areas of my application, I was really hesitant to go down that path and possibly break my javascript functions.  I see his point, in that not everyone uses the prototype library, but I do.  So I came across Redline's blog to change my links to link_to_remote links.  But this violates the other reason the will_paginate's author gives for not using link_to_remote - non-javascript browser support and search engine support.

After looking at the link_to_remote documentation, I found that you can replace the default anchor link location (href="#") with the same url the ajax call goes to.  This allows non-javascript enabled browsers and search engines to follow the links.  I just modified Redline's render to add one extra option to set the href.  This is my renderer module:
# app/helpers/remote_link_renderer.rb

class RemoteLinkRenderer < WillPaginate::LinkRenderer
def prepare(collection, options, template)
@remote = options.delete(:remote) || {}

def page_link(page, text, attributes = {})
@template.link_to_remote(text, {:url => url_for(page),
:method => :get}.merge(@remote), :href => url_for(page))

With that, javascript-enabled browsers will use make and use the AJAX calls, and non-javascript-enabled browsers and search engines will use the normal links.  This seems like the cleanest and most DRY way to get pagination with AJAX.

Wednesday, March 11, 2009

Outliers: The Story of Success by Malcolm Gladwell

The dean of my college gave all the faculty this book.  I really enjoyed reading it.  It was a page turner that made me think a lot about success in my own life.

I really liked the beginning story about the Canadian Junior Hockey League.  As Malcolm points out, most of them are born in the first three months of the year.  Why? When the boys are 11 years old they get evaluated and the good ones are chosen to be in the better leagues.  The problem is that the boys that were born in December are competing with the boys that were born in January, so the boys that are 11 months older (and that much bigger and more mature) are more likely to be selected to play for the better coaches, play against tougher competition, and have more practice time. So the boys born in December have a huge disadvantage.

This happens with public education as well, except the cut off time is August, not January.  So, as you would expect, kids born in August, September, and October have an advantage over kids born in July.  They perform better on tests and assignment, get assigned to more advanced classes with better teachers, get into better colleges, etc.

This is just one example Malcolm gives in his book.  He gives many other examples, including the advantages that  Bill Gates, Bill Joy, and the Beatles had in their lives.

I did, however, have a couple of problems with the book.  First, all of his stats and stories seem to be cherry-picked.  He only tells stories and relates statistics that support his point of view. Of course, I would expect this from anyone, but it just seems that he is overselling their significance and ignoring any contradicting evidence.

Second, he never really discusses what his definition of success is.  As far as I can tell, his definition of success is being rich, famous, or both.  I have a much different definition of success - happiness.  I do believe that his analysis can be applied to my version of success.  As I read this book I was constantly thinking about the opportunities and advantages that led me to where I am today.  Unlike the book, I feel that my opportunities did not happen by mere chance, but as the blessings and tender mercies of a loving God.

I do agree with Malcolm that we have to provide more people more opportunities for success.  However, I was a little disappointed that Malcolm didn't go on to say that as people, we need to look for our advantages and then use them for our success.  We need to find out how we are different, identify what advantages we have, and then work really hard to achieve the success that we want using those advantages.

Monday, January 12, 2009

My Favorite Course

I find it really strange that my favorite course to teach just happens to be the course that I hated the most when I had to take it - computational theory.  I thought that I would love to teach my favorite subject during my undergraduate and graduate studies.  I am not sure why I have had such a change of heart.  All I can do is be grateful that I have a job that has allowed me to teach such a variety of areas.  I have basically taught every course in the undergraduate degree except computer organization and the very beginning programming course in a year and a half.  (Which, by the way, is a very good method for studying for a qualification exam.)  It also excludes courses that are covered by the Information Systems and Technology degrees like networking and databases, and senior level electives.

Some of them I feel like I did really well, and others did not go well at all.  However, through all of it, computational theory became my favorite course.  I know it was not because it was the easiest for me to teach.  In fact it was the hardest.  I had to spend hours reading the book and working out proofs and homework problems for each lecture.  What was the reason for the switch?  I am not sure, but any of the following could have contributed:

  • I did not like the teacher who taught me the subject.  He was boring, and it was obvious that he didn't really want to be teaching this course.  His approach for help was saying, "Yeah, that is a hard question.  It took me a couple hours myself.  Good Luck."

  • I couldn't see the big picture while I was taking the course.  I didn't like the fact that there wasn't any programming projects.  I couldn't see why this theory fit in with computer programming.  After finishing my degree and working on  graduate degrees, I can see how theory fits into the full scheme of Computer Science.

  • I have figured out that I liked Computer Science (or programming as I thought of it back then) because of the problem solving, not the programming.  In the theory class, it tends to be pure problem solving, no typing required.  Just a lot of thinking and problem solving.

  • I learned to appreciate the history of my field, and respect the people who pioneered it.  This appreciation has led me to study their work.

Anyway, from my experience taking this course, I found that I really needed to catch my students interest in this course.  The first time I taught it, I started to hear the same complaints I had when I took it.  I found myself defending the course.  The best explanation I was able to come up with was that companies don't want mindless programmers.  They want people who are problems solvers.  Anyone can learn how to program.  It's the people who can solve difficult problems with efficient and elegant solutions that really have worth to a company.  If you do that for the companies you work for, you will see your demand raise, and with it your salary and job security.  Computational theory develops problem solving skills.

Does anyone have a better explanation on why take computational theory?  How do you motivate your students?