// 11.4.2016 Muutettu nappi luokka div:stä a:ksi, lisätty visited ja hover css:ää, piirto jquery:llä var text = ""; var opiskelijaTila = 0; var opettajaTila = 0; var kys = 0; var viimeisin = ""; var vuoro = ""; var opiskelijat = { "o1": "Opiskelija 1", "o2": "Opiskelija 2" }; var suunta = { "o1": "left", "o2": "right" }; var kert = { "o1": 0, "o2": 0 }; var kysArray = new Array("Opiskelija nostaa käden pystyyn", "Opiskelija heiluttaa kättä", "Opiskelija heiluttaa molempia käsiä", "Opiskelija huutaa kysymyksensä!", "Opiskelija nousee seisomaan ja huutaa kysymyksen!", "Opiskelija pomppii tuolilla..."); var kysymyksetArray = new Array("Onko protokollat hauskoja?", "Kannattaako kurssi jättää kesken?", "Saanko kurssista arvolauseen 5?", "Pääsenkö kurssista läpi ilman työtä?", "Saanko kurssista hyvän arvolauseen ilman ajattelua?", "?!?!?!?!?!?!?!?!?!?!?!"); var vastauksetArray = new Array("Totta kai!", "Ei missään nimessä!", "Ehkäpä, motivoituneella työn teolla", "Yes, no, maybe, Not", "Asioiden oppimiseksi joudut ajattelemaan", "Nyt en ymmärrä kysymystä"); $(document).ready(function() { alusta(); piirra(); $('.nappi').click(function(event) { var tila = this.id; switch (tila) { case "o1": case "o2": switch (opiskelijaTila) { case 0: text = text.concat("\n" + opiskelijat[this.id] + "->Opettaja: "); text = text.concat(kysArray[kert[this.id]]); opettajaTila = Math.round(Math.random()); if (kert[this.id] < kysArray.length - 1) { kert[this.id] += 1; } viimeisin = this.id; break; case 1: if (this.id != vuoro) { text = text.concat("\nNote " + suunta[this.id] + " of Opettaja: Opettaja laittaa opiskelijan jonoon"); break; } kys = Math.floor(Math.random() * kysymyksetArray.length); text = text.concat("\n" + opiskelijat[vuoro] + "->Opettaja: " + kysymyksetArray[kys]); opettajaTila = 2; break; case 2: if (this.id != vuoro) { text = text.concat("\n\nNote " + suunta[this.id] + " of Opettaja: Opettaja laittaa opiskelijan jonoon"); break; } text = text.concat("\n" + opiskelijat[vuoro] + "->Opettaja: Ahaa, okei!"); opettajaTila = 3; break; } break; case "ope": switch (opettajaTila) { case 0: text = text.concat("\nNote " + suunta[viimeisin] + " of Opettaja: Opettaja huomaa käden"); vuoro = viimeisin; text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ": Niin? Kysy vaan"); opiskelijaTila = 1; break; case 1: text = text.concat("\nNote " + suunta[viimeisin] + " of Opettaja: Opettaja vaan puhuu eikä huomaa kättä"); break; case 2: text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ": " + vastauksetArray[kys]); opiskelijaTila = 2; break; case 3: text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ": Hyvä, jatketaan"); opettajaTila = 4; break; case 4: text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ": Ai niin! Protokollat määrittelevät"); opettajaTila = 5; break; case 5: text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ": viestien muodon, viestien järjestyksen"); opettajaTila = 6; break; case 6: text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ": sekä suoritettavat toiminnot"); opettajaTila = 7; break; case 7: text = text.concat("\nOpettaja->" + opiskelijat[vuoro] + ":viestiä lähetettäessä ja vastaanotettaessa"); opiskelijaTila = 0; opettajaTila = 0; kertoja = 0; break; } break; case "aa": alusta(); break; default: break; } // switch piirra(); }); }); function alusta() { text = "title: Protokolla kommunikaatiossa"; opiskelijaTila = 0; opettajaTila = 0; kertoja = 0; kert = { "o1": 0, "o2": 0 }; } function piirra() { /* $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' theme: $('.theme').val() });*/ $('.diagram').html(text); $('.diagram').sequenceDiagram({ theme: $('.theme').val() }); }
<div> <a href="#" class="nappi" id="o1">Opiskelija 1</a> <a href="#" class="nappi" id="o2">Opiskelija 2</a> <a href="#" class="nappi" id="ope">Opettaja</a> <a href="#" class="nappi" id="aa">Aloita alusta</a>Theme: <select class="theme"> <option value="simple">Simple</option> <option value="hand" selected>Hand drawn</option> </select> </div> <div class="diagram" id="diagram"></div>
.nappi { background-color: #FFFFCC; width: auto; font-size: 1em; border: 2px solid black; border-radius: 5px; float: left; display: inline-block; margin-left: 5px; } .nappi:visited { color: blue; } .nappi:hover { color: orange; }