error on line 1
<!DOCTYPE html>
<html lang="de">
<head>
<title>automatisierte textvorlagen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<!-- weil es auf dieser seite zu finden ist... -->
<link href='https://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link rel="icon" href="http://erroronline.one/column1/icon128.png" type="image/png" sizes="128x128" />
<link rel="apple-touch-icon" href="http://erroronline.one/column1/icon192.png" sizes="192x192" />
<link rel="icon" href="http://erroronline.one/column1/icon192.png" type="image/png" sizes="192x192" />
<link rel="shortcut icon" type="image/x-icon" href="http://erroronline.one/column1/icon256.ico" />
<link rel="mask-icon" href="http://erroronline.one/column1/icon.svg" />
<meta property="og:image" content="http://erroronline.one/column1/icon192.png">
<meta property="twitter:image" content="http://erroronline.one/column1/icon192.png">
<meta property="og:image:width" content="192">
<meta property="og:image:height" content="192">
<link rel="image_src" href="http://erroronline.one/column1/icon192.png">
<!-- /bilder -->

<script>

function el(v) {return document.getElementById(v);}

//language objects to be set before catalogue probably due to render order - otherwise errors occur
var adressee = {
    er:['der Kunde', 'die Kundin'],
    ihm:['dem Kunden','der Kundin'],
    dessen:['des Kunden','der Kundin'],
    ihn:['den Kunden','die Kundin'],
    seiner:['seiner','ihrer'],
    euer:['Ihren Auftraggeber','Ihre Auftraggeberin'],
    eures:['Ihres Auftraggebers','Ihrer Auftraggeberin'],
    output:function(grammar){
        var index=0;    if (el('female')) if(el('female').checked) index+=1;
        return this[grammar][index];}
};
var names = {
    ganz:function(){
        return el('name')?el('name').value:'';},
    kurz:function(grammar){
        if (el('name').value){
            var namen=el('name').value.split(' ');
            if (el('child')) if(el('child').checked) return namen[0];
            else {
                if (el('female')) if(el('female').checked) return 'Frau '+namen[namen.length-1];
                else if (el('male')) if(el('male').checked) return 'Herr'+(grammar=='gen'?'n ':' ')+namen[namen.length-1];
            }
        }
        else return'';
    }
};

function gen(){ //create user output
    if (typeof(catalogue)!='undefined'){
        var qset=catalogue.construct;
        //read selected checkboxes or set to default
        var checkbox=new Array();
        Object.keys(qset).forEach(function(value){ checkbox[value]=el('c'+value)?(el('c'+value).checked?1:0):1;});

        //limit output to selected topics
        var inputs=document.getElementsByTagName('input');
        var wanted=new Array();
        for (var i=0; i<inputs.length; i++){ if (inputs[i].checked) wanted[i]=inputs[i].value; }

        //output
        el("fragen").innerHTML=el("text").value="";
        el("fragen").innerHTML+="<ul>";
        var index=3;
        var clipboard='';
        Object.keys(qset).forEach(function(value){
            if (wanted.indexOf(value)>=0) { // according to selected topics
                el('fragen').innerHTML+='<li><input type="checkbox" id="c'+value+'" value="1" '+(checkbox[value]==1?'checked="checked"':'')+'><label for="c'+value+'">'+qset[value][index]+'</label></li>';
                el('text').value=clipboard+=(checkbox[value]==1?qset[value][index]+'\n':'');
            }
        });
        el("fragen").innerHTML+="</ul>";
        
        if (!el('name').value || !el('problem').value || !el('loesung').value) popup('popup','Bitte die Kundendaten angeben da andernfalls die Textbausteine nicht korrekt erzeugt werden!');
    } else popup('popup','Bitte den Versorgungsbereich wählen...');
}

