www.webdeveloper.com
Results 1 to 4 of 4

Thread: Creating Javascript Sortable List within a List question

  1. #1
    Join Date
    Feb 2006
    Posts
    12

    Creating Javascript Sortable List within a List question

    Hey everyone,

    I am currently working within the Java framework using JSPs (and developing on NetBeans). I am currently trying to develop a Javascript solution where I have two lists:


    A
    -1
    -2
    -3

    B
    -4
    -5
    -6

    C
    -7
    -8
    -9

    I am trying to create the Javascript solution where A,B,C are sortable and also 1,2,3; 4,5,6; and 7,8,9 are sortable within each list.

    I have used search here, google, looked at YUI and also Scriptaculous, but really haven't found anything that can work.

    Does anyone have any incite as to how to develop this, have examples, or a good reference for me to develop this? I have very little experience developing in Javascript.

    Thanks.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Question

    Quote Originally Posted by just pino View Post
    Hey everyone,

    I am currently working within the Java framework using JSPs (and developing on NetBeans). I am currently trying to develop a Javascript solution where I have two lists:


    A
    -1
    -2
    -3

    B
    -4
    -5
    -6

    C
    -7
    -8
    -9

    I am trying to create the Javascript solution where A,B,C are sortable and also 1,2,3; 4,5,6; and 7,8,9 are sortable within each list.

    I have used search here, google, looked at YUI and also Scriptaculous, but really haven't found anything that can work.

    Does anyone have any incite as to how to develop this, have examples, or a good reference for me to develop this? I have very little experience developing in Javascript.

    Thanks.
    I'm unclear of the requirements...

    1. Is there one list (randomized) comprised like (example only): [9,8,7,A,6,5,4,B,2,3,1,A] ?
    2. OR is there 3 (random) list like: [A,3,2,1], [6,5,B,4],[9,C,8,7] ?
    3. OR are there 4 (random) lists like: [[A,C,B],[2,3,1],[5,6,4],7,9,8] ?
    4. OR something else?

  3. #3
    Join Date
    Feb 2006
    Posts
    12
    JMRKER-

    Sorry about that, kinda hard to explain. Here is an example... um, my JSP displays, let's say, a list of questions (A,B,C). With each question, the question can have multiple answers (1,2,3; 4,5,6; 7,8,9).

    I would like to be able to move Question A into the third position, while maintaining it's current order of Answers (1,2,3).... so in this example, it would look like this:

    B
    -4
    -5
    -6
    C
    -7
    -8
    -9
    A
    -1
    -2
    -3

    Does that help? Each Question should be sortable within the list of Questions, while each Answer set is sortable only to the Question it is related to (Answers 4,5,6 cannot be sorted with 1,2,3, etc.)

    does that help?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412

    Lightbulb Consider this ...

    This program is not a full answer to your request,
    it is just an initial attempt to show a possible solution
    along with a demonstration of the Q/R format you might consider...

    Click on a question to move it to the display drop-down.
    Order of display is your preference.
    Then click on display to show responses to the selected question.

    Code:
    <html>
    <head>
    <title>Move Question - Response Display</title>
    <script type="text/javascript">
    var QR = [
        [ 1,['a1,b1,c1,d1,e1']],
        [ 2,['a2,b2,c2,d2,e2']],
        [ 3,['a3,b3,c3,d3,e3']],
        [ 4,['a4,b4,c4,d4,e4']],
        [ 5,['a5,b5,c5,d5,e5']],
        [ 6,['a6,b6,c6,d6,e6']],
        [ 7,['a7,b7,c7,d7,e7']],
        [ 8,['a8,b8,c8,d8,e8']],
        [ 9,['a9,b9,c9,d9,e9']],
        [10,['a10,b10,c10,d10,e10']],
        [11,['a11,b11,c11,d11,e11']],
        [12,['a12,b12,c12,d12,e12']],
        [13,['a13,b13,c13,d13,e13']],
        [14,['a14,b14,c14,d14,e14']],
        [15,['a15,b15,c15,d15,e15']],
        [16,['a16,b16,c16,d16,e16']],
        [17,['a17,b17,c17,d17,e17']],
        [18,['a18,b18,c18,d18,e18']],
        [19,['a19,b19,c19,d19,e19']],
        [20,['a20,b20,c20,d20,e20']]	// Note: no comma after last entry
        ];
        
    function PopulateQues(IDS,ArrInfo) {
      var s = document.getElementById(IDS);
      var scnt = s.options.length;
      for (var i = scnt-1; i >= 0 ; i--) { s.options[i] = null; }
      s.options[s.options.length] = new Option('Choose','',false,false);
      for (i = 0; i < ArrInfo.length; i++ ) {
        s.options[s.options.length] = new Option(ArrInfo[i][0],ArrInfo[i][1],false,false);
      }
    }
    function moveToQues(IDS,ndx) {
      var s = document.getElementById(IDS);
      s.options[s.options.length] = new Option(QR[ndx-1][0],QR[ndx-1][1],false,false);
    }
    function PopulateResp(IDS,Info) {
      var ArrInfo = Info.split(',');
      var str = '';
      for (i = 0; i < ArrInfo.length; i++ ) { str += ArrInfo[i]+'<br>'; }
      document.getElementById(IDS).innerHTML = str;
    }
        
    function Initialize() {
      PopulateQues('Order',QR);
    }
    
    </script>
    </head>
    <body onload="Initialize()">
    
    <table border="1">
    <tr>
     <td width="80px">
      <select id="Order" onchange="moveToQues('Ques',this.selectedIndex)" size="21"></select>
     </td>
     <td width="80px" valign="top">
      <select id="Ques" onchange="PopulateResp('Resp',this.value)" size="21">
       <option value="">Display</option>
      </select>
     </td>
     <td width="100px" valign="top" style="background-color:yellow">
      Responses
      <div id="Resp"></div>
     </td>
    </tr>
    </table>
    
    </body>
    </html>
    Additional code could be used to create an exam with the questions in the selected order.

    Let me know if you have questions about the intent.
    Again, it might not be a direct solution to your request ,
    but it might get you to thinking about the possibilities ...

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles