Amit's Quiz

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<button>
Kill People!
</button>
<h3>
<span>Click the person holding the knife</span>
</h3>
<div id='output'>
</div>

CSS

body{
  font-family: 'Trebuchet MS', sans-serif;  
  color: steelblue;
}
#output {
  max-width: 420px;
}
.person {
  width: 22px;
  height: 22px;
  margin: 2px;
  text-align: center;
  display: inline-block;
  background: orange;
  color: #333;
  cursor: pointer;
}
.person.selected {
  background: bisque;
}
button {
  float: right;
  margin-right: 30px;
}

JavaScript

var TOTAL_PEOPLE = 100;
var arrPeople = new Array(TOTAL_PEOPLE);
$("#output").empty();
_.each(arrPeople, function(d,i){
	$("#output").append("<div class='person' id='person"+i+"'>"+(i+1)+"</div>");
  arrPeople[i] = $("#person"+i);
});
$(".person").click(function(){
	$(".selected").removeClass("selected");
	$(this).addClass("selected");
  $("h3").html("Person "+$(this).html()+" is holding the knife.");
  $('button').show();
})
$("button").hide().click(function(){ 
	if($(".person").length > 1) {
  	if($(".selected").next().get(0))
  		massacre($(".selected").next());
    else 
    	massacre($(".person:first-child"));
  }
});

function massacre(target) {
  target.fadeOut("fast", function(){ 
  	$(".selected").removeClass("selected");
    var next = $(this).next();
    $(this).remove();
    if($(".person").length > 1) {
    	if(!next.get(0))
    		next = $(".person:first-child");
    	next.addClass("selected");
      if($(".selected").next().get(0))
        massacre($(".selected").next());
      else 
        massacre($(".person:first-child"));
    }  
  });
}