Question

I need to create some type of Quizz app witch have to have 2 parts:

• Back-end : There I need to upoad a picture and save 2 areas: 1 right area and 1,2 or 3 wrong areas (<- how can I achieve that?)

• Front-end: a system will show a picture randomly and the user will have to choose one of the selected area… when he clicks the app will tell him if it was correct or not.

the difficult part for me is how to setup this clickable areas on a uploaded image.

I want to do this project in symfony (it will be my first) but I also can start in .Net and WPF.

Any help, clue or example will be very helpfull

thanks in advance.

Answer 1

If I understand if correctly, you want to:

• backend: upload an image, divide it into X
  sections, mark one section as the
  “correct” area and all the others as
  “incorrect” area.
• frontend: click on image: if the XY coords are in the “correct” area, do A, otherwise do B

The harder part would be writing the javascript layer for the backend app so that you can easily draw a selection on the uploaded image, especially if you intend to use more complex shapes (as opposed to just rectangles used in many libraries for client-side cropping). It can be done, though.

On server side you simply store the coordinates of the images that are “correct”, so your choice of server framework is largely irrelevant to what you’re trying to accomplish.

For inspiration of how the javascript cropping utilities accomplish some of what you want to do, look here: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Hope this helps.