Virtual Chat Room

Just some object stuff going on.

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<button type="button" id="addPerson">Add Person</button>
<button type="button" id="conversation">Force Conversation</button>
<button type="button" id="roomchange">Change Rooms</button>
<hr/>
<div class="roster" id="roster">
</div>
<div class="roomchange" id="roomchange">
    <strong>Room:</strong>
</div>
<div class="dialogue" id="dialogue">
    <strong>Dialogue:</strong>
</div>

<script id="memberTemplate" type="text/template">
    <p class="member">
        <span class="role"><%= role %></span>
        <%= name %>
    </p>
</script>

<script id="messageTemplate" type="text/template">
    <p class="message">
        <span class="speaker"><%= name %></span>
        <%= message %>
    </p>
</script>

CSS

.roster {
    float: left;
    width: 50%;
}

.dialogue {
    margin-left: 50%;
}

.role {
    float : left;
    width: 25%;
    color: blue;
    font-weight: bold;
}

.speaker {
    float : left;
    width: 25%;
    color: red;
    font-weight: bold;    
}

JavaScript

var NS = NS || {};

var Roster = function(){
    var roster = this;
    this.members = [];
    this.addPerson = function(role, name){
        var aPerson = new Person();
        aPerson.role = role;
        aPerson.name = name;
        roster.members.push(aPerson);
    };
    this.randomSpeaker = function(){
        var ind = Math.floor(Math.random()*roster.members.length);
        return roster.members[ind];
    };
    this.addPerson("Doctor", "Andy");
};

var Person = function(){
    var person = this;
    var people=["John Doe", "Jane Doh", "Josh"];
    var roles= ["Gossiper", "Zoologist", "Chef"];
    var i= Math.floor(Math.random()*people.length);
    var j=Math.floor(Math.random()*roles.length);
    this.name = people[i];
    this.role = roles[j];
    this.toJSON = function(){
        return {
            name : person.name, 
            role : person.role
            
        };
    };
    this.speakTo = function(subject){
       return "Hello "+subject.name+", I am "+person.name+". I am a "+person.role;
    };
};
var Room= function(){
    var room= this;
    this.rooms= ["Animals", "Food", "Games"];
    var ind = Math.floor(Math.random()*Room.rooms.length);
    this.name= room[ind];
   
};
var AppController = function(){
    var app = this;
    app.roster = new Roster();
    app.displayRoster = function(roster){
        var memberTemplate = _.template($("#memberTemplate").html());
        $("#roster").html("<strong>Roster:</strong> ");
        _.each(app.roster.members, function(member){
            $("#roster").append(memberTemplate(member.toJSON()));
        });
    };
    app.displayRoster();
    app.person= new Person();
    app.room= new Room();
    app.roomselect= $("#roomchange").append(room.name);
    app.makeConversation = function(){
        var speaker = app.roster.randomSpeaker();
        var subject = app.roster.randomSpeaker();
        var message = speaker.speakTo(subject);
        console.log(message);
        console.log(subject);
       ...