Frage HTML, CSS Häckenkästchen

[Scorpion]

Hallo Zusammen

Ich will ein Programm/Seite schreiben, bei dem ich meinen Fortschritt "messen" und dokumentieren kann. Jedes Kapitel kann verschieden viele Verse haben.

Meine Situation:

Ich bin etwas am auswendig lernen und ich will tracken, was ich schon kann und wie viel vom ganzen ich bereits kann.

Es soll ein grosser Div sein und darin viele Kleine. in jedem dieser kleinen Divs werden weitere Einteilungen gemacht, Beispiel:

<div class="allekapitel"> <!--Hier würde ich gerne, wie bei Kapitel 2 beschrieben, ganz oben auf der Seite, ebenfalls einen Fortschrittsbalken hinzufügen, damit ich weiss, wie viel ich vom ganzen kann. Wenn möglich nicht vom Kapitel abhängig, sondern von den Versen. -->

   <div class="kapitel1">

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 1</label>

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 2</label>

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 3</label>

   </div>


   <div class="kapitel2"> <!--Für jedes Kapitel ein Fortschritt "Balken". Wenn       dieses Kapitel z.B. 200 Verse hat und ich 20 kann und ankreuze, dass ein Fortschrittsanzeige dort ist und da steht 10% (20 / 200) und dann ein grüner Balken angezeigt wird, was den Wert "10%" / 100% (voller Balken) anzeigt. Mir ist es aber wichtig, dass wenn ich z.B. Vers 5-10 und 20-30 kann, nicht alle von 1-30 angekreuzt werde vom System, sondern diese unabhängig voneinander angekreuzt werden können und der Fortschrittbalken trotzdem funktioniert. Zudem sollte ich es speichern können, am besten mit einem Speichern Button.-->

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 1</label>

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 2</label>

   </div>

</div>

etc.

Wenn ich ein paar Häckchen setze und diese speichere, anschliessend die Webseite schliesse und ein anderem Tag wieder öffne, will ich, dass der Fortschritt immernoch gleich und die Häckchen auch immernoch gleich gesetzt sind, wie damals, als ich es gespeichert und geschlossen habe. kann mir da jemand helfen? Bin noch am lernen wie css und html richtig funktioniert und das übersteigt mein Können.

[Gunnar Bittersmann]

@@Scorpion

Ich hab deinen Codeblock mal als solchen ausgezeichnet, damit man den auch lesen kann.

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 1</label>

     <input id="confirm" type="checkbox" /><label for="confirm">Vers 2</label>

IDs müssen eindeutig sein. IRL gibt es zwar mehrere Menschen namens Klaus Schulze, aber jeden von ihnen hat eine andere Personalausweisnummer (ID).

Deine IDs könnten confirm1.1, confirm1.2, confirm1.3, confirm2.1, confirm1.2 heißen. Die for-Attribute sind auch mit umzubenennen.

Wenn ich ein paar Häckchen setze und diese speichere, anschliessend die Webseite schliesse und ein anderem Tag wieder öffne, will ich, dass der Fortschritt immernoch gleich und die Häckchen auch immernoch gleich gesetzt sind, wie damals, als ich es gespeichert und geschlossen habe.

Willst du den Stand serverseitig speichern? (Du hast einen Webserver mit Datenbank-System?)

Oder reicht es clientseitig? (Dann hast du den Stand natürlich nur auf dem einen Gerät.) JavaScript und local storage sind deine Freunde.

Bin noch am lernen wie css und html richtig funktioniert und das übersteigt mein Können.

HTML und CSS helfen dir zum Speichern von Eingaben nicht weiter.

Kwakoni Yiquan

[klawischnigg]

Hi there,

IDs müssen eindeutig sein. IRL gibt es zwar mehrere Menschen namens Klaus Schulze[...]

Es gab nur einen Klaus Schulze...!

[Der Martin]

Hi,

