Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang='en'>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Argument Visualizer</title>
  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("textarea").focus(function() {
        $(this).css("background-color", "#f2f2f2");
      });
      $("textarea").blur(function() {
        $(this).css("background-color", "#ffffff");
      });
    });
  </script>
</head>

<body>
  <ul class="sidenav">
  </ul>

  <div class="content">
    <h2>Argument visualizer</h2>

    <div class="container">
      <section>
        <p>Interactively explore the arguments within texts. This tool does not work with raw text. Only pre-annotated texts can be visualized. The tag set to annotate your own texts will be available here (but not yet). A selection of pre-annotated texts are here (but not yet).</p>
      </section>
    </div>

    <div class="wrapper">
     

        <button class="button1" onclick="changeToggleAccuracy()"  onmouseover="mouseover1();" onmouseout="mouseout();">Arguments</button>
        <button class="button2" onclick="changeToggleBrevity(document.f1.sstextbox.value,0,100)" onmouseover="mouseover2();" onmouseout="mouseout();">Reasoning</button>
        <button class="button3" onclick="changeToggleClarity(document.f1.sstextbox.value,0,100)" onmouseover="mouseover3();" onmouseout="mouseout();">Formal fallacies</button>
        <button class="button4" onclick="changeToggleObjectivity(document.f1.sstextbox.value,0,100)" onmouseover="mouseover4();" onmouseout="mouseout();">Informal fallacies </button>
        <button class="button5" onclick="changeToggleFormality(document.f1.sstextbox.value,0,100)" onmouseover="mouseover5();" onmouseout="mouseout();">Causality</button>

    </div>
    <p class="out" id="intro" rows="8" style="width: 80%;"></p>
    <form id="f1" name="f1">
      <p><textarea cols="50" name="sstextbox"  rows="8" style="width: 80%;" wrap="soft" placeholder="Paste text here and click button." onkeyup="textChange()" ></textarea></form>

    </form>
    <p id="introduction"></p>
    <p id="output"></p>
  	<p id="output1" ></p>
  	<p id="output2" ></p>
  	<p id="output3" ></p>
      <div style="text-align: left">
        <div class="largefloating-box">
          <p><strong>Arguments</strong></p>
          <ul>
          <li class="nobull"><i class="em em-owl"></i> <b>Elements:</b> conclusion, premise, assumption (hidden and overlooked), logical indicators </li>
          <li class="nobull"><i class="em em-owl"></i> <b>Valid propositional forms</b> modus ponens, modus tollens, hypothetical syllogism, disjunctive syllogism, constructive dilemma </li>
          <li class="nobull"><i class="em em-owl"></i> <b>Assumptions:</b> hidden, overlooked</li>
          </ul>
         <p><strong>Reasoning</strong></p>
          <ul>
          <li class="nobull"><i class="em em-thinking_face"></i> <b>Deductive</b> (from universal case) </li>
          <li class="nobull"><i class="em em-thinking_face"></i> <b>Inductive</b> (from particular case)</li>
           <li class="nobull"><i class="em em-thinking_face"></i> <b>Abductive</b> (from particular conditional case)</li>
          </ul>

          <p><strong>Formal fallacies</strong> </p>
          <ul>
          <li class="nobull"><i class="em em-bomb"></i> <b>Invalid arguments:</b> denying the antecedent, affirming the consequent, undistributed middle term</li>
          <li class="nobull"><i class="em em-bomb"></i> <b>Syllogistic fallacies:</b> fallacy of four terms, illicit major, illicit minor, affirming a disjunct</li>
          <li class="nobull"><i class="em em-bomb"></i> <b>Invalid inferences:</b> fallacy of composition, fallacy of division</li>
          </ul>
         <p><strong>Informal fallacies</strong></p>
          <ul>
          <li class="nobull"><i class="em em-grinning_face_with_one_large_and_one_small_eye"></i> <b>Red herring fallacies:</b> straw man, genetic fallacy, bandwagon fallacy (ad populum), emotional appeal (rhetorical ploy), wishful thinking, ad hominem, tu quoque, appeal to authority, black or white fallacy (false dilemma, false dichotomy), special pleading, no true Scotsman, the fallacy fallacy, gambler`s fallacy </li>
          <li class="nobull"><i class="em em-grinning_face_with_one_large_and_one_small_eye"></i> <b>Non causa pro causa:</b> false cause, cum hoc ergo propter hoc, post hoc ergo propter hoc, Texas sharpshooter fallacy</li>
          <li class="nobull"><i class="em em-grinning_face_with_one_large_and_one_small_eye"></i> <b>Vagueness and ambiguity:</b> equivocation (ambiguity), middle ground, slippery slope, appeal to nature</li>
            <li class="nobull"><i class="em em-grinning_face_with_one_large_and_one_small_eye"></i> <b>Weak analogy:</b> unrepresentative sample, hasty generalization, anecdotal fallacy, misleading statistics</li>
          </ul>
          <p><strong>Causality</strong></p>
          <ul>
          <li class="nobull"><i class="em em-atom_symbol"></i> <b>Types of causes</b> proximal, distal, root, common, rival, sufficient, necessary</li>

        <p style="text-align: center">&nbsp;</p>

</body>

</html>
              
            
!

CSS

              
                

/*responsive nagivation menu*/
ul.sidenav {
    list-style-type: none;
    margin: 0;
	padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #f28500;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}

@media screen and (max-width: 1050px){
    ul.sidenav {
        width:100%;
        height:auto;
        position:relative;
    }
    ul.sidenav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left:0;}
}

@media screen and (max-width: 400px){
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}
@media all and (max-width: 400px) {
  section, aside {
    float: none;
    width: auto;
  }
}
    font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size:10pt;
    color:#000;
    background-color:#FFF

/*placeholder for form*/
::-webkit-input-placeholder {
  color: #3498db;
}

/* Firefox */
::-moz-placeholder {
  color: #3498db;
}

/* IE */
:-ms-input-placeholder {
  color: #3498db;
}

body {
	min-width: ;
}

header, footer {
    background-color:  #000000;
    clear: left;
	color: #FFA500;
    padding: 1em;
    text-align: center;
}

.button {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #FFA500;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button1 {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #ffffff; /*100% white*/
  border: 2px solid #ffff66; /*70% yellow*/
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button2 {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #ffffff; /*100% white*/
  border: 2px solid  #ffb366; /*70% orange*/
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button3 {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #ffffff; /*100% white*/
  border: 2px solid  #c0e769; /*light green*/
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button4 {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #ffffff; /*100% white*/
  border: 2px solid  #69e4e7;  /*light blue*/
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button5 {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #ffffff; /*100% white*/
  border: 2px solid  #B19CD9;  /*light purple*/
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button6 {
  padding: 6px 10px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #000000;
  background-color: #FFA500;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px #999;
}
.button:hover {
	background-color: #D3D3D3
}
.button1:hover {
	background-color: #D3D3D3
}
.button2:hover {
	background-color: #D3D3D3
}
.button3:hover {
	background-color: #D3D3D3
}
.button4:hover {
	background-color: #D3D3D3
}
.button5:hover {
	background-color: #D3D3D3
}
.button6:hover {
	background-color: #D3D3D3
}
.button:active {
	background-color: #FFF;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.button2:active {
	background-color: #FFF;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.button3:active {
	background-color: #FFF;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container {
    padding-left:200px;
/* LC width */
    padding-right:150px
/* RC width */
}

#container .column {
    position:relative;
    float:left
}

#center {
    width:100%
}

#left {
    width:200px;
/* LC width */
    right:200px;
/* LC width */
    margin-left:-100%
}

#right {
    width:150px;
/* RC width */
    margin-right:-150px
/* RC width */
}

#footer {
    clear:both
}

.hidden {
    display:none
}
/*** IE6 Fix ***/

* html #left {
    left:150px
/* RC width */
}
.nobull {
list-style-type: none;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    resize: none;
}
}
#popupImage {
    z-index:10;
    left:0;
    position:absolute;
    top:0;
    display:none
}

/*blocks float and rearrange based on screen size*/
.largefloating-box {
	border: solid;
    border-color: #ffdf9c;
    border-radius: 15px;    
	display: inline-block;
	padding: 10px 10px 10px 10px; /*top right bottom left*/
    width: 90%;
    margin: 10px;
}
table#maintab td#lefty {
    border-right-width:2pt;
    width:150px;
    border-right-style:solid;
    border-color:#000;
    text-align:right;
    vertical-align:top
}
.midleft {
    clear:both;
	margin:5px;
    height:
    width:
    float:left;
    padding-top:2px;
    padding-right:5px;
    padding-bottom:5px;
    padding-left:5px
	 
}
.topleft {
    margin:5px;
    height:160px;
    width:150px;
    float:left;
    padding-top:2px;
    padding-right:5px;
    padding-bottom:5px;
    padding-left:5px
}
.topcentre {
    margin:5px;
    height:150px;
    min-width: 170px;
    float:center;
    padding-top:2px;
    padding-right:5px;
    padding-bottom:5px;
    padding-left:5px
}
.topright {
    margin:5px;
    height:170px;
    width:160px;
    float:right;
    padding-top:20px;
    padding-right:5px;
    padding-bottom:5px;
    padding-left:5px
}
ul {
    margin-bottom:0;
    margin-top:0;
    padding-left:2em;
    margin-left:0;
    list-style-position:outside;
    list-style-type:disc
}

.unhidden {
    display:block
}

.wrapper {
    text-align: left;
}





              
            
!

JS

              
                // JavaScript Document 
/* 
v1 initial version
v2 remove unnecessary code
v3 - NEED TO RENAME FUNCTIONS, etc
*/

function textChange()
{
	clr();
	if(AToggle==1)
		DetectAccuracy(document.f1.sstextbox.value,0,100);
	if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
}
function changeToggleAccuracy()
{
	clr();
	if(AToggle==1)
	{
		
		AToggle=0;
	if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
	else
	{
		
	AToggle=1;
	
	DetectAccuracy(document.f1.sstextbox.value,0,100)
	if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
}
function changeToggleBrevity()
{
	clr();
	if(BToggle==1)
	{
		
		BToggle=0;
	if(AToggle==1)
	DetectAccuracy(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
	else
	{
		
	BToggle=1;
	
	DetectBrevity(document.f1.sstextbox.value,0,100);
	if(AToggle==1)
		DetectAccuracy(document.f1.sstextbox.value,0,100)
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
}
function changeToggleClarity()
{
	clr();
	if(CToggle==1)
	{
		
		CToggle=0;
	if(AToggle==1)
	DetectAccuracy(document.f1.sstextbox.value,0,100);
    if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
	else
	{
		
	CToggle=1;
	DetectClarity(document.f1.sstextbox.value,0,100);
	
	if(AToggle==1)
		DetectAccuracy(document.f1.sstextbox.value,0,100)
    if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
}
function changeToggleObjectivity()
{
	clr();
	if(OToggle==1)
	{
		
		OToggle=0;
	if(AToggle==1)
	DetectAccuracy(document.f1.sstextbox.value,0,100);
    if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
	else
	{
		
	OToggle=1;
	DetectObjectivity(document.f1.sstextbox.value,0,100);
	
	if(AToggle==1)
	DetectAccuracy(document.f1.sstextbox.value,0,100);
    if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(FToggle==1)
	DetectFormality(document.f1.sstextbox.value,0,100);
	}
}
function changeToggleFormality()
{
	clr();
	if(FToggle==1)
	{
		
		FToggle=0;
	if(AToggle==1)
	DetectAccuracy(document.f1.sstextbox.value,0,100);
    if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
	}
	else
	{
		
	FToggle=1;
	DetectFormality(document.f1.sstextbox.value,0,100);
	
	if(AToggle==1)
	DetectAccuracy(document.f1.sstextbox.value,0,100);
    if(BToggle==1)
	DetectBrevity(document.f1.sstextbox.value,0,100);
    if(CToggle==1)
	DetectClarity(document.f1.sstextbox.value,0,100);
    if(OToggle==1)
	DetectObjectivity(document.f1.sstextbox.value,0,100);
	}
}
function DetectAccuracy(mystring, range_min, range_max){ 
  
	processedText = '';
  var b = [];
  var c = [];
  
//Regex array - arguments
b[0] = /<conc>/gi;
b[1] = /<prem>/gi;
b[2] = /<assump>/gi;
b[3] = /<MP>/gi;
b[4] = /<MT>/gi;
b[5] = /<HS>/gi;
b[6] = /<DS>/gi;
b[7] = /<CS>/gi;
b[8] = /<hidden>/gi;
b[9] = /<overlooked>/gi;
b[10] = /<indicator>/gi;
  
//Inline replace string array - arguments
c[0] = '<span title="Conclusion is reached using reasoning applied to premises.">' + conclusion + italicGroupNoDollar +'</span>' ;
c[1] = '<span title="Premises are declarative statements that provide the evidence for conclusions.">' + premise +  italicGroupNoDollar +'</span>' ;
c[2] = '<span title="Assumptions are premises that are not stated.">' + assumption + italicGroupNoDollar + '</span>' ;
c[3] = '<span title="Modus ponens: one of the valid propositional forms">' + propositionalForm + italicGroupNoDollar + '</span>' ;
c[4] = '<span title="Modus tollens: one of the valid propositional forms">' + propositionalForm + italicGroupNoDollar + '</span>' ;
c[5] = '<span title="Hypothetical syllogism: one of the valid propositional forms">' + propositionalForm + italicGroupNoDollar + '</span>' ;
c[6] = '<span title="Disjunctive syllogism: one of the valid propositional forms">' + propositionalForm + italicGroupNoDollar + '</span>' ;
c[7] = '<span title="Constructive dilemma: one of the valid propositional forms">' + propositionalForm + italicGroupNoDollar + '</span>' ;
c[8] = '<span title="Assumptions that are hidden on purpose">' + assumption + italicGroupNoDollar + '</span>' ;
c[9] = '<span title="Assumptions that are accidentally overlooked">' + assumption + italicGroupNoDollar + '</span>' ;
c[10] = '<span title="Logical indicator">' + indicator + italicGroupNoDollar + '</span>' ;

//Variables for script block
var a = [textSharer()]; 
var i;
var l = a.length;
var j;
var ll = b.length;

for (i = 0; i < l; i ++ ) { //start code block for loop 1
	for (j = range_min; j < range_max; j ++ ) {
		 if (a[i].search(b[j]) != -1) {
	      	 a[i] = a[i].replace(b[j],c[j]); 
	        } 
	   }    
	} //end loop
	
for(i = 0 ; i < l ; i ++ ) { //start code block for loop 2
	    processedText += (a[i] + ' ');
	} //end loop
              document.getElementById("output").innerHTML = processedText;
     shareText=processedText;
  
     
}
function DetectBrevity(mystring, range_min, range_max){ 
	processedText = '';
  var b = [];
  var c = []; 

//Regex array - reasoning
b[0] = /<deductive>/gi;
b[1] = /<inductive>/gi;  
b[2] = /<abductive>/gi;   
//Inline replace string array - reasoning
c[0] = '<span title="Conclusion is reached by applying the rule from the universal case.">' + deductive + italicGroupNoDollar +'</span>' ;
c[1] = '<span title="Conclusion is reached by guessing from a particular case.">' + inductive + italicGroupNoDollar +'</span>' ;
c[2] = '<span title="Conclusion is reached by guessing from a particular conditonal case (e.g. if X, then it might be Y).">' + abductive + italicGroupNoDollar +'</span>' ;

  //Variables for script block
var a = [textSharer()]; 
var i;
var l = a.length;
var j;
var ll = b.length;

for (i = 0; i < l; i ++ ) { //start code block for loop 1
	for (j = range_min; j < range_max; j ++ ) {
		 if (a[i].search(b[j]) != -1) {
	      	 a[i] = a[i].replace(b[j],c[j]); 
	        } 
	   }    
	} //end loop
	
for(i = 0 ; i < l ; i ++ ) { //start code block for loop 2
	    processedText += (a[i] + ' ');
	} //end loop
              document.getElementById("output").innerHTML = processedText;
     shareText=processedText;
  
     
}
function DetectClarity(mystring, range_min, range_max){ 
  
	processedText = '';
  var b = [];
  var c = [];

//Regex array - formal fallacies
b[0] = /<IA-DA>/gi;
b[1] = /<IA-AC>/gi;
b[2] = /<IA-UM>/gi;
b[3] = /<SF-fourterms>/gi;
b[4] = /<SF-major>/gi;
b[5] = /<SF-minor>/gi;
b[6] = /<SF-disjunct>/gi;
b[7] = /<composition>/gi;
b[8] = /<division>/gi;

//Inline replace string array - formal fallacies
c[0] = '<span title="Invalid argument: denying the antecedent">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[1] = '<span title="Invalid argument: affirming the consequent">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[2] = '<span title="Invalid argument: undistributed middle term">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[3] = '<span title="Syllogistic fallacy: fallacy of four terms">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[4] = '<span title="Syllogistic fallacy: illicit major">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[5] = '<span title="Syllogistic fallacy: illicit minor">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[6] = '<span title="Syllogistic fallacy: affirming a disjunct">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[7] = '<span title="Fallacy of composition">' + formalFallacy + italicGroupNoDollar +'</span>' ;
c[8] = '<span title="Fallacy of division">' + formalFallacy + italicGroupNoDollar +'</span>' ;

//Variables for script block
var a = [textSharer()]; 
var i;
var l = a.length;
var j;
var ll = b.length;

for (i = 0; i < l; i ++ ) { //start code block for loop 1
	for (j = range_min; j < range_max; j ++ ) {
		 if (a[i].search(b[j]) != -1) {
			 
	      	 a[i] = a[i].replace(b[j],c[j]); 
	      
	} //end loop
}
}
for(i = 0 ; i < l ; i ++ ) { //start code block for loop 2
	    processedText += (a[i] + ' ');
	} //end loop
       document.getElementById("output").innerHTML = processedText;
           shareText=processedText;

}
function DetectObjectivity(mystring, range_min, range_max){ 

	processedText = '';
  var b = [];
  var c = [];
//Regex array - informal fallacies
b[0] = /<redherr>/gi;
b[1] = /<strawman>/gi;
b[2] = /<genetic>/gi;
b[3] = /<bandwagon>/gi;
b[4] = /<emotional>/gi;
b[5] = /<wishful>/gi;
b[6] = /<adhominem>/gi;
b[7] = /<tuquoque>/gi;
b[8] = /<cumhoc>/gi;
b[9] = /<posthoc>/gi;
b[10] = /<texas>/gi;
b[11] = /<equivocation>/gi;
b[12] = /<middle>/gi;
b[13] = /<slippery>/gi;
b[14] = /<nature>/gi;
b[15] = /<unrepresentative>/gi;
b[16] = /<hasty>/gi;
b[17] = /<anecdotal>/gi;
b[18] = /<authority>/gi;
b[19] = /<blackorwhite>/gi;
b[20] = /<misstat>/gi;
b[21] = /<pleading>/gi;
b[22] = /<loaded>/gi;
b[23] = /<scotsman>/gi;
b[24] = /<purity>/gi;
b[25] = /<fallacyfallacy>/gi;
b[26] = /<gambler>/gi;
b[27] = /<ambiguity>/gi;  
b[28] = /<falsecause>/gi;
  
//Inline replace string array - informal fallacies
c[0] = '<span title="Red herring fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[1] = '<span title="Strawman fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[2] = '<span title="Genetic fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[3] = '<span title="Bandwagon fallacy (ad populum).">' + informalFallacy + italicGroupNoDollar +'</span>' 
c[4] = '<span title="Appeal to emotion (rhetorical ploy).">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[5] = '<span title="Wishful thinking.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[6] = '<span title="Ad hominem (personal attack).">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[7] = '<span title="Tu quoque">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[8] = '<span title="Cum hoc ergo propter hoc.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[9] = '<span title="Post hoc ergo protper hoc.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[10] = '<span title="Texas sharpshooter fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ; 
c[11] = '<span title="Equivocation (ambiguity fallacy).">' + informalFallacy + italicGroupNoDollar +'</span>' ; 
c[12] = '<span title="Middle ground fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[13] = '<span title="Slippery slope fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[14] = '<span title="Appeal to nature.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[15] = '<span title="Statistical fallacy: Unrepresentative sample">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[16] = '<span title="Hasty generalization.">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[17] = '<span title="Anecdotal fallacy.">' + informalFallacy + italicGroupNoDollar +'</span>' ;  
c[18] = '<span title="Appeal to authority">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[19] = '<span title="Black or white fallacy (either/or fallacy, false dilemma, false dichotomy).">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[20] = '<span title="Misleading statistic (lack of details)">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[21] = '<span title="Special pleading">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[22] = '<span title="Loaded question">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[23] = '<span title="No true Scotsman (Appeal to purity)">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[24] = '<span title="Appeal to purity (No true Scotsman)">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[25] = '<span title="The fallacy fallacy">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[26] = '<span title="The gambler`s fallacy">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[27] = '<span title="Ambiguity fallacy (equivocation)">' + informalFallacy + italicGroupNoDollar +'</span>' ;
c[28] = '<span title="False cause">' + informalFallacy + italicGroupNoDollar +'</span>' ;

  //Variables for script block
