title: display 2 classes style exam system jquery
body: <p>I'm working on exam system.</p>
  
  <p>I need to display an user answer and then a correct answer.
  In <code>Practice mode</code> behaviour would be a bit different, I mean it would show after clicking 'finish' button.</p>
  
  <p>When I add <code>.ans</code> class, this is user choice, and <code>.corr</code> class is the realy correct answer, do I need to make both appear?</p>
  
  <p>Any help please?</p>
  
  <p>here is my Java Script, <code>JQuery</code> code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn {
    background: #f4f4f4;
    background-image: -webkit-linear-gradient(top, #f4f4f4, #f4f4f4);
    background-image: -moz-linear-gradient(top, #f4f4f4, #f4f4f4);
    background-image: -ms-linear-gradient(top, #f4f4f4, #f4f4f4);
    background-image: -o-linear-gradient(top, #f4f4f4, #f4f4f4);
    background-image: linear-gradient(to bottom, #f4f4f4, #f4f4f4);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    text-shadow: 1px 1px 3px #666666;
    font-family: Courier New;
    color: #1c001c;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    border: solid #1f628d 2px;
    text-decoration: none;
    height: 40px;
    width: 300px;
    margin: 5px;
  }
  .corr {
    background-image: -webkit-linear-gradient(top, #ff329e, #ff329e);
    background-image: -moz-linear-gradient(top, #ff329e, #ff329e);
    background-image: -ms-linear-gradient(top, #ff329e, #ff329e);
    background-image: -o-linear-gradient(top, #ff329e, #ff329e);
    background-image: linear-gradient(to bottom, #ff329e, #ff329e);
  }
  .wrapper{
      margin-left: 330px;
      width: 600px;
      height: 600px;
      border-radius: 25px;
      border: 2px solid brown;
      text-align:center;
      display: none;
    }
    
  .ans{
    background-image: -webkit-linear-gradient(top, #AB0000, #AB0000);
    background-image: -moz-linear-gradient(top, #AB0000, #AB0000);
    background-image: -ms-linear-gradient(top, #AB0000, #AB0000);
    background-image: -o-linear-gradient(top, #AB0000, #AB0000);
    background-image: linear-gradient(to bottom, #AB0000, #AB0000);
  }
  
  .container{
    width:500px;
    height: 50px;
    
  }
  
  .wait{
    width: 330px;
    height: 800px;
    float: right;
    display: inline-block;
    border: 2px solid brown;
    display: none;
  }
  
  
  .ch{
      margin-top: 320px;
      margin-left: 360px;
      width: 600px;
      height: 200px;
      border-radius: 25px;
      text-align:center;
      display: inline-block;
  }
  .choose{
    width: 200px;
    height: 100px;
    display: inline-block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    margin: 20px;
    padding: 10px 20px;
    border: 1px solid #018dc4;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    font: normal 21px/normal "Times New Roman", Times, serif;
    color: rgba(255,255,255,0.9);
    -o-text-overflow: clip;
    text-overflow: clip;
    word-spacing: 4px;
    background: rgba(74,134,232,0.7);
    -webkit-box-shadow: 6px 6px 2px 0 rgba(99,168,191,0.7) ;
    box-shadow: 6px 6px 2px 0 rgba(99,168,191,0.7) ;
    text-shadow: -1px 3px 0 rgba(35,137,188,0.66) ;
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  }
    #exm{
      width: 500px;
      height: 100px;
      padding: 10px;
      margin-left: 30px;
      display: block;
    }
    #myexam{
      display:inline-block;
    }
  
    #startIQ{
      width:250px;
      height:30px;
      margin:30px;
      padding:50px;
    }
  body {background-color:#ccccb3;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> var s=0;
      var ENG_ans = [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,-1];
      var IQ_ans =[-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1];
  
      function drowQuestion(idx,testEX)
        {
  
          var Q;
          if(testEX==0)
          {
            Q = ENGexam.Questions[idx];
          }
          else
          {
            Q = IQexam.Questions[idx];
          }
          
          //find div and change HTML
          HTMLtxt=" ";
          HTMLtxt = "&lt;h2&gt;Quesion "+ (idx+1) +"&lt;/h2&gt;";
          HTMLtxt += "&lt;h3&gt;"+ Q.QuestionBody +"&lt;/h3&gt;";
          HTMLtxt += "&lt;form&gt;";
          /*
          HTMLtxt += '&lt;input type="button" name="answer" class="btn" id="a" value="'+Q.Answers[0]+'"/&gt;&lt;br/&gt;';
          HTMLtxt += '&lt;input type="button" name="answer" class="btn" value="'+Q.Answers[1]+'"/&gt;&lt;br/&gt;';
          HTMLtxt += '&lt;input type="button" name="answer" class="btn" value="'+Q.Answers[2]+'"/&gt;&lt;br/&gt;';
          HTMLtxt += '&lt;input type="button" name="answer" class="btn" value="'+Q.Answers[3]+'"/&gt;&lt;br/&gt;';  
          HTMLtxt += '&lt;/form&gt;';
          $("#myexam").append(HTMLtxt);  */
          var a ;
          if(testEX==0)
          {
           a = ENG_ans[idx];
          }
          else if(testEX==1)
          {
           a = IQ_ans[idx];
          }
           if(a == -1)
           {
            for(i=0;i&lt;Q.Answers.length;i++)
             HTMLtxt += '&lt;input type="button" name="answer" class="btn" id="'+i+'" value="'+Q.Answers[i]+'"/&gt;&lt;br/&gt;';
        } 
        else
        {
         for(i=0;i&lt;Q.Answers.length;i++)
          if(a == i)
          {
              HTMLtxt += '&lt;input type="button" name="answer" class="btn ans" id="'+i+'" value="'+Q.Answers[i]+'"/&gt;&lt;br/&gt;';
              answered++;
             }
             else
             {
              HTMLtxt += '&lt;input type="button" name="answer" class="btn" id="'+i+'" value="'+Q.Answers[i]+'"/&gt;&lt;br/&gt;';
             }
        }
          HTMLtxt += '&lt;/form&gt;';
          $("#myexam").append(HTMLtxt);
  
          $("#0").click(function() {
  
           // Q = exam.Questions[idx];
            $(this).addClass('ans');
            $("#1").removeClass('ans');
            $("#2").removeClass('ans');
            $("#3").removeClass('ans');
            
              //put this answer in an array
             // ans[idx] = 0;
             if(testEX==0)
             {
               ENG_ans[idx]=0;
             }
             else if(testEX==1)
             {
               IQ_ans[idx]=0;
             }
            
            
          });
  
          $("#1").click(function() {
            $(this).addClass('ans');
            $("#0").removeClass('ans');
            $("#2").removeClass('ans');
            $("#3").removeClass('ans');
          
          //  ans[idx] = 1;
             if(testEX==0)
             {
               ENG_ans[idx]=1;
             }
             else if(testEX==1)
             {
               IQ_ans[idx]=1;
             }
           
            
          });
  
          $("#2").click(function() {
            $(this).addClass('ans');
            $("#0").removeClass('ans');
            $("#1").removeClass('ans');
            $("#3").removeClass('ans');
          
          //  ans[idx] = 2;
              if(testEX==0)
             {
               ENG_ans[idx]=2;
             }
             else if(testEX==1)
             {
               IQ_ans[idx]=2;
             }
           
            
          });
  
          $("#3").click(function() {
            $(this).addClass('ans');
            $("#0").removeClass('ans');
            $("#1").removeClass('ans');
            $("#2").removeClass('ans');
          
          //  ans[idx] = 3;
             if(testEX==0)
             {
               ENG_ans[idx]=3;
             }
             else if(testEX==1)
             {
               IQ_ans[idx]=3;
             }
           
            
          });
  
        }
        function correct(idx){
  
        //  Q = ENGexam.Questions[idx];  
          if(testEX==0)
          {
            Q = ENGexam.Questions[idx];
          }
          else if(testEX==1)
          {
            Q = IQexam.Questions[idx];
          }  
             
          //find div and change HTML
          HTMLtxt = "&lt;h2&gt;Quesion "+ (idx+1) +"&lt;/h2&gt;";
          HTMLtxt += "&lt;h3&gt;"+ Q.QuestionBody +"&lt;/h3&gt;";
          HTMLtxt += "&lt;form&gt;";
          for(i=0;i&lt;Q.Answers.length;i++)
          {
            HTMLtxt += '&lt;input type="button" name="answer" class="btn" id="'+i+'" value="'+Q.Answers[i]+'"/&gt;&lt;br/&gt;';
            if(i==Q.CorrectAnswer)
              correctA = i;
          }
          HTMLtxt += '&lt;/form&gt;';
          correctA = Q.CorrectAnswer;
          
         $("#myexam").append(HTMLtxt);
         
          $("input[name=answer]").each(function() {
            if(this.id == correctA)
            $(this).addClass('corr');
          });
          
  
        }
  
  
        function finishPractice(idx)
        {
         
        }
        onload = function () {
  
          document.getElementById("startIQ").style.display="none";
          //find something do something
          drowQuestion(index,testEX); 
  
          $("#fbtn").click(function(){
            $("#myexam").empty();
            index = 0;
            drowQuestion(index,testEX);
          });
  
          $("#pbtn").click(function(){
            $("#myexam").empty();
            index--;
            if(index &lt; 0)
            {
              // index = ENGexam.Questions.length -1;
              if(testEX==0)
             {
              index = ENGexam.Questions.length -1;
             }
             else if(testEX==1)
             {
              index = IQexam.Questions.length -1;
             }
            }
              drowQuestion(index,testEX);
          });
          
          $("#nbtn").click(function(){
            $("#myexam").empty();
            index++;
            if(testEX==0)
             {                     
              if(index == ENGexam.Questions.length)
              {
                index = 0;
              }
             }
             else if(testEX==1)
             {
                         
              if(index == IQexam.Questions.length)
              {
                index = 0;
             }
             }
              drowQuestion(index,testEX);
          });
          
          $("#lbtn").click(function(){
            $("#myexam").empty();
           // index = ENGexam.Questions.length -1;
              if(testEX==0)
             {
              index = ENGexam.Questions.length -1;
             }
             else if(testEX==1)
             {
              index = IQexam.Questions.length -1;
             }
            drowQuestion(index,testEX);
          });
       
       
          $("#corr").click(function() {
            
            $("#myexam").empty();
             correct(index);
          });  
  
          $("#skip").click(function(event) {
           s++;
           $(".wait").empty();
           drowWait(index);
           //drow next question
            $("#myexam").empty();
            index++;
            if(testEX==0)
             {                     
              if(index == ENGexam.Questions.length)
              {
                index = 0;
              }
             }
             else if(testEX==1)
             {
                         
              if(index == IQexam.Questions.length)
              {
                index = 0;
             }
             }
              drowQuestion(index,testEX);
          });
  
          ///////////////////////////// Finish (close) Exam //////////////////////////////
          $("#fin").click(function(event) {
  
            clearInterval(t);
            min=00;
            sec=00;
            document.getElementById("timer").style.display="none";
            examFinish();
          });
  
          $("#p").click(function(){
           $(".ch").css('display', 'none');
           $(".wrapper").css('display', 'inline-block');
           $(".wait").css('display', 'inline-block');
           $("#skip").hide();
           flag = 0;
           set_timer();
          });
  
          $("#e").click(function(){
           $(".ch").css('display', 'none');
           //show exam div (as practice div, but without hint button)
           $(".wrapper").css('display', 'inline-block');
           $(".wait").css('display', 'inline-block');
           $("#corr").hide();
           flag=1;
          });
        
        }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body background="#ccccb3"&gt;
   &lt;div class="ch"&gt;
    &lt;input type="button" class="choose" value="Exam Mode" id="e"/&gt;
    &lt;input type="button" class="choose" value="Practice Mode" id="p"/&gt;
   &lt;/div&gt;
   &lt;div class="wrapper"&gt;
    &lt;div id="myexam" class="exam"&gt;&lt;/div&gt;
  
  
    &lt;div class="container"&gt;
     &lt;div id="exm" class="exam"&gt;
            
           &lt;input type="button" class="control" value="First" id="fbtn"/&gt;
            &lt;input type="button" class="control" value="Prev" id="pbtn"/&gt;
            &lt;input type="button" class="control" value="Next" id="nbtn"/&gt;
            &lt;input type="button" class="control" value="Last" id="lbtn"/&gt;
            &lt;input type="button" class="control" value="Finish Exam" id="fin"/&gt;
            &lt;input type="button" class="control" value="Hint" id="corr"/&gt;
            &lt;input type="button" class="control" value="Skip" id="skip"/&gt;
        &lt;/div&gt;
        &lt;br/&gt;
        &lt;br/&gt;
    &lt;/div&gt;
  
  
    &lt;div class="skip"&gt;
           
    &lt;/div&gt;
  
    &lt;div id="startIQ"&gt;
      &lt;input type="button" value="start IQ exam" id="strtIQ"/&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;div class="wait"&gt;
   &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>