Показать сообщение отдельно
  #7 (permalink)  
Старый 25.03.2013, 16:33
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

fsb-k,как видишь все просто
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .correctly {
          background-color:green;
        
        }
        
        
        .wrong {
          background-color:red;
        
        }
    
    </style>
  </head>
  <body>
    
    <div id="conteiner">

      <div id="timer"></div>
      
      <div class="questions">
        1<br>
    <input type = "radio" name="q1" class="answer" value = "28" checked>28 Mb;<br>
      <input type = "radio" name="q1" class="answer" value ="327">327 Mb;<br>
      <input type = "radio" name="q1" class="answer" value = "452">452 Mb;<br>
     <input type = "radio" name="q1" class="answer" value = "622">622 Mb;<br>
     <input type = "radio" name="q1" class="answer" value = "842">842 Mb;<br>
        <input type = "button" class="confirm" value="confirm">
      </div>
      <div class="questions">
        2<br>
<input type = "radio" class="answer" name="q2" value = "28" checked>28 Mb;<br>
      <input type = "radio" name="q2" class="answer" value ="327">327 Mb;<br>
      <input type = "radio" name="q2" class="answer" value = "452">452 Mb;<br>
     <input type = "radio" name="q2" class="answer" value = "622">622 Mb;<br>
     <input type = "radio" name="q2" class="answer" value = "842">842 Mb;<br>
        <input type = "button" class="confirm" value="confirm">
      
      </div>
      
        <div class="questions">
        3<br>
 <input type = "radio" name="q3" class="answer" value = "28" checked>28 Mb;<br>
      <input type = "radio"  name="q3" class="answer" value ="327">327 Mb;<br>
      <input type = "radio"  name="q3" class="answer" value = "452">452 Mb;<br>
     <input type = "radio"  name="q3" class="answer" value = "622">622 Mb;<br>
     <input type = "radio"  name="q3" class="answer" value = "842">842 Mb;<br>
        <input type = "button" class="confirm" value="confirm">
      
      </div>
      
      <div id ="result"></div>
    </div>
    
    <script>
      
      function $(selector, elem) {
      
        elem = elem || document;
        
        return  elem.querySelector(selector);
        
      }

      function Tests(params) {
      
        var i = 0;
        
     var _container = params.container,
         _timer = params.timer, 
         _result = params.result,
         self = this,
         stop = false;

        var user_answers = [];
        var qs = document.getElementsByClassName("questions");
        
       
          for(var j = 0, leng = qs.length; j < leng; j++)
                                 qs[j].style.display = "none";
           

        
        _container.onclick = function (e){
        
        var target = e.target || event.scrElement;
          

       if(target.className == "answer" ){
         
          
         user_answers[i] = target.value;
            
        }
        
        if(target.className.indexOf("confirm")  == -1)return;
         
          if(!user_answers[i]){
            
                   user_answers[i] = $("[checked]", $(".questions")).value;
          }
          
            
          next();
          
        }
        
      this.start = function (hour , minutes, seconds){
          
          var end_time = new Date();
          
          end_time.setHours(end_time.getHours() + hour);
          end_time.setMinutes(end_time.getMinutes() + minutes);
          end_time.setSeconds(end_time.getSeconds() + seconds)
          
          

          !function timerTicks(){
          var d = end_time - new Date();
            
            
            
            if(d <= 0){
               end(true);
              
              return;
            }
            
            _timer.innerHTML = getTimeToEnd(d);
            if(!stop) setTimeout(timerTicks, 1000);
          }();
        
          qs[i].style.display = "";
        
        }
      
      function getTimeToEnd(mSec){
        
         var h = Math.floor(mSec / 3600000);
            
         var m = Math.floor(mSec % 3600000 / 60000);
         var s = Math.floor(mSec % 60000 / 1000 );
        
         return view(h) +":" + view(m) + ":" + view(s);
      }
        
        function end(time_end){
          
          stop = true;
        
          var result = "<table><tr><td>№</td><td>Ответ</td></tr>", 
            _class, val;
          
          var leng = time_end ? i : qs.length; 
          
          for(var j = 0; j <leng; j++)
          {
           
            if(time_end) 
              val = $("[checked]", qs[i]).value;
              
             else  val = user_answers[j];
            
            if(val == params.answers[j]) 
                                  _class = "correctly";
             
                        
            else _class = "wrong";
          
            result += "<tr><td>" + (j+1) + "</td><td class = ' "+ _class + "'>" +  val+"</td>";
          
          }
          
          
        
          _result.innerHTML = result + "</table>";
          
           qs[i].style.display = "none";
        }
        
        
        function view(num){
        
          return num < 10 ? "0"+num : num;
        }
        
        function next(){
          
          qs[i].style.display = "none";
          
          if(i == qs.length -1) {
            
            end(false);
            
            return;
          }
          
          i++;
        
           qs[i].style.display = "";
        }
      
      }

      var answers = [];
      
      answers[0] = 28;
      answers[1] = 327;
      answers[2] = 452;
      
      
    var tests = new  Tests({
        
        container: $("#conteiner"),// контейнер с вопросами
        timer: $("#timer"),//блок для вывода времени
        result: $("#result"),// блок для вывода результата
        answers: answers
      
       });

      tests.start(0,0,10);// как только вызывается этот метод начинается тест. параметры метода это время отведенное на тест(часы, минуты,  секунды)

    </script>

  </body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием