JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>
<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ää...

CSS

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%;
}

JavaScript

// Protokollakerrokset
/* 16.9.2024 piti lisätä https://code.jquery.com/ui/1.13.3/jquery-ui.min.js erikseen, että toimii */
$(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');
       ...