ansaurus

Question

Using javascript to limit survey choices to three unique values

Answer 1

A:

Caveat: the following code has issues. It's not intended to be dropped-in, as-is to your page. It's an illustration of technique that you can apply. Study it and write your own solution.

One option would be to record unavailable options whenever a choice is made.

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);

Instead of separate count and chosen variables, you could refactor and create a Set class, which simplifies choice a bit:

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);

Bind choose to each select's onchange attribute (though think hard before taking this approach, as inline event subscriptions are probelmatic), or use DOM events and subscribe the following listener:

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

If you can make more changes, consider using something like jQuery's UI interactions (specifically, UI/Draggable, UI/Droppable and UI/Sortable) to allow the user to drag & drop the items they want to vote for and sort them in order. This provides a much more intuitive interface.

outis 2010-05-05 02:38:02

Thank you!This is a great start, and I appreciate the time you've spent putting this together.

leanne 2010-05-05 14:16:49

ansaurus

tags:

views:

answers:

Using javascript to limit survey choices to three unique values

related questions