1

限られた調査アプリケーションを使用する必要があり、提供されたコードをより高度な機能に適合させる必要があります。

ユーザーが上位 3 つの選択肢を選択できるように、加重ランキングの質問を作成する必要があります。データは調査アプリケーションに送られ、調査レポートでアクセスできるようになります。アプリケーションは 2 種類の質問 (テキスト入力と複数選択) しかサポートしていませんが、フォーム データを調査アプリケーションに送り返す限り、コードを変更できます。

コードは、各オプションに対して 0 ～ 3 のドロップダウン メニューが表示されるように設定されています。ここで、ユーザーの選択肢を制限して、「1」、「2」、または「3」のいずれか、合計 3 つの選択肢のみを選択できるようにします。理想的には、ユーザーがあるオプションで既に「2」を選択していて、別のオプションでそれを選択しようとすると、最初の「2」が「0」または空白に設定されます。

これはjavascriptで行うことができますか？もしそうなら、このようなコードを表示するサイトを知っている人はいますか?

現在のコードは次のとおりです。

<html>
<head><title>Survey</title></head>
<!-- Changes
- remove br to put dropdown next to text for each item.  Switch text & dropdown order    
for each item.
- add comments to separate each question
- removed blue title font
- add instructions

Goals
- limit choices to one 1 one 2 and one 3, three choices total.
-->
<link href="---" rel="stylesheet" type="text/css">
<body bgcolor="#3c76a3">

<!-- TRANSITIONAL DIALOG BOX -->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="background-attachment: scroll; background-color: #3c76a3; background-repeat: no-repeat; background-position: left top;" bgcolor="#3c76a3" topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="survey">
<tr>

<td><p>&nbsp;</p>

<!-- HEADER END -->
<!-- FORM START TAG --><form name="survey" action="---" method="POST">
<FONT face="Verdana, Arial, Helvetica, sans-serif">
<b>survey</b><hr>

<!-- 1 -->
<input type=hidden name="Buy R.J. a DeLorean_multiple_answers" value="one">
<font size=2><select name="Buy R.J. a DeLorean" SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Buy R.J. a DeLorean_help" value="">
<b><font size=2>Buy R.J. a DeLorean</font></b>
<hr size=1>

<!-- 2 -->
<input type=hidden name="Fill Lisa's office with marshmallows._multiple_answers"     value="one">
<font size=2><select name="Fill Lisa's office with marshmallows." SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Fill Lisa's office with marshmallows._help" value="">
<b><font size=2>Fill Lisa's office with marshmallows.</font></b>
<hr size=1>

<!-- 3 -->
<input type=hidden name="Install a beer fridge in everyone's filing     cabinets._multiple_answers" value="one">
<font size=2><select name="Install a beer fridge in everyone's filing cabinets." SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Install a beer fridge in everyone's filing cabinets._help" value="">
<b><font size=2>Install a beer fridge in everyone's filing cabinets.</font></b>
<hr size=1>

<!-- 4 -->
<input type=hidden name="Buy a company Cessna_multiple_answers" value="one">
<font size=2><select name="Buy a company Cessna" SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Buy a company Cessna_help" value="">
<b><font size=2>Buy a company Cessna</font></b><br>
<hr size=1>

<!-- 5 -->
<input type=hidden name="Replace Conf2's chairs with miniature ponies._multiple_answers" value="one">
<font size=2><select name="Replace Conf2's chairs with miniature ponies." SIZE=1>
<option value="">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
</select></font>
<input type="hidden" name="Replace Conf2's chairs with miniature ponies._help" value="">
<b><font size=2>Replace Conf2's chairs with miniature ponies.</font></b>
<hr size=1>

<input type="hidden" name="question_names" value="{Buy R.J. a DeLorean} {Fill Lisa's office with marshmallows.} {Install a beer fridge in everyone's filing cabinets.} {Buy a company Cessna} {Replace Conf2's chairs with miniature ponies.}">
<p align="right"><input type="image" BORDER=0 title="Save Changes" alt="Save Changes" src="---"  name="button_save_changes">
<input type="hidden" name="showconfirm" value="T">
<input type="hidden" name="showresults" value="F">
<input type="hidden" name="preventdupesmemberid" value="T">
<input type="hidden" name="preventdupesip" value="F">
<input type="hidden" name="numberquestions" value="F">
<input type="hidden" name="destinationurl" value="">
<input type="hidden" name="original_survey_id" value="62">
<!-- FORM END TAG --></form>
<!-- FOOTER START -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END HEADER -->
</body>
</html>
4

1 に答える 1

0

警告: 次のコードには問題があります。ページにそのままドロップインすることを意図したものではありません。応用できる技のイラストです。それを研究し、あなた自身の解決策を書いてください。

1 つのオプションは、選択が行われるたびに使用できないオプションを記録することです。

var choose = (function (maxCount) {
    var chosen = {};
    var count = 0;
    function unchoose(value) {
        if (chosen[value]) {
            delete chosen[value];
            --count;
        }
    }
    return function(option) {
        if (! chosen[option.value]) {
            // option isn't chosen elsewhere
            unchoose(option.prevValue);
            if (count < maxCount) {
                // haven't reached vote limit
                chosen[option.value] = true;
                option.prevValue = option.value;
                ++count;
                return true;
            }
        }
        if (option.prevValue) {
            option.value = option.prevValue;
        } else {
            option.value = "";
        }
        return false;
    }
})(3);

count変数と変数を分離する代わりに、chosenリファクタリングしてクラスを作成できます。これにより、少しSet簡単になります。choice

function Set() {
    this.items = {};
    this.size=0;
}
Set.prototype.contains = function(item) {
    return this.items[item];
}
Set.prototype.add = function(item) {
    if (!this.contains(item)) {
        this.items[item] = true;
        ++this.size;
    }
}
Set.prototype.remove = function(item) {
    if (this.contains(item)) {
        delete this.items[item];
        --this.size;
    }
}

var choose = (function (maxCount) {
    var chosen = new Set;
    return function(option) {
        if (! chosen.contains(option.value)) {
            // option isn't chosen elsewhere
            chosen.remove(option.prevValue);
            if (chosen.size < maxCount) {
                // haven't reached vote limit
                chosen.add(option.value);
                option.prevValue = option.value;
                return true;
            }
        }
        // invalid choice; undo it
        if (option.prevValue) {
            option.value = option.prevValue;
        } else {
            option.value = "";
        }
        return false;
    }
})(3);

choose各 select の属性にバインドするonchangeか (ただし、インライン イベント サブスクリプションは問題があるため、このアプローチを取る前によく考えてください)、DOM イベントを使用して次のリスナーをサブスクライブします。

function choiceListener(evt) {
    if (! choose(evt.target)) {
        evt.preventDefault();
    }
}

さらに変更を加えることができる場合は、jQuery のUIインタラクション (具体的にはUI/Draggable、UI/Droppable、およびUI /Sortable ) のようなものを使用して、ユーザーが投票したい項目をドラッグ アンド ドロップして順番に並べ替えられるようにすることを検討してください。これにより、はるかに直感的なインターフェイスが提供されます。

于 2010-05-05T02:38:02.040 に答える