var a = [textSharer()]; 
var i;
var l = a.length;
var j;
var ll = b.length;

for (i = 0; i < l; i ++ ) { //start code block for loop 1
	for (j = range_min; j < range_max; j ++ ) {
		 if (a[i].search(b[j]) != -1) {
	      	 a[i] = a[i].replace(b[j],c[j]); 
	        } 
	   }    
	} //end loop
	
for(i = 0 ; i < l ; i ++ ) { //start code block for loop 2
	    processedText += (a[i] + ' ');
	} //end loop
        document.getElementById("output").innerHTML = processedText; 
    shareText=processedText;

}
function DetectFormality(mystring, range_min, range_max){ 
  
	processedText = '';
  var b = [];
  var c = [];
//regex array - formality  
b[0] = /<proximal>/gi;
b[1] = /<distal>/gi;
b[2] = /<root>/gi;
b[3] = /<common>/gi;
b[4] = /<rival>/gi;
b[5] = /<sufficient>/gi;
b[6] = /<necessary>/gi;

//Inline replace string array - formality
c[0] = '<span title="Proximal cause">' + causality + italicGroupNoDollar +'</span>' ;
c[1] = '<span title="Distal cause">' + causality + italicGroupNoDollar +'</span>' ;
c[2] = '<span title="Root cause">' + causality + italicGroupNoDollar +'</span>' ;
c[3] = '<span title="Common cause">' + causality + italicGroupNoDollar +'</span>' ;
c[4] = '<span title="Rival cause">' + causality + italicGroupNoDollar +'</span>' ;
c[5] = '<span title="Sufficient cause">' + causality + italicGroupNoDollar +'</span>' ;
c[6] = '<span title="Necessary cause">' + causality + italicGroupNoDollar +'</span>' ;


//Variables for script block
var a = [textSharer()]; 	
var i;
var l = a.length;
var j;
var ll = b.length;

for (i = 0; i < l; i ++ ) { //start code block for loop 1
	for (j = range_min; j < range_max; j ++ ) {
		 if (a[i].search(b[j]) != -1) {
	      	 a[i] = a[i].replace(b[j],c[j]); 
	        } 
	   }    
	} //end loop
	
for(i = 0 ; i < l ; i ++ ) { //start code block for loop 2
	    processedText += (a[i] + ' ');
	} //end loop
            document.getElementById("output").innerHTML = processedText; 
    shareText=processedText;

}
function textSharer(){
  if(progress==0){
    progress=1;
    document.getElementById("introduction").innerHTML = intro;
   return  document.f1.sstextbox.value;   
  }
  else return shareText;
}

