JSFiddle - React, Tailwind, and code Playground

HTML

<!--A fox hides in one of eleven holes. These holes are placed in a line. Each night the fox moves from its current hole to a neighboring one, left or right. Each morning you can check one hole. Is there a strategy that makes sure you catch the fox?-->

Click on a hole to check it. <br /> <br />
<button>Hide the fox</button>
<a href="#">Reset</a>
<div id="gauri">
</div>

<div id="msj"></div>

CSS

body{
    background:#eaffad;
    padding-top:20px;
    padding-left:10px;
}
button{
    margin-bottom:20px;
    padding:10px;
    cursor:pointer;
}

#gauri{
    overflow:hidden;
}
.hole{
    width:50px;
    height:25px;
    padding-top:25px;
    text-align:center;
    color:white;
    background:#ccc;
    border:1px solid brown;
    float:left;
    margin:2px;
    cursor:pointer;
    border-radius:25px;
    -o-border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    background:black;
    box-shadow:0px 0px 15px #d9ff72;
}
.hole:hover{
    box-shadow:0px 0px 5px white;
}
.vulpe{
    background:url('http://i269.photobucket.com/albums/jj72/myem0/02/fox-emo-007.gif');
}
.prinsa{
    background:url('http://i269.photobucket.com/albums/jj72/myem0/02/fox-emo-005.gif') !important;
}

#msj{
    padding:10px;
    width:300px;
    margin:25px;
    text-align:center;
    background: #e570e7; /* Old browsers */
background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* IE10+ */
background: linear-gradient(to bottom, #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */
    overflow:hidden;
    color:white;
    font-weight:bold;
    border-radius:5px;
    border:1px solid #9b0067;
    text-shadow:1px 1px 0px #9b0067;
    display:none;
}

JavaScript

var N = 11;
var vulpe;

for(i=1; i<=N; ++i)
    $('#gauri').append("<div class='hole' title='Verifica aici!'>"+i+"</div>");
 
function reset(){
    vulpe = Math.round(Math.random() * N);
    $('.hole').removeClass("vulpe").removeClass("prinsa");
    $('.hole:nth-child('+vulpe+')').addClass("vulpe");
    $('#msj').text("Hmm, the fox is not here :(");
    $('#msj').hide(100);
}
function misca_vulpe(){
   if(vulpe == 1)
       vulpe =2;
    else if(vulpe==N)
        vulpe = N-1;
    else if(Math.random() > 0.5)
        vulpe--;
    else vulpe++;
    $('.hole').removeClass("vulpe").removeClass("prinsa");
    $('.hole:nth-child('+vulpe+')').addClass("vulpe");
    console.log(vulpe);
}
$('.hole').click(function(){
    
   
    if($(this).hasClass("vulpe")){
        $(this).addClass("prinsa");
        $('#msj').text("Congratulations, you have caught the fox!").show(300);
    }
    else{
        $('#msj').stop(0,1).slideDown(100).delay(500).fadeOut(100);
        misca_vulpe(); 
    }
});

var p = $("<style>.vulpe{ background:black}</style>");
$('button').click(function(){
    if($(this).text() == "Hide the fox"){
        $('body').append(p);
        $(this).text("Show the fox");
    }
    
    else {
        $(this).text("Hide the fox");
        p.remove();
    }
});
reset();
$('a').click(function(){ reset(); });