/* 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; } } });
<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>
.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; }