Beiträge von Sempervivum

Sollte kein Problem sein:

http://jsfiddle.net/Sempervivum/frujnhw9/6/

Das HTML ist original deines, ich habe nur den String "Datum" im Inhalt der Textareas gelöscht.

Das Javascript muss Du hinter dem HTML einfügen und in script-Tags einschließen:

<script>
  // hier das JS aus dem jsfiddle
</script>

Wo kommen denn die vorgefertigten Texte her? Sind die schon beim Laden der Seite drin? Dann könnte man einfach das Datum davor setzen. Aber Textarea ist ja eigentlich für Eingaben durch den Benutzer.

Ach ja, der IE mal wieder ...

Das mit der Nav wird hier diskutiert:
https://stackoverflow.com/questions/3223…t-working-in-ie

Bei mir funktioniert es, wenn ich das flex für die Nav ganz deaktiviere.

Und das mit dem verzerrten Logo kenne ich schon, wenn das Bild ein Flexitem ist, funktioniert es nur, wenn man einen Wrapper darum herum legt.

Das Problem mit Fontawesome habe ich noch nicht untersucht.

html-seminar.de/woltlab/attachment/1736/

Ohne das Umfeld zu kennen, tippe ich mal ins Blaue: Du erhöhst die Variable h immer wieder und irgendwann wird die Grenze des Array überschritten.

Dann ist entweder der Rückgabewert kein Array oder es gibt darin kein Element unter dem Index h+1.

Das wird hier diskutiert, auch ein halbwegs zuverlässiger Workaround:
https://stackoverflow.com/questions/2339…g-async-or-sync

Vollständig habe ich das Ganze jetzt nicht gedanklich nachvollzogen.

Aber erst Mal eine Empfehlung: Statt 0, 1 und 2 würde ich -1, 0 und +1 für die Richtungen empfehlen, einmal weil ich es anschaulicher finde und weil Du dann gleich einen Wert hast, um eine neue Position zu berechnen, entweder durch

x += directions.x; y+= directions.y;

oder

x += speed * directions.x;

ohne dass Du ifs oder einen Switch brauchst.

Grundsätzlich kann eine Funktion nur einen Wert zurückgeben, dieser kann jedoch eine Struktur aus Arrays und Objekten sein, etwa so:

return {xdir: die_x_richtung, ydir: die_y_richtung};

wenn es nur die Richtung ist. Oder wenn Du sowohl Koordinaten als auch Richtung zurück geben willst, etwa so:

var directions = {};
direction.xdir = // hier die x-Richtung fest legen
direction.ydir = // hier die y-Richtung fest legen
var coordinates = {};
                 // die Koordinaten fest legen
return {directions: directions, coordinates: coordinates};

Ja, ich konnte mich auch erinnern, dass ich schon mal dieses Thema hatte, aber ich dachte, es sei jemand anderes gewesen, sonst hätte ich nicht damit angefangen.

Diese Problematik mit der Umkehr der Richtung hatte ich auch schon ein paar Mal. Einmal war es so ein Spiel, wo sich Figuren innerhalb von Mauern bewegen sollten, allerdings nicht animiert, sondern mit den Pfeiltasten.

Um zu beurteilen, ob der Ansatz mit den Koordinaten und der Richtung Erfolg verspricht, müsste man etwas mehr wissen, ob sich dahinter auch irgendwelche Begrenzungen, so wie Mauern verbergen etc., oder etwas anderes.

Jetzt wird die Sache interessant

Dein Name drawBloons() ist ein wenig irreführend, weil immer nur ein Bloon gezeichnet wird. Also Canvas wird gelöscht - ein Bloon wird gezeichnet - neuer Aufruf - Canvas wird gelöscht, dabei verschwindet der erste Bloon wieder - ein anderer Bloon wird gezeichnet.

Wenn Du mehrere Objekte animieren willst, musst Du so vorgehen, dass Du nur einen Animationframe führst und darin alle Bloons neu zeichnest.

Das kann recht kompliziert werden und um es übersichtlich zu halten, wäre es angebracht, die Bloons mit ihren Parametern in einem Array zu halten. Dann kann man sie problemlos in jedem Frame neu zeichnen.

Es gibt einen Weg, das Ganze stark zu vereinfachen, wenn man nämlich eine Bibliothek wie jCanvas verwendet. Dann kannst Du bestimmte Parameter wie in deinem Fall die Position ganz einfach animieren und musst dir über das Löschen und Neuzeichnen keine Gedanken machen:

https://projects.calebevans.me/jcanvas/docs/animateLayers/

Dann ist es eigentlich viel einfacher. Prüfe dies, ob es das ist, was Du dir vorstellst:

        (function () {
            var counter = 2;
            var whichBloons = [1, 2, 3];
            var bloonCounter = [5, 3, 4];
            var timeLapse = [0, 5, 10];
            var intv = 3000;

            for (let idx1 = 0; idx1 < whichBloons.length; idx1++) {

                let idx2 = 0;
                setTimeout(function () {
                    // hier den ersten Bloon entspr. idx1 erzeugen
                    console.log("create bloon " + whichBloons[idx1] + " " + Date.now());
                    idx2++;
                    var timer = setInterval(function () {
                        // hier den naechsten  Bloon entspr. idx1 erzeugen
                        console.log("create bloon " + whichBloons[idx1] + " " + Date.now());
                        idx2++;
                        if (idx2 >= bloonCounter[idx1]) {
                            clearInterval(timer);
                        }
                    }, intv);
                }, timeLapse[idx1] * 1000);
            }
        })();

