Faggot check

by Dru Dro

HTML

<h1>Check whether you are a <span class="faggot">faggot</span></h1>
<h2>Answer fast with no thinking. Just "YES" or "NO". Default is "NO"...</h2>
<form>
    <div class="question"><input type="checkbox" id="switch1"/>
    <label for="switch1"></label><span>Are you famous?</span></div>
<div class="question"><input type="checkbox" id="switch2"/>
    <label for="switch2"></label><span>Do you have an iPhone?</span></div>
<div class="question"><input type="checkbox" id="switch3"/>
    <label for="switch3"></label><span>Do you like Justin Bieber's songs?</span></div>
<div class="question"><input type="checkbox" id="switch4"/>
    <label for="switch4"></label><span>Are you a faggot?</span></div>
<div class="question"><input type="checkbox" id="switch5"/>
    <label for="switch5"></label><span>Do you always deny that you are a faggot?</span></div>
<br/>
<div class="destiny">YOU're a FAGGOT!!!</div>
<br/>
<button type="submit" value="submit">submit</button>
</form>

CSS

body {
    padding: 0;
    margin: 0;
    background: #000;
}
h1,h2 {    
    font-family: Arial, sans-serif;
    font-size: 50px;
    color: #fff;
}
h2 {
    font-size: 25px;
}
input {
    display: none;
}
label {
    display: block;
    position: relative;
    width: 120px;
    height: 35px;
    background: #f55;
    cursor: pointer;
}
label:active {
    width: 130px;   
}
label:before {
    position: absolute;
    width: 120px;
    height: 35px;
    color: #000;
    content: "no"; 
    text-transform: uppercase;
    line-height: 50px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 50px;
    top: -6px;
}
label:after {
    position: absolute;
    right: -15px;
    width: 0;
    height: 0;
    content: ""; 
    border-bottom: 17px solid transparent;
    border-top: 17px solid transparent;
    border-left: 15px solid #f55;
}
input:checked + label {
    background: #0a5;
}
input:checked + label:before {
    content: "yes";   
}
input:checked + label:after {
    border-left: 15px solid #0a5;
}
.question {
    position: relative;
    width: 100%;
    height: 35px;
}
.question span {
    color: #fff;
    position: relative;
    left: 150px;
    top: -35px;
    font-family: Arial, sans-serif;
    font-size: 25px;
}
.faggot {
    color: #f5a;
}
.destiny {
    display: none;
    color: #f5a;
    font-family: Arial, sans-serif;
    font-size: 50px;
    text-align: center;
}
submit {
    }
button {
    display: block;
    position: relative;
    border: none;
    width: 100%;
    height: 35px;
    background: #0a5;
    cursor: pointer;
}

JavaScript

$( 'form' ).submit(function( event ) {
    if($('#switch5').prop('checked')){
        $('.destiny').html('It seems you have thought a bit on the last question. So the test can not unambiguously identify whether you are not a faggot. Sooo... You seem to be a faggot!').fadeIn(100).fadeOut(100).fadeIn(100);        
    }
    else {        
        $('.destiny').fadeIn(100).fadeOut(100).fadeIn(100);
    }
  event.preventDefault();
});