function inputs(){ //create input fields from text brick items
    if (typeof(catalogue)!='undefined'){
        var linebreak=el('dynamicinputs').innerHTML='';
        var output='<br /><div class="items" style="height:0;">';
        var cat=catalogue.construct;
        var itemcount=0;
        Object.keys(cat).forEach(function(key){
            if (typeof cat[key]==='object'){
            itemcount++;
            if (linebreak!=cat[key][0]){ 
                if (itemcount>2) output+='<span class="itemresize" onclick="el(\'item'+linebreak+'\').style.height=el(\'item'+linebreak+'\').style.height==\'1.75em\'?\''+1.9*Math.ceil(itemcount/2)+'em\':\'1.75em\'">+</span>';
                output+='</div><div class="items" id="item'+cat[key][0]+'" style="height:1.75em;">';    linebreak=cat[key][0];    itemcount=0;
            }
            output+=(itemcount>1&&itemcount%2==0?'<br />':'')+'<label class="itemalign" for="'+key+'" title="'+cat[key][1]+'"><input type="radio" name="'+cat[key][0]+'" id="'+key+'" value="'+key+'" '+(cat[key][2]?'checked="checked"':'')+' />'+cat[key][1]+'</label>';
        }});
        el('dynamicinputs').innerHTML+=output+'</div>';
    } else popup('popup','Bitte das Szenario wählen...');
}

function popup(elid,text){ //toggle notification popup
    if (el(elid).style.opacity=='0' || !el(elid).style.opacity){ el(elid+'text').innerHTML=text; el(elid).style.display='block'; el(elid).style.opacity='0.8'; }
    else{ el(elid).style.opacity='0'; setTimeout(function() {el(elid).style.display='none'; el(elid+'text').innerHTML=text;}, 500); }
}

// definition of text blocks -> typically moved to external .txt-files (with js content but editable with common editor) to be implemented as below
var catalogue = { // text brick object
    get construct(){
        return {//property:array(group,title,prechecked,output)
            intro:["intro","Einleitung",1,
                    "Für "+adressee.output("euer")+" "+names.ganz()+" schlagen wir eine "+(el("loesung")?el("loesung").value:"")+" bei "+(el("problem")?el("problem").value:"")+" vor."],

            block1:["block1","erster Block",0,
                    "Dies ist beispielsweise ein erster wählbarer Textblock."],
            nomgen:["kasus","Nominativ und Dativ",0,
                    "Man kann '"+adressee.output('er')+"' einbauen oder auch von '"+adressee.output('ihm')+"' sprechen."],
            datakk:["kasus","Dativ und Akkusativ",0,
                    "Man kann in '"+adressee.output('dessen')+"' Auftrag formulieren oder über '"+adressee.output('ihn')+"' schreiben."],
            
            dritte:["dritte","für dritte",0,
                    "Lösungen für Dritte bedürfen vielleicht auch der Nennung '"+adressee.output('eures')+"' weil wir '"+adressee.output('euer')+"' und sein Problem verstanden haben."],

            namensbautein:["namensbaustein","der Name",0,
                    "Der Name kann auch eingebunden werden. Entweder der ganze Name '"+names.ganz()+"', oder auch die Kurzform '"+names.kurz()+"' um etwas Abwechsung einzubringen. Es gibt einen Unterschied zwischen erwachsenen und kindlichen Auftraggebern."],

            block4a:["block4","Block 4a",0,
                    "Hier noch ein anderer Textblock."],
            block4b:["block4","Block 4b",0,
                    "Hier noch ein gaaaanz anderer Textblock."],
            block4c:["block4","Block 4c",0,
                    "Herzlichen Glückwunsch, du hast das dynamische Menü verstanden."],


            schlusssatz:["schlusssatz","Schlusssatz",1,
                    "Die geplante Ausführung nach den Anforderungen "+adressee.output("eures")+" "+(el("name")?el("name").value:"")+". Bei weiteren Fragen stehen wir gerne zu Ihrer Verfügung."]
        }
    }
};


//this function is used if the catalogue-object is placed in multiple external files that are selected according to the scenario -> see select-input later on 
function loadScript(url, callback){
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;
    // Fire the loading
    head.appendChild(script);
    //set local preset
    document.cookie = "baustein="+url; 
}
</script>

