knockout. image according to number of items in list

I am new to knockout. I have following data

var students = [
    { Id: 1, FName: "Fname1", MName = "MName1", LName = "LName1" },
    { Id: 2, FName: "Fname2", MName = "", LName = "LName2"  },
    { Id: 3, FName: "FName3", MName="", LName="" }
];

I have following View Model

 var viewModel = {
      //data
      members: ko.observableArray(students),
      //Behaviors
      addMember: function (memberName) {
          this.students.push({ Name: memberName });
     }
 };

ko.applyBindings(viewModel);

Following is the view

  <div data-bind="foreach: members">
<div style="border: solid 1px blue; margin-left: 10px; margin-top: 5px; float: left; height: 50px; width: 100px;" data-bind="drag: {value: $data}">
    <span data-bind="text: Name"></span>
    <div id="secondDiv"></div>
</div>

In the second div, I want to show image based on following if student has all 3 names, show green arrow if student has only 2 names, show yellow arrow if student has only 1 name, show red arrow.

Also I want to get mousehover on these arrows.

Can any one help me?