CODEWITHSUNDEEP
phpjqueryajaxforms
Lighty_46
Lighty_46

Reputation: 5170

Creating Interactive Poll With Results Page

I'm looking to create a poll/form that will allow the user to select a starting 11 for a football game (or soccer if you're American), and then submit it and then see an image of the most popular team selection among the fans (maybe most popular for each position instead of most popular team selection all together).

Ideally I would like the form to have options for formation (4-4-2, 4-3-3, 4-5-1 etc) that would change the layout/inputs on the form (but this is definitely not essential, would just be a nice touch - I would just stick with 4-4-2 otherwise).

My dream idea is that there will be a dashboard on the bottom that had player profile pictures that can be dragged and dropped into their positions; However having simple drop down boxes would work too (as long as a player cant be used twice - which is another stumbling block because you don't want the same player to be in both CB positions.)

Design Concept (Results page would basically be the same just without the bottom dashboard): Quick Design Concept

I have absolutely no idea how to approach this as it is way more complex than anything I have attempted in the past. (Forgot to mention I would like to be able to reset the results every week or so if possible)

So if someone could let me know if its do-able, and if it is, take me through how to do it step by step or even mock one up for me it would be much appreciated.

Thanks.

Upvotes: 1

Views: 223

Answers (2)

Jean Paul
Jean Paul

Reputation: 912

It doesn't have to be a form.

Here how you do it:

  1. Create the divs for the squares on the field. Assign each of them a unique id e.g. id="square-1"

    and give them a common class e.g class="field-square"

  2. Create the divs for the squares outside the field. Give them a common class, and a unique id for each.

  3. When you drop the squares, have a function that extracts the ids when they are dropped. Then simply post them to your PHP site with jQuery.post()

Update

To extract the ids, in your callback (after you have dropped the square) do something like this: square_id = square_id.replace('square-', '');

Since you've not assigned number ids (which you should, so that you can easily change the players in future by getting them from a database), you can simply get the ids using $(this).attr('id') in your callback.

Also look up http://api.jquery.com/jQuery.post/

Upvotes: 1

hendr1x
hendr1x

Reputation: 1501

I wouldn't even think about dragging and dropping at this point. Outline what the minimal viable product would be and come up with a set of steps to do that.

Going off the data you provided I would suggest something like this...

1) Build an html form that list simply a list of all the positions and a dropdown of all the possible players that can fill that position.

2) Fill out the form (select the players) and on form submit get the data echo'd as an array.

3) Create the graphic...I see two approaches....(1) server side (GD or Imagick are probably what you are going to want to use) or (2) CSS/html images

Either one will a fine approach....this step should probably be broken into little steps...start with simply displaying a list and an image of the player next to it...

HTML would be 

echo "<img src='/images/players".$_POST["position1"]."' alt=''/>"; 
//(NOTE YOU HAVE TO CLEAN ANY DATA YOU ARE OUTPUTTING PROPERLY)

Imagick would be something like..

$bg = new Imagick("/images/bg.jpg");
$position = new Imagick("/images/players".$_POST["position1"]);

//Second image is put on top of the first
$bg->compositeImage($position, $position->getImageCompose(), 5, 5);

//new image is saved as final.jpg
$bg->writeImage('final.jpg');

Upvotes: 0

Related Questions