<style>
body,input,select { font-family: Calibri; color:#004a6f;}
input[type='text'],select {border:1px solid #ccc}
h1 {font-variant:small-caps; font-size:1.5em; }
h2 { font-size:1em; line-height: 10%;}
table {width:100%;}
td { padding:.5em; margin:.5em; border:1px solid #009fe3; line-height:1.6em; vertical-align:top;}
#notice { font-size:.7em;}
li { padding-left:1em; text-indent:-1.6em; list-style-type:none;}
textarea {border:0; width:100%;}
.items {border-bottom:1px solid #ccc; overflow:hidden; position:relative; height:1.75em; width:100%; transition: .5s ease;}
.itemalign {width:48%; display:inline-block; overflow:hidden; white-space:nowrap;}
.itemresize {position: absolute; top:0; right:0; font-size:2em; cursor:n-resize;}
#variablen{width:23em;}
#fragen{width:40em;}
#text{min-width:10em; height:94vh;}
#popup {display:none; opacity:0; background-color:#fff; position:fixed; top:0; left:0; margin:0; padding:0; width:99vw; height:100vh; transition: opacity .5s ease;}
#popuptext {border: 2px solid #f00; width:40vw; margin:30vh auto; padding:4em;}
#popuptext::after{content:"X"; font-weight:bold; color:#fff; background-color:#f00; padding:.7em 1em; position:absolute; top:29vh; right:26vw;}
</style>
<!--this font is embedded only for demo purpose-->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<body>
<div id="content">
<table cellspacing="10"><tr><td id="variablen">
<svg xmlns="http://www.w3.org/2000/svg" width="60.658161mm" height="10.030396mm" viewBox="0 0 60.658161 10.030396"><g transform="translate(-22.319056,-97.655187)"><text style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:'Lobster', cursive;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332" x="23.82284" y="104.94673"><tspan x="23.82284" y="104.94673" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Lobster', cursive;stroke-width:0.26458332">fancy svg logo</tspan></text></g></svg><br />
automatisierte Textvorlagen<br />
<select id="bausteine" onchange="loadScript(this.options[this.selectedIndex].value,inputs)" disabled="disabled">
<option value="">Szenario wählen</option>
<option value="szenario1_textbausteine.txt">Szenario 1</option>
<option value="szenario2_textbausteine.txt">Szenario 2</option>
<option value="szenario3_textbausteine.txt">Szenario 3</option>
</select>
<br /><br />
<input type="text"placeholder="Herr/Frau Mustermann / Vorname" id="name" title="Kundenname" /> <input type="radio" name="sex" value="male" id="male" checked="checked" /><label for="male"> männlich</label> <input type="radio" name="sex" value="female" id="female" /><label for="female"> weiblich</label><br />
<input type="text" placeholder="Problem" id="problem" title="Problem" /> <input type="radio" name="age" value="adult" id="adult" checked="checked" /> <label for="adult"> erwachsen</label> <input type="radio" name="age" value="child" id="child" /><label for="child"> Kind</label><br />
<input type="text" placeholder="Lösung" id="loesung" title="Lösung" /><br />
<span id="dynamicinputs"></span>
<br />
<input type="button" onclick="gen()" value="generieren / aktualisieren" /><input type="button" onclick="inputs()" value="reset" /><br />
</td><td id="fragen">
<h2>Was soll das?</h2>
wenn man immer das gleiche schreiben soll bieten sich textbausteine an. dieser generator setzt wählbare bausteine aneinander und kann sprachliche varianzen berücksichtigen.
die bausteine sind dabei beliebig erweiterbar, die auswahlliste wird dynamisch erstellt.<br /><br />


Sonst steht hier eine Bedienungsanleitung für andere.<br />
Ja, die explizite Kompatibilität mit IE11 ist Absicht.<br />
Der Quelltext wurde angepasst, damit es nur eine Datei ist. Normalerweise sind Szenarios wählbar und in externen Dateien verteilt. Dabei wird das jeweils letzte Szenario in einem Cookie gespeichert, da bei Wiederverwendung vom gleichen Terminal aus die Wahrscheinlichkeit groß ist, das selbe Szenario erneut zu verwenden.<br />
So sind unterschiedliche Szenarios anpassbar ohne dass das Hauptprogramm geändert werden muss.<br />
</td><td><textarea id="text" rows="21" onfocus="this.select();"></textarea>
</td></tr></table>
</div>
<a href="http://erroronline.one"><img src="/../column1/icon.svg" height="64" title="error on line 1" alt="error on line 1" style="width:100px;" /></a>
<div id="popup" onclick="popup('popup','')"><div id="popuptext"></div></div>
<script>
//read local preset
var x=document.cookie; if (x) {var baustein=x.substring(9); el('bausteine').value=baustein; loadScript(baustein,inputs);}
//create dynamic input fields on page load
if (typeof(catalogue)!='undefined') inputs();
</script>
</body>
</html>