By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,679 Members | 2,469 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,679 IT Pros & Developers. It's quick & easy.

Rank Preferences in a Survey

P: n/a
Can

I am creating an on-line survey. I want the user to have a list of
choices of say 10 items that are radio buttons. They need to rank their
preference. They click on preference 1, that option is removed from the
top list (choices) and appears below in a list called 'Your
preferences', you keep looping until all of your preferences are made.
Does this make sense?

How to I set it up with Javascript?

Any help is appreciated.

Can

*** Sent via Developersdex http://www.developersdex.com ***
Oct 31 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
"Can" <ch***@hotmail.com> wrote in message
news:VT**************@news.uswest.net...

I am creating an on-line survey. I want the user to have a list of
choices of say 10 items that are radio buttons. They need to rank their
preference. They click on preference 1, that option is removed from the
top list (choices) and appears below in a list called 'Your
preferences', you keep looping until all of your preferences are made.
Does this make sense?

How to I set it up with Javascript?

Any help is appreciated.

Can


How about this approach instead? Watch for word-wrap.

<html>
<head>
<title>10rank.htm</title>
<script type="text/javascript">
var op;
function rank(bool) {
var form = document.forms["form1"];
if (bool) {
for (var i=0; i<10; i++) {
form.s1.options[i] = new Option(i+1, i+1);
form.s2.options[i] = null;
}
op = 0;
} else {
var indx = form.s1.selectedIndex;
if (indx < 0) return;
var text = form.s1.options[indx].text;
var valu = form.s1.options[indx].value;
form.s1.options[indx] = null;
form.s2.options[op++] = new Option(text, valu);
}
}
</script>
<style type="text/css">
..sel1 { width:30px }
..sel2 { width:30px; background:#EFEFEF; font-weight:bold }
</style>
</head>
<body onload="rank(true)">
<form action="" method="get" name="form1">
<select name="s1" size="10" class="sel1" onclick="rank(false)">
</select>
<select name="s2" size="10" class="sel2" disabled>
</select>
<input type="button" value="Reset" onclick="rank(true)">
</form>
</body>
</html>
Oct 31 '05 #2

P: n/a
Can
Thanks, do you have a sample on a website I could look at, visually I
would like to see what the result would be.

Can
*** Sent via Developersdex http://www.developersdex.com ***
Oct 31 '05 #3

P: n/a
"Can" <ch***@hotmail.com> wrote in message
news:12***************@news.uswest.net...
Thanks, do you have a sample on a website I could look at, visually I
would like to see what the result would be.

Can

Test it as-is. Save it as "10rank.htm" (or whatever) and click on it.
Oct 31 '05 #4

P: n/a
Can

It works but I am not keen on the visuals / flow, I believe when people
want to rank things they want to pick them in sequential order. With
your code they need to think of here's the option, how do I want to rank
it. Unfortunately your option is less intuitive.

*** Sent via Developersdex http://www.developersdex.com ***
Oct 31 '05 #5

P: n/a
"Can" <ch***@hotmail.com> wrote in message
news:k4***************@news.uswest.net...

It works but I am not keen on the visuals / flow, I believe when people
want to rank things they want to pick them in sequential order. With
your code they need to think of here's the option, how do I want to rank
it. Unfortunately your option is less intuitive.


Could you provide a page that depicts the layout you want?

Here's a variation where one can rank their favorite colors.

Their first choice is placed at the top, then their next choice, etc.

<html>
<head>
<title>10rank.htm</title>
<script type="text/javascript">
var op;
function rank(bool) {
var form = document.forms["form1"];
var list =
["White","Red","Orange","Yellow","Green","Blue","In digo","Violet","Grey","Bl
ack"]
if (bool) {
for (var i=0; i<10; i++) {
form.s1.options[i] = new Option(list[i], i);
form.s2.options[i] = null;
}
op = 0;
} else {
var indx = form.s1.selectedIndex;
if (indx < 0) return;
var text = form.s1.options[indx].text;
var valu = form.s1.options[indx].value;
form.s1.options[indx] = null;
form.s2.options[op++] = new Option(text, valu);
}
}
</script>
<style type="text/css">
..sel1 { width:60px }
..sel2 { width:60px; background:#EFEFEF; font-weight:bold }
</style>
</head>
<body onload="rank(true)">
<form action="" method="get" name="form1">
<select name="s1" size="10" class="sel1" onclick="rank(false)">
</select>
<select name="s2" size="10" class="sel2" disabled>
</select>
<input type="button" value="Reset" onclick="rank(true)">
</form>
</body>
</html>
Oct 31 '05 #6

P: n/a
McKirahan wrote:
Here's a variation where one can rank their favorite colors.

Their first choice is placed at the top, then their next choice, etc.


I like this script: it's fun to use, & I've learnt a couple of
techniques from studying it. But I'd suggest 1 or 2 minor changes, as
shown below:

1. An init() function reads the colours in just once, not once per
loop.

2. The nth colour is selected automatically as soon as the (n-1)th is
chosen.

3. The reset function clears s2 in reverse order, thus preventing the
pointers from being overwritten (which meant you had to click Reset
several times to clear s2 completely).

<html>

<head>
<title>10rank.htm</title>
<script type="text/javascript">
var op;

function init()
{
form = document.forms["form1"];
list =
["White","Red","Orange","Yellow","Green","Blue","In digo","Violet","Grey","Black"]

}

function rank(bool)
{
if (bool)
{
for (var i=0; i<10; i++)
{
form.s1.options[i] = new Option(list[i], i);

//clear s2 in reverse order to prevent overwriting
form.s2.options[9-i] = null;
}
op = 0;
}
else
{
var indx = form.s1.selectedIndex;
if (indx < 0) return;
var text = form.s1.options[indx].text;
var valu = form.s1.options[indx].value;
form.s1.options[indx] = null;
form.s2.options[op++] = new Option(text, valu);

//Use recursion to set final item
if ( op == 9 )
{
form.s1.selectedIndex = 0
rank(false)
}
}
}
</script>

<style type="text/css">
..sel1 { width:60px }
..sel2 { width:60px; background:#EFEFEF; font-weight:bold }
</style>

</head>

<body onload="init();rank(true)">
<form action="" method="get" name="form1">
<select name="s1" size="10" class="sel1" onclick="rank(false)">
</select>
<select name="s2" size="10" class="sel2" disabled>
</select>
<input type="button" value="Reset" onclick="rank(true)">
</form>
</body>

</html>
Nigel

--
ScriptMaster language resources (Chinese/Modern & Classical
Greek/IPA/Persian/Russian/Turkish):
http://www.elgin.free-online.co.uk

Nov 1 '05 #7

P: n/a
"Nigel Greenwood" <nd*******@yahoo.co.uk> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...
McKirahan wrote:
Here's a variation where one can rank their favorite colors.

Their first choice is placed at the top, then their next choice, etc.


I like this script: it's fun to use, & I've learnt a couple of
techniques from studying it. But I'd suggest 1 or 2 minor changes, as
shown below:

1. An init() function reads the colours in just once, not once per
loop.

2. The nth colour is selected automatically as soon as the (n-1)th is
chosen.

3. The reset function clears s2 in reverse order, thus preventing the
pointers from being overwritten (which meant you had to click Reset
several times to clear s2 completely).

[snip]

Excellent suggestions.

My frst version of the script did clear the options in reverse order
then I changed it to use "var list" and forgot about it.

No "init()" is needed; just put "var list" outside of the function.

Hardcoding 9 or 10 is bad practice; below I use "list.length".

Here's my version that does your suggestions 1 and 3:
<script type="text/javascript">
var form = document.forms["form1"];
var list =
["White","Red","Orange","Yellow","Green","Blue","In digo","Violet","Grey","Bl
ack"]
var op;
function rank(bool) {
if (bool) {
for (var i=0; i<list.length; i++) {
form.s1.options[i] = new Option(list[i], i+1);
form.s2.options[list.length-i-1] = null;
}
op = 0;
} else {
var indx = form.s1.selectedIndex;
if (indx < 0) return;
var text = form.s1.options[indx].text;
var valu = form.s1.options[indx].value;
form.s1.options[indx] = null;
form.s2.options[op++] = new Option(text, valu);
}
}
</script>
Nov 1 '05 #8

P: n/a
McKirahan wrote:
"Nigel Greenwood" <nd*******@yahoo.co.uk> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...
McKirahan wrote:

Here's a variation where one can rank their favorite colors.

Their first choice is placed at the top, then their next choice, etc.


Here's one that just moves 'em up & down. If IE would allow proper
DOM manipulation of option elements, you could just move the option
from one select to the other...

function moveOpt(selA)
{
var sOpt = selA.options[selA.options.selectedIndex];
selB.appendChild = sOpt.parentNode.removeChild(sOpt);
}
Here's one that just moves 'em up & down:

<script type="text/javascript">
function init(sel)
{
// Array of colours
var list = ["White","Red","Orange","Yellow","Green",
"Blue","Indigo","Violet","Grey","Black"];

for (var i=0, num=list.length; i<num; ++i){
sel.options[i] = new Option(list[i], list[i], false, false);
}
}

function moveOpt(sel, d)
{
// Set up and check selection/movement
var idxA = sel.options.selectedIndex;
var len = sel.options.length;
var idxB = idxA + d;
if (-1==idxA || 0>idxB || len==idxB) return;

// Swap element attributes
var xT = sel.options[idxA].text;
var xV = sel.options[idxA].value;
sel.options[idxA].text = sel.options[idxB].text;
sel.options[idxA].value = sel.options[idxA].value;
sel.options[idxB].text = xT;
sel.options[idxB].value = xV;

// re-select previous selected
sel.options[idxB].selected = true;
sel.options[idxA].selected = false;

}

window.onload = function() {
init(document.forms['form1'].s5);
}
<form action="" method="get" name="form1">
<table>
<tr>
<td>
<select name="s5" size="11" class="sel1"></select>
</td>
<td>
<input type="button" value="Move up" onclick="
moveOpt(this.form.s5,-1);
"><br>

<input type="button" value="Move down" onclick="
moveOpt(this.form.s5,1);
">
</td>
</tr>

--
Rob
Nov 1 '05 #9

P: n/a

McKirahan wrote:
No "init()" is needed; just put "var list" outside of the function.
That's what I thought too: but for some reason neither IE nor Mozilla
seems to like it. They refuse to recognize "form" when I run the
script. Any idea why? I suspect "form" & "list" don't get initialized
in their present position.
Hardcoding 9 or 10 is bad practice; below I use "list.length".
Good point.
Here's my version that does your suggestions 1 and 3:
<...>
form.s2.options[list.length-i-1] = null;


In fact you can even just leave it as

form.s2.options[0] = null;

which progressively clears the whole array!

BTW What's your objection to my suggestion 2? When all but one of the
colours have been chosen the remaining one must be at the bottom of the
list -- so why force the user to click on it? I'm assuming the entire
list must be ranked.

Nigel

--
ScriptMaster language resources (Chinese/Modern & Classical
Greek/IPA/Persian/Russian/Turkish):
http://www.elgin.free-online.co.uk

Nov 1 '05 #10

P: n/a
"Nigel Greenwood" <nd*******@yahoo.co.uk> wrote in message
news:11*********************@f14g2000cwb.googlegro ups.com...

McKirahan wrote:
No "init()" is needed; just put "var list" outside of the function.
That's what I thought too: but for some reason neither IE nor Mozilla
seems to like it. They refuse to recognize "form" when I run the
script. Any idea why? I suspect "form" & "list" don't get initialized
in their present position.


"form" is not available until after the page loads.
Thus, "var form =" should be within the function not outside of it.
(I moved it outside of it after I tested!)
Hardcoding 9 or 10 is bad practice; below I use "list.length".
Good point.
Here's my version that does your suggestions 1 and 3:


<...>
form.s2.options[list.length-i-1] = null;


In fact you can even just leave it as

form.s2.options[0] = null;

which progressively clears the whole array!


Excellent!

BTW What's your objection to my suggestion 2? When all but one of the
colours have been chosen the remaining one must be at the bottom of the
list -- so why force the user to click on it? I'm assuming the entire
list must be ranked.
Good point -- unless it predisposes the user to a selection :)

Nigel

--
ScriptMaster language resources (Chinese/Modern & Classical
Greek/IPA/Persian/Russian/Turkish):
http://www.elgin.free-online.co.uk


P.S. May I contact you later via e-mail about "typing Classical Greek"?

Nov 1 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.