concordle.html Simple HTML/JavaScript Editor

concordle.html in Simple HTML/JavaScript Editor

In the text window you see a text of the HTML and javascript - concordle.html
http://www.uib.no/people/nfylk/concordle/ The other Concordle home page is http://www.uib.no/people/nfylk/concordle_dev/.
The story of Concordle is told (with detailed help) at Concordle's Google blogspot

In the text area below you can modify and type in as much HTML or JavaScript as you like - you can always fetch back the original.

To return from the program, use BACK button of the browser or close the extra window in some browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Concordle - Not so pretty cousin of Wordle</title>

//////////////////////////////////////////////////////////////////////////////////////////

var TheDate="October 4th, 2008                Version 1.999";

var  Help_String=
"You find newest Concordle at <a href=\"http://www.uib.no/people/nfylk/concordle/\">"
+" http://www.uib.no/people/nfylk/concordle/</a>   The other Concordle home page is "
+"  <a href=\"http://www.uib.no/people/nfylk/concordle_dev/\" style=\"color: red;\"> "
+"  http://www.uib.no/people/nfylk/concordle_dev/</a>.<br> "
+"  The story of Concordle is told (with detailed help) at Concordle's Google blogspot "
+"<a href=\"http://concordle.blogspot.com/\" style=\"color: red;\">http://concordle.blogspot.com/</a> <br><br><br> "
+"<hr> " +
 "What can you do with Concordle? <br><br>"
+"It is easily understood when you just click on all the links. <br><br> "
+"I have chosen to use the links instead of buttons, they have the same usability, "
+"but the links are simpler. They just work.<br><br>"
+"In the first text field is as a standard my example text.<br> "
+"This can be cleaned and new text entered, probably you will just copy some "
+"text from a web page.<br><br> "
+"The omitted words - they are omitted from the analysis and the display,"
+"but they are kept in the memory.<br><br> "
+"The cloud of words can be clicked on - snippets of neighbouring text are shown "
+"in the concordance area.<br><br> "
+"You can also click on the various snippets - i.e. on the middle word there - "
+"and a new large snippet of about 80 words will appear. The omitted words are stll visible there.<br> "
+"In this version you can click on words also in this large text. Try that!  <br> "
+"Though if you click on the selected or the omitted word, nothing happens.  <br> "
+"All of the extra text areas can be closed by clicking on the appropriate link <br><br> "
+"<b>How to save something from this page?</b><br><br> "
+"If you use SeaMonkey, you can copy and paste the text into the composer window, "
+"change the fonts to anything reasonably nice, and save the results. <br><br> "
+"The cloud can be shrinked or stretched. Try that "
+"<br><br> "
+"This page is the program. Just save the page and you have the program too."
+"<br><br> "
+"The whole source is about 770 lines, many of them empty. From these 770 about 500 lines "
+"are the program in  Javascript, with many comments. You might be able to change "
+"many details in function and appearance, if you read and change the source."
+"<br><br> "
+"To change the source, use a text editor. Read also the bottom of this page.<br><br> "
+"This is all \"preliminary\", but you never know, it might stay that way.<br><br> "
+"Plans: Add color variation, improve the table cloud function, make a double concordle.<br><br> "
+"There was a little bug in the September 30th, 2008 version. It appeared in the 'Cloud' function."
+"<br>It is now corrected<br> <br>"
+"You find newest Concordle at <a href=\"http://www.uib.no/people/nfylk/concordle/\">"
+" http://www.uib.no/people/nfylk/concordle/</a>   The other Concordle home page is "
+"  <a href=\"http://www.uib.no/people/nfylk/concordle_dev/\" style=\"color: red;\"> "
+"  http://www.uib.no/people/nfylk/concordle_dev/</a>.<br> "
+"  The story of Concordle is told (with detailed help) at Concordle's Google blogspot "
+"<a href=\"http://concordle.blogspot.com/\" style=\"color: red;\">http://concordle.blogspot.com/</a> <br><br><br> "
+"<b>This help text belongs to the  version  " + TheDate + "</b> <br><br>  <br><br> ";

//  The lines containing innerHTML attribute correspond to the document.write()
   //  But this is so much more flexible
   //  First we collect a big string of HTML into To_Output 
   //  And than we add it to the innerHTML of the identified areas
   //  In here they are called "firstPar"  and  "secondPar"
   //  These areas are defined in the body of the text
   //  by:  <div id="firstPar">   etc
   
//  The global variables for output are declared and commented here
   
var SnippLen=7;    // This is half the snippet length in the concordance
// Definitions of control characters in the text
var Big="<big>"; var DBig="</big>"; var NL="<br>"; 
var Small="<small>"; var DSmall="</small>"; 
var Bold="<b>"; var DBold="</b>";
var BlankTA="&";var Blank=BlankTA+"nbsp;"; 
                    // This because Blank code is executed in TextArea

function random_blank(maxbla)
{  
 var blnks=" ";
 var numbla = Math.floor( maxbla*Math.random());
 for (var k=0;k<numbla;k++){blnks=blnks+Blank;}
 return blnks;
}

