Search GUI in the Libraries page. I think controlP5 is the most popular (perhaps the only one, since SpringGUI seems no longer supported).

Wow.  That's going to be a hard problem.  Here's how I'd go about it:

First, I'd forget about any kind of standard image analysis.  I think that will be very difficult to implement, and not very robust to the question you're really trying to answer, which is "does the student understand bending moments well enough to intuitively draw a graph that's basically correct?"

Given that you're really trying to answer that question, and given that the answer relates back to the underlying math of bending moments (which I won't, for a moment, claim to understand), I would try to analyze the user's drawing to extract from it the constants and coefficients that plug into the bending moment formula.  You can then compare those to the "known" constants and coefficients that your program selected in constructing the problem, and see if they're "close enough".

To take a simpler example, let's say instead of bending moments we were working with projectile motion (parabolic arcs).  The student would read a story problem or whatever, and draw their version of the projectile's path.  Presumably we'd give them a grid to draw against, so that questions of scale and such were not an issue.  Then we'd run a least-squares estimation against the formula:

y = y0 + (x^2 * g*sec(theta)) / 2*v0^2 + x*tan(theta)

Basically, for every x value on the graph, we measure the student's y value, and use least-squares to find the constants y0, theta, v0 that best fits the graph.  We know the exact, "correct" values of those constants from whatever the original problem statement was, and can then determine whether the drawing was close enough to correct that we can infer that the student understands the material.

In your case, you'll do the same thing but with a different formula--the bending moment formula--looking for whatever constants and coefficients that formula uses..  

I am trying to use controlp5 now but can anybody tell me if its possible to add tabs where the name labels of the tabs are replaced by imagebButton?

For example, the code below produce tabs named "something" and "extra", but i want to use imageButtons to replace those tab names.  Is it possible to do that?
Code:

import controlP5.*;


ControlP5 controlP5;

int myColorBackground = color(0,0,0);

int sliderValue = 100;

void setup() {
  size(400,400);
  frameRate(30);
  controlP5 = new ControlP5(this);
  controlP5.addButton("button",10,100,80,80,20);
  controlP5.addButton("buttonValue",4,100,110,80,20);
  controlP5.addSlider("sliderValue",0,255,128,100,200,10,100);
  controlP5.addSlider("slider",100,200,128,100,160,100,10);
  controlP5.controller("slider").moveTo("global");
  controlP5.controller("sliderValue").moveTo("extra");
  controlP5.tab("extra").setColorForeground(0xffff0000);
  controlP5.tab("extra").setColorBackground(0xff330000);
  
  controlP5.trigger();
  
  // in case you want to receive a controlEvent when
  // a  tab is clicked, use activeEvent(true)
  controlP5.tab("extra").activateEvent(true);
  controlP5.tab("extra").setId(2);
  
  controlP5.tab("default").activateEvent(true);
  // to rename the label of a tab, use setLabe("..."),
  // the name of the tab will remain as given when initialized.
  controlP5.tab("default").setLabel("something");
  controlP5.tab("default").setId(1);
}

void draw() {
  background(myColorBackground);
  fill(sliderValue);
  rect(0,0,width,100);
}

void slider(int theColor) {
  myColorBackground = color(theColor);
  println("a slider event. setting background to "+theColor);
}

void controlEvent(ControlEvent theControlEvent) {
  if(theControlEvent.isController()) {
    println("controller : "+theControlEvent.controller().id());
  } else if (theControlEvent.isTab()) {
    println("tab : "+theControlEvent.tab().id()+" / "+theControlEvent.tab().name());
  }
}

 

any help would be appreciated