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.