function clr(){
document.getElementById("output").innerHTML = "";
document.getElementById("output1").innerHTML = "";
document.getElementById("output2").innerHTML = "";
document.getElementById("output3").innerHTML = "";
document.getElementById("introduction").innerHTML = "";  
alreadyDA=0;
alreadyDB=0;  
alreadyDC=0; 
alreadyDO=0;  
alreadyDF=0;    
progress=0;

}
var AToggle=1;
var BToggle=1;
var CToggle=1;
var OToggle=1;
var FToggle=1;
var shareText;
var alreadyDA = 0;
var alreadyDB = 0;
var alreadyDC = 0;
var alreadyDO = 0;
var alreadyDF = 0;
var progress = 0;

// Inline string replace vars
var conclusion = '<i class="em em-owl"></i><span style=\"background-color:#ffff66;\"><font color="black"><b>Conclusion</span> </b><b>';
var premise = '<i class="em em-owl"></i><span style=\"background-color:#ffff66;\"><font color="black"><b>Premise</span> </b><b>';
var assumption = '<i class="em em-owl"></i><span style=\"background-color:#ffff66;\"><font color="black"><b>Assumption</span> </b><b>';
var indicator = '<i class="em em-owl"></i><span style=\"background-color:#ffff66;\"><font color="black"><b>Logical indicator</span> </b><b>';
var propositionalForm = '<i class="em em-owl"></i><span style=\"background-color:#ffff66;\"><font color="black"><b>Valid argument</span> </b><b>';
var deductive = '<i class="em em-thinking_face"></i><span style=\"background-color:#ffb366;\"><font color="black"><b>Deductive reasoning</span> </b><b>';
var inductive = '<i class="em em-thinking_face"></i></i><span style=\"background-color:#ffb366;\"><font color="black"><b>Inductive reasoning</span> </b><b>';
var abductive = '<i class="em em-thinking_face"></i></i><span style=\"background-color:#ffb366;\"><font color="black"><b>Abductive reasoning</span> </b><b>';
var formalFallacy = '<i class="em em-bomb"></i><span style=\"background-color:#c0e769;\"><font color="black"><b>Formal fallacy</span> </b><b>';
var informalFallacy = '<i class="em em-grinning_face_with_one_large_and_one_small_eye"></i><span style=\"background-color:#69e4e7;\"><font color="black"><b>Informal fallacy</span> </b><b>';
var causality = '<i class="em em-atom_symbol"></i><span style=\"background-color:#B19CD9;\"><font color="black"><b>Causality</span> </b><b>';

