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 Reply

2974

McKirahan

"Can" <ch***@hotmail. com> wrote in message
news:VT******** ******@news.usw est.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.h tm</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.selecte dIndex;
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:#EFE FEF; font-weight:bold }
</style>
</head>
<body onload="rank(tr ue)">
<form action="" method="get" name="form1">
<select name="s1" size="10" class="sel1" onclick="rank(f alse)">
</select>
<select name="s2" size="10" class="sel2" disabled>
</select>
<input type="button" value="Reset" onclick="rank(t rue)">
</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.us west.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.us west.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.h tm</title>
<script type="text/javascript">
var op;
function rank(bool) {
var form = document.forms["form1"];
var list =
["White","Red"," Orange","Yellow ","Green","Blue ","Indigo","Vio let","Grey","B l
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.selecte dIndex;
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:#EFE FEF; font-weight:bold }
</style>
</head>
<body onload="rank(tr ue)">
<form action="" method="get" name="form1">
<select name="s1" size="10" class="sel1" onclick="rank(f alse)">
</select>
<select name="s2" size="10" class="sel2" disabled>
</select>
<input type="button" value="Reset" onclick="rank(t rue)">
</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.h tm</title>
<script type="text/javascript">
var op;

function init()
{
form = document.forms["form1"];
list =
["White","Red"," Orange","Yellow ","Green","Blue ","Indigo","Vio let","Grey","Bl ack"]

}

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.selecte dIndex;
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.selecte dIndex = 0
rank(false)
}
}
}
</script>

<style type="text/css">
..sel1 { width:60px }
..sel2 { width:60px; background:#EFE FEF; 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(f alse)">
</select>
<select name="s2" size="10" class="sel2" disabled>
</select>
<input type="button" value="Reset" onclick="rank(t rue)">
</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*******@yaho o.co.uk> wrote in message
news:11******** **************@ f14g2000cwb.goo glegroups.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.lengt h".

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 ","Indigo","Vio let","Grey","B l
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.selecte dIndex;
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*******@yaho o.co.uk> wrote in message
news:11******** **************@ f14g2000cwb.goo glegroups.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.se lectedIndex];
selB.appendChil d = sOpt.parentNode .removeChild(sO pt);
}
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.sel ectedIndex;
var len = sel.options.len gth;
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.f orms['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.fo rm.s5,-1);
"><br>

<input type="button" value="Move down" onclick="
moveOpt(this.fo rm.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.lengt h".
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

Similar topics

5704

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 the Requirements: -Provide a web interface to a database -Database stores the data (duh), but the capacity to extract the data

PHP

3533

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 address has a Google page rank of four. (at least according to the Firefox page rank plugin).

HTML / CSS

1955

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 according to jens.torring's replay) As I was reading the slandered draft C99 about the conversion (6.3) I have interpreted the word conversion rank as the range of a variable (as per defined in limits.h). Am I wrong in my understanding? (I...

C / C++

1629

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 reference to it so I can instantiate it at the beginning) which stores all my user preferences. I serialize the data to and from an XML file, thereby saving and restoring the user preferences with ease. I also have a Preferences form that the user...

Visual Basic .NET

5037

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 iterating through the map and keeping count of when I hit it.

C / C++

1672

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" name="mary" /> <marker sn="3" rank="4" name=suzy" /> </markers> How do I sort by and display using etc- some help

.NET Framework

2944

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 we want to try to look in multiple tables and views, Rank the results and aggregate the results back (remove any duplicates). Part of the search is a Full Text Index search. I created already the following query that seems to be working ok...

Microsoft SQL Server

2102

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 apologize for the cross-posting, but I am attempting to advertise to as many developers as possible. I would appreciate it if you could take 20-30 minutes to complete this questionnaire. If you know others involved in the development of...

C / C++

1856

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 albert

PHP

8448

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8552

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

6198

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5666

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4198

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4369

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2773

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2011

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1776

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General