Слагалица

A demonstration of a letter game from Serbian quiz show "Slagalitza"

by Страхиња Радић

HTML

<div class="group">
<p class="group-label">
(Видљиво за организаторе)
</p>
<input type="text" placeholder="Унесите дугачку реч" name="rec" onchange="recChange()" />
<input type="button" name="start-stop-button" onclick="startStopClick()" value="СТАРТ" />
<p id="newword">
</p>
</div><!--group-->
<div class="group with-afterword">
<p class="group-label">
(Видљиво за учеснике)
</p>
<div class="letter-container">
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
  <div class="letter"></div>
</div><!--letter-container-->
<p id="afterword">
</p>
</div><!--group-->

CSS

html, body
{
  font-family: sans-serif;
  font-size: 16pt;
}

input
{
  font-size: 16pt;
}

.group
{
  display: table;
  width: 32em;
  border: 1px solid #000;
  padding: 1em;
  padding-top: 2em;
  margin-bottom: 1em;
}

.group.with-afterword
{
  padding-bottom: 3em;
}

.group-label
{
  position: absolute;
  margin: 0;
  margin-top: -2em;
  padding: 0;
  font-size: 70%;
  color: #777;
}

.letter-container
{
  display: table-row;
  width: 100%;
}

.letter
{
  display: table-cell;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  color: #999;
  background-color: #eee;
  text-align: center;
}

#afterword
{
  position: absolute;
  white-space: nowrap;
}

.letter.revealed
{
  color: #000;
  background-color: #ccc;
}

JavaScript

var rec = '';
var origRec = '';
var REC_MAXLEN = 20;
var animationDelay = 200;
var cyrAlphabet = "АБВГДЂЕЖЗИЈКЛЉМНЊОПРСТЋУФХЦЧЏШ";
var timeoutHandle = null;
var revealedLetter = 0;
var running = false;

function recChange()
{
	rec=document.getElementsByName('rec')[0].value;
  rec = rec.toUpperCase();
  document.getElementsByName('rec')[0].value = rec;
}

function shuffleWord()
{
	for (var i = 0; i < rec.length-1; i++)
  {
  	for (var j = i+1; j < rec.length; j++)
    {
    	if (Math.random() > 0.5)
      {
        rec = rec.substring(0,i) + rec[j] 
        	+ rec.substring(i+1,j) + rec[i] 
          + rec.substring(j+1);
      }
    }
  }
}

function startStopClick()
{
	var letterContainer = document.getElementsByClassName('letter-container')[0];
	if (running)
  {
    if (revealedLetter < REC_MAXLEN)
    {
      revealedLetter++;
      if (revealedLetter == REC_MAXLEN)
      {
    		running = false;
      	document.getElementsByName('start-stop-button')[0].value = 'СТАРТ';
        document.getElementById('afterword').innerHTML = '„Наша“ реч је: ' + origRec;
    	}
    }
    return;
  }
  rec=document.getElementsByName('rec')[0].value;
  if (rec.length == 0)
  {
  	document.getElementById('newword').innerHTML = 'Унесите (дугачку) реч у поље.';
  	return;
  }
  origRec = rec;
  for (var i = 0; i < letterContainer.children.length; i++)
  {
    letterContainer.children[i].className = 'letter';
  }
  
	if (rec.length < REC_MAXLEN)
  {
	 	for (var i = rec.length; i < REC_MAXLEN; i++)
   	{
	   	var idx = Math.floor(Math.random() * cyrAlphabet.length);
   		rec += cyrAlphabet[idx];
   	}
  }
 	document.getElementById('newword').innerHTML = '1. Реч са попуном је: ' 
		+ rec;
 	shuffleWord();
 	document.getElementById('newword').innerHTML += '<br />2. Реч после мешања је: ' 
		+ rec;
  revealedLetter = 0;
  running = true;
  document.getElementsByName('start-stop-button')[0].value = 'СТОП';
  document.getElementById('afterword').innerHTML = '';
 ...