Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
  <meta charset="utf-8">
  <title>Gradebook</title>
</head>
<body id="gradebook-app">
​
<h2>Your Classroom Gradebook</h2>
  
<div>
<button data-bind="click: addWork">Add New Assignment</button>
  <button data-bind="click: dropLowestScores">Sort</button>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <!-- ko foreach: assignments -->
            <th><p>      
              <b data-bind="visible: !editing(), text: workName(), click: edit">&nbsp;</b>
              <input data-bind="value: workName, visible: editing, hasFocus: editing"/>
            <select data-bind="options: $root.workTypes, value: workType, optionsText: 'workType'"></select>
              </p></th> 
            <!-- /ko -->
            <th>Student Grade</th>
        </tr>    
    </thead>
    <tbody>
      <!-- ko foreach: students -->
        <tr>
            <td>
              <b data-bind="text: $index()+1"></b>
              <span data-bind="visible: !editing(), text: fullName(), click: edit">&nbsp;</span>
              <input data-bind="value: fullName, visible: editing, hasFocus: editing"/>
            </td>  
            <!-- ko foreach: scores -->  
            <td><input data-bind="value: $rawData"/></td>
            <!-- /ko --> 
            <td data-bind="text: mean($data)" />
            <td><input type="button" value="remove" data-bind="click: $root.removeStudent.bind($root)". /></td>
        </tr> 
      <!-- /ko -->
        <tr>
          <td><b>Class Assignment Average</b></td> 
          <!-- ko foreach: assignments -->
          <td data-bind="text: $root.workMean($data, $index())"></td>
          <!-- /ko -->
          <td></td>
        </tr>  
  </tbody>    
</table>
<button data-bind="click: addStudent">Add a Student</button>
<div id="chart">
  <svg>
  </svg>
</div>
</div>
​
<script type="text/javascript" charset="utf-8" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
​
    ga('create', 'UA-39897695-2', 'google.com');
    ga('send', 'pageview');
​
</script>
</body>
</html>
 
​
 
var Gradebook;
(function (Gradebook) {
    (function () {
        $(document).ready(function () {
            var gradebookApp = new Gradebook.ViewModel.StudentsViewModel;
            ko.applyBindings(gradebookApp, document.getElementById('gradebook-app'));
        });
    })();
})(Gradebook || (Gradebook = {}));
var Gradebook;
(function (Gradebook) {
    (function (Model) {
        var StudentModel = (function () {
            function StudentModel(fullName) {
                var _this = this;
                this.fullName = ko.observable(fullName);
                this.editing = ko.observable(false);
                this.edit = function() { _this.editing(true); };            
                this.scores = ko.observableArray();
                this.lowest = ko.observableArray();
                this.mean = (function(scores) {
                  var m = 0;
                  var count = 0;
                  var k;
​
                  ko.utils.arrayForEach(_this.scores(), function(score) {
​
                    console.log([typeof score(), score()]);
  
                    if (!isNaN(parseFloat(score()))) {
                      k = _this.scores.indexOf(score);
                      console.log(k);
                      console.log(_this.lowest[k]);
                      if (score() != _this.lowest[k]) {
                        m += parseFloat(score());
                        count += 1;
                      }
​
                    }
​
                  });
                  
                 if (count) {
                    m = m / count;
                    return m.toFixed(2);
                  } else {
                    return 'N/A';
                  }
                });
            }
            return StudentModel;
        })();
        Model.StudentModel = StudentModel;
    })(Gradebook.Model || (Gradebook.Model = {}));
    var Model = Gradebook.Model;
})(Gradebook || (Gradebook = {}));
var Gradebook;
(function (Gradebook) {
    (function (Model) {
        var WorkModel = (function () {
            function WorkModel(workName,workType) {
                var _this = this;
                this.workName = ko.observable(workName);
                this.workType = ko.observable(workType);
                this.editing = ko.observable(false);
                this.edit = function() { _this.editing(!_this.editing()); };            
            }
          
            return WorkModel;
        })();
        Model.WorkModel = WorkModel;
    })(Gradebook.Model || (Gradebook.Model = {}));
    var Model = Gradebook.Model;
})(Gradebook || (Gradebook = {}));
var Gradebook;
(function (Gradebook) {
    (function (ViewModel) {
        var StudentsViewModel = (function () {
            function StudentsViewModel() {
                var _this = this;
                var low = [];
              
                this.workTypes = [
                  {workType: 'Homework'},
                  {workType: 'Quiz'},
                  {workType: 'Test'},
                  {workType:  'Project'},
                  {workType:  'Other'}
                ];
              
                this.students = ko.observableArray([
                    new Gradebook.Model.StudentModel("Jeff Smith"),
                    new Gradebook.Model.StudentModel("Gandalf")
                ]);
              
                this.assignments = ko.observableArray([
                    new Gradebook.Model.WorkModel("Math",_this.workTypes[0]),
                    new Gradebook.Model.WorkModel("Reading",_this.workTypes[0])
                ]);
              
                this.workMean = function (work, i) {
                  var m = 0;
                  var count = 0;
                  ko.utils.arrayForEach(_this.students(), function(student){
                    var score;
                    
                    if (typeof student.scores()[i] === 'function') {
                      score = parseFloat(student.scores()[i]());
                    }
                    
                    if (!isNaN(score)) {
                      m += score;
                      count += 1;
                    }
                  });
                  
                  if(count) {
                    m = m / count; 
                    return m.toFixed(2);
                  } else {
                    return 'N/A';
                  }
                };
              
               this.dropLowestScores = function() {
                    ko.utils.arrayForEach(_this.students(), function(student){
                        var comparator = function(a,b){
                          if(a()<b()){
                            return 1;
                          } else if(a() > b()){
                            return -1;
                          } else {
                            return 0;
                          }
                        };       
                        var tmp = student.scores().sort(comparator).slice(0);
                        student.lowest = tmp.splice((tmp.length-2),tmp.length-1);
                    });
                };
              
                this.addStudent = function () {
                    this.students.push(new Gradebook.Model.StudentModel("Student "));
                    this.updateRows();
                };
              
                this.removeStudent = function (student) {
                    this.students.remove(student);
                };
              
                this.addWork = function () {
                    this.assignments.push(new Gradebook.Model.WorkModel("Assignment ",_this.workTypes[0]));
                    this.updateRows();
                };
              
                this.removeWork = function (workName) {
                    this.assignments.remove(workName);
                };
              
                this.updateRows = function () {
                    ko.utils.arrayForEach(_this.students(), function (student) {
                        while (student.scores().length < _this.assignments().length) {
                            student.scores.push(ko.observable(Math.floor(Math.random() * 100) + 1));
                        }
                    });
                };
              
            }
            return StudentsViewModel;
        })();
        ViewModel.StudentsViewModel = StudentsViewModel;
    })(Gradebook.ViewModel || (Gradebook.ViewModel = {}));
    var ViewModel = Gradebook.ViewModel;
})(Gradebook || (Gradebook = {}));
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jefftopiapro
0viewers