Fantasy football game, Click " +" sign after each player, the Jersey on the field changes

Hi guys,

My project is creating a fantasy football prototype, it has too many complicated interactions involved. Functions I need are

  1. Click “+” sign after each player, then the jersey on the filed changes accordingly.
    What I achieved is assigned each plus sign with 2 states (State1:white jersey & State2:Jersey of the )and specific Jersey, that’s not realistic since my new player list has 120 of them. Can I use repeater instead of setting up each player one by one?

  2. There are 3 forward backs, I want the players I picked show up on the field from left to right.

  3. I want to be able to save the team after I picked all the players I need. It means after clicked the save button, the team member stays in the field even if the page is reloaded.

I’m new to Axure, not sure if any of these make sense, but worth a try. My file is attached bellow.

Thanks a million!
FantasyFootball.rp (10.1 MB)


Here’s task one for you, using a repeater, though I’m using arrows ( not a good UI necessarily) instead of a plus button because I wasn’t sure how a plus sign would work for switching jerseys. But the concept should be enough to get you going. I didn’t quite understand tasks two and three.

The code is in OnItemLoad of the repeater, as well as in OnClick of each arrow (in the repeater). And it’s ugly looking as hell, but enough to get the idea. Note that when you update a row in the dataset (that’s what each OnClick event does), the repeater automatically updates.

Note there is also some code in the OnPageLoad handler that forces all of the images to cache; it’s to overcome an Axure bug where you see Axure’s “mountains and sun” placeholder image when swapping images for the first time.

Live sample.

File: fantasy-football-repeater.rp (2.6 MB)