// Protokollakerrokset $(document).ready(function() { var original_order = "item1,item2,item3,item4,item5"; var original_order2 = "itemA,itemB,itemC,itemD,itemE,itemF,itemG"; var vaarin = ["Vastaava kysymys voi muuten olla Teoria 1 tentissä", "Ylempi kerros käyttää alemman kerroksen palveluita", "Alempi kerros tarjoaa palveluita ylemmälle kerrokselle", "TCP/IP -viitemalli on kehittynyt verkkojen myötä, OSI malli on standardointi(yritys)", "Mallien kerrosjärjestys on sama, paitsi OSI mallissa on 2 kerrosta enemmän"]; var ul = document.getElementById("layers"); for (var i = ul.children.length; i >= 0; i--) ul.appendChild(ul.children[Math.random() * i | 0]); $("#layers").sortable({ stop: function(event, ui) { var order = $("#layers").sortable('toArray').toString(); if (order == original_order) { $('#ok').fadeTo(1500, 1, 'linear'); $('#ok').effect("bounce", { times: 10 }, 3000); $('#ok').fadeTo(5000, 0, 'linear'); } else { document.getElementById('notok').innerHTML = vaarin[Math.floor(Math.random() * vaarin.length)]; $('#notok').fadeTo(2500, 1, 'linear'); $('#notok').fadeTo(2500, 0, 'linear'); } } }); var ul2 = document.getElementById("layers2"); for (var j = ul2.children.length; j >= 0; j--) ul2.appendChild(ul2.children[Math.random() * j | 0]); $("#layers2").sortable({ stop: function(event, ui) { var order = $("#layers2").sortable('toArray').toString(); if (order == original_order2) { $('#ok').fadeTo(1500, 1, 'linear'); $('#ok').effect("bounce", { times: 10 }, 3000); $('#ok').fadeTo(5000, 0, 'linear'); } else { document.getElementById('notok').innerHTML = vaarin[Math.floor(Math.random() * vaarin.length)]; $('#notok').fadeTo(2500, 1, 'linear'); $('#notok').fadeTo(2500, 0, 'linear'); } } }); $('li').mousedown(function() { $(this).fadeTo(1000, 0.5, 'linear'); $('#' + this.id + 'info').fadeTo(1500, 1, 'linear'); }); $('li').mouseup(function() { $(this).fadeTo(1000, 1, 'linear'); $('#' + this.id + 'info').fadeTo(1500, 0, 'linear'); }); });
<ul style="float:left" id="layers"> <li id="item1">Sovellus</li> <li id="item2">Kuljetus</li> <li id="item3">Verkko</li> <li id="item4">Linkki</li> <li id="item5">Fyysinen</li> </ul> <ul style="float:right" id="layers2"> <li id="itemA">Sovellus</li> <li id="itemB">Esitystapa</li> <li id="itemC">Istunto</li> <li id="itemD">Kuljetus</li> <li id="itemE">Verkko</li> <li id="itemF">Linkki</li> <li id="itemG">Fyysinen</li> </ul> <div id="notok"></div> <div class="infot" id="item1info">Sovelluskerroksen protokollan tehtävänä on määritellä säännöt asiakkaan ja palvelimen väliseen kommunikaatioon</div> <div class="infot" id="item2info">Kuljetuskerroksen tehtävänä on porttinumeron perusteella viedä paketit oikealle sovellukselle vastaanottavassa laitteessa</div> <div class="infot" id="item3info">Verkkokerroksen tehtävänä on kuljettaa paketti verkon läpi oikealle laitteelle</div> <div class="infot" id="item4info">Linkkikerroksen tehtävänä on välittää paketti yksittäisen linkin yli teknologiasta riippumatta</div> <div class="infot" id="item5info">Fyysisen kerroksen tehtävänä on määritellä siirtomedian fyysiset ominaisuudet</div> <div class="infot" id="itemAinfo">Sovelluskerroksen protokollan tehtävänä on määritellä säännöt asiakkaan ja palvelimen väliseen kommunikaatioon</div> <div class="infot" id="itemBinfo">Esitystapakerros vastaa muun muassa eri merkistökoodauksien yhteensovittamisesta</div> <div class="infot" id="itemCinfo">Istuntokerros huolehtii useiden yhdessä yhteydessä kulkevien istuntojen multipleksoinnista.</div> <div class="infot" id="itemDinfo">Kuljetuskerroksen tehtävänä OSI mallissa on huolehtia että paketit tulevat perille ja että ne järjestetään oikeaan järjestykseen</div> <div class="infot" id="itemEinfo">Verkkokerros tarjoaa päästä päähän yhteyden erilaisten verkkoratkaisujen (linkkien) yli</div> <div class="infot" id="itemFinfo">Linkkikerros kehystää ylempien kerrosten tietoliikennepaketin fyysisen kerroksen siirtoa varten</div> <div class="infot" id="itemGinfo">Fyysisen kerrosmäärittelee tiedonsiirron fyysisen median, kuten sähkökaapelin, valokuidun tai radioaaltojen yli, "siirtää yhden bitin"</div> <div id="ok">Oikein!</div>
li, #ok, #notok, .infot { list-style-type: none; background-color: #9999CC; border: 2px solid black; border-radius: 5px; text-align: center; font-size: 1.25em; width: 100px; } #ok { position: absolute; top: 25px; left: 50%; background-color: #FF6666; opacity: 0; } #notok, .infot { background-color: #99FFCC; font-size: 1em; position: absolute; top: 25px; left: 25%; width: 150px; opacity: 0; } #notok { left: 65%; }