<?php
  
  if (!isset($_SESSION['nazwa'])) {
    header('Location: login.php');
    exit();
  }
  
$stan_pytania = false;
$nr_pytania = 0;
require_once('wiras_php/wa_baza/wa_polacz.php');
  //---POBRANIE PYTANIA---  
  $zap = "SELECT * FROM test WHERE id_test=".$_SESSION['test_id'];
  $pobierz = mysqli_query($db, $zap);
  $pyt = $pobierz->fetch_assoc();
  $pytanie = $pyt['pytanie'];
  $odpowiedzi[0] = $pyt['Odp_1'];
  $odpowiedzi[1] = $pyt['Odp_2'];
  $odpowiedzi[2] = $pyt['Odp_3'];
  $odpowiedzi[3] = $pyt['Odp_4'];
  $num = [];
    do {
      $number = rand(0, 3);
      if(!in_array($number, $num))
        $num[] = $number;
      }
      while(count($num) < 4);
  $npo = $num[0];
?>
  <script src="formularze/js/jquery-3.2.1.js"></script>
  <script src="formularze/js/jquery-ui.js"></script>
  <link rel="stylesheet" href="formularze/css/style.css" />
<div id="kontener">
  <div id="div_button">
    <input id="button2" type="button" value="Zamknij" />
      Uwaga! Jeżeli nie potrafisz rozwiązać testu kliknij na przycisk: <b>Zamknij</b><br />
      Test nie zostanie zaliczony, ale pojawi się ponownie, po kolejnym zalogowaniu się
      do Platformy<br />
      ---------------------
  </div>
  <div id="tytul"><h1 style="text-align: center; color: #009; font-weight: bold;font-family: 'Comic Sans MS', cursive, sans-serif;">Test wiedzy</h1></div>
  <div id="content_test">
    <div id="div_pytanie">
      <span style="color: #E00">Pytanie:</span>
<?php
echo $pytanie;
?>
    </div>
    <div id = "pt1"><p id="p_odpowiedz">Pierwsza odpowiedź</p>
      <div id="div_numeracja">1</div>
      <div id = "p1">
<?php
echo '<p>'.$odpowiedzi[$num[0]].'</p>';
?>
      </div>
      
    </div>
  
    <div id = "pt2"><p id="p_odpowiedz">Druga odpowiedź</p>
    <div id="div_numeracja">2</div>
      <div id = "p2">
<?php
echo '<p>'.$odpowiedzi[$num[1]].'</p>';
?>
      </div>
    </div>
    
    <div id = "pt3"><p id="p_odpowiedz">Trzecia odpowiedź</p> 
      <div id="div_numeracja">3</div>
      <div id = "p3">
<?php
echo '<p>'.$odpowiedzi[$num[2]].'</p>';
?>
      </div>
    </div>  
    
    <div id = "pt4"><p id="p_odpowiedz">Czwarta odpowiedź</p>
      <div id="div_numeracja">4</div>
      <div id = "p4">
<?php
echo '<p>'.$odpowiedzi[$num[3]].'</p>';
?>
      </div>
    </div>
    <div style="width: 570px; height: 2px; border: 2px dotted #0F8; position: relative; top: 33px; margin: 0 auto"></div>
      <div id = "droppable" class = "ui-widget-header">
       <p id="p_droppable">Przeciągnij i upuść tutaj wybraną przez Ciebie odpowiedź</p>
      </div>
      <input id="button1" type="button" value="OK" />  
 
  </div>
</div>

<script type="text/javascript">
  var elposy = [-33, -33, 60, 80];
  var elposdy = [267, 195, 123, 51];
  var eldrag = [false, false, false, false];
  var id = '';
  var idn = -1;
  var nr_odp = 0;
<?php
  echo 'var nazwa = "'.$_SESSION['nazwa'].'";';
  echo 'var idu = '.$_SESSION['id'].';';
  echo 'var npo = '.$npo.';';
  echo 'var idt = '.$_SESSION['test_id'].';';
  echo 'var tab = ['.$num[0].', '.$num[1].', '.$num[2].', '.$num[3].'];'
?>

