Die Mathe-Redaktion - 22.02.2020 23:55 - Registrieren/Login
Auswahl
ListenpunktHome
ListenpunktAktuell und Interessant ai
ListenpunktArtikelübersicht/-suche
ListenpunktAlle Links / Mathe-Links
ListenpunktFach- & Sachbücher
ListenpunktMitglieder / Karte / Top 15
ListenpunktRegistrieren/Login
ListenpunktArbeitsgruppen
Listenpunkt? im neuen Schwätz
ListenpunktWerde Mathe-Millionär!
ListenpunktFormeleditor fedgeo
Schwarzes Brett
Aktion im Forum
Suche
Stichwortsuche in Artikeln und Links von Matheplanet
Suchen im Forum
Suchtipps

Bücher
Englische Bücher
Software
Suchbegriffe:
Mathematik bei amazon
Naturwissenschaft & Technik
In Partnerschaft mit Amazon.de
Kontakt
Mail an Matroid
[Keine Übungsaufgaben!]
Impressum

Bitte beachten Sie unsere Nutzungsbedingungen, die Distanzierung, unsere Datenschutzerklärung und
die Forumregeln.

Sie können Mitglied werden. Mitglieder können den Matheplanet-Newsletter bestellen, der etwa alle 2 Monate erscheint.

Der Newsletter Okt. 2017

Für Mitglieder
Mathematisch für Anfänger
Wer ist Online
Aktuell sind 383 Gäste und 14 Mitglieder online.

Sie können Mitglied werden:
Klick hier.

Über Matheplanet
 
Zum letzten Themenfilter: Themenfilter:
Matroids Matheplanet Forum Index
Moderiert von matph
Informatik » Programmieren » MathJax in HTML inputfield
Druckversion
Druckversion
Autor
Universität/Hochschule J MathJax in HTML inputfield
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Themenstart: 2020-01-27 12:01


Hallo zusammen

Ich möchte gerne in einem html Dropdown Menue eine Mathematische Formel eigeben, die mit MathJax dargestellt wird.

Zum Beispiel soll der Befehl
MathJax
\( \frac{a}{b)  - t \cdot x \)
 
 als Ausdruck dargestellt werden können.

Der Benutzer erhält dann in einem Dropdown Menue verschiedene Ausdrücke zur Auswahl.

Die HTML / php Seite, die dieses Dropdownmenue generiert hat lokal auf dem Server Zugriff zu der MathJax Bibliothek.

Ist dies möglich?

Danke für euren Anregungen
knaggix



-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.1, vom Themenstarter, eingetragen 2020-01-27 15:10


Nochmals hallo

Meine Tests waren bisher erfolglos.
Ich habe nun die Idee mit php eine Checkboxliste auszugeben und hinter die checkboxes die mathematischen Mathjax Ausdrücke zu generieren.
Könnte dies gehen?

Danke für Hinweise jeder Art

lg
knaggix  


-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
Wally
Senior Letzter Besuch: in der letzten Woche
Dabei seit: 02.11.2004
Mitteilungen: 8658
Aus: Dortmund, Old Europe
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.2, eingetragen 2020-01-27 15:17


Hallo,

ich weiß nicht, ob ich dich richtig verstehe: der Server braucht keinen Zugriff auf die Mathjax-Bibliothek, sondern der Browser, der die Seite darstellt  - eben per Javascript-Einbindung wie diese Seiten hier, wie du im Quelltext sehen kannst.

Eigentlich sollte das gar kein Problem sein. Eine serverseitige Lösung kann man mit mimetex erstellen.

Wally




  Profil  Quote  Link auf diesen Beitrag Link
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.3, vom Themenstarter, eingetragen 2020-01-27 15:35


Hallo Wally

Danke für Dein Mitdenken.
Ja, das ist mir klar.
Ich erstelle diese HTML Seiten mit einer php Datei, die auf dem Server die Mathjax Bibliothek hat.
Ich wollte nur sagen, dass die Bibliothek vorhanden ist und die php Seite Zugriff hat.

In eine normale HTML Seite kann ich Mathjax Formeln ausgeben.
Dies funktioniert.

Meine Frage ist im Moment, wie ich eine Auswahlliste mit Formeln generieren kann, so dass ein Benutzer eine Variante anklicken kann.

Ich hoffe , es wird verständlich, was ich probiere.

Danke für eure Hilfen,
lg, knaggix


-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.4, vom Themenstarter, eingetragen 2020-01-27 16:41


Zwischenstand:
ok,  meine Tests mit dem Dropdown Menue sind nicht wirklich ermutigend.

