• Willkommen im Geoclub - dem größten deutschsprachigen Geocaching-Forum. Registriere dich kostenlos, um alle Inhalte zu sehen und neue Beiträge zu erstellen.

Gelöst Html: Array

Horrorheinz

Horrorheinz

Geocacher
Hallo zusammen,

ich habe einen Html-Code, in dem ein Array implementiert ist. Es gibt auf der Ausgabeseite diverse Fragen (multiple Choice) und entsprechend der Nummerierung werden Bilder eingebunden. Ich möchte nun mitten in den ganzen Fragen eine neue Frage einsetzen samt Bild. Grundsätzlich ist mir das klar, aber im Array sind auch noch diverse Antwortmöglichkeiten eingebunden und da steige ich aus, da ich kein Programmierer bin. Wäre jemand so nett und schaut mal drüber? Ich vermute, für jemanden Geübten ist das ne Sache von 5 Minuten.

VG
Horrorheinz
 
OP
Horrorheinz

Horrorheinz

Geocacher
So, Sammy hat leider keine Zeit.
Es handelt sich um html mit JavaScript.
Hat jemand anderes Zeit/Interesse/Mitleid, sich das mal anzuschauen?
 
OP
Horrorheinz

Horrorheinz

Geocacher
Da ist mal der Code.
Die Nr. 20 ist schon reingesetzt, soll aber die Nr. 4 werden. Der Code ist momentan auf 19 Fragen ausgelegt. Die Antworten sind auch irgendwo festgelegt, da müsste die richtige Antwort an der richtigen Stelle reingesetzt werden. Die Bilder dazu sind aufsteigend festgelegt, da müsste ich dann die Nummerierung ändern und das Bild zu Frage 20 (bzw. dann 4) dann entsprechend reinsetzen.
Das Reinsetzen als qat[4] krieg ich auch so hin, nur der Rest übersteigt meine Fähigkeiten. Hab das im pp neu.txt schon mal gemacht, aber was muß ich sonst noch ändern?
In echt lässt sich das unter Google Chrome warnt vor dieser Seite! horrorheinz.de/pp/pp.html anschauen. Das ist natürlich die jetzige Version (pp.txt).
 

Anhänge

  • pp.txt
    9,8 KB · Aufrufe: 11
  • pp neu.txt
    9,8 KB · Aufrufe: 9
hihatzz

hihatzz

Geomaster
Du willst die Frage 20 als Nr. 4?
ich denke mal du musst die Frage 20 dann als Nr. 4 setzten und alle weiteren weiter erhöhen, d.h. aus (alter) Frage 4 wird Frage 5 und aus Frage 5 wird Frage 6 u.s.w.

In Zeile 12 stehen die richtigen Antworten, wobei mit "0" begonnen wird, d.h. die 0 bedeutet erste Antwortmöglichkeit ist richtig, u.s.w.

Ich kann mir das heute Abend oder morgen mal genauer anschauen wenn du bis dahin Zeit hast.
 
OP
Horrorheinz

Horrorheinz

Geocacher
Google Chrome scheint bei manchen Nutzern vor meiner Internetdomain zu warnen. Warum? Keine Ahnung.
Bei meinem Chrome und auch bei Opera, Firefox, DuckDuckGo kommt keine solche Meldung.
 
capoaira

capoaira

Geomaster
Wenn ich das richtig verstehe, werden die Bilder anhand der Fragenummer im Array `fragen` identifiziert.
Zum Hinzufügen einer neuen Frage müsstest du also im Array `fragen` die Nummer an der richtigen Stelle platzieren, die richtige Antwort an der richtigen Stelle im Array `antworten` hinterlegen und im Array `qat` die Antwortmöglichkeiten hinzufügen, auch hier musst du auf den richtigen Index achten. Dabei musst du beachten, dass du alle weitere Indexe auch anpassen musst. Also wenn die Frage als 4. kommen soll, steht an der 4. Stelle im Array `fragen` 14, und 14 und 15 müssen zu 15 und 16 angepasst werden und die Bilder entsprechend umbenannt werden. Bei den qat Array musst du ebenfalls darauf achten.