Also hast Du sie als Klassen zugewiesen. Um es einfach zu machen, empfehle ich bei allen noch eine Klasse "frage" hinzuzufügen:

<div class = "frage frage1">

Dann kannst Du die Nodelist ganz einfach ermitteln:

var questions = document.querySelectorAll(".frage");

Und da Du auch an die Funktion answerPunkte Klassen übergibst, kannst Du es so machen:

function answerPunkte (qName) {
    var radiosNo = document.querySelector("." + qName);

Die ganze Logik habe ich jetzt nicht gecheckt, mal Schritt-für-Schritt vorgehen.

Um das genau zu beantworten, müsste man auch das HTML sehen: Hast Du frage1, frage2, etc. als Klasse oder als IDs zugewiesen?

Ich empfehle, dass Du dich über CSS-Selektoren informierst, z. B. hier:

https://wiki.selfhtml.org/wiki/CSS/Selektoren

Auf jeden Fall kann man sagen: Globale Variablen haben zwar Nachteile, aber für den Anfang sollte idxQuestion global sein, denn wenn Du sie innerhalb der Funktion submitQuiz definierst, wird sie bei jedem Aufruf wieder mit 0 initialisiert.

Etwa so:

var questions = document.querySelectorAll("tr td div");
// Du kannst auch diesen divs eine Klasse geben, dann ist es etwas einfacher

var idxQuestion = 0;

function nextQuestion() {
    // aktuelle Frage verbergen
    questions[idxQuestion].style.visibility = "hidden";

    // naechste Frage sichtbar machen
    idxQuestion++;
    questions[idxQuestion].style.visibility = "visible";
}

(ungetestet)

BTW: Ein ul ohne lis darin macht keinen Sinn

Verstehe. Dann schlage ich folgendes Vorgehen vor:

Mit der Funktion document.querySelectorAll() eine Nodelist, das ist im wesentlichen ein Array, mit den Divs mit den Fragen darin erzeugen.

Eine Variable, z. B. idxQuestion, definieren und am Anfang auf 0 setzen. Diese gibt an, welche Frage zzt. aktiv und sichtbar ist. D. h. am Anfang die erste.

Wurde eine Frage beantwortet: Die aktuelle Frage entspr. aktuellem Index verbergen, den Index erhöhen. Dann zeigt dieser auf die nächste Frage; diese dann sichtbar machen.

Wie weit bist Du denn, d. h. was funktioniert schon und was nicht? Oder funktioniert gar nichts?

Ich habe das mit dem window.open jetzt ein wenig getestet und heraus gefunden, warum das, was ich oben gepostet hatte, nicht funktioniert:

Bevor man auf Elemente der geöffneten Seite zugreift, muss man warten, bis diese existieren, z. B. durch das onload-Event. Dieses funktioniert dann:

    <button id="openbtn">Klick um test14.html zu öffnen</button>
    <script>
        document.getElementById("openbtn").addEventListener("click", function () {
            var fenster = window.open("test14.html");
            fenster.addEventListener("load", function () {
                fenster.document.getElementById("testopen").innerHTML = "Hallo von test16.html";
            });
        });
    </script>

Mit Modal meine ich eine Popup-Box, d. h. ein Fenster, das in die Seite integriert ist, aber i. allg. nur bei Bedarf sichtbar gemacht wird und den Seiteninhalt überdeckt.

Zitat

Die zweite option (window.open) habe ich bereits versucht, habe es so jedoch ebenfalls nicht hingekriegt

Wenn Du die Nachteile akzeptierst, bin ich recht sicher, dass man das zum Laufen bringen kann.

Wie hier bei Selfhtml beschrieben:

https://wiki.selfhtml.org/wiki/JavaScript/Window/open

liefert window.open als Return-Wert das window-Objekt der geöffneten Seite. Damit hast Du vollständigen Zugriff darauf, z. B. so:

var fenster = window.open("result.html");
fenster.document.getElementById("die-id").innerHTML = "ein Text";

Ich empfehle jedoch, auch dem Hinweis auf Selfhtml nachzugehen und zu prüfen, ob auch ein Modal verwendet werden kann.

Solange die Seite unabhängig dasteht, wüsste ich keine Möglichkeit (jedenfalls nicht clientseitig mit JS). Eine Verbindung von main.html nach result.html kannst Du nur herstellen, indem Du letztere durch erstere öffnest:

• entweder durch einen Link. Dann kannst Du über die URL Parameter übergeben und auf der result-Seite auswerten.
• oder durch die Javascript-Funktion window.open, was aus verschiedenen Gründen weniger zu empfehlen ist. Dann hast Du Zugriff auf das DOM der result-Seite und kannst diese direkt verändern.

Beschreib doch mal das Umfeld, in dem das stattfinden soll, dann kann man die Frage u. U. besser beantworten.