JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<script src="https://bramp.github.io/js-sequence-diagrams/js/webfont.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/snap.svg-min.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/underscore-min.js"></script>
<script src="https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js"></script>
<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>

CSS

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

JavaScript

// 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: "...