HTML/CSS - Challenge [Full version] Online Editor and JavaScript Compiler

html

<!-- Requested by Didi Georgel Danaila-->
<!-- Created by Nikky Amresh -->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <div class="nav">
        <img class="back" src="https://image.ibb.co/cfDS7Q/ucrop_ic_next.png" />
       <span class="h1">Challenge</span>
        </div>
        
        
        <div class="result">
            <span class="wld">DRAW</span>
             <img class="p1i" id="rp1" src="https://api.sololearn.com/Uploads/Avatars/3198027.jpg" />
          <span id="rn1" class="pname p1">Nikky Amresh</span>
            <span id="rnn1" class="level l1">LEVEL 16</span>
            <span class="vs">0 : 0</span>
             <img class="p2i" id="rp2" src="https://api.sololearn.com/Uploads/Avatars/1.jpg" />
            
        <span id="rn2" class="pname p2">Sololearn</span>
        <span id="rnn2" class="level l2">LEVEL 13</span>
        <span class="hr1"></span>
         <span class="find">FIND FRIENDS</span>
          <span class="re">REMATCH</span>

css

body {
    background-color: #EFEFEF;
}
.nav{
    background-color: #566E7A;
    color: #fff;
    width:100%;
    height:50px;
    padding:0px;
    position:absolute;
    top:0px;
    left:0px;
    font-weight:bold;
    font-size:23px;
}
img.back{
    position:absolute;
    transform:rotateY(180deg);
    width:16px;
    top:15px;
    left:15px;
}
.h1{
    position:absolute;
    top:13px;
    left:50px;
}
.players{

$(function(){
function uv(a){try{navigator.vibrate(a)}catch(biu){}}
var x=0;
var correct = new Audio("http://ncscproject.esy.es/correct.mp3");
var wrong =new Audio("http://ncscproject.esy.es/wrong.mp3");
$("form").submit(function(){
return false;
});
$("#s1").click(function(){
    $(".lf1").css("-webkit-animation"," time 30s"); $(".left").removeClass("-webkit-animation");
if($("#ans1").val()==3){
x++;
correct.play();
$("#qq1").hide();
$("#s1").hide();
$("#ans1").hide(50);
$(".correct").show();
$(".correct").css("-webkit-animation"," ans 1s");
$(".s1").html(x+" : 1");
$(".qc").hide();
$(".ans").css("color","#7DB343")
}
else{
$(".wrong").show();
wrong.play();
$("#qq1").hide();
$("#s1").hide();
$(".s1").html(x+" : 1");

BROWSER

Console