I just learnt some web development and made this simple app. It is a quiz app. You have to click the options and after submission, result is shown. If you want to start again, you can restart with restart button. I know the code is not optimized, thats why I am asking your suggestion on improving this and adding new things. I want one suggestion that when the page loads, the things which i have hidden appear for a short time. pls tell why is happens and how to solve it.
$('document').ready(function(){
var current = 0;
var score = 0;
var question = $('.question');
question.hide();
$('#but').hide();
$('#Score').hide();
$("button[name='start']").click(function () {
$('#First').hide();
$(question[current]).show();
$('#but').show();
});
$('#submit').hide();
$('#prev').attr('disabled',true);
$("#next").click(function(){
$(question[current]).hide();
current++;
$(question[current]).show();
if(current===4){
$('#next').attr('disabled',true);
$('#submit').show();}
$('#prev').attr('disabled',false);
});
$("#prev").click(function(){
$(question[current]).hide();
current--;
$(question[current]).show();
if(current===0){
$('#prev').attr('disabled',true);
}
$('#next').attr('disabled',false);
$('#submit').hide();
});
$("#submit").click(function(){
question.hide();
for(var i=0;i<4;i++){
if(parseInt($(question[i]).find('input[name="options"]:checked').val())===1)
score++;
}
$('#score').text(score);
$("#Score").show();
$('#but').hide();
});
$('#restart').click(function(){
location.reload();
});
});
body{
background-color: #ff0000;
}
#title {
color: #00FFFF;
font-size: 50px;
padding-left: 30px;
}
#main {
margin-top: 50px;
padding-top: 50px;
padding-left: 100px;
padding-right: 100px;
background-color: black;
margin-left: 20px;
margin-right:20px;
height: auto;
padding-bottom: 50px;
}
h1 {
color: red;
text-align: center;
font-size: 50px;
background-color: green;
font-weight: bold;
}
h2 {
color: blue;
text-align: center;
font-size: 40px;
background-color: yellow;
}
.start {
text-align: center;
}
button {
width: auto;
height: 40px;
background-color: #b19cd9;
font-size:20px;
color: #551a8B;
}
p{
color: yellow;
font-size: 40px;
}
#but{
text-align: right;
}
input {
width: 20px;
height: 20px;
}
span{
color:#32CD32 ;
font-size: 30px;
padding-left: 40px;
}
#Score {
text-align: center;
}
h4 {
color: #4169e1;
font-size: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>Quiz app</title>
<script type = 'text/javascript' src = 'jquery-3.2.1.min.js'></script>
<script type = 'text/javascript' src = 'quiz.js'></script>
<link rel="stylesheet" type="text/css" href="quiz.css"></link>
</head>
<body>
<h3 id ='title'>Quiz App</h3>
<div id = 'main'>
<div id = 'First'>
<h1><strong>Welcome to the Programming G.K. Quiz!!!</strong></h1>
<br>
<h2>Click here to begin:</h2>
<div class ='start'>
<button name = 'start'>Start</button>
</div>
</div>
<div class = 'question'>
<p>1) Which is the most popular front-end web scripting language?</p>
<form>
<input name = 'options' type = 'radio'><span>Python</span></input><br><br>
<input name = 'options' type = 'radio'><span>Java</span></input><br><br>
<input name = 'options' type = 'radio' value = 1><span>Javascript</span></input><br><br>
<input name = 'options' type = 'radio'><span>C++</span></input><br><br>
</form>
</div>
<div class = 'question'>
<p>2) Who created Python programming language?</p>
<form>
<input name = 'options' type = 'radio' value = 1><span>Guido van Rossum</span></input><br><br>
<input name = 'options' type = 'radio'><span>Bjarne Stroustrup</span></input><br><br>
<input name = 'options' type = 'radio'><span>Chris Lattner</span></input><br><br>
<input name = 'options' type = 'radio' ><span>James Gosling</span></input><br><br>
</form>
</div>
<div class = 'question'>
<p>3) Which language is used for writing most of the OS kernels?</p>
<form>
<input name = 'options' type = 'radio'><span>Assembly</span></input><br><br>
<input name = 'options' type = 'radio'><span>C#</span></input><br><br>
<input name = 'options' type = 'radio' value = 1><span>C</span></input><br><br>
<input name = 'options' type = 'radio'><span>C++</span></input><br><br>
</form>
</div>
<div class = 'question'>
<p>4) Which of the following language is used in Facebook?</p>
<form>
<input name = 'options' type = 'radio'><span>Scala</span></input><br><br>
<input name = 'options' type = 'radio' value = 1><span>XHP</span></input><br><br>
<input name = 'options' type = 'radio'><span>Perl</span></input><br><br>
<input name = 'options' type = 'radio'><span>Go</span></input><br><br>
</form>
</div>
<div class = 'question'>
<p>5) Which company created C# language?</p>
<form>
<input name = 'options' type = 'radio'><span>Intel</span></input><br><br>
<input name = 'options' type = 'radio'><span>IBM</span></input><br><br>
<input name = 'options' type = 'radio'><span>Apple</span></input><br><br>
<input name = 'options' type = 'radio' value = 1><span>Microsoft</span></input><br><br>
</form>
</div><br>
<div id = 'but'>
<button id = 'prev'>Previous</button>
<button id = 'next'>Next</button>
<button id = 'submit'>Submit</button>
</div>
<div id ='Score'>
<h4> Your score:</h4>
<p id='score'></p><br>
<button id='restart'>Restart</button>
</div>
</div>
</body>
</html>