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.
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?
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.)
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 ...
Reply With Quote
Originally Posted by just pino
Consider this ...
, 
Bookmarks