take this as a draft:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Quiz</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;padding-top:250px;}
input[type=radio]{margin-left:15px;margin-right:10px;cursor:pointer;}
b{font-style:italic;}
#info{position:absolute;top:10px;right:20px;display:none;border:2px solid #000;border-radius:10px;padding:50px 50px;font-size:36px;font-weight:bold;}
#score{font-style:italic;}
.gr{color:Green;font-weight:bold;}
.cr{color:Crimson;font-weight:bold;}
</style>
<script type='text/javascript'>//<![CDATA[
var curr=0,rights=0,wrongs=0,questions=[
['Does 3 + 3 = 7?','no'],
['Does the Earth spin?','yes'],
['Do cats bark?','no'],
['Does the Internet exist?','yes'],
['Is <b>webdeveloper.com</b> the best internet resource?','yes'],
['Is this the last question of the Quiz?','yes']
];
function ask(){
if(curr < questions.length){
$('#question').html('Question '+(curr+1)+': '+questions[curr][0]);
}
else{
var R=Math.round((rights/questions.length)*100),
W=Math.round((wrongs/questions.length)*100),
resume='not bad';
if(W==100){resume='hopeless and pathetic stupid ass';}
if(W>0 && W<50){resume+=', but still not excellent';}
if(R==100){resume='genious';}
if(R>0 && R<50){resume+=', but please quit drinking';}
if(W==50 && R==50){resume='Rain Man';}
document.getElementById('frm').reset();
$('#question').empty();
$('#frm').fadeOut('normal',function(){
$('#score').html('The total score is: <span class="gr">'+R+'%</span> vs <span class="cr">'+W+'%</span><br /><br />According to the Quiz results You just has been considered:<br /><br /><b style="font-size:18px;">"'+resume+'"</b><h1>Congratulations!</h1>');
});
}
}
function inf(val){
var bg,col;
switch(val){case'Right':bg='#BCD379',cl='Green',rights++;break;case'Wrong':bg='#F3D326',cl='Crimson',wrongs++;break;}
$('#info').empty().html('<span class="'+cl+'">'+val+'</span> answer!').css('background-color',bg).show(10,function(){
$(this).fadeOut(1200,function(){
$('#score').html('The total score is: <span class="gr">'+rights+'</span> vs <span class="cr">'+wrongs+'</span> from '+questions.length+' questions');
curr++;document.getElementById('frm').reset();ask(curr);
});
});
}
$(window).load(function(){
ask(curr);
$('#score').html('The total score is: <span class="gr">'+rights+'</span> vs <span class="cr">'+wrongs+'</span> from '+questions.length+' questions');
$('[name="answer"]').click(function(){inf(($(':checked').val()===questions[curr][1])?'Right':'Wrong');});
});//]]>
</script>
</head>
<body>
<div>
<div id="info"></div>
<div id="score"></div>
<div id="question"></div>
<form id="frm" action=""><input type="radio" name="answer" value="yes" />Yes<input type="radio" name="answer" value="no" />No</form>
</div>
</body>
</html>
live demo