1
\$\begingroup\$

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>

Improve this question
\$\endgroup\$
5
  • \$\begingroup\$ Is the code as you see it here the same as the code you see in your IDE (e.g. is whitespacing the same?) \$\endgroup\$
    – Sumurai8
    Dec 25 '17 at 16:16
  • \$\begingroup\$ @Sumurai8 yes. its same. I didnt use IDE btw, I used Atom. \$\endgroup\$
    – Gameatro
    Dec 26 '17 at 0:51
  • 1
    \$\begingroup\$ @Gameatro Isn't Atom an IDE? \$\endgroup\$
    – Simon Forsberg
    Dec 26 '17 at 1:17
  • \$\begingroup\$ Please do not update the code in your question to incorporate feedback from answers, doing so goes against the Question + Answer style of Code Review. This is not a forum where you should keep the most updated version in your question. Please see what you may and may not do after receiving answers. \$\endgroup\$
    – Simon Forsberg
    Dec 26 '17 at 1:18
  • 1
    \$\begingroup\$ @SimonForsberg Atom is text editor, not IDE. Well, i didnt knew of that update answer part, sorry abt that. \$\endgroup\$
    – Gameatro
    Dec 26 '17 at 2:21
4
\$\begingroup\$

Note: My reviews try to be exhaustive, but do not necessarily catch every mistake. I also tend to group up problems and give a single example, even if there a multiple occurences of this problem.

Structural improvements

Scoping

jQuery is a library. Your code assumes that the $ variable is jQuery, but there are other libraries that use that variable as a quick way to access the library.

In this case you have all your code in a single ready function, so your variables are already scoped within that function. If you have other code however, it would be scoped in the global scope.

To prevent possible issues with your code when you add new things at a later stage, you should wrap your code in an Immediate Invoked Function Expression (IIFE). The IIFE scopes everything inside it within that function, preventing spilling information into the global scope and fixes the context, which is in your case the jQuery dependency. You would end up with something like this:

(function ($) {
  // Your code here
})(jQuery);

Html5 syntax

You are using invalid syntax in your html. For example, the link tag is a tag that may never have an end tag. See mdn for more information.

You also have a script tag before the doctype declaration, but I think this occured because you put your code inside a snippet and added a dependency.

Headings

The <h1> through <h6> tags are meant to indicate the hierarchy of content. You cannot use whatever you like to get a certain size you want, because spiders from (for example) Google have more trouble understanding your site and thus will index it lower. Instead use spans with a class if you have something you like to be styled like a heading, but should not appear in the structure tree.

Consistency

Be consistent with how you write your code. In particular, look at: - Your use of indentations. Close your html tags with the same indentation as the starting tag. - Your use of whitespace. You sometimes have spaces around your html attributes and sometimes you do not. You sometimes have spaces around function declarations and sometimes you do not. - Your use of quotes. Use either single or double quotes, and escape that character if you need it in your string. If you decide to use ES6 you should use string literals whenever you have a variable to insert into the string. - Your use of control blocks. I would recommend always using braces, even if you have only one line following an if- or for-statement. Omitting the braces makes for ugly diffs and (pointless) manual merges when you are using source version control systems like git and can trick a reader into believing that a wrongly indented line is (not) part of an if-statement where it is actually (not). - Your naming scheme of ids. In particular, you are sometimes using uppercase ids where I would expect all your ids to be lowercase. If you want to use multiple "words", concatenate your "words" with a hyphen. (e.g. button-wrapper).

Comments

Your code lacks any kind of comment. It helps to add comments to parts of the code to have an indication of what a certain piece of code is supposed to do.

Improvements

Ids in html

Ids should be used sparingly in html. Use it in cases where something is guaranteed to be shown a single time. Two cases I found are: - the #but class, which is badly named in any case, but should be something like a .button-wrapper class. - The next, prev, submit and restart buttons. In this application they may not occur again, but problems start to arrise once you decide to add a footer with a "subscribe to my newsletter" type of deal. Instead, use classes for these buttons and address them in javascript by having a wrapper element around your application and using .wrapper .submit.

Useless forms

You are using a seperate form for every question. This is not necessary. You can add a form around all inputs and group your radio buttons on the name attribute. In your case you do not even use anything related to forms, so you could simply omit the tag entirely.

Leverage pseudo-selectors

You have a first id on one of your elements. Instead you can select this element with #main > *:first-child in both jQuery and your css rules.

The submit click handler

The click handler is somewhat odd. You have used the questions variable earlier, but you are using a fresh selector here. Why even select your questions one by one instead of just selecting the selected inputs and using a reduce on their values?

var score = $('#main input:checked').reduce(function (score, input) {
  score += input.val();
  return score;
}, 0);

Re-usability and maintanability

This category somewhat overlaps with the category above.

Let html elements do work for you

You are manually nummering your questions. It works, but it would be aweful to have to add a new question at the beginning when you already have 20 questions. Luckily for you there is already a html element that can count - namely an ordered list (<ol><li>...</li></ol>). Be (or become) aware what html elements can do to prevent having to recreate behaviour in javascript and to prevent you pain when having to change content.

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Well that link tag was not working on chrome without end tag, I earlier didnt used it, the css file was not loading. And of the form, I think it is necessary. I tried removing form, but when i do that, the page is going blank on clicking next. And talking of the list, should i use it instead of the each div tag? or what? And where should the selector function be. \$\endgroup\$
    – Gameatro
    Dec 26 '17 at 1:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.