// Color1="0, 153, 153";      NOT USED YET IN THIS VERSION
// Color2="153, 100,0";
// var TColor1="<span style=\"font-family: Helvetica,Arial,sans-serif; color: rgb(";
// var TColor2=");\">";
// function FColor(Strin) {var col1=TColor1 + Strin + TColor2;return col1;}
// var DColor="</span>";

//   Table definitions for the "cloud" of words

var To_Output="";  var Saved_Output="";

var TCELL=[];
DCELL="</td>"; 
TCELL[0]="<td style=\"text-align: left; vertical-align:middle;\">";
TCELL[1]="<td style=\"text-align: right; vertical-align:top;\">";
TCELL[2]="<td style=\"text-align: left; vertical-align:middle;\">";
TCELL[3]="<td style=\"text-align: center; vertical-align:bottom;\">";
TCELL[4]="<td style=\"text-align: right; vertical-align:bottom;\">";
TCELL[5]="<td style=\"text-align: center; vertical-align:middle;\">";
TCELL[6]="<td style=\"text-align: right; vertical-align:middle;\">";

var Ncolumns=12;       //   Table constants for the "cloud" of words
var Nrows=12;
var Fact=6;            //   Table constants:  This is changed when shrinking/stretching

//   Table functions for the "cloud" of words

function rowf(nn)
{  rows=Math.floor(nn/Ncolumns);
   return rows;
}
function columnf(nn)
{  
   column=Math.floor(nn/Ncolumns)*Ncolumns;
   return column;
}

function ind_fr_pos(row,column)
{  ind=Ncolumns*row+column;
   return ind;
}
//                         The concordle table cells
//  Make all cells empty (very small blanks)
var cells=[]; 
for (k=0;k<Ncolumns*Nrows;k++)
{
   cells[k] =TCELL[0]+Small+Small+Small+"  "
            +DSmall+DSmall+DSmall+DCELL;
}
//    Table functions defined above