Es gab nur einen Klaus Schulze...!

ich kannte nie einen Klaus Schulze - wer soll das sein?

Einen schönen Tag noch
 Martin

[klawischnigg]

Hi there,

Es gab nur einen Klaus Schulze...!

ich kannte nie einen Klaus Schulze - wer soll das sein?

Der bedeutendste Musiker Deutschlands der letzten 50 Jahre.

[Gunnar Bittersmann]

@@klawischnigg

Der bedeutendste Musiker Deutschlands der letzten 50 Jahre.

Deshalb hab ich den Namen ja genommen. Naja, und weil Klaus ein häufiger Vorname und Schulze ein noch häufigerer Familienname ist.

Wirklich der bedeutendste? Hm … Ich bin da eher Team Edgar Froese.^[1]

Und abseits elektronischer Musik fallen mir sicher noch eine Handvoll bedeutende Musiker ein.

Und was heißt „Deutschlands der letzten 50 Jahre“? Zählen DDR-Musiker dazu?

Kwakoni Yiquan

---

1. für Den Martin: Edgar Froese ↩︎

[klawischnigg]

Hi there,

Der bedeutendste Musiker Deutschlands der letzten 50 Jahre.

Deshalb hab ich den Namen ja genommen. Naja, und weil Klaus ein häufiger Vorname und Schulze ein noch häufigerer Familienname ist.

Wirklich der bedeutendste? Hm … Ich bin da eher Team Edgar Froese.[^1]

Ja, Tangerine Dream waren auch ok, die sind dann aber immer mehr dem Kitsch und Kommerz verfallen.

Und abseits elektronischer Musik fallen mir sicher noch eine Handvoll bedeutende Musiker ein.

Keine Ahnung, ich hör nur Klassik und elektronische Musik.

Und was heißt „Deutschlands der letzten 50 Jahre“? Zählen DDR-Musiker dazu?

Noch weniger Ahnung. Wirklich tierisch ernst nehmen muß man solche Einteilungen und "Bewertungen" ohnehin nicht. Das ist alles sehr subjektiv und Sendungsbewußtsein hab ich auch keines. Das einzige, worin sich meine audiokünstlerische Toleranz erschöpft ist volksdümmliche Musik und Schlager. Bei diesem musikalischen Gestank rollen sich mir sämtliche Zehennägel auf...😉

[Gunnar Bittersmann]

@@klawischnigg

Das einzige, worin sich meine audiokünstlerische Toleranz erschöpft ist volksdümmliche Musik und Schlager. Bei diesem musikalischen Gestank rollen sich mir sämtliche Zehennägel auf...😉

Ich wollte auch nicht Heino auf die Liste der bedeutendsten Musiker setzen.

Kwakoni Yiquan

[Scorpion]

@@Gunnar Bittersmann

Meinst Du so:

<body>
    <div class="Buch">
        <h1>Checkliste / Fortschrittsprozess </h1>
        <div class="kapitel1"> <h2>Kapitel 1</h2>
            <h3> 7 Verse</h3>
                <div class="layout">
                    <input id="confirm1.1" type="checkbox" class="box"/><label for="confirm">1</label>
                    <input id="confirm1.2" type="checkbox" class="box"/><label for="confirm">2</label>
                    <input id="confirm1.3" type="checkbox" class="box"/><label for="confirm">3</label>
                    <input id="confirm1.4" type="checkbox" class="box"/><label for="confirm">4</label>
                    <input id="confirm1.5" type="checkbox" class="box"/><label for="confirm">5</label>
                    <input id="confirm1.6" type="checkbox" class="box"/><label for="confirm">6</label>
                    <input id="confirm1.7" type="checkbox" class="box"/><label for="confirm">7</label>

                </div>
        </div>
        <div class="kapitel2"> <h2> Kapitel 2</h2> 
            <h3>(10 Verse)</h3>
                <div class="layout">
                    <input id="confirm2.1" type="checkbox" class="box"/><label for="confirm">1</label>
                    <input id="confirm2.2" type="checkbox" class="box"/><label for="confirm">2</label>
                    <input id="confirm2.3" type="checkbox" class="box"/><label for="confirm">3</label>
                    <input id="confirm2.4" type="checkbox" class="box"/><label for="confirm">4</label>
                    <input id="confirm2.5" type="checkbox" class="box"/><label for="confirm">5</label>
                    <input id="confirm2.6" type="checkbox" class="box"/><label for="confirm">6</label>
                    <input id="confirm2.7" type="checkbox" class="box"/><label for="confirm">7</label>
                    <input id="confirm2.8" type="checkbox" class="box"/><label for="confirm">8</label>
                    <input id="confirm2.9" type="checkbox" class="box"/><label for="confirm">9</label>
                    <input id="confirm2.10" type="checkbox" class="box"/><label for="confirm">10</label>

                </div>

