Verarbeitung von Listen

Verarbeitung mehrerer Klartext-Wörter

Unser Programm soll dahingehend erweitert werden, dass es eine Liste von Klartexten verarbeiten kann. Im ersten Schritt wollen wir die Liste von Wörtern unverändert anzeigen. Das erreichen wir mit folgendem Ausdruck für eine feste Liste von Wörtern:

div [] [ text "HALLO", text "HUND", text "KATZE", text "MAUS", text "TIGER" ]

Für beliebige Listen von Klartextwörtern funktioniert das so natürlich nicht. Wir benötigen eine Funktion, welche die text-Funktion auf jedes Element einer Liste anwendet und uns eine neue Liste von Textknoten zurückgibt.

Das ist genau das, was die Funktion List.map macht:

List.map text [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ]
-- -> gibt eine Liste von fünf Textknoten, also eine 'List (Html msg)' zurück.

Im Kontext unseres div-Beispiels sieht das dann so aus:

div [] (List.map text [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ])

Insgesamt ergibt sich dann folgender Code für unsere Seite:

view klartextliste =
    div [] (List.map text klartextliste)


main =
    view [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ]

Aufgabe 1

Verschlüsselung mehrerer Wörter

Nun soll die Ansicht so erweitert werden, dass zu jedem Klartextwort auch der verschlüsselte Text angezeigt wird. Dazu müssen wir die Funktion view mit dem Schlüssel und der Liste von Wörtern aufrufen können:

main =
    view 3 [ "HALLO", "HUND", "KATZE", "MAUS", "TIGER" ]

Wir benötigen nun statt der text-Funktion eine Funktion, die aus einem Schlüssel und einem Klartextwort die DOM-Elemente für den Klartext und den verschlüsselten Text erzeugt. Die Funktion viewWort erledigt das für ein einzelnes Wort und gibt genau wie text etwas vom Typ Html msg zurück.

viewWort : Int -> String -> Html msg
viewWort schluessel wort =
    div []
        [ text wort
        , text " "
        , text (verschiebeText schluessel wort)
        ]

Wir können nun die Funktion viewWort als Parameter für List.map verwenden, um aus einer List String eine List (Html msg), also eine Liste von DOM-Teilbäumen zu erzeugen:

Aufgabe 2

        view 
        schluessel       =
        div []
        klartextliste 
        (List.map           klartextliste)
        (viewWort schluessel)