Javascript multiple choice questions

Check the test here
 <script language="javascript" type="text/javascript">
function check(id)
{
document.getElementById("alert").innerHTML = "Conifirm Answer";
var ad= document.getElementById("num").innerHTML;
var u = parseInt(ad);

if (ad<1)
{
document.getElementById("preque").value= id;
goadd();
}

else
{
document.getElementById("answer").value= id;

change();

var opt= opt;

if (id == "opt"+d1[u][4])
{
document.getElementById("ans").innerHTML="1";
document.getElementById(id).style.backgroundColor='#CCCCFF';
}
else
{
document.getElementById("ans").innerHTML="0";
document.getElementById(id).style.backgroundColor='#CCCCFF';
}

}

}

function change()
{
document.getElementById("opt1").style.backgroundColor='#cccccc';
document.getElementById("opt2").style.backgroundColor='#cccccc';
document.getElementById("opt3").style.backgroundColor='#cccccc';
document.getElementById("opt4").style.backgroundColor='#cccccc';
}

function goadd()
{

change();

if (document.getElementById("alert").innerHTML=="Select Answer")
{
document.getElementById("alert").innerHTML == "Select Answer";
}


else

{
addnext();
}

function addnext()
{
var adt= "1"; 
var ad= document.getElementById("num").innerHTML;
var u = parseInt(ad)+parseInt(adt);

document.getElementById("opt0").innerHTML='<p>'+ d1[u][5];
document.getElementById("numimg").innerHTML= '<img src='+d1[u][6]+'.jpg><br />';
document.getElementById("num").innerHTML= u;
document.getElementById("opt1").innerHTML='<a href="javascript:void(0);">'+d1[u][0]+'</a>';
document.getElementById("opt2").innerHTML='<a href="javascript:void(0);">'+d1[u][1]+'</a>';
document.getElementById("opt3").innerHTML='<a href="javascript:void(0);">'+d1[u][2]+'</a>';
document.getElementById("opt4").innerHTML='<a href="javascript:void(0);">'+d1[u][3]+'</a>';
document.getElementById("alert").innerHTML = "Select Answer";

var sco= document.getElementById("score").innerHTML;
var scadd=document.getElementById("ans").innerHTML;
var totscore= parseInt(scadd)+parseInt(sco);

document.getElementById("score").innerHTML = totscore;

var fscore = (totscore / ad)*100;

if(ad > 0 )
{
var p =  d1[u-1][4];
document.getElementById("preque").innerHTML= d1[u-1][5]+'</p>'+d1[u-1][p-1];
}

if(d1[u][0]==="end")
{
var p =  d1[u-1][4];
document.getElementById("preque").innerHTML='<p>'+ d1[u-1][5]+'</p>'+d1[u-1][p-1];
document.getElementById("num").innerHTML=0;
document.getElementById("alert").innerHTML="Your Score is "+fscore+"% ";

if(fscore < 80) 
{
document.getElementById("numimg").innerHTML='<img src="fail.jpg">';
}
else
{
document.getElementById("numimg").innerHTML='<img src="pass.jpg">';
}

}

if(ad==0)
{
document.getElementById("score").innerHTML=0;
}
}
}

//Code for questions listing.js
//You need to create arrays with 4 options , answers and image name.d1[1], d1[2], d1[3] ... etc.

//------------------------------------------------------
var d1 = new Array();  

d1[1]=["option 1","option 2","option 3","option 4","4","question","image name"];
d1[2]=["Pop","Metal","Death Metal","Grunge","1","Britney Spears sings ?","britneyspears"];
d1[3]=["Doctor","Teacher","RN","Heiress","4","Paris Hilton is ---","Paris Hilton"];
d1[4]=["end"];
//------------------------------------------------------
</script>

This comes in the body
=========================
<style type="text/css"> #dl1 { width: 100%; min-height: 450px; float: left; color: #22241A; font-family:arial; font-size: 15px; font-weight: bold; text-align: left; background-color: #8EA4AB; overflow: hidden; } #dl { height: 350px; overflow: visible; width: 650px; float: left; text-align: left; padding-left: 20px; } #result1 { height: 250px; } #num { width: 17px; background-color: #cccccc; float: left; padding-left: 2px; } #tex { float: left; background-color: #cccccc; } #score { float: left; background-color: #cccccc; clear: right; width: 30px; padding-left: 5px; overflow: hidden; } #sbord { float: right; } #opt0 { margin-top: 10px; width: 550px; height: 40px; clear: left; background-color:none; } #numimg { width: 150px; padding-top: 50px; text-align: center; float: left; } #opt1, #opt2, #opt3, #opt4 { margin-top: 15px; height: 38px; line-height: 15px; font-size: 12px; overflow: hidden; padding-top: 3px; } #result1 a { height: 38px; display: block; width: 650px; display: block; text-decoration: none; padding-left: 15px; color: #32332A; } #result1 a:hover { background-color: #ffffff; border-color:#FF0000; } Input { float: left; } #alert { width: 250px; text-align: left; font-size: 12px; font-family: verdana; padding-left: 10px; height: 18px; float: left; clear: right; line-height: 17px; } #preque { width: 930px; height: 100px; float: left; font-size: 12px; background-color: #808E9C; padding-left: 5px; padding-top: 5px; overflow: hidden; color: #22241A; } </style> <div id="dl1"> <div id="dl"> <div id="result1"> <div id="opt0"></div><p> <div id="opt1" onclick="check(this.id)"></div> <div id="opt2" onclick="check(this.id)">Click Here to Start to Sample Test</div> <div id="opt3" onclick="check(this.id)">After Starting Select Right Answer and Conform</div> <div id="opt4" onclick="check(this.id)"></div> </div> <script language="javascript" type="text/javascript" src="listing.js"></script> <script language="javascript" type="text/javascript" src="que.js"></script> <div id="ans" style="visibility:hidden;">0</div> <input type="hidden" id="answer" size="20"> <input type="button" value="Go Next" onclick="goadd();"/> <div id="alert"></div> </div> <div id="num">0 </div> <div id="tex"> / 20 Question : Score : </div> <div id="score"> 0</div> <div id="numimg"> </div> <div id="preque"></div> </div>
====================
About the Code : This works mainly on innerHTML and array. When you click the next button the 5 DIVs opt0 to opt 5 gets the innerHTML from array d1[1]. If the user selects the answer it asks you to confirm by changing the innerhtml in that DIV to "Confirm Answer".On not clicking the answer it asks you to select the answer.When you click next when its Conforming the answer,it takes the number from DIV 'num' and displays the relative question ex d1[2]. In each array the first 4 options are for questions questions and 5 th one for answer 1 to 4. If you selected 3rd one means the d1[2][5]= 3 when you click next it checks the value with the div id 'opt3' by adding opt to 3 and adds one point in the socre or adds 0 on wrong answer. you can add image name in 7th field and 6 th field is for question.you can write your own questions but keep the lost one as d1[n]=["end"];. Also there is code for DIV background color change after clicking and mouseover.Feel free to levve comment if you have questions i'll answer, plase check the adding video tutorial using javascript.