Design Rubric

by wrxsti85

HTML

<form name="jimmyDoesAFlip">
<h1> Design Rubric</h1>
<table border="1" style="width:100%">
    <tr>
        <td>Category</td>

        <td>Failure
            <br/> 1 Point</td>

        <td>Below Standard
            <br/> 2 Points</td>

        <td>Standard
            <br/> 3 Points</td>

        <td>Above Standard
            <br/> 4 Points</td>
        <td>Score</td>
    </tr>

    <tr>
        <td>1. Simplicity</td>

        <td>
            <input name="simplicity[]" type="radio" value="1" />
        </td>

        <td>
            <input name="simplicity[]" type="radio" value="2" />
        </td>

        <td>
            <input name="simplicity[]" type="radio" value="3" />
        </td>

        <td>
            <input name="simplicity[]" type="radio" value="4" />
        </td>
        <td></td>
    </tr>

    <tr>
        <td>In terms of Web design, simplicity refers to an approach to express something in a complete and efficient way.</td>

        <td>• web page is too busy
            <br/>
            <br/> • people reading it cannot find what they want quickly. excessive use of graphic elements</td>

        <td>• web page is somewhat busy
            <br/>
            <br/> • people reading it will have difficulty finding what they want quickly. excessive use of graphic elements</td>

        <td>• content is simple and to the point.
            <br/>
            <br/> • appealing graphic elements are included appropriately.
            <br/>
            <br/> • differences in type size and/or color are used well</td>

        <td>• content is simple and to the point.
            <br/>
            <br/> • design is easy to understand in many ways</td>
    </tr>

    <tr>
        <td>2. Consistency</td>

        <td>
            <input name="consistency[]" type="radio" value="1" />
        </td>

        <td>
            <input name="consistency[]" type="radio" value="2" />
        </td>

        <td>
            <input name="consistency[]"...

JavaScript

var values = [];

var sumVals = function(){
    var t = 0;
    $.each(values, function(i, v){ if(v){ t += v;} });
    return t;
};

$('input').on('change', function(){
    var v = $(this).val();
    var row = $(this).parents('tr');
    values[row.index()] = parseInt(v);
    row.children('td:last').text(v);
    $("#totals").text(sumVals());
});

$('form[name="jimmyDoesAFlip"]').on('submit', function(e){
    e.preventDefault();
    var formData = $(this).serialize();
    alert(formData);
});