Beiträge von Sempervivum

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.

Wenn du es 150-prozentig machen willst, würde ich den main-Content oben anordnen, damit ein Besucher zuerst die Inhalte zu Gesicht bekommt. Aber oben einen kleinen Knopf, der mit einem a-href-Link zu dem Menü unten führt

Beheben kannst Du es, indem Du bei dem #main-nav flex-basis:auto setzt:

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

Erklären kann ich mir das allerdings nicht, weil ja auch groß und breit flex-grow:1 da steht und sich der Container eigentlich entspr. dem Inhalt ausdehnen müsste.

Da fehlt jetzt die Angabe der Breite für das ul:

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

Ein- und Ausfliegen ist auch kein Problem mit diesem CSS:

        @media screen and (min-width: 850px) and (max-width: 1440px) {
            main {
                flex: 1 1 auto;
            }

            div.contentspan nav>ul {
                display: block !important;
                margin-left: -24em;
                transition: margin-left 0.5s;
            }

            nav button[aria-expanded="true"]+ul {
                margin-left: 0;
            }
        }

Den Container hast Du ja schon umarrangiert. Jetzt fehlt nur noch eine Kleinigkeit: Du hast bei dem main sowohl flex-grow als auch flex-shrink auf 0 gesetzt. Dadurch passt sich der Container nicht an den freien Raum an. Setzt Du beides auf 1, tut er es und Du kannst auf die Rechnerei verzichten:

Nav auf:

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

Nav zu:

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

Anscheinend geht es mal wieder nicht ohne fertigen Code. Hier eine Demo für das Ein- und Ausfliegen. Aber ohne Deko

http://jsfiddle.net/Sempervivum/bn6Lh0so/18/