Ein paar freundliche Hinweise bzgl. des Codes (hat nichts mit deiner eigentlichen Fragestellung zu tun):
  • Es gibt seit vielen Jahren HTML5, es reicht also ein `<!DOCTYPE html>` und Tabellen sollten nicht für Layouts verwendet werden.
  • Es wäre für einfaches Hinzufügen besser, alles in einer Liste stehen zu haben. Du hast 3 verschiedene Arrays, sodass Flüchtigkeitsfehler vorprogrammiert sind.
    Mein Vorschlag wäre:
    Javascript: 
    fragen = [
    {
        id: "11", // Vorher in array fragen
        correct: 0, // Vorher in array antworten
        question: "Was mache ich, wenn es dunkel wird?" // Vorher in qat[i][1]
        answers: [
            "Raus aus dem Wasser mit meinem kleinen Boot.",
            "Die Weihnachtsgirlanden an die Paddel hängen, so hat jeder Freude, wenn er mich sieht.",
            "Toll, im Dunkeln kann ich mit der Berufsschifffahrt Verstecken spielen!"
        ]
    },
    // ... weitere Fragen
]
    Natürlich müssten weitere Funktionen an das neue Format angepasst werden
  • Es ist angenehmer auf die Antwortmöglichkeit zu drücken, wenn man auch auf den Text klicken kann. Dazu eignen sich `<label>` gut. Beispiel
    HTML: 
    <input name="antwort" id="a1" value="a1" type="radio"> <label for="a1">Raus aus dem Wasser mit meinem kleinen Boot.</label><br><input name="antwort" id="a2" value="a2" type="radio"> <label for="a1">Die Weihnachtsgirlanden an die Ruder hängen, so hat jeder Freude, wenn er mich sieht.</label><br>
<input name="antwort" id="a3" value="a3" type="radio"> <label for="a1">Toll, im Dunkeln kann ich mit der Berufsschifffahrt Verstecken spielen!</label><br><br>
    Das js änderst zum Befüllen änderst du dann wie folgt:
    Javascript: 
    document.querySelector('label[for="a1"]').innerHTML = qat[i][1];document.querySelector('label[for="a1"]').innerHTML = qat[i][2];
document.querySelector('label[for="a1"]').innerHTML = qat[i][3];
 
Zuletzt bearbeitet:
capoaira

capoaira

Geomaster
Horrorheinz schrieb:
Google Chrome scheint bei manchen Nutzern vor meiner Internetdomain zu warnen. Warum? Keine Ahnung.
Bei meinem Chrome und auch bei Opera, Firefox, DuckDuckGo kommt keine solche Meldung.
Zum Vergrößern anklicken....
Bei deinen Caches verlinkst du auf www.horrorheinz.de/pp/pp.html, was nur http nutzt. Besser wäre es auf https://www.horrorheinz.de/pp/pp.html zu verlinken, sodass das sichere Protokoll https genutzt wird. Mit einer .htaccess Datei kannst du mit deinem Server selbst dafür sorgen, dass man immer auf https umgeleitet wird. Das solltest du schnell ergooglen können. http ist nicht so sicher und wird bei strengen Sicherheitseinstellungen geblockt, bzw. erhält man eine Warnung.
 
OP
Horrorheinz

Horrorheinz

Geocacher
hihatzz schrieb:
Du willst die Frage 20 als Nr. 4?
ich denke mal du musst die Frage 20 dann als Nr. 4 setzten und alle weiteren weiter erhöhen, d.h. aus (alter) Frage 4 wird Frage 5 und aus Frage 5 wird Frage 6 u.s.w.

In Zeile 12 stehen die richtigen Antworten, wobei mit "0" begonnen wird, d.h. die 0 bedeutet erste Antwortmöglichkeit ist richtig, u.s.w.

Ich kann mir das heute Abend oder morgen mal genauer anschauen wenn du bis dahin Zeit hast.
Zum Vergrößern anklicken....
Genial! Genau das habe ich gebraucht!
In Zeile 12 habe ich die Antwort eingefügt. Wie bereits in pp neu.txt ist qat4 bereits drin. Bei den Bildern habe ich hochgestuft. Läuft!

Ich sag nur ein Wort: Vielen Dank!
 
schatzi-s

schatzi-s

Geowizard
Ohne jetzt genauer geguckt zu haben, fallen mir ein paar Dinge ein/ auf:

Ich hatte das so verstanden, dass Du eine weitere Frage zufuegen wolltest.
Der Unterschied zwischen den Dateien ist aber, dass Du die 21. Frage an die 5. Position verschoben hast. Oder hast Du das selber in die erste Datei bereits eingefuehgt?