Eine Variante mit checkboxen, die Mathjax liefert ist mir gelungen:
html / Mathjax
<form>
<input type="checkbox" name="l1" value="Bike"> 
\( \frac{1}{2} \cdot x + \sqrt[3]{8x} + 2  \)<br><br>
<input type="checkbox" name="l2" value="Car"> 
\( 7 \cdot x - e^{2x+1} + 2 \)<br><br>
<input type="checkbox" name="l3" value="Car"> 
\( \frac{-3}{2} \cdot x - \int_{a}^{b} (x+2) \ dx \)<br>
</form> 

Vielleicht kann ich über die Values in den Form Fields die angeklickten Lösungen überprüfen, mal sehen.

Falls jemand weitere Ideen hat, (z.B. wie dies im Dropdown Menue ginge) nur zu.
Danke fürs Mitdenken.

lg,
Knaggix


-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
Primentus
Senior Letzter Besuch: in der letzten Woche
Dabei seit: 18.02.2016
Mitteilungen: 1091
Aus: Deutschland
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.5, eingetragen 2020-01-27 20:20


Hallo knaggix,

MathJax-Formeln können nicht innerhalb einer Select-Option korrekt angezeigt werden, da hierfür das HTML-Format erforderlich ist. In einer Select-Option können allerdings nur Plain Text Inhalte angezeigt werden, daher kommt es hier zu fehlerhaften Darstellungen im Dropdown.

Die einzige Möglichkeit sehe ich darin, sich händisch selbst ein Dropdownfeld zu basteln. Das könnte in etwa so aussehen:
HTML
<html>
<head>
	<title>Meine Formel</title>
	<script type="text/javascript" src="mathjax/MathJax.js?config=default"></script>
	<script type="text/javascript">
	<!--
	function openSel() {
		if (document.getElementById("wrapper").style.visibility == "hidden") {
			document.getElementById("wrapper").style.visibility = "visible";
			document.getElementById("Bike").style.visibility = "visible";
			document.getElementById("Car1").style.visibility = "visible";
			document.getElementById("Car2").style.visibility = "visible";
		} else {
			document.getElementById("wrapper").style.visibility = "hidden";
			document.getElementById("Bike").style.visibility = "hidden";
			document.getElementById("Car1").style.visibility = "hidden";
			document.getElementById("Car2").style.visibility = "hidden";
		}
	}
	function takeValue(obj) {
		document.getElementById("seldiv").innerHTML = obj.innerHTML;
		document.getElementById("wrapper").style.visibility = "hidden";
		document.getElementById("Bike").style.visibility = "hidden";
		document.getElementById("Car1").style.visibility = "hidden";
		document.getElementById("Car2").style.visibility = "hidden";
		document.getElementById("formel").value = obj.id;
	}
	//-->
	</script>
	<style type="text/css">
	.seldiv {
		height: 36px;
		width: 300px;
		border: 1px solid #000000;
		background-image: url('images/selarrow3.png');   /* add custom arrow */
	}	
	.wrapperdiv {
		width: 300px;
		border: 1px solid #000000;
	}	
	.selopt {
		width: 300px;
		background: #F1F1F1;
	}	
	</style>
</head>
 
<body>
 
<form name="myform">
<!--
<input type="checkbox" name="l1" value="Bike"> 
\( \frac{1}{2} \cdot x + \sqrt[3]{8x} + 2  \)<br><br>
<input type="checkbox" name="l2" value="Car"> 
\( 7 \cdot x - e^{2x+1} + 2 \)<br><br>
<input type="checkbox" name="l3" value="Car"> 
\( \frac{-3}{2} \cdot x - \int_{a}^{b} (x+2) \ dx \)<br>
-->
 
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
<div id="seldiv" class="seldiv" style="visibility:visible" onclick="openSel()">Bitte Formel wählen</div>
<div id="wrapper" class="wrapperdiv" style="visibility:hidden">
<div id="Bike" style="visibility:hidden" onmouseover="this.style.background='#C6D4E2'" onmouseout="this.style.background='#ffffff'" onclick="takeValue(this)">\( \frac{1}{2} \cdot x + \sqrt[3]{8x} + 2  \)</div>
<div id="Car1" style="visibility:hidden" onmouseover="this.style.background='#C6D4E2'" onmouseout="this.style.background='#ffffff'" onclick="takeValue(this)">\( 7 \cdot x - e^{2x+1} + 2 \)</div>
<div id="Car2" style="visibility:hidden" onmouseover="this.style.background='#C6D4E2'" onmouseout="this.style.background='#ffffff'" onclick="takeValue(this)">\( \frac{-3}{2} \cdot x - \int_{a}^{b} (x+2) \ dx \)</div>
</div>
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text. Das ist nur Deko-Text.
<input type="hidden" id="formel" name="formel" value=""/>
 
</form> 
</body>
</html>