$(document).ready(function(){  
  var szer = window.innerWidth;
  var wys = window.innerHeight;

  $('#kontener').width(szer-12);
  $('#kontener').height(wys-12);
  
    $(function(event, ui) {
      $( "#p1" ).draggable({
        axis: "y",
        start: startd,
        stop: stopd,
        opacity: 0.9,
        containment: '#content',
        stack: '#content',
        zIndex: 104
      });
      $( "#p2" ).draggable({
        axis: "y",
        start: startd,
        stop: stopd,
        opacity: 0.9,
        containment: '#content',
        stack: '#content',
        zIndex: 103
      });
      $( "#p3" ).draggable({
        axis: "y",
        start: startd,
        stop: stopd,
        opacity: 0.9,
        containment: '#content',
        stack: '#content',
        zIndex: 102
      });
      $( "#p4" ).draggable({
        axis: "y",
        start: startd,
        stop: stopd,
        opacity: 0.9,
        containment: '#content',
        stack: '#content',
        zIndex: 101
      });
      
      $("#droppable").droppable({
               drop: function (event, ui) {        
          if (id!='') {
          animacja(id, idn);
          eldrag[idn] = false;
          $('#'+id).draggable( 'enable' );
          $('#'+id).css('z-index', 105-idn);
          $('#'+id).css('-webkit-box-shadow', '4px 3px 3px #666');
          $('#'+id).css('-moz-box-shadow', '4px 3px 3px #666');
          $('#'+id).css('box-shadow', '4px 3px 3px #666');
          }
          id = $(ui.draggable).attr("id");
          idn = id.substring(1, 2)-1;
          eldrag[idn]=true;
          $('#'+id).css({top: elposdy[idn]});
           $('#'+id).css('z-index', 105-idn);
          ui.draggable.draggable( 'disable' );
          $('#'+id).css('-webkit-box-shadow', '4px 3px 4px #666');
          $('#'+id).css('-moz-box-shadow', '4px 3px 4px #666');
          $('#'+id).css('box-shadow', '4px 3px 4px #666');
          $('#button1').show(500);  
          nr_odp = idn+1;
          //alert(idn);
               }
            });
      
      function stopd( event, ui ) {
        var xPos = parseInt( ui.offset.left );
        var yPos = parseInt( ui.offset.top );
        var ids = $(this).attr("id");
        var idns = ids.substring(1, 2)-1;
        if (!eldrag[idns]) {
        animacja(ids, idns);
        $('#'+ids).css('-webkit-box-shadow', '4px 3px 4px #666');
        $('#'+ids).css('-moz-box-shadow', '4px 3px 4px #666');
        $('#'+ids).css('box-shadow', '4px 3px 4px #666');
        }
      }
      
    });
    
    
    function animacja(id, nr) {
      var el = $('#'+id);
      $( el ).animate({
        top: -35
      }, 700 );
        } 
    
    
    function startd( event, ui ) {
      var ids = $(this).attr("id");
      $('#'+ids).css('-webkit-box-shadow', '8px 6px 8px #666');
      $('#'+ids).css('-moz-box-shadow', '8px 6px 8px #666');
      $('#'+ids).css('box-shadow', '8px 6px 8px #666');
    }
    
    $(document).on("click", "#button2", function () {
      ankietaZamknij();
    });
    
    $(document).on("click", "#button1", function () {
      var ido = tab[idn];
      var punkty = 0;
      if (ido==0) {
        punkty = 15;
      } else punkty = 5;
      $.ajax({
        type:"POST", 
        url:"formularze/ajax_test.php", 
        data: {k1:ido, k2:nazwa, k3: punkty, k4: idt, k5: idu},             
          success:function() {
            alert('Dziękuję za udzielenie odpowiedzi');
            ankietaZamknij();
          },
        error: function(blad) {
        console.log("Błąd: wysyłanie formularz - test"); 
        }
      });
    });
    
    function ankietaZamknij() {
      $("#kontener").animate({
        opacity: 0,
        top: "+=250",
        left: "+=200"
        }, 1000, function() {
        $("#kontener").css('display', 'none');
        });
        $("#content_test").animate({
        opacity: 0,
        left: "+=200"
        }, 1300, function() {
        $("#content_test").css('display', 'none');
        });
    }
        

});
</script>
