Edit in JSFiddle

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