Kurz zur Erklärung:
Der DIV seldiv ist das eigentliche Dropdownfeld. Der DIV wrapper enthält die einzelnen Dropdowneinträge und zeichnet den Rahmen, wenn das Dropdown aufgeklappt wird. Die Dropdowneinträge selbst befinden sich dann nochmals in eigenen DIV-Feldern.

Die Dropdown-Einträge haben einen onmouseover und onmouseout Event, um die Hintergrundfarbe beim Drüberfahren mit der Maus zu simulieren. Bei onclick eines Dropdown-Eintrages wird die Funktion takeValue(this) ausgelöst, welche die Formel in die seldiv-Box schreibt und im Hidden-Formularfeld formel den Wert der ausgewählten Formel setzt (Bike, Car1 oder Car2). Wenn das Formular verschickt wird, kann also über den Namen formel das Ergebnis abgefragt werden.

Ach ja, da auch der Dropdown-Pfeil händisch nachgebildet werden muss, benötigt man noch eine Grafik ungefähr wie diese (das ist in meinem Code die Grafik selarrow3.png, siehe .seldiv-Klasse):



Ich hoffe, dies hilft Dir weiter.

LG Primentus



  Profil  Quote  Link auf diesen Beitrag Link
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.6, vom Themenstarter, eingetragen 2020-01-28 20:32


Wow

Vielen Dank Primentus


Ich habe es vermutet, dass es via dropdownmenue nicht geht.

Deine Idee ist cool gelöst.
So wie ich dies verstehe, zeigst und versteckst du die Dropdownfelder und nimmst per getElementById() die innerValue vom Feldelement.
Das ist (zwar aufwändig, aber )cool und funktioniert wahrscheinlich für mich.


Ich bin inzwischen soweit, dass ich den Mathjax output hinter checkboxen habe. Den Value (zur Überprüfung, was angeklickt wurde) will ich dann über das Value Field der checkboxen mitgeben.
Die Darstellung von bis zu 8 alternativen Checkboxen ist bis jetzt ok auf dem Bildschirm, evtl. sogar übersichtlicher als mit dem Dropdowns.
Mal sehen.

Auf Deine "Luxuslösung" komme ich gerne zurück, wenn meine Experimente mit den Checkboxen am Ende doch nicht funktionieren.

vielen herzlchen Dank soweit,
ich melde mich, wenn das Projekt abgeschlossen ist, oder wenn ich wieder am Anschlag bin.

lieber Gruss,
knaggix  razz





-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
Primentus
Senior Letzter Besuch: in der letzten Woche
Dabei seit: 18.02.2016
Mitteilungen: 1091
Aus: Deutschland
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.7, eingetragen 2020-01-28 21:28


Hallo knaggix,

gern geschehen.
Ja, die eigentlichen Dropdownfelder sind erstmal versteckt und müssen durch Klicken auf das Dropdownfeld mit dem Pfeil erstmal aufgeklappt werden. Bei Klick auf einen aufgeklappten Eintrag schreibe ich den gänzlichen HTML-Ausdruck innerhalb des DIVs dieses Dropdowneintrages in das oberste permanent sichtbare Dropdownfeld. Und die id des Dropdownfeldes wird in das Hidden-Feld namens formel geschrieben. So weiß man nachher, was ausgewählt wurde.

Die Checkbox-Lösung funktioniert natürlich etwas einfacher, wobei Du aber wahrscheinlich eher Radio-Buttons verwenden müsstest, falls man nicht mehrere Formeln gleichzeitig anklicken können soll.

Ok, ich wünsche Dir erstmal viel Spaß beim weiterprogrammieren. Melde Dich einfach wieder, wenn Du nochmal eine Frage hast oder sobald das Projekt fertig ist. Gutes Gelingen!

LG Primentus



  Profil  Quote  Link auf diesen Beitrag Link
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.8, vom Themenstarter, eingetragen 2020-02-03 22:01


Hallo zusammen und
Hallo Primentus

So, das Projekt klappt nun mit checkboxen und Deine Anregungen waren wertvoll. Danke nochmals.
Der Kern meiner Lösung war ein checkboxauswahl- Form :
html / php
<table><tr><td>		
<input type="checkbox" name="L" value=<?php print($checkL[0][0]) ?> > <?php print$checkL[0][1] ?> <br><br>
<input type="checkbox" name="L" value=<?php print($checkL[1][0]) ?> > <?php print$checkL[1][1] ?> <br><br>
<input type="checkbox" name="L" value=<?php print($checkL[2][0]) ?> > <?php print$checkL[2][1] ?> <br><br>
<input type="checkbox" name="L" value=<?php print($checkL[3][0]) ?> > <?php print$checkL[3][1] ?> <br>
</td><td width="100"></td><td>		
<input type="checkbox" name="L" value=<?php print($checkL[4][0]) ?> > <?php print$checkL[4][1] ?> <br><br>
<input type="checkbox" name="L" value=<?php print($checkL[5][0]) ?> > <?php print$checkL[5][1] ?> <br><br>
<input type="checkbox" name="L" value=<?php print($checkL[6][0]) ?> > <?php print$checkL[6][1] ?> <br><br>
<input type="checkbox" name="L" value=<?php print($checkL[7][0]) ?> > <?php print$checkL[7][1] ?> <br>
</td></tr></table>
 