function analyze_text()
{
   //   This is the main text - analyzing part 
   //   The two text fields are read in the next two lines
   
   OriginalString =  myInputWindow.theInsertedText.value;
   OmittedString = myInputWindow.omittedWordsText.value;
   
       sorted_multip=[]; sorted_uniq_words=[];  unique_words=[]; multiples=[];
	   Hash_to_Unique=[];
       
    // Regular expressions:  A '\' 
    // following meaning: n=newline, 
    // t=tab, 
    // v=vertical tab, 
    // b=backspace, 
    // r=carriage return, 
    // f=form feed, 
    // 0= the null character.
    
    orig_sentence=OriginalString.replace(/\n/g, "  ");   //  remove newlines
    orig_sentence=orig_sentence.replace(/\t/g, "  ");   //  remove tabs
    orig_sentence=orig_sentence.replace(/\v/g, "  ");   //  remove tabs
    orig_sentence=orig_sentence.replace(/\r/g, "  ");   //  remove tabs
    orig_sentence=orig_sentence.replace(/\f/g, "  ");   //  remove tabs
    orig_sentence=orig_sentence.replace(/\f/g, "  ");   //  remove tabs
    orig_sentence=orig_sentence.replace(/\x0a/g, "  ");   //  remove controls
    orig_sentence=orig_sentence.replace(/\x0b/g, "  ");   //  remove controls
    orig_sentence=orig_sentence.replace(/\x0c/g, "  ");   //  remove controls
    orig_sentence=orig_sentence.replace(/\x0d/g, "  ");   //  remove controls
    orig_sentence=orig_sentence.replace(/\x0e/g, "  ");   //  remove controls
    
		orig_sentence=orig_sentence.replace(/=/g, " = ");	   //  pad slashes etc by spaces
		orig_sentence=orig_sentence.replace(/\//g, " \/ ");
		orig_sentence=orig_sentence.replace(/\#/g, " \# ");
		orig_sentence=orig_sentence.replace(/\&/g, " \& ");
		orig_sentence=orig_sentence.replace(/\%/g, " % ");
		orig_sentence=orig_sentence.replace(/\+/g, " + ");
		orig_sentence=orig_sentence.replace(/@/g, " @ ");
		orig_sentence=orig_sentence.replace(/</g, " < ");
		orig_sentence=orig_sentence.replace(/>/g, " > ");
		orig_sentence=orig_sentence.replace(/_/g, " _ ");
    
   for (k=0;k<20;k++) 
    {
    orig_sentence=orig_sentence.replace(/  /gi, " ");    // repeat removing double spaces
    orig_sentence=orig_sentence.replace(/\.\./gi, ".");
    orig_sentence=orig_sentence.replace(/--/gi, "-");
     }

orig_sentence=orig_sentence.replace(/ -/g, "-");
	orig_sentence=orig_sentence.replace(/- /g, "-"); 
    orig_sentence=orig_sentence.replace(/-/g, " -"); 
    orig_sentence=orig_sentence.replace(/ :/g, ":"); 
    orig_sentence=orig_sentence.replace(/:/g, ": "); 
    orig_sentence=orig_sentence.replace(/ ;/g, ";"); 
    orig_sentence=orig_sentence.replace(/;/g, "; "); 
    orig_sentence=orig_sentence.replace(/ !/g, "!"); 
    orig_sentence=orig_sentence.replace(/!/g, "! "); 
    orig_sentence=orig_sentence.replace(/ \?/g, "\?"); 
    orig_sentence=orig_sentence.replace(/\?/g, "\? "); 
    
    orig_sentence=orig_sentence.replace(/ \)/g, ") ");     // replace "word )" by "word) "
    orig_sentence=orig_sentence.replace(/\( /gi," (");     // replace "( word" by " (word" 
         
    orig_sentence=orig_sentence.replace(/ \./gi, ".");
    orig_sentence=orig_sentence.replace(/ ,/gi, ",");
    orig_sentence=orig_sentence.replace(/\./gi, ". ");
    
    orig_sentence=orig_sentence.replace(/,/gi, ", ");
    // orig_sentence=orig_sentence.replace(/\"/gi, " ");
    orig_sentence=orig_sentence.replace(/\//gi, " ");
    orig_sentence=orig_sentence.replace(/ \)/g, ") ");     // replace "word )" by "word) "
    orig_sentence=orig_sentence.replace(/\( /gi, " (");    // replace "( word" by " (word"    
    
   for (k=0;k<20;k++) 
   {
    orig_sentence=orig_sentence.replace(/  /gi, " ");
    }
    orig_sentence=orig_sentence.replace(/\( \)/gi, "");
    orig_sentence=orig_sentence.replace(/\(\)/gi, "");
// ===========     
    orig_words=orig_sentence.split(" ");
// ===========     
    standard_sentence=orig_sentence;    //  The whole input to be made in standartized words
	
	 standard_sentence=standard_sentence.replace(/-/gi, "");  //   remove -
    standard_sentence=standard_sentence.replace(/\./gi, "");  //   remove dots
    standard_sentence=standard_sentence.replace(/,/gi, "");   //   commas
    standard_sentence=standard_sentence.replace(/:/gi, "");    //  colons
	standard_sentence=standard_sentence.replace(/;/gi, "");    //  semicolons
    standard_sentence=standard_sentence.replace(/\?/gi, "");   // remove ?
    standard_sentence=standard_sentence.replace(/!/gi, "");
	standard_sentence=standard_sentence.replace(/\"/gi, "");   //  remove all "
    standard_sentence=standard_sentence.replace(/\(/gi, "");    // remove ( )
    standard_sentence=standard_sentence.replace(/\)/gi, "");    
    standard_sentence=standard_sentence.replace(/'s/gi, "");   // remove in John's 's  
    standard_sentence=standard_sentence.replace(/s'/gi, "s");  // remove in Smits' ' 
    standard_sentence=standard_sentence.replace(/'/gi, "");    // OPTIONAL: remove ' alltogether 
    standard_sentence=standard_sentence.toLowerCase();       //  make all lowercase
    for (k=0;k<20;k++) 
    {
    standard_sentence=standard_sentence.replace(/  /gi, " ");    // repeat removing double space
     } 
// =========== 	
    standard_words=standard_sentence.split(" ");
// ===========     
      
// ==============================================================

//  Here we start sorting 
   
  sorted_words=[];  //  The arrays must be emptied if you want to restart
  klen=0;
  for(i = 0; i < standard_words.length; i++) 
     {  if (standard_words[i].length > 2  )           //  exclude funny strings and short words 
        {sorted_words[klen]=standard_words[i];  klen=klen+1;} }
	
        sorted_words.sort();    //  Here the words are alphabetically sorted
 
// ==============================================================

omitted_words=[];
     
    OmittedString=OmittedString.replace(/\n/g, "  ");   //  remove newlines
    OmittedString=OmittedString.replace(/\t/g, "  ");   //  remove tabs
    OmittedString=OmittedString.replace(/\v/g, "  ");   //  remove tabs
    OmittedString=OmittedString.replace(/\r/g, "  ");   //  remove tabs
    OmittedString=OmittedString.replace(/\f/g, "  ");   //  remove tabs
    OmittedString=OmittedString.replace(/\f/g, "  ");   //  remove tabs
    OmittedString=OmittedString.replace(/\x0a/g, "  ");   //  remove controls
    OmittedString=OmittedString.replace(/\x0b/g, "  ");   //  remove controls
    OmittedString=OmittedString.replace(/\x0c/g, "  ");   //  remove controls
    OmittedString=OmittedString.replace(/\x0d/g, "  ");   //  remove controls
    OmittedString=OmittedString.replace(/\x0e/g, "  ");   //  remove controls
      for (k=0;k<20;k++) 
         {
          OmittedString=OmittedString.replace(/  /gi, " ");    // repeat removing double spaces
         }

omitted_words=OmittedString.split(" ");

//  And here we count the sorted    - Alphabetic sorting
   var is_omitted=0; var is_new=1;
   unique_words=[];     //  The arrays must be emptied if you want to restart
   multiples=[];
   var Number_of_unique=0;
   multiples[Number_of_unique]=0;
   
   sorted_multip=[];            //  This emptying of values for the Cloud was forgotten up to v_0_99
   sorted_uniq_words=[];        //  When new data longer than example, it worked 
   numpointer=[];               //  It naturally did not work for smaller sets  
   
  for(i = 0; i < sorted_words.length; i++)
    {
        var the_word=sorted_words[i]; is_omitted=0;
	for (k = 0; k < omitted_words.length; k++)
	{ if (the_word == omitted_words[k]){is_omitted=1;}
	}
	if (i>0)
	     {if (sorted_words[i] != sorted_words[i-1] ){is_new=1;}}
	
        if (is_new==1 && is_omitted==0)
          {
          unique_words[Number_of_unique]=sorted_words[i];
          multiples[Number_of_unique]=1*0+1;    
          Hash_to_Unique[sorted_words[i]]=Number_of_unique;
          Number_of_unique=Number_of_unique+1;  
	  is_new=0;
          }
         else
         {  if (is_omitted==0)
	      {multiples[Number_of_unique-1]=multiples[Number_of_unique-1]+1; is_new=0; }
	  }
    }

// ==============================================================

//  And here we arrange by frequency, i.e by how many times

var hashcoef=10; var hash_numbers=[]; var backpointer=[]; numpointer=[];

for(i = 0; i < 6; i++){ if(multiples.length>hashcoef){hashcoef =hashcoef*10;}  }
   for(i = 0; i < multiples.length; i++)
     {
       hash_numbers[i]=multiples[i]+i/hashcoef;
       backpointer[num2dat(hash_numbers[i])]=i;
     }
     
   hash_numbers.sort( compareNum );  //  Hashnumbers:  value + position/hashcoef
                                     // backpointers are a hash made of strings num2dat
       for(i = 0; i < hash_numbers.length; i++)
       {
         sorted_multip[i]= multiples[backpointer[num2dat(hash_numbers[i])]];
         sorted_uniq_words[i] =  unique_words[backpointer[num2dat(hash_numbers[i])]];
	 numpointer[i]=backpointer[num2dat(hash_numbers[i])];
        }
//    unique_words[]      -->           sorted_uniq_words[]
//    multiples[]         -->           sorted_multip[]

clean_big_snippet();    //  just to avoid strange things

}   //============     Here ends analyze_text()  ==================

// ================================  cloud shrink functions  =========================

function stretch_f(){Fact=Fact+1;analyze_to_cloud();} // stretches the cloud

function shrink_f(){Fact=Fact-1;analyze_to_cloud();}  // shrinks the cloud

// ================================      cloud function     ===========================

function All_words_cloud()
{
  // ==============   cloud function ===========================

document.getElementById("firstPar").innerHTML=" ";
 
 // ===============   cleaned the text area  =====================  
  
   var end_val=0;

To_Output=" ";
	
    cells=[];                        // This emptying forgotten up to version 0_99
    for (k=0;k<Ncolumns*Nrows;k++)   // So the table was showing nonexistent words
                                     // when a new input was shorter than the older one
      {
        cells[k] =TCELL[0]+Small+Small+Small+"  "
          +DSmall+DSmall+DSmall+DCELL;
      }  
      
  if (sorted_uniq_words.length > 200 ){end_val=sorted_uniq_words.length-199;}
  
				  
    var words_pos=0; var small_words_pos=0;
    var LargeLimit=25;
    var local_mult=[];
	
    for (i=0;i<sorted_multip.length;i++)
    { local_mult[i]= sorted_multip[i];} 
    aver=Math.floor((local_mult[local_mult.length-1]-local_mult[local_mult.length-7])/6);
    for (i=local_mult.length-6;i<local_mult.length;i++)
    { local_mult[i]= local_mult[i-1]+aver;}   
	
    var Sx=Math.floor(Ncolumns/2);  var Sy=Math.floor(Nrows/2);
    var Px=Sx;  var Py=Sy;
    var dx=1;	var dy=0;
	
    var tabl_pos=Math.floor(Ncolumns*Nrows/2);
    var mult_dif=local_mult[local_mult.length-1]-local_mult[end_val];
        if ( mult_dif==0 ) mult_dif=1;
    
    words_pos=sorted_uniq_words.length-1;
	LargeLimit=sorted_uniq_words.length - LargeLimit; if (LargeLimit<0) {LargeLimit=0;}
	small_words_pos = LargeLimit;
	
	// Debugging
	 // To_Output=To_Output+"===end_val  LargeLimit  small_words_pos words_pos  " +
	    //  end_val + Blank + LargeLimit +Blank + small_words_pos +Blank + words_pos +"<br>" ;
	
    toggle=1; celltyp=0; var LargeWords=1;
	
    for (var iter=0;iter<Ncolumns*Nrows;iter++)
    {	 
    	 tabl_pos=ind_fr_pos(Py,Px);

the_word=sorted_uniq_words[small_words_pos];
			cells[tabl_pos]= cells[tabl_pos]+random_blank(3)
            +"<a href=\"javascript:concorder_text(" + numpointer[small_words_pos] +")\" " 
	        +" style=\"text-decoration:none; color: rgb(70,70,0)\">"  
	        +  the_word +"</a> ";	
			
			cells[tabl_pos]= cells[tabl_pos]+FDBig(nBig)+random_blank(2);	 
			
			small_words_pos=small_words_pos-1;		
		   }
			
		   cells[tabl_pos]= cells[tabl_pos] + DSmall +DSmall + endup;
		}
       Px=Px+dx; Py=Py+dy;
       if (Px<0 || Px>(Ncolumns-1) || Py<0 || Py>(Nrows-1) || words_pos < end_val  ) {break;}
	   if ( small_words_pos < end_val &&  words_pos > end_val-1 ) {break;}
    
       if(dx==-1 && dy==-1 && Px==Sx) {dy=1;}
       if(dx==-1 && dy==1 && Py==Sy)  {dx=1;}
       if(dx==1 && dy==1 && Px==Sx)   {dy=0;}
       if(dx==1 && dy==0 && Px==Sx+1) {dy=-1;}
       if(dx==1 && dy==-1 && Py==Sy)  {dx=-1;} 
       celltyp=celltyp+1; if (celltyp==7) {celltyp=0;}
       LargeWords = - LargeWords; 		 
    }
	
    //                           make the table out of cells[]

To_Output=To_Output+"<table style=\"text-align: left; vertical-align:top; "+
                  " width: 900px; font-family: Helvetica,Arial,sans-serif;\" border=\"0\" "+
                  " cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#FFFFFF\">";
				  
	
	
    for (rowk=0;rowk<Nrows;rowk++)   {
       To_Output=To_Output+"<tr>";
    for (columnk=0;columnk<Ncolumns;columnk++)
      {    To_Output=To_Output+cells[ind_fr_pos(rowk,columnk)]; 
      }
    To_Output=To_Output+"</tr>"; 
    }
    To_Output=To_Output+"</table>";
    
   To_Output=To_Output+Bold+Small+NL;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud()\">Re-draw</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:shrink_f()\">Shrink cloud</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:stretch_f()\">Stretch cloud</a> "+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:clean_concord()\">Clear concordances</a> "+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud_order()\">Ordered-Cloud</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_arrow()\">All words ordered</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_fog()\">Foggy All words</a> "+Blank;
   To_Output=To_Output+DSmall+DBold;

document.getElementById("firstPar").innerHTML=
   document.getElementById("firstPar").innerHTML  +To_Output+"<br>";
   
  // ==================== Cloud function end  =====================
}

// ================================    ordered tight  cloud function     ===========================

function All_words_cloud_order()
{
  // ==============   cloud function ===========================

document.getElementById("firstPar").innerHTML=" ";
 
 // ===============   cleaned the text area  =====================  
   
   // var Ncolumns=14; var Nrows=14;
   var end_val=0;
   var words_pos=0;
   var the_word=" ";  var the_multi=1;	
	
    cells=[];                        // This emptying forgotten up to version 0_99
    for (k=0;k<Ncolumns*Nrows;k++)   // So the table was showing nonexistent words
                                     // when a new input was shorter than the older one
      {
        cells[k] =TCELL[0]+Small+Small+Small+"  "
          +DSmall+DSmall+DSmall+DCELL;
      }  
      
  if (sorted_uniq_words.length > 300 ){end_val=sorted_uniq_words.length-299;}
  
  To_Output="<table style=\"text-align: left; vertical-align:top; "+
                  " width: 900px; font-family: Helvetica,Arial,sans-serif;\" border=\"0\" "+
                  " cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#FFFFFF\">";

var Sx=Math.floor(Ncolumns/2);  var Sy=Math.floor(Nrows/2);
    var Px=Sx;  var Py=Sy;
    var dx=1;	var dy=0;
    var tabl_pos=Math.floor(Ncolumns*Nrows/2);
    var celll="";
    words_pos=sorted_uniq_words.length-1;

celltyp=0;
    for (iter=0;iter<Ncolumns*Nrows;iter++)
    {	 
    	 tabl_pos=ind_fr_pos(Py,Px);
         the_word=sorted_uniq_words[words_pos];   the_multi=sorted_multip[words_pos];	
		     	     
    var buildup=TCELL[celltyp]; var endup=DCELL;
				   
     celll = buildup+random_blank(3);
      if (the_multi==1){celll=celll+Small;}
      if (the_multi>2){celll=celll+Bold;}
      if (the_multi>3){celll=celll+Big;}
      if (the_multi>5){celll=celll+Big;}	  
      celll=celll+"<a href=\"javascript:concorder_text(" + numpointer[words_pos] +")\" "
	        + " style=\"text-decoration:none; color: rgb("+   
			                                              Math.floor( 190*Math.random()) + ","  + 
														  Math.floor( 190*Math.random()) +"," +  
														  Math.floor( 190*Math.random())  +")\">" +
	          the_word +"</a> ";    //  Link to concorder_text(i)
      if (the_multi>3){celll=celll+DBig;}			  
      if (the_multi>5){celll=celll+DBig;}
      if (the_multi>2){celll=celll+DBig;}      
      if (the_multi>1){celll=celll+DBold;}
      if (the_multi==1){celll=celll+DSmall;}	         	   
 
       cells[tabl_pos]=celll + random_blank(3) + endup;	 
        
       Px=Px+dx; Py=Py+dy; words_pos=words_pos-1;
       if (Px<0 || Px>(Ncolumns-1) || Py<0 || Py>(Nrows-1) || words_pos<end_val ) {break;}
    
       if(dx==-1 && dy==-1 && Px==Sx) {dy=1;}
       if(dx==-1 && dy==1 && Py==Sy)  {dx=1;}
       if(dx==1 && dy==1 && Px==Sx)   {dy=0;}
       if(dx==1 && dy==0 && Px==Sx+1) {dy=-1;}
       if(dx==1 && dy==-1 && Py==Sy)  {dx=-1;} 
       celltyp=celltyp+1; if (celltyp==7) {celltyp=0;}
	    if (Px<0 || Px>(Ncolumns-1) || Py<0 || Py>(Nrows-1) || words_pos < end_val  ) {break;}
    }
    //                           make the table out of cells[] 
    for (rowk=0;rowk<Nrows;rowk++)   {
       To_Output=To_Output+"<tr>";
    for (columnk=0;columnk<Ncolumns;columnk++)
      {    To_Output=To_Output+cells[ind_fr_pos(rowk,columnk)]; 
      }
    To_Output=To_Output+"</tr>"; 
    }
    To_Output=To_Output+"</table>";
    
   To_Output=To_Output+Bold+Small+NL;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud_order()\">Re-draw</a> "+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud()\">Other Cloud (Baby)</a> "+Blank+Blank+Blank;   
   To_Output=To_Output+"<a href=\"javascript:clean_concord()\">Clear concordances</a> "+Blank+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_arrow()\">All words ordered</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_fog()\">Foggy All words</a> "+Blank;
   To_Output=To_Output+DSmall+DBold;

document.getElementById("firstPar").innerHTML=
   document.getElementById("firstPar").innerHTML  +To_Output+"<br>";
   
  // ==================== Cloud function end  =====================
}

function All_words_arrow()
{
  // ============================================================== 
  document.getElementById("firstPar").innerHTML=" ";

To_Output="<table style=\"text-align: left; vertical-align:top; "+
                  " width: 900px;\" border=\"0\" "+
                  " cellpadding=\"2\" cellspacing=\"2\" bgcolor=\"#FFFFFF\"> <tbody><tr> "
		  +"<td style=\"text-align: center; vertical-align:top;\">"; 
  
  for( i=0;i<unique_words.length; i++)
      {    //   Taking each unique word and its count; print Big or Bold
        the_word=sorted_uniq_words[i];  the_multi=sorted_multip[i];
	if (the_multi==1){To_Output=To_Output+Small;}
        if (the_multi>2){To_Output=To_Output+Bold;}
	if (the_multi>3){To_Output=To_Output+Big;}
	To_Output=To_Output+"<a href=\"javascript:concorder_text(" + numpointer[i] +")\" "+
	         " style=\"text-decoration:none; color: rgb(70,70,0)\">" +
	          the_word +" ("+the_multi+")</a> ";    //  Link to concorder_text(i)
	if (the_multi>2){To_Output=To_Output+DBig;}      
        if (the_multi>1){To_Output=To_Output+DBold;}
	if (the_multi==1){To_Output=To_Output+DSmall;}	         
      }
  	To_Output=To_Output+"</td> </tr>";  
	To_Output=To_Output+" </tbody></table>";
	
   To_Output=To_Output+Bold+Small+NL;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud()\">(Baby) Concordle Cloud</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud_order()\">Ordered-Cloud</a> "+Blank+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:clean_concord()\">Clear concordances</a> "+Blank+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_arrow()\">All words ordered</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_fog()\">Foggy All words</a> "+Blank;
   To_Output=To_Output+DSmall+DBold;

document.getElementById("firstPar").innerHTML=
   document.getElementById("firstPar").innerHTML  +To_Output+"<br>";
   
  // ==============================================================
}

function All_words_fog()
{
  // ============================================================== 
  document.getElementById("firstPar").innerHTML=" ";

To_Output="<table style=\"text-align: left; vertical-align:top; "+
                  " width: 900px;\" border=\"0\" "+
                  " cellpadding=\"2\" cellspacing=\"2\" bgcolor=\"#FFFFFF\"> <tbody><tr> "
		  +"<td style=\"text-align: center; vertical-align:top;\">"; 
  
  for( i=0;i<unique_words.length; i++)
      {    //   Taking each unique word and its count; print Big or Bold
        the_word=unique_words[i];  the_multi=multiples[i];
	if (the_multi==1){To_Output=To_Output+Small;}
        if (the_multi>2){To_Output=To_Output+Bold;}
	if (the_multi>3){To_Output=To_Output+Big;}
	To_Output=To_Output+"<a href=\"javascript:concorder_text(" + i +")\" "+
	         " style=\"text-decoration:none; color: rgb(70,70,0)\">" +
	          the_word +" ("+the_multi+")</a> ";    //  Link to concorder_text(i)
	if (the_multi>2){To_Output=To_Output+DBig;}      
        if (the_multi>1){To_Output=To_Output+DBold;}
	if (the_multi==1){To_Output=To_Output+DSmall;}	         
      }
  	To_Output=To_Output+"</td> </tr>";  
	To_Output=To_Output+" </tbody></table>"; 
   To_Output=To_Output+Bold+Small+NL;
   
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud()\">(Baby) Concordle Cloud</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_cloud_order()\">Ordered-Cloud</a> "+Blank+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:clean_concord()\">Clear concordances</a> "+Blank+Blank+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_arrow()\">All words ordered</a> "+Blank;
   To_Output=To_Output+"<a href=\"javascript:analyze_to_fog()\">Foggy All words</a> "+Blank;
   To_Output=To_Output+DSmall+DBold;
   
   document.getElementById("firstPar").innerHTML=
   document.getElementById("firstPar").innerHTML  +To_Output+"<br>";
   
  // ==============================================================
}

function big_snippet_text(tval)
{

//  This makes the big snippets   
  
    //  Using     Hash_to_Unique[standard_words[i]]
    //   Here reusing this code
    //  +"<a href=\"javascript:big_snippet_text(" + i +")\" " 
    //         + " style=\"text-decoration:none; color: rgb(70,70,0)\">"  
     //         + orig_words[i] +"</a>"
        
	To_Output="<table style=\"text-align: left; vertical-align:top; width: 900px;\" border=\"0\" "+
                  " cellpadding=\"10\" cellspacing=\"10\" bgcolor=\"#FFFFD0\">  <tr>  <td> ";

var start_i=tval*1-40;  if (start_i<0) {start_i=0;}
	     
	     for(k=start_i;k<tval*1;k++)
		 {To_Output=To_Output   
		   +"<a href=\"javascript:concorder_text_click(" + Hash_to_Unique[standard_words[k]] +","+ k  +")\" " 
          + " style=\"text-decoration:none; color: rgb(70,70,0)\">"  
            + orig_words[k] +"</a> ";}

To_Output=To_Output + "<span style=\"background-color: rgb(180, 180, 255);\">" 
	     +"   "
	     + Bold + orig_words[tval*1] + " " +DBold + "   </span>";

var stop_i=tval*1+1+40;  	
	     if (stop_i>standard_words.length) {stop_i=standard_words.length;}
		 
	     for(k=tval*1+1;k<stop_i;k++)
		 {To_Output=To_Output   
		   +"<a href=\"javascript:concorder_text_click(" + Hash_to_Unique[standard_words[k]] +","+ k  +")\" " 
          + " style=\"text-decoration:none; color: rgb(70,70,0)\">"  
            + orig_words[k] +"</a> ";}
		 
		 
	     To_Output=To_Output + "</td> </tr>";
        To_Output=To_Output+ 
        "<tr><td style=\"text-align: center; vertical-align:top; \" bgcolor=\"#FFFFFF\">";  
     
        To_Output=To_Output+"<b> <small>";
        To_Output=To_Output+"<a href=\"javascript:clean_big_snippet()\">Close this view</a>"+Blank+Blank+Blank+Blank;	
		To_Output=To_Output+"<a href=\"javascript:clean_concord()\">Clear concordances</a> </small></b>";
        To_Output=To_Output+ "</td> </tr>";    
	To_Output=To_Output+" </table>"; 
        document.getElementById("thirdPar").innerHTML= To_Output;

}

function clean_big_snippet()
{
        document.getElementById("thirdPar").innerHTML= " ";  
}

function help_fun()
{
  //  This displays help function
        
	To_Output="<table style=\"text-align: left; vertical-align:top; width: 900px;\" border=\"0\" "+
                  " cellpadding=\"10\" cellspacing=\"10\" bgcolor=\"#FFFFD0\"> ";
        To_Output=To_Output+ 
        "<tr><td style=\"text-align: center; vertical-align:top; \" bgcolor=\"#FFFFFF\">";  
     
        To_Output=To_Output+"<b> <small>";
        To_Output=To_Output+"<a href=\"javascript:close_help_area()\">Close this view</a></small></b>";
        To_Output=To_Output+ "</td> </tr>";
	    
	To_Output=To_Output+ "<tr> <td>"   +  Help_String; 
        
	To_Output=To_Output + "</td> </tr>";
	
        To_Output=To_Output+ 
        "<tr><td style=\"text-align: center; vertical-align:top; \" bgcolor=\"#FFFFFF\">";  
     
        To_Output=To_Output+"<b> <small>";
        To_Output=To_Output+"<a href=\"javascript:close_help_area()\">Close this view</a></small></b>";
        To_Output=To_Output+ "</td> </tr>";    
	To_Output=To_Output+" </table>"; 
        document.getElementById("helpPar").innerHTML= To_Output;                  
}

function close_help_area()
{
        document.getElementById("helpPar").innerHTML= " ";  
}

function concorder_text_click(val, clicked )
{   Last_clicked=clicked;
    concorder_text(val);    
}

function analyze_to_cloud_order(){
   analyze_text();
   All_words_cloud_order();    // Ascending frquency 
}

</head>
<body bgcolor = "#CCCCCC" onLoad="demo()">

<div style="font-family: Helvetica,Arial,sans-serif;">
<center>
<div id="helpPar" style="font-family: Helvetica,Arial,sans-serif;">

</div> 
    
<table style="text-align: center; vertical-align:top;  width: 900px;" border="0" 
 " cellpadding="2" cellspacing="2" bgcolor="#EEEEEE"> 
 <tbody><tr> 
 <td style="text-align: center; vertical-align:top;">
 
<h3> <a href="http://www.uib.no/people/nfylk/concordle/" style="color: red;">Concordle</a> - 
Not so pretty cousin of <a href="http://wordle.net" style="color: red;">Wordle</a></h3>

<b>   
<small>
<a href="javascript:help_fun()">Help with Concordle </a>      
<a href="javascript:clean_input()">Clear the input </a>      
<a href="javascript:clean_output()">Clear the output </a>      
<a href="javascript:clean_concord()">Clear concordances</a>      
</small></b>
<br>

<form name="myInputWindow">

<textarea style=""  name="theInsertedText" cols="90" rows="12">
  Who is Concordle? She is a not so pretty cousin of Wordle, who recently became very popular. 
  Wordle is a Java application (available as an applet)
  who makes beautiful word clouds. Such a cloud is made according to a rule 
  that a more frequent word gets a bigger type (or font). Also colors can be used 
  for various coding, or just for beauty's sake. 
  
  Wordle makes beautiful clouds with beautiful fonts and many colors, and you 
  can play with it, possibly even produce a useful presentation or analysis.
  Several people mentioned the potential of Wordle for research or teaching, 
  even at elementary schools. Wordle is beautiful, fascinating to play with, 
 Wordle makes beautiful clouds. But that is the end - beautiful pictures of a text.

Concordle has one point common with Wordle: it makes word clouds. But these 
  are only text, and in a browser in general the choice of fonts is limited, 
  so the clouds are not so very pretty. But it is much more clever: 
  All the words in the cloud are clickable, i.e. they have links to concordancer function. 
   Wikipedia will tell you what a concordancer is, in case that you do not know from before. 
  So Concordle is a little concordancer which can be really used in research and 
  for some types of teaching. Thus it has 
  a wastly broader capabilities than Wordle.
  
  If your text contains 10 times the word "concordance", you might like to see why. 
  So you click on the big CONCORDANCE and all 10 the snippets of text arround the 
  ten occurrences of concordance in the text.
  
  A real concordancer program can be used in linguistic studies, and also as a 
  tool for other types of analysis. A real free corcondancer is available, as 
  a Wikipedia page tells us. A real concordancer program makes the whole 
  concordance available at once, possibly on texts of tens of thousands of words. 
  Concordle works with texts of several thousands words without problems, 
  but as well as Wordle, Concordle is basically an educational toy, 
  not strong enough for heavy duty analysis of whole books or even sets of books.

Why have I written Concordle? The idea came naturally from Wordle. Besides, it is 
  a little tribute to my friend prof. Ralph Jewell of University of Bergen, who introduced me 
  to his use of concordance in philosophical analysis some 20 years ago. Further, I have 
  a long time talked about how useful JavaScript can be for general programming, 
  not only for AJAX and Gmail. So now I have written sort of large program.

Many people asked the author of Wordle for the source code. 
  Wordle is based on proprietary IBM libraries and thus not of open source. 
  In contrast, Concordle is based on my learning to program in JavaScript, 
  so the source is not only free, but documented and inviting for improvements.
   
 If you are going to use Concordle, a little link and a mention of the 
 author would be greatly appreciated. Become friends with Concordle!

<!--    OPEN THIS COMMENT TO PUT INTO THE OPENED_CONCORDLE EXECUTEJAVASCRIPT

Omitted words:
the and is are
(Baby) Concordle-Cloud Ordered-Cloud Concordle-Ordered Concordle-Foggy cloud

In this area will appear the word cloud when you click on one of the
Concordle links (buttons?) above

In this area appear snippets arround words
clicked on in the cloud in the above area. This is the concordance area.

JAVASCRIPTREMOVE REMOVE THIS LINE IF YOU WILL EXECUTE -->
Clear the input

This is an ultimate Open Source method (L. Kocbach).
Unfortunately it does not completely preserve all the code - see below. ( But also some spaces disappear somehow )
The simple idea of HTML + Javascript interpreter is originally by Richard Bowles http://richardbowles.tripod.com/edres/editor.htm
The source of concordle.html interfered with the "html editor" function of this page
It is fixed using a dirty trick:
The whole end of the original html is commented out, so that the input is not ended
by the end of "textarea". This is marked by an open - not ended - comment line.
After the document loaded - using onLoad="restore_the_code()" in the body declaration
The code is restored - here is the function - guess why there is the removal of the space ...

function restore_the_code() { var ScriptInput = myInputWindow.theInsertedText.value; ScriptInput = ScriptInput.replace(/EXECUTEJAVASCRIPT /, "EXECUTEJAVASCRIPT-->"); ScriptInput = ScriptInput.replace(/ JAVASCRIPTREMOVE/g, "<--JAVASCRIPTREMOVE"); myInputWindow.theInsertedText.value=ScriptInput; }

Concordle is written entirely in simple JavaScript
and the whole code is inside of this document.
In addition to this final code, there are also
versions of various steps in the development.
These are available at the other Concordle home page.
The story of Concordle is told (with detailed help) at Concordle's Google blogspot The author is no expert in JavaScript. Suggestions for
understandable improvements are very welcome.
At this stage, the example text explains some aspects of Concordle. Ladislav Kocbach
Institutt for fysikk og Teknologi )
( Department of Physics and Technology )
University of Bergen,
Bergen, Norway