JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<div class="nappi" id="o1">Teoria 1</div>
<div class="nappi" id="o2">Teoria 2</div>
<div class="nappi" id="o3">Teoria 3</div>
<div class="nappi" id="o4">Analysaattorityö</div>
<div class="nappi" id="o5">Ohjelmointityö</div>
<br>
<br>
<div class="osiot" id="o1op">Teoria 1</div>
<div class="opt" id="o1pp">1 op</div>
<div class="pisteet" id="o1p"></div>
<div class="osiot" id="o2op" style="clear: right">Teoria 2</div>
<div class="opt" id="o2pp">1 op</div>
<div class="pisteet" id="o2p"></div>
<div class="osiot" id="o3op" style="clear: right">Teoria 3</div>
<div class="opt" id="o3pp">1 op</div>
<div class="pisteet" id="o3p"></div>
<div class="osiot" id="o4op" style="clear: right">Analysaattorityö</div>
<div class="opt" id="o4pp">1 op</div>
<div class="pisteet" id="o4p"></div>
<div class="osiot" id="o5op" style="clear: right">Ohjelmointityö</div>
<div class="opt" id="o5pp">1 op</div>
<div class="pisteet" id="o5p"></div>
<div id="op" style="float: left; clear:left">ITKP104 Tietoverkot</div>
<div class="total" id="op1" style="float: left">0 op</div>
<div class="total" id="oppist">0</div>
<div class="total" style="width:100px;">Yhteispisteet</div>
<div class="al" id="arvolause">0</div>
<div class="al" style="width:100px">Arvolause</div>

CSS

.nappi {
  display: inline;
  background-color: #FFFFCC;
  width: 100px;
  font-size: 1em;
  border: 2px solid black;
  border-radius: 5px;
}

div {
  text-align: center;
  border: 2px solid black;
  border-radius: 5px;
  width: 150px;
}

.osiot {
  background-color: #9966CC;
  position: relative;
  float: left;
  display: none;
}

.pisteet {
  background-color: #99FFCC;
  position: relative;
  float: right;
  width: 60px;
  display: none;
}

.total {
  background-color: #CCFF00;
  position: relative;
  float: right;
  width: 60px;
}

.al {
  background-color: #FF6666;
  position: relative;
  float: right;
  clear: left;
  width: 60px;
}

.opt {
  background-color: #CCFF00;
  position: relative;
  width: 60px;
  float: left;
  display: none;
}

#op {
  background-color: #CC66CC;
  width: 150px;
}

JavaScript

/*
8.3.2017 päivitetty pisteet vastaamaan 2016+ kursseja
*/
$(document).ready(function() {
  var min = 1;
  var count = 0;
  var max = 32;
  var random = 0;
  var total = 0;
  $('.nappi').click(function() {
    checkOp(this.id);
  });
  $('.pisteet').hover(function() {
    $(this).fadeTo(1000, 0.1, 'linear', function() {
      var temp = parseInt($(this).text(), 10);
      if (temp < 32) { // Hover gives ++ to points :)
        $(this).html((temp + 1) + "/" + max);
        total++;
      } else { // Update total when max is changed to min
        $(this).html(min + "/" + max);
        total -= max - min;
      }
      showOp(count);
    });
  }, function() {
    $(this).fadeTo(1000, 1, 'linear');
  });

  function checkOp(op) {
    // Muuta siten että teoriaosuudet ei vaadi 4/8 kun useampia tentitty
    if ($('#' + op + 'op').is(':hidden')) {
      count += 1;
      random = Math.floor(Math.random() * (max - min + 1)) + min;
      total += random;
      $('#' + op + 'p').html(random + "/" + max);
    } else if (count > 0) {
      count -= 1;
      total -= parseInt($('#' + op + 'p').text(), 10);
    }
    $('#' + op + 'op').fadeToggle(1000, 'linear');
    $('#' + op + 'pp').fadeToggle(1000, 'linear');
    $('#' + op + 'p').fadeToggle(1000, 'linear');
    showOp(count);
  }

  function showOp(count) {
    $('#op1').html(count + " op");
    $('#oppist').html(total + "/" + max * count);
    $('#arvolause').html(laskeAS(total, count));
  }

  function laskeAS(total, op) {
    if (op >= 0) {
      a = total / op - 12.0;
      if (a >= 18) return 5;
      else if (a >= 14) return 4;
      else if (a >= 10) return 3;
      else if (a >= 6) return 2;
      else if (a >= 4) return 1;
      else return 0;
    }

  }
});