I recently built a survey using the jQuery Star Rating Widget. With a little work and jQuery magic I came away with a survey that looks good, provides the ability to add an explanation when the user selects a value on the the low end of the scale and degrades fairly gracefully when JavaScript is disabled.

Live Demo | Download

JavaScript Enabled:

A Low Rating with JavaScript Enabled:

All jQuery Involved:

    $(document).ready(function() {

        $(".wrapper").each(function(i) {
            var explanationDiv = $(this).find(".explanation");
            var explanationText = $(this).find(".explanationText");
            var hdnField = $(this).find(".explanation >input:hidden");
            var ratingLabel = $(this).find(".ratingLabel");
            var ratingCap = $(this).find(".rating");

            //Hide the radio button labels since we don't need because javascript is enabled
            ratingLabel.hide();

            //Show the rating label we do need.
            ratingCap.show();

            //Hide the explanation section since javascipt is enabled
            explanationDiv.hide();

            //Turn the radio buttons into our stars
            $(this).find(".question").stars({
                captionEl: $(this).find(".caption")
            });

            $(this).find(".question").click(function() {
                var instance = $(this).data("stars");
                $(this).find(".caption");
                hdnField.val(instance.options.value);

                if (instance.options.value == 1 || instance.options.value == 2) {
                    explanationDiv.show();
                    if (explanationText.val() == "NA") {
                        explanationText.val('').focus();
                    }
                    else {
                        explanationText.focus();
                    }
                }
                else {
                    explanationDiv.hide();
                    explanationText.val("NA");
                }
            });
        });
    });

HTML for First Rating:

        <div class="wrapper">
            <div class="questionHeader">
                1.&nbsp;<asp:Label ID="LabelQ1" runat="server">Staff was courteous and helpful.</asp:Label>
            </div>        
            <div id="stars1" class="question">
                <div class="rating" style="display:none;">
                    Rating:
                    <span id="cap1" class="caption"></span>            
                </div>
                <input id="rating1A" name="newrate1" value="1" title="Strongly Disagree" type="radio" /> 
                    <label class="ratingLabel" for="rating1A">Strongly Disagree</label>
                <input name="rating1B" value="2" title="Disagree" type="radio"/> 
                    <label class="ratingLabel" for="rating1B">Disagree</label>                
                <input name="rating1C" value="3" title="Neutral" type="radio" checked="checked"/> 
                    <label class="ratingLabel" for="rating1C">Neutral</label>                
                <input name="rating1D" value="4" title="Agree" type="radio"/> 
                    <label class="ratingLabel" for="rating1D">Agree</label>                
                <input name="rating1E" value="5" title="Strongly Agree" type="radio"/> 
                    <label class="ratingLabel" for="rating1E">Strongly Agree</label>                
            </div>
            <div class="explanation" id="e1">
                <asp:Label ID="LabelA1" runat="server" Text="Explanation" Font-Bold="true" AssociatedControlID="TextBoxA1"></asp:Label><br />
                <asp:TextBox ID="TextBoxA1" runat="server" TextMode="MultiLine" maxlength="1000" Rows="3" CssClass="explanationText" Width="500px" Text="NA"></asp:TextBox>
                <asp:HiddenField ID="HiddenFieldQ1" runat="server" Value="0" />
            </div>                
        </div>

JavaScript Disabled:

I hope this helps you get started. I will leave it to you to figure out how to validate and then capture the data and store it in whatever repository you choose.

    [dzone]