In den values habe ich einen Eintrag aus einem  2 dim array mitgegeben, quasi eine ID  der verschiedenen angebotenen Lösungen.
php
$checkL = array( 	 
array("L0", '\(  '.$a.' \cdot e^{ \frac{'.$d1.'}{'.$f1.'} \cdot x^{'.$g.'} } \cdot [ \frac{'.$k2.'}{'.$f2.'} \cdot x^{'.$g.'} '.$operation2.'  \frac{'.$_k3.'}{'.$f3.'} \cdot x^{'.($g-1).'} '.$operation3.$_b.' ]   \)', 1),  
etc . . . etc . . . 
etc . . . 


Somit konnte ich später aus den $_Requests die gewählte Lösung wiederherstellen und mit der korrekten Lösung vergleichen.

Die Checkbox Darstellung hat nun den Vorteil, dass man alle Lösungen gut miteinander vergleichen kann. Dies ist praktischer als in meiner ursprünglichen Idee mit dem Dropdown Menue.

Bin nun gespannt, ob dieses Tool sich im Alltag bewährt, mal sehen.

Danke nochmals
herzliche Grüsse,
knaggix

 


 



-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
Primentus
Senior Letzter Besuch: in der letzten Woche
Dabei seit: 18.02.2016
Mitteilungen: 1091
Aus: Deutschland
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.9, eingetragen 2020-02-04 15:10


Hallo knaggix,

sieht prinzipiell gut aus Deine Lösung.
Aber wie ich sehe, hast Du allen Checkboxes den gleichen Namen gegeben. Die Frage ist, was passiert, wenn mehrere Checkboxen auf einmal vom Benutzer ausgewählt werden. Dann könnte es sein, dass Deine Ergebnis-Abfrage fehlschlägt.

Soll unterbunden werden, dass mehr als eine Checkbox ausgewählt werden kann, würde ich wie gesagt Radio-Buttons anstelle der Checkboxen empfehlen, also type="radio" anstelle von type="checkbox".

Checkboxes (mit verschiedenen Namen) sind eigentlich Optionen, von denen auch mehrere ausgewählt werden können, wohingegen Radio-Buttons (gleichen Namens) dafür gedacht sind, nur eines der Felder auswählbar zu machen. Was Du jedoch gemacht hast, ist ein Mischmasch aus beidem, nämlich Checkboxes mit gleichem Namen.

Des Weiteren wünsche ich Dir natürlich einen erfolgreichen Einsatz Deines Tools.

LG Primentus



  Profil  Quote  Link auf diesen Beitrag Link
knaggix
Aktiv Letzter Besuch: im letzten Monat
Dabei seit: 01.02.2008
Mitteilungen: 142
Aus: CH
Zum letzten BeitragZum nächsten BeitragZum vorigen BeitragZum erstem Beitrag  Beitrag No.10, vom Themenstarter, eingetragen 2020-02-07 22:47


Hallo Primentus

Ja, da hast du einen guten Punkt bemerkt.
Danke.
Ich werde also umbauen auf Radiobuttons und dann testen.

Danke für Deine Hilfe.

herzliche Grüsse
Knaggix


-----------------
Wer den Hafen nicht kennt, für den bläst nie ein günstiger Wind



  Profil  Quote  Link auf diesen Beitrag Link
knaggix hat die Antworten auf ihre/seine Frage gesehen.
knaggix hat selbst das Ok-Häkchen gesetzt.
Neues Thema [Neues Thema]  Druckversion [Druckversion]

 


Wechsel in ein anderes Forum:
 Suchen    
 
All logos and trademarks in this site are property of their respective owner. The comments are property of their posters, all the rest © 2001-2019 by Matroids Matheplanet
This web site was made with PHP-Nuke, a web portal system written in PHP. PHP-Nuke is Free Software released under the GNU/GPL license.
Ich distanziere mich von rechtswidrigen oder anstößigen Inhalten, die sich trotz aufmerksamer Prüfung hinter hier verwendeten Links verbergen mögen.
Lesen Sie die Nutzungsbedingungen, die Distanzierung, die Datenschutzerklärung und das Impressum.
[Seitenanfang]