// shared arrays
var italicGroup = '<font color="red"><i>\'$1\'</i></b><font color="black">';
var italicGroupNoDollar = '<font color="red"></b><font color="black">';
var intro ="<h3 align=\"left\">Annotated version</h3><p align=\"left\"> The following colour scheme is used: <i>&nbsp;<span style=\"background-color:#ffff66;\"> Arguments </span>&nbsp;<span style=\"background-color:#ffb366;\"> Reasoning </span> &nbsp;<span style=\"background-color:#c0e769;\"> Formal fallacies </span> &nbsp;<span style=\"background-color:#69e4e7;\"> Informal fallacies </span>&nbsp;<span style=\"background-color:#B19CD9;\"> Causality</span></i>. Explanations will appear when cursor is placed over error. Links to videos and supplmentary explanations are given below. <hr></p></body>" 

// shared feedback arrays
function mouseout(){
  document.getElementById("intro").innerText="Explanations of the buttons appear here.";
}
function mouseover1(){
  document.getElementById("intro").innerText = "Identifies components of arguments, namely conclusion and premises (or assumptions)";
}
function mouseover2(){
  document.getElementById("intro").innerText ="Identifies types of reasoning";
}
function mouseover3(){
  document.getElementById("intro").innerText = "Identifies problems with structure (formal fallacies)";
}
function mouseover4(){
  document.getElementById("intro").innerText = "Identifies problems with reasoning (informal fallacies)";
}
function mouseover5(){
  document.getElementById("intro").innerText = "Identifies types of causes";
}


              
            
!
999px

Console