Wie konvertiert man eine numerische Ziffer dynamisch in eine alphabetische Note?

Question

Der folgende Code berechnet einen durchschnittlichen Notendurchschnitt von A + bis E-.

---

Ist es möglich, innerhalb der folgenden Geige neben dem Notendurchschnitt eine Note von A + bis E- anzuzeigen. Bisher gibt der Benutzer seine Noten von A + nach E- ein und konvertiert das Ergebnis in einen Notendurchschnitt.

Wenn eine neue Geige bitte zur Verfügung gestellt werden könnte, wäre es sehr geschätzt, da ich noch neu in der Codierung bin.

Fiddle

Danke

HTML:

<button class="button" data-bind="click: addClass">Add a New Class</button> 
<button class="button"> 
Apply 
</button> 
<hr> 

<ul align="center" data-bind="foreach: classes"> 
    <li> 
     <label>Subject:</label><input type="text" data-bind="value: title" placeholder="E.g: English"/> 
     <select disabled data-bind="value: credits"> 
     <option selected data-bind="value: credits">1</option> 
     </select> 
     <label>Grade:</label> 
     <input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/> 
     <br> 
     <br> 
    </li> 
</ul> 



<hr /> 

<br> 
<h4> 
Your GPA is: <b><span data-bind="text: totalGPA"></span></b> 
</h4> 
<br> 
<h4> 
Final Grade: <span><i>(Where Users Grade is Calculated from A+ to E-)</i></span> 
</h4> 

JQuery:

function Class(title, credits, letterGrade) { 
    var self = this; 
    var gradeMapping = { 
     'A+': 15, 
     'A': 14, 
     'A-': 13, 
     'B+': 12, 
     'B': 11, 
     'B-': 10, 
     'C+': 9, 
     'C': 8, 
     'C-': 7, 
     'D+': 6, 
     'D': 5, 
     'D-': 4, 
     'E+': 3, 
     'E': 2, 
     'E-': 1 
    } 
    self.title = ko.observable(title); 
    self.credits = ko.observable(credits); 
    self.letterGrade = ko.observable(letterGrade); 
    self.gpa = ko.computed(function() { 
     return gradeMapping[self.letterGrade()]; 
    }); 
} 

function GpaCalcViewModel() { 
    var self = this; 
    self.classes = ko.observableArray(); 
    self.totalGPA = ko.computed(function() { 
     var totalWeightedGPA = 0, 
      totalCredits = 0; 
     $.each(self.classes(), function() { 
      totalWeightedGPA += (this.gpa() * this.credits()); 
      totalCredits += (this.credits() * 1); 
     }) 
     return totalWeightedGPA/totalCredits; 
    }); 
    self.addClass = function() { 
     self.classes.push(new Class()); 
    } 
}; 
var viewModel = new GpaCalcViewModel(); 
ko.applyBindings(viewModel); 

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400); 
* { text-rendering: optimizelegibility;} 
body, input, textarea, select, button { font-family: 'Open Sans', sans-serif; } 
pre { font-family: 'Inconsolata', monospace; } 

span {font-size: 18px;} 


h1 {font-size: 25px;} 

Answer 1

Zuerst, um Wert zu erhalten, wo Sie wollen, müssen Sie Daten-binden es data-bind="text: totalGrade".

Zweitens müssen Sie gradeMapping Array außerhalb class Funktion verschieben, um es global zugänglich zu machen.

Und drittens müssen Sie GPA rückwärts auf Grad zu mappen.

var gradeMapping = { 
 
     'A+': 15, 
 
     'A': 14, 
 
     'A-': 13, 
 
     'B+': 12, 
 
     'B': 11, 
 
     'B-': 10, 
 
     'C+': 9, 
 
     'C': 8, 
 
     'C-': 7, 
 
     'D+': 6, 
 
     'D': 5, 
 
     'D-': 4, 
 
     'E+': 3, 
 
     'E': 2, 
 
     'E-': 1 
 
    } 
 
function Class(title, credits, letterGrade) { 
 
    var self = this; 
 
    self.title = ko.observable(title); 
 
    self.credits = ko.observable(credits); 
 
    self.letterGrade = ko.observable(letterGrade); 
 
    self.gpa = ko.computed(function() { 
 
     return gradeMapping[self.letterGrade()]; 
 
    }); 
 
} 
 

 
function GpaCalcViewModel() { 
 
    var self = this; 
 
    self.classes = ko.observableArray(); 
 
    self.totalGPA = ko.computed(function() { 
 
     var totalWeightedGPA = 0, 
 
      totalCredits = 0; 
 
     $.each(self.classes(), function() { 
 
      totalWeightedGPA += (this.gpa() * this.credits()); 
 
      totalCredits += (this.credits() * 1); 
 
     }) 
 
     return totalWeightedGPA/totalCredits; 
 
    }); 
 
    self.totalGrade = ko.computed(function() { 
 
     var totalWeightedGPA = 0, 
 
      totalCredits = 0; 
 
     var gradeLetter = null; 
 
     $.each(self.classes(), function() { 
 
      totalWeightedGPA += (this.gpa() * this.credits()); 
 
      totalCredits += (this.credits() * 1); 
 
     }); 
 
     $.each(gradeMapping, function(letter, number) { 
 
     \t \t if(number == Math.round(totalWeightedGPA/totalCredits)){ 
 
      \t gradeLetter = letter; 
 
      } 
 
     }) 
 
     return gradeLetter; 
 
    }); 
 
    self.addClass = function() { 
 
     self.classes.push(new Class()); 
 
    } 
 
}; 
 
var viewModel = new GpaCalcViewModel(); 
 
ko.applyBindings(viewModel);

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 
 
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400); 
 
* { text-rendering: optimizelegibility;} 
 
body, input, textarea, select, button { font-family: 'Open Sans', sans-serif; } 
 
pre { font-family: 'Inconsolata', monospace; } 
 

 
span {font-size: 18px;} 
 

 

 
h1 {font-size: 25px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script> 
 
<button class="button" data-bind="click: addClass">Add a New Class</button> 
 
<button class="button"> 
 
Apply 
 
</button> 
 
<hr> 
 

 
<ul align="center" data-bind="foreach: classes"> 
 
    <li> 
 
     <label>Subject:</label><input type="text" data-bind="value: title" placeholder="E.g: English"/> 
 
     <select disabled data-bind="value: credits"> 
 
     <option selected data-bind="value: credits">1</option> 
 
     </select> 
 
     <label>Grade:</label> 
 
     <input type="text" data-bind="value: letterGrade" placeholder="E.g: A+"/> 
 
     <br> 
 
     <br> 
 
    </li> 
 
</ul> 
 

 

 

 
<hr /> 
 

 
<br> 
 
<h4> 
 
Your GPA is: <b><span data-bind="text: totalGPA"></span></b> 
 
</h4> 
 
<br> 
 
<h4> 
 
Final Grade: <span data-bind="text: totalGrade"></span> 
 
</h4>

Hier ist voll jsFiddle mit Beispiel: jsFiddle