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>
<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>
  <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>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <!-- ko foreach: assignments -->
            <th><input data-bind="value: workName  + ' ' + ($index() + 1)"/></th>
            <!-- /ko -->
            <th>Class Grade</th>
        </tr>    
    </thead>
    <tbody>
      <!-- ko foreach: students -->
        <tr>
            <td><input data-bind="value: fullName + ' ' + ($index()+1)"/></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>Class Work Average</td> 
          <!-- ko foreach: assignments -->
          <td data-bind="text: $root.workMean($data, $index())"></td>
          <!-- /ko -->
        </tr>  
  </tbody>    
</table>
​
<button data-bind="click: addStudent">Add a Student</button>
</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 = fullName;
                this.scores = ko.observableArray();
                this.mean = (function (scores) {
                    var m = 0;
                    var count = 0;
                    ko.utils.arrayForEach(_this.scores(), function (score) {
                        if (!isNaN(parseFloat(score()))) {
                            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) {
                this.workName = workName;
            }
            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;
                this.students = ko.observableArray([
                    new Gradebook.Model.StudentModel("Jeff Smith"),
                    new Gradebook.Model.StudentModel("Gandalf")
                ]);
                this.assignments = ko.observableArray([
                    new Gradebook.Model.WorkModel("Math"),
                    new Gradebook.Model.WorkModel("Reading")
                ]);
                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.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.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(100));
                        }
                    });
                };
              
                this.updateRows();
            }
            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
anonymouspro
0viewers