Beefy Boxes and Bandwidth Generously Provided by pair Networks
more useful options

User Interface - Arranging a list in HTML

by oakbox (Chaplain)
on Nov 11, 2002 at 09:36 UTC ( #211875=perlquestion: print w/replies, xml ) Need Help??

oakbox has asked for the wisdom of the Perl Monks concerning the following question:

I've been wracking my brain about this for a few days, but no clean way is making itself obvious to me and I was wondering if any of you have run across something similar and how you solved it. If this is way off topic, let me know that too (and maybe suggest a forum?)
I have a list of 20 statements on the screen (HTML interface) and I need the user to arrange those elements in their order of preference. After ordering the items, the user needs to confirm their ordering or make changes if they need to.
I've tried showing all 20 statements on the screen and giving the user rows and rows of radio buttons that they can use to order the items (very difficult to use and takes up a lot of space on the screen, usually more than a screen full at 800x600). I've tried a Java script widget that displays a selection box and a couple of buttons that allow the user to move highlighted items up and down (pretty similar to the code you can find in your user settings screen here on PM, this isn't very effective for a long list of statements). I've tried pitching the items to the screen as a group and asking the user to select the 'best' item, removing that item and pitching what is left over - repeat until whole list is ordered. This works right up to the point where they might need to correct their ordering, that just puts me back in the Javascript problem of dealing with a long list.

Have you dealt with anything like this? How do you go about solving your user interface problems and what suggestions do you have for solving widgets like this?


  • Comment on User Interface - Arranging a list in HTML

Replies are listed 'Best First'.
Re: User Interface - Arranging a list in HTML
by tachyon (Chancellor) on Nov 11, 2002 at 09:54 UTC

    Why not just make it like a balot (voting) paper with a box the user fills in with their numerical choice next to each statement. This is a simple paridigm.

    [3] Statement [ ] Statement [1] Statement [ ] Statement

    If you want to get fancier you could use an onBlur() javascript to validate that the user only uses each number from 1 to 20 once. Alternatively the numerical votes could come from a javascript function that provides a drop down list of the possible votes. As a number is used it could be removed from the available votes drop down list. If you want to go further you could rearrange the list in real time as choices are made.



      I like this one. It cuts down on the calls to the server (I'm seeing a lot of dial up users) and makes for a clean list on the screen. I think the pull downs would keep the user from rearranging the list if they are not happy with it, but checking their response when they type it in looks good.
      Thank you for the input.


Re: User Interface - Arranging a list in HTML
by BrowserUk (Pope) on Nov 11, 2002 at 10:07 UTC

    One way Ive seen this sort of thing done is to use to (multi) SELECT GROUPS side by side and two buttons

    The user highlights one (or more) items in the left list and clicks the top button the form is submited and this elements are moved (in there existing order) from the left list to the right list.

    If they make a mistake, they can hightlight the error in the right list and use the lower button to move it back to the left.

    A third button is used to indicate that they are happy with the order.

    +-----------------------+ +-----------------------+ |Item 01 | | | |Item 02 | +------+ | | |Item 03 | | >>>> | | | |Item 04 | +------+ | | |Item 05 | | | |Item 06 | | | |Item 07 | +------+ | | |Item 08 | | <<<< | | | |Item 09 | +------+ | | |Item 10 | | | |Item 11 | | | |Item 12 | | | |Item 13 | | | |Item 14 | | | |Item 15 | | | |Item 16 | | | |Item 17 | | | |Item 18 | +--------+ | | |Item 19 | | Submit | | | |Item 20 | +--------+ | | +-----------------------+ +-----------------------+

    Nah! You're thinking of Simon Templar, originally played (on UKTV) by Roger Moore and later by Ian Ogilvy
      I thought about this one, but if a user is down around item 17 and suddenly decides that items 3 and 4 need to be flipped, they have to 'unload' all of the items from 3 down and then 'reload' all items below it.

      I know this question is a bit off topic, but I've run into this problem many times in web design projects and I haven't found a good way to address it yet.


        Not necessarially. If the user selects an item in the right list and one or more in the left list, then the items from the left list are inserted below the selected item in the left list.

        In your example of swaping items 3 & 4 in the right list, it becomes a two step process.

        1. Select item 3 in right list, click "move left" button.

          The screen is re-drawn with item from position 3 at the bottom of the left hand list.

        2. Select the bottom item in the left list, select the third item in the right list, click "move right".

          The list is re-drawn with the previously third item moved below the previously 4th item.

          The rest of the list remains in situ.

        It's actually much harder to describe than do, but I guess that's one reason for not using it. Indicating how to use it to your average (impatient) user.

        You can also code the logic of the switching from one to the other into javascript associated with the buttons if server hits is a concern, and you can guarentee your users will have js turned on. You could even get clever and have the buttons use javascript if available or submit to the server if not. Just a thought:)

        Nah! You're thinking of Simon Templar, originally played (on UKTV) by Roger Moore and later by Ian Ogilvy
Re: User Interface - Arranging a list in HTML
by sauoq (Abbot) on Nov 11, 2002 at 09:45 UTC

    Not that this has anything at all to do with Perl but have a look at your User Settings and try rearranging your nodelets. If I understand correctly, this is similar to what you are trying to do. The idea is that you allow the user to move one thing up or down in the list with each click.

    "My two cents aren't worth a dime.";
Re: User Interface - Arranging a list in HTML
by dingus (Friar) on Nov 11, 2002 at 09:53 UTC
    I would suggest using Javascript and some Dynamic HTML. Followed by cunning use of a HIDDEN field or two for the form to SUBMIT.

    I'm not going to write the code but you could use one or more <DIV> elements to display your list, with UP and DOWN buttons after every element (perhaps better would be a 3 column table?). Each up and down button would swap the relevant entries and update the page and the hidden field with the new order. You will then have submit button to send the final order to your CGI script.

    Note that IE has problems with submiting dynamically generated forms so the parts of the form that need to be sent at the end should be parts that existed onthe original page!


    Enter any 47-digit prime number to continue.

Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: perlquestion [id://211875]
Approved by BrowserUk
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others perusing the Monastery: (3)
As of 2021-12-06 20:36 GMT
Find Nodes?
    Voting Booth?
    R or B?

    Results (33 votes). Check out past polls.