Tool für die Erstellung von Lückentests

① Starte die Lücken-Text-Erstellung.
Dann Markiere jeweils eine Lücke und ② addiert
diese zum Lückentest. Dann erneut Lücke markieren und addieren ...
Zeige die Web- ③ Vorschau der erstellten HTML-Seite an.

Erstellungsprinzip

Spezielle Admin-Einstellungen für die Erstellung/Auswertung
ignoriere alle Lücken-Blanks
ignoriere die Gross- Klein-Schreibung

Rahmen-Muster der HTML-Seite ( htm_grundgeruest )

<!DOCTYPE html>
<html lang="de">
<head>
<title> ADD_TITEL_TEXT </title>
<meta charset="UTF-8" />
<meta name="robots" content="index" />
<style>
html, body { margin: 0; font: normal 1.2rem/1.4rem arial,sans-serif; background-color: #fff; color: #000;}
body { padding:0;height:100% !important;}
form{height:100% !important}
form,h1,div{padding:0 1rem;}
form {margin:1rem auto;background-color: #fefefe; color: #002; border: 0.2rem groove #777; }
input.LUECKE,form,h1,#div_luecken_text,#div_senden_text { box-shadow: 0.4rem 0.4rem 0.7rem #204;}
input.LUECKE { display:inline-block;background-color:#f8f8f8;color:#004;padding:0;margin:0 0.2rem;font:1.08rem/1.2rem "Courier New",Monospace;border:none;}
h1,#div_senden_text { font: italic bold 2em fantasy; color: #fff; background-color: #191999; }
#div_senden_text { display:block; margin:0.3rem;  }
#div_info_text { display:block;margin:1rem;padding:0.3rem;font: normal 0.95rem/1.1rem arial,sans-serif;opacity:0.95;}
#div_luecken_text { display:block;margin:1rem;padding:0.5rem;}
/*ADD_STYLE_CONTENT*/
</style>
<script>ADD_SCRIPT_TEXT</script>
<script>
function txt2htm(s) { var o={ "&": "&","<": "<",">": ">" }; return s.replace(/[\&<>]/gm,function(c) { return o[c]; }); }
function cryp(s,inv) {
var i,c,j=5,k=1,r=[]; if(inv) { j=-j; k=-k; }
for(i=0;i<s.length;i+=1) { c=j+k+s.charCodeAt(i); r.push(String.fromCharCode(c)); } return r.join("");
}

function absenden(that) {
var s=that.form.KENNUNG.value||"",
len=s.replace(/([\s\S]+)\1/g,'').length,s=txt2htm(s),ok=len>4;

if(!ok) {alert("Deine Teilnahme\nerfordert eine geeignete\nKennung ... :-(");} else if(!!confirm("SENDEN mit Kennung : "+s)) {
//sende(that,s)
alert("OK, gesendet...");
}
}
</script>
</head>
<body>
<form action="#">
<h1>ADD_TITEL_TEXT</h1>
<div id="div_info_text">ADD_INFO_TEXT</div>
<div id="div_luecken_text">ADD_LUECKEN_TEXT</div>
<div id="div_senden_text"><input type="text" name="KENNUNG" size="50" required="required" placeholder="Meine Kurzkennung ( Nickname )" value="" />

<button onclick="alert('Zur Zeit leider nicht online ... :-(')">Senden</button><br />

</div><br />

</form>
</body>
</html>

todo-Liste

Bedienungshinweise zum Erstellen ... Autor möchte: Optionale Hinweise zum Lösen des erstellten Lückentest vorgeben.
n Lückentest ausdrucken, zum Ausfüllen von Hand text1 ___ text2 __ text2 ... Drucken
anstelle von Klartext input name="..." besser mit unicode und xor 43 und input title="mit JSON.stringify(...)" und Verschlüsselung
Autor möchte im Lückentest Entities <... > als lesbaren Text verwenden.
Autor möchte im Lückentest html-Tags als Textformatierungshilfen verwenden, wie z.B. ~<pre~> ...~</pre~> besser <<pre>>
Ergebniskontrolle: in der individuellen User-Verantwortung ( rein clientseitig, Self-Assessments )
Ergebniskontrolle: als Gruppen-Kontrolle ( serverseitig mit flexiblen Bewertungsmöglichkeiten )
drucke ein Arbeitsblatt
upload der Webseite
Menu-Anzeige aller erstellten html-Lückentest
Alternativ: anstelle der Lückentest-Bearbeitung mit Zeicheneingaben per input soll auch select-Auswahl aus der (markierten) Stringmenge möglich sein.

vollautomatische syntax highlighting für Quell-Code, oder
"halbautomatisch von Hand" farbig hervorheben, oder
mit "keep it simple"-Markups-Verdeutlichungen etwa

Fett     Kursiv    Durchgestrichen     WebLink
----------------------------------------------------------------------------
*Text*     _Text_       ~Text~              #href|innerHtml#

oder besser mit pre-Token, wie z.B.

*b Text*   *k Text*     *d del-Text*      *a href innerHtml*

oder besser mit post-Token, wie z.B.

*Text b*   *Text k*     *del-Text d*      *href innerHtml a*

oder besser mit pseudo-html-entities, wie z.B.

<b Text>   <em Text>     <del Text>      <a href innerHtml>  <br> <pre Text ... >

Auswählbares Web-Design für interaktive Nutzung, lokale Desktop-Bilder reinziehen, upload
Hilfe: bei den Erstellungsschritten, zu den Auswahlmöglichkeiten
Schreibrichtungen: unicode-bidi:bidi-override;direction:rtl;
Hilfe: Bei Falscheingabe jeweils einen gültigen Buchstaben liefern
Hilfe: unterschiedliche Modi, Lücke füllen bzw, select-Auswahl
Bearbeitungszeit je Lücke,
Anzahl der Tastenanschläge je Lücke,
Anzahl der bearbeitetn Lücken.
Hilfen bei fehlerhaften Eingaben:
Liefere je Falscheingabe einen gültigen Lücken-Buchstaben. Lösche leere input-Tags mit name="".
Wahlweise für CODE erlauben z.B. <pre-Tags/<ul>/<li>
In den Lückentext einfachste Weblinks-Schreibweise für thematische Online-Hinweise
Angepasste Unterstützung für Themenbereiche
Admin für Server, User-Konto?, annonyme Datensammlung n ==> 1
Erstellte Webseite automatisch bei W3C validieren