// ist das die Art die Du meintest?

Und zu Deiner Frage: Irgendwann eventuell serverseitig, aber zurzeit eher clientseitig.

Auch, dass ich zum Beispiel den Freunden auch solch eine Checkliste schicken kann, damit sie ihren eigenen Fortschritt messen und speichern können. Aber auf erster Linie vorallem nur für mich.

Bei JavaScript kenn ich mich leider auch noch nicht so gut aus. Könntest Du mir da auch helfen?

[Gunnar Bittersmann]

@@Scorpion

Wenn du auf mein Posting antwortest, dann antworte bitte auf mein Posting, nicht auf deins.

Meinst Du so:

                    <input id="confirm1.1" type="checkbox" class="box"/><label for="confirm">1</label>

Nein. Ich sagte doch: Die for-Attribute sind auch mit umzubenennen. Der Wert des for-Attributs des Labels muss mit der id des Eingabefelds übereinstimmen, damit die Zuordnung hergstellt ist. Also

                    <input id="confirm1.1" type="checkbox" class="box"/><label for="confirm1.1">1</label>

usw.

---

        <div class="kapitel1"> <h2>Kapitel 1</h2>
            <h3> 7 Verse</h3>

Hier steckt auch ein Fehler: „7 Verse“ ist keine Unterüberschrift zu „Kapitel 1“, also keine h3.

Enweder das gehört mit zur h2: „Kapitel 1 – 7 Verse“, dann solle das so aussehen:

        <div class="kapitel1">
            <h2>Kapitel 1
                <span class="visually-hidden">–</span>
                <span class="verses">7 Verse</span>
            </h2>

mit den Styles für .visually-hidden aus How-to Hide content. Für .verses setzt du display: block und die Schriftgröße runter. (Oder du packst „Kapitel 1“ in ein span und setzt dafür die Schriftgröße rauf.)

Oder „7 Verse“ gehört nicht mit in die h2 „Kapitel 1“, sondern ist ein Zusatz:

        <div class="kapitel1">
            <hgroup>
                <h2>Kapitel 1</h2>
                <span class="verses">7 Verse</span>
            </hgroup>

Für die anderen Kapitel entsprechend.

---

Bei JavaScript kenn ich mich leider auch noch nicht so gut aus. Könntest Du mir da auch helfen?

Gerne. Hier ist aber SELFHTML, nicht Wie-ist-der-fertige-Code-HTML.

Die Zutaten sind: Das Speichern muss irgendwie ausgelöst werden (ein button?), also brauchst du einen EventListener. Die Zustände der Checkboxen fragst du mit checked ab und speicherst sie im local storage.

Für das Setzen beim Seitenauruf brauchst du keinen EventListener, wenn das script am Ende des body steht (oder anders sichergestellt ist, das es erst läuft, wenn alle Elemente schon im DOM sind).

Wenn du konkrete Fragen dazu hast, kannst du sie hier gern stellen.

Kwakoni Yiquan