Das wuerde auch erklaeren, warum es zwar 21 Fragen, aber nur 20 Antworten gibt.
alt: var antworten = new Array(0,1,2,2,2,1,0,2,2,1,0,2,2,0,0,1,0,1,0,1);
hier muss nun an die fuenfte Stelle die richtige Antwort fuer die neue Frage eingefuehgt werden
new Array(0,1,2,2,2,1,1,0,2,2,1,0,2,2,0,0,1,0,1,0,1);
Ausserdem musst Du noch das passende Bild hochladen. Die Bilder heissen scheinbar immer BildXX.gif
XX ist eine Zahl, die in der Zeile
var fragen = new Array("11","12","13","14","15","21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
genutzt wird. Auch hier musst Du an der entsprechenden Stelle die Nummer des Bildes einfuegen. Angenommen, das neue Bild heisst Bild43.gif, dann wird daraus

var fragen = new Array("11","12","13","14","43","15", "21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
Damit sollte ein Umbenennen der Bilder nicht noetig sein.
 
OP
Horrorheinz

Horrorheinz

Geocacher
capoaira schrieb:
Wenn ich das richtig verstehe, werden die Bilder anhand der Fragenummer im Array `fragen` identifiziert.
Zum Hinzufügen einer neuen Frage müsstest du also im Array `fragen` die Nummer an der richtigen Stelle platzieren, die richtige Antwort an der richtigen Stelle im Array `antworten` hinterlegen und im Array `qat` die Antwortmöglichkeiten hinzufügen, auch hier musst du auf den richtigen Index achten. Dabei musst du beachten, dass du alle weitere Indexe auch anpassen musst. Also wenn die Frage als 4. kommen soll, steht an der 4. Stelle im Array `fragen` 14, und 14 und 15 müssen zu 15 und 16 angepasst werden und die Bilder entsprechend umbenannt werden. Bei den qat Array musst du ebenfalls darauf achten.


Ein paar freundliche Hinweise bzgl. des Codes (hat nichts mit deiner eigentlichen Fragestellung zu tun):
  • Es gibt seit vielen Jahren HTML5, es reicht also ein `<!DOCTYPE html>` und Tabellen sollten nicht für Layouts verwendet werden.
  • Es wäre für einfaches Hinzufügen besser, alles in einer Liste stehen zu haben. Du hast 3 verschiedene Arrays, sodass Flüchtigkeitsfehler vorprogrammiert sind.
    Mein Vorschlag wäre:
    Javascript: 
    fragen = [
    {
        id: "11", // Vorher in array fragen
        correct: 0, // Vorher in array antworten
        question: "Was mache ich, wenn es dunkel wird?" // Vorher in qat[i][1]
        answers: [
            "Raus aus dem Wasser mit meinem kleinen Boot.",
            "Die Weihnachtsgirlanden an die Paddel hängen, so hat jeder Freude, wenn er mich sieht.",
            "Toll, im Dunkeln kann ich mit der Berufsschifffahrt Verstecken spielen!"
        ]
    },
    // ... weitere Fragen
]
    Natürlich mussten weitere Funktionen an das neue Format angepasst werden
  • Es ist angenehmer auf die Antwortmöglichkeit zu drücken, wenn man auch auf den Text klicken kann. Dazu eignen sich `<label>` gut. Beispiel
    HTML: 
    <input name="antwort" id="a1" value="a1" type="radio"> <label for="a1">Raus aus dem Wasser mit meinem kleinen Boot.</label><br><input name="antwort" id="a2" value="a2" type="radio"> <label for="a1">Die Weihnachtsgirlanden an die Ruder hängen, so hat jeder Freude, wenn er mich sieht.</label><br>
<input name="antwort" id="a3" value="a3" type="radio"> <label for="a1">Toll, im Dunkeln kann ich mit der Berufsschifffahrt Verstecken spielen!</label><br><br>
    Das js änderst zum Befüllen änderst du dann wie folgt:
    Javascript: 
    document.querySelector('label[for="a1"]').innerHTML = qat[i][1];document.querySelector('label[for="a1"]').innerHTML = qat[i][2];
document.querySelector('label[for="a1"]').innerHTML = qat[i][3];
Zum Vergrößern anklicken....
Ein Traum!
Ich beschäftige mich gleich damit!
 
OP
Horrorheinz

Horrorheinz

Geocacher
schatzi-s schrieb:
Ohne jetzt genauer geguckt zu haben, fallen mir ein paar Dinge ein/ auf:

Ich hatte das so verstanden, dass Du eine weitere Frage zufuegen wolltest.
Der Unterschied zwischen den Dateien ist aber, dass Du die 21. Frage an die 5. Position verschoben hast. Oder hast Du das selber in die erste Datei bereits eingefuehgt?

Das wuerde auch erklaeren, warum es zwar 21 Fragen, aber nur 20 Antworten gibt.
alt: var antworten = new Array(0,1,2,2,2,1,0,2,2,1,0,2,2,0,0,1,0,1,0,1);
hier muss nun an die fuenfte Stelle die richtige Antwort fuer die neue Frage eingefuehgt werden
new Array(0,1,2,2,2,1,1,0,2,2,1,0,2,2,0,0,1,0,1,0,1);
Ausserdem musst Du noch das passende Bild hochladen. Die Bilder heissen scheinbar immer BildXX.gif
XX ist eine Zahl, die in der Zeile
var fragen = new Array("11","12","13","14","15","21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
genutzt wird. Auch hier musst Du an der entsprechenden Stelle die Nummer des Bildes einfuegen. Angenommen, das neue Bild heisst Bild43.gif, dann wird daraus

var fragen = new Array("11","12","13","14","43","15", "21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
Damit sollte ein Umbenennen der Bilder nicht noetig sein.
Zum Vergrößern anklicken....
Hab jetzt das entsprechende Bild als 15 benannt und das alte 15 zu 16 gemacht. Da es dann erst bei 21 weitergeht, kein Problem.
Aber vielen Dank für die Aufklärung! Ich lerne immer wieder was dazu!
 
schatzi-s

schatzi-s

Geowizard
Bist Du sicher, dass das funktioniert?! Wenn ich mich nicht versehen habe, wird ein Bild 16 nie angezeigt, da es nicht in dem Fragen-Array steht
 
schatzi-s

schatzi-s

Geowizard
Die neue Frage hatte ich erkannt ;-) Aber es gibt da zwei Dinge, auf die ich verwiesen habe, von denen Du aber nicht geschrieben hast, dass Du das auch gemacht hast:
pp erste Version
var fragen = new Array("11","12","13","14","15","21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
mein Hinweis war: neue Zahl (passend zum Dateinamen) einfuegen (in meinem Fall 43)
var fragen = new Array("11","12","13","14","43","15", "21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
Deine Erklaerung, was Du gemacht hast:
"Hab jetzt das entsprechende Bild als 15 benannt und das alte 15 zu 16 gemacht. Da es dann erst bei 21 weitergeht, kein Problem."
das haette nicht gereicht und daher meine Frage, ob das wirklich funktionieren wuerde.
Dass es funktioniert, liegt daran, dass Du offensichtlich nicht nur die Datein umgenannt hast, sondern auch die neue Nummer in das Feld fragen aufgenommen hast, denn im aktiven Script steht jetzt:
var fragen = new Array("11","12","13","14","15","16","21","22","23","24","31","32","33","34","35","36","37","38","39","41","42");
nun wird das Bild 16 auch dargestellt :)
Und das Feld der Antworten hast Du auch um einen Wert erweitert :)

Nebenbei: Die Zahlen muessen nicht der Groesse nach sortiert werden. D. h, Du haettest dem neuen Bild auch die 16 geben und die 16 vor der 15 eintragen koennen (siehe meine 43). Das haette Dir das Umbenennen des alten 15er Bildes erspart. Stell Dir vor, Du haettest hinter der 31 etwas einfuegen muessen. Bei Deiner Methode haettest Du fast 10 Bilder umbenennen muessen.

Wobei Capoaira natuerlich recht hat, dass ein mehrdimensionales Feld die saubere und lesbarere Loesung waere, wobei ich dann dort allerdings auch noch den Dateinnamen fuer das Bild aufgenommen haette (und bei der Gelegenheit den Bildern beschreibende Namen gegeben haette wie z. B. Wehr.gif und Schiff.gif).

Aber das sind Feinheiten und wer veraendert schon im Nachhinein den Aufbau eines funktionierenden Programms? ;-)

Auf alle Faelle: Glueckwunsch, dass es jetzt laeuft und zur guten Idee, dem Paddler ein wenig Wissen mit auf den Weg zu geben!
 
OP
Horrorheinz

Horrorheinz

Geocacher
Das mit den Zahlen hatte ich verstanden und aufgrund der Antwort von hihatzz auch alles geändert. Also die weitere Antwort eingepflegt und das Bild. Dank Dir weiß ich jetzt mit der Bildbenennung Bescheid, aber ich lasse das so und änders erstmal nicht zurück.

Das mit dem mehrdimensionalen Feld finde ich super. Würde ich auch machen, vor allem, weil capoaira schon den Code hingeschrieben hat. Leider weiß ich nicht ganz genau, wo ich ihn einfügen muß und was raus muß.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben