GUI-Optimierung Testtool-Admin Seite

- Vorschau vs. Derzeit
- Tab-Zeichen wird bei Tab-Taste eingefügt
- Parse-Error wird bei nicht-wohlgeformtem XML angezeigt
- Button um MathML größer anzuzeigen
This commit is contained in:
kindlm
2025-07-03 17:37:16 +02:00
parent 45b9bae0b0
commit a0e4c3d93b
+234 -21
View File
@@ -102,29 +102,175 @@ echo '<?xml version="1.0" encoding="UTF-8"?>';
<link href="../../../skin/style.css.php" rel="stylesheet" type="text/css" />
<script language="Javascript">
//Vorschau anzeigen
function preview()
{
document.getElementById('vorschau').innerHTML = document.getElementById('text').value;
function preview(input) {
const xmlText = document.getElementById('text_'+input).value;
const vorschau = document.getElementById('vorschau_'+input);
// Zurücksetzen der Styles
vorschau.style.textAlign = 'center';
vorschau.style.backgroundColor = 'initial';
vorschau.style.color = 'initial';
// Prüfen ob überhaupt Inhalt vorhanden ist
if (!xmlText.trim()) {
vorschau.innerHTML = '';
return;
}
// Prüfe ob HTML/XML-Tags vorhanden sind
const hatTags = xmlText.indexOf('&lt;') != -1 &amp;&amp; xmlText.indexOf('&gt;') != -1;
if (!hatTags) {
// Kein HTML/XML - zeige als normalen Text
vorschau.innerText = xmlText;
return;
}
// Versuche HTML/MathML zu rendern
try {
// Erstelle einen temporären Container für die Validierung
const tempDiv = document.createElement('div');
tempDiv.innerHTML = xmlText;
// Prüfe auf MathML-Elemente und stelle sicher, dass sie korrekt sind
const mathElements = tempDiv.querySelectorAll('math');
let mathmlValid = true;
// Verwende eine while-Schleife statt for-Schleife um XML-Probleme zu vermeiden
let i = 0;
while (i &lt; mathElements.length) {
const mathEl = mathElements[i];
// Prüfe ob das MathML-Element den korrekten Namespace hat
if (!mathEl.hasAttribute('xmlns')) {
mathEl.setAttribute('xmlns', 'http://www.w3.org/1998/Math/MathML');
}
// Grundlegende MathML-Validierung
const mathmlContent = mathEl.innerHTML;
if (mathmlContent.trim() === '') {
mathmlValid = false;
break;
}
i++;
}
if (mathmlValid) {
// Wenn alles ok ist, zeige den Inhalt an
vorschau.innerHTML = xmlText;
// Versuche MathML zu rendern falls MathJax verfügbar ist
if (typeof MathJax != 'undefined' &amp;&amp; MathJax.typesetPromise) {
MathJax.typesetPromise([vorschau]).catch(function (err) {
console.log('MathJax-Fehler:', err.message);
});
}
} else {
throw new Error('Ungültiges MathML');
}
} catch (error) {
// HTML-Parsing fehlgeschlagen - prüfe ob es sich um reines XML handelt
const startetMitTag = xmlText.trim().charAt(0) === '&lt;';
const endetMitTag = xmlText.trim().charAt(xmlText.trim().length - 1) === '&gt;';
const hatNurTags = xmlText.indexOf('&lt;') === 0 &amp;&amp; xmlText.lastIndexOf('&gt;') === xmlText.length - 1;
if (startetMitTag &amp;&amp; endetMitTag &amp;&amp; hatNurTags) {
// Versuche XML-Parsing
try {
const parser = new DOMParser();
const parsed = parser.parseFromString(xmlText, 'application/xml');
const parsererror = parsed.getElementsByTagName('parsererror');
if (parsererror.length &gt; 0) {
let fehlertext = parsererror[0].textContent;
const zeileninfoStart = fehlertext.indexOf("Zeile Nr.");
if (zeileninfoStart != -1) {
const zeileninfo = fehlertext.substring(zeileninfoStart);
fehlertext = 'XML-Verarbeitungsfehler:\n' + zeileninfo;
}
vorschau.innerText = fehlertext;
vorschau.style.textAlign = 'left';
vorschau.style.backgroundColor = 'lightyellow';
vorschau.style.color = 'red';
return;
} else {
// XML ist gültig
vorschau.innerText = xmlText;
return;
}
} catch (xmlError) {
// XML-Parsing fehlgeschlagen
vorschau.innerText = 'XML-Formatfehler: ' + xmlError.message;
vorschau.style.textAlign = 'left';
vorschau.style.backgroundColor = 'lightyellow';
vorschau.style.color = 'red';
return;
}
} else {
// Gemischter Inhalt oder HTML mit Fehlern - zeige Fehlermeldung
vorschau.innerText = 'HTML/MathML-Formatfehler: ' + error.message;
vorschau.style.textAlign = 'left';
vorschau.style.backgroundColor = 'lightyellow';
vorschau.style.color = 'red';
}
}
}
function previewvorschlag()
{
document.getElementById('vorschauvorschlag').innerHTML = document.getElementById('text_vorschlag').value;
function previewvorschlag() {
const xmlText = document.getElementById('text_vorschlag').value;
const vorschau = document.getElementById('vorschauvorschlag');
const parser = new DOMParser();
const parsed = parser.parseFromString(xmlText, 'application/xml');
const parsererror = parsed.getElementsByTagName('parsererror');
if (parsererror.length > 0) {
var fehlertext = parsererror[0].textContent;
const zeileninfoStart = fehlertext.indexOf("Zeile Nr.");
if (zeileninfoStart !== -1) {
const zeileninfo = fehlertext.substring(zeileninfoStart);
fehlertext = 'XML-Verarbeitungsfehler:\n ' + zeileninfo;
} else {
fehlertext = fehlertext; // Fallback
}
vorschau.innerText = fehlertext;
vorschau.style.textAlign = 'left';
vorschau.style.backgroundColor = 'lightyellow';
} else {
// Zeige XML als Text (nicht als HTML rendern!)
vorschau.innerHTML = xmlText;
vorschau.style.textAlign = 'center';
vorschau.style.backgroundColor = 'initial';
}
}
function insertfrage(aTag, eTag)
{
var input = document.forms['formular_frage'].elements['text'];
var input = document.forms['formular_frage'].elements['text_frage'];
input.focus();
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
if (eTag)
{
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
}
else
{
input.value = input.value.substr(0, start) + aTag + input.value.substr(end);
}
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
} else
{
if (eTag) {
pos = start + aTag.length + insText.length + eTag.length;
}
else {
pos = start + aTag.length + insText.length;
}
}
input.selectionStart = pos;
input.selectionEnd = pos;
@@ -137,13 +283,25 @@ function insertvorschlag(aTag, eTag)
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
if (eTag)
{
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
}
else
{
input.value = input.value.substr(0, start) + aTag + input.value.substr(end);
}
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
if (eTag) {
pos = start + aTag.length + insText.length + eTag.length;
}
else {
pos = start + aTag.length + insText.length;
}
}
input.selectionStart = pos;
input.selectionEnd = pos;
@@ -153,6 +311,14 @@ function confirmDeleteFrage()
{
return confirm('Wollen Sie diese Frage wirklich löschen?');
}
function increaseMATHML()
{
const mathTags = document.querySelectorAll('math');
mathTags.forEach(tag => {
tag.style.fontSize = '200%';
});
}
</script>
<style type="text/css">
@@ -931,7 +1097,7 @@ if ($frage_id != '')
//Bei Aenderungen im Textfeld werden diese sofort in der Vorschau angezeigt
//Wenn beim Speichern der Text kein Gueltiges XML ist, wird der vorige Text erneut angezeigt
echo "<tr valign='top'><td colspan='2'>\n<textarea name='text' id='text' cols='50' rows='27' oninput='preview()' ".($frage->aktiv == false?'disabled="disabled"':'')."><![CDATA[".(isset($frage_error_text)?$frage_error_text:$frage->text)."]]></textarea>\n</td>";
echo "<tr valign='top'><td colspan='2'>\n<textarea name='text' id='text_frage' cols='50' rows='27' oninput='preview(\"frage\")' ".($frage->aktiv == false?'disabled="disabled"':'')."><![CDATA[".(isset($frage_error_text)?$frage_error_text:$frage->text)."]]></textarea>\n</td>";
echo "<table><tr><td><input type='button' value='br' onclick='insertfrage(\"&lt;br/&gt;\", \"\")' />";
echo "<input type='button' value='F' style='font-weight:bold' onclick='insertfrage(\"&lt;strong&gt;\", \"&lt;/strong&gt;\")' />";
echo "<input type='button' value='K' style='font-style:italic' onclick='insertfrage(\"&lt;i&gt;\", \"&lt;/i&gt;\")' /><br/><br/>";
@@ -948,8 +1114,14 @@ if ($frage_id != '')
echo "<input type='button' value='msqrt' onclick='insertfrage(\"&lt;msqrt&gt;\", \"&lt;/msqrt&gt;\")' title='Wurzel' /><br/>";
echo "<input type='button' value='munderover' onclick='insertfrage(\"&lt;munderover&gt;&lt;mo movablelimits=\&quot;false\&quot;&gt;Das steht mittig&lt;/mo&gt;&lt;mo&gt;Das steht unten&lt;/mo&gt;&lt;mo&gt;Das steht oben&lt;/mo&gt;&lt;/munderover&gt;\", \"\")' title='Oben und unten' /><br/>";
echo "<input type='button' value='mtext' onclick='insertfrage(\"&lt;mtext&gt;\", \"&lt;/mtext&gt;\")' title='Text' /><br/>";
echo "Operatoren:<br/>π<br/>·<br/>∑<br/>∫<br/><a href='http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_iso8859_1' target='blank'>Weitere</a>";
echo "</td>";
echo "Operatoren:<p>";
echo "<button type='button' onclick='insertfrage(\"&lt;mo&gt;π&lt;/mo&gt;\")'>π</button>&nbsp;";
echo "<button type='button' onclick='insertfrage(\"&lt;mo&gt;·&lt;/mo&gt;\")'>·</button>&nbsp;";
echo "<button type='button' onclick='insertfrage(\"&lt;mo&gt;∑&lt;/mo&gt;\")'>∑</button>&nbsp;";
echo "<button type='button' onclick='insertfrage(\"&lt;mo&gt;∫&lt;/mo&gt;\")'>∫</button>";
echo "<p><a href='http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_iso8859_1' target='blank'>Weitere</a></p>";
echo "<button type='button' onclick='increaseMATHML()'>MathML größer</button>";
echo "</p></td>";
echo "</tr></table></tr>";
echo "<tr><td>Demo <input type='checkbox' name='demo' ".($frage->demo?'checked="true"':'')." />
Level <input type='text' name='level' value='$frage->level' size='1' />
@@ -960,7 +1132,10 @@ if ($frage_id != '')
echo "</form>";
echo "</td></tr>";
//Vorschau fuer das Text-Feld
echo "<tr><td colspan='2'>Vorschau:<br /><div id='vorschau' style='border: 1px solid black' align='center'>$frage->text</div></td></tr>";
echo "<tr><td style='width: 50%'>Vorschau:<br />
<div id='vorschau_frage' style='border: 1px solid black' align='center'>$frage->text</div></td>
<td style='width: 50%'>Derzeit:<br /><div id='aktuell' style='border: 1px solid black' align='center'>$frage->text</div>
</td></tr>";
echo "</table>";
echo '</td><td style="border-left: 1px solid black" valign="top">';
@@ -1022,7 +1197,7 @@ if ($frage_id != '')
echo "<input type='button' value='+1/2' style='background-color:#C5FFBF' onclick='document.getElementById(\"punkte\").value=\"0.5\";' /></td>";
echo '</tr>';
echo '<tr valign="top">';
echo '<td>Text:</td><td><textarea name="text" id="text_vorschlag" rows="25" cols="45" oninput="previewvorschlag()" '.($vorschlag->aktiv == true || is_null($vorschlag->aktiv)?'':'disabled="disabled"').'><![CDATA['.$vorschlag->text."]]></textarea>\n</td>";
echo '<td>Text:</td><td><textarea name="text" id="text_vorschlag" rows="25" cols="45" oninput="preview(\'vorschlag\')" '.($vorschlag->aktiv == true || is_null($vorschlag->aktiv)?'':'disabled="disabled"').'><![CDATA['.$vorschlag->text."]]></textarea>\n</td>";
echo "<td><input type='button' value='br' onclick='insertvorschlag(\"&lt;br/&gt;\", \"\")' />";
echo "<input type='button' value='F' style='font-weight:bold' onclick='insertvorschlag(\"&lt;strong&gt;\", \"&lt;/strong&gt;\")' />";
echo "<input type='button' value='K' style='font-style:italic' onclick='insertvorschlag(\"&lt;i&gt;\", \"&lt;/i&gt;\")' /><br/><br/>";
@@ -1039,8 +1214,12 @@ if ($frage_id != '')
echo "<input type='button' value='msqrt' onclick='insertvorschlag(\"&lt;msqrt&gt;\", \"&lt;/msqrt&gt;\")' title='Wurzel' /><br/>";
echo "<input type='button' value='munderover' onclick='insertvorschlag(\"&lt;munderover&gt;&lt;mo movablelimits=\&quot;false\&quot;&gt;Das steht mittig&lt;/mo&gt;&lt;mo&gt;Das steht unten&lt;/mo&gt;&lt;mo&gt;Das steht oben&lt;/mo&gt;&lt;/munderover&gt;\", \"\")' title='Oben und unten' /><br/>";
echo "<input type='button' value='mtext' onclick='insertvorschlag(\"&lt;mtext&gt;\", \"&lt;/mtext&gt;\")' title='Text' /><br/>";
echo "Operatoren:<br/>π<br/>·<br/>∑<br/>∫<br/><a href='http://de.selfhtml.org/html/referenz/zeichen.htm#benannte_iso8859_1' target='blank'>Weitere</a>";
echo "</td>";
echo "Operatoren:<p>";
echo "<button type='button' onclick='insertvorschlag(\"&lt;mo&gt;π&lt;/mo&gt;\")'>π</button>&nbsp;";
echo "<button type='button' onclick='insertvorschlag(\"&lt;mo&gt;·&lt;/mo&gt;\")'>·</button>&nbsp;";
echo "<button type='button' onclick='insertvorschlag(\"&lt;mo&gt;∑&lt;/mo&gt;\")'>∑</button>&nbsp;";
echo "<button type='button' onclick='insertvorschlag(\"&lt;mo&gt;∫&lt;/mo&gt;\")'>∫</button>";
echo "</p></td>";
echo '</tr><tr valign="top">';
//Upload Feld fuer Bild
echo "<td>Bild:</td><td><input type='file' name='bild' /></td>";
@@ -1062,10 +1241,10 @@ if ($frage_id != '')
echo "/></td></tr>";
echo "<tr><td colspan='2' align='right'><input type='submit' name='submitvorschlag' value='Speichern' />".($vorschlag_id != ''?"<input type='button' value='Abbrechen' onclick=\"document.location.href='$PHP_SELF?gebiet_id=$gebiet_id&amp;stg_kz=$stg_kz&amp;nummer=$nummer&amp;frage_id=$frage->frage_id'\" />":'')."</td></tr>";
//Vorschau fuer das Text-Feld
echo "<tr><td colspan='2'>Vorschau:<br /><div id='vorschauvorschlag' style='border: 1px solid black' align='center'>$vorschlag->text</div></td></tr>";
echo "<tr><td colspan='2'>Vorschau:<br /><div id='vorschau_vorschlag' style='border: 1px solid black' align='center'>$vorschlag->text</div>
Derzeit:<br /><div id='aktuellvorschlag' style='border: 1px solid black' align='center'>$vorschlag->text</div></td></tr>";
echo "</table>";
echo "</form>";
echo '</td></tr></table>';
$vorschlag = new vorschlag();
@@ -1115,6 +1294,40 @@ if ($frage_id != '')
echo '<tr><td><input type="hidden" name="allevorschlaege" value="'.$allevorschlaege.'" />Summe:</td><td align="left">'.number_format(array_sum($a), 2, ".", "").'&nbsp;&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td><input type="submit" value="Speichern"/></td></tr>';
echo '</table></form><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>';
}
echo "<script>
document.getElementById('text_vorschlag').addEventListener('keydown', function(e)
{
if (e.key === 'Tab') {
e.preventDefault();
const textarea = e.target;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
// Tabulator-Zeichen einfügen
textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end);
// Cursor hinter den Tab setzen
textarea.selectionStart = textarea.selectionEnd = start + 1;
}
});
document.getElementById('text_frage').addEventListener('keydown', function(e)
{
if (e.key === 'Tab') {
e.preventDefault();
const textarea = e.target;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
// Tabulator-Zeichen einfügen
textarea.value = textarea.value.substring(0, start) + '\t' + textarea.value.substring(end);
// Cursor hinter den Tab setzen
textarea.selectionStart = textarea.selectionEnd = start + 1;
}
});
</script>";
}