Rank Preferences in a Survey

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

Subscribe Post Reply

2956

McKirahan

"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

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

McKirahan

"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

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

McKirahan

"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

Nigel Greenwood

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

McKirahan

"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

RobG

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

Nigel Greenwood

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

McKirahan

"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

Similar topics

A PHP/mySQL Web Survey..

by: GTF | last post by:

PHP Web Survey Idea.. I have been given an opportunity to create a web based survey. This is a fairly lengthy survey of 60 pages on paper (various multiple choice and free form). These are...

PHP

Google Page Rank mystery

by: sandy | last post by:

I have a hobby website at: http://www.montana-riverboats.com which also resolves as: http://montana-riverboats.com ...without the www. One address has a Google page rank of three. The other...

HTML / CSS

Std's 6.3- conversion- term rank

by: dam_fool_2003 | last post by:

Just now I asked a question about signed char and unsigned char. I had the replay very fast by jens.torring and Tim prince. I post via google so now goes my thanking replay. (I must be more precise...

C / C++

Interesting question for preferences saving/restoring

by: Tom | last post by:

I have a large application; lots of forms, multiple dynamic DLLs, etc. I also have, in the appliation, a general 'Preferences' class object (which is in itself a separate DLL, and I just include a...

Visual Basic .NET

Quickest way to find the rank of a <map>

by: Steve Edwards | last post by:

Hi, Given a map: typedef map<long, string, greater<long> > mapOfFreq; Is there a quicker way to find the rank (i.e. index) of the elememt that has the long value of x? At the moment I'm...

C / C++

How do I sort by [rank] and display [name] with [xsl]?

by: volunteer | last post by:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="filename.xsl"?> <markers date="20060523"> 04:21:50 PM <marker sn="1" rank="6" name="john" /> <marker sn="2" rank="5"...

.NET Framework

union with Rank create duplicated records

by: orenlevy1 | last post by:

Hi Everyone. I have a problem that I could not figure out what to do with it. I have a couple of tables and views. All have the same unique ID. When a user try to do a search on our web site...

Microsoft SQL Server

an Invitation to be Involved in a Survey on Developing ScientificComputing Software

by: Janet93 | last post by:

If you are involved in the development of scientific computing software, you are invited to participate in a survey on developing this kind of software. If you have already received this request, I...

C / C++

display different user in rank

by: canabatz | last post by:

Hello . i got a list of user with ranking . i want to display the first five places where it is not the same user, like that john : is rank 1 john john david : is rank 2 albert : is rank 3...

PHP

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA