i

Tabellendarstellung

HTML-Tabellen

Für die Darstellung einer Ergebnistabelle der einzelnen Spiele bieten sich HTML-Tabellen an.

Eine Tabelle von Tierarten, deren Lebensraum und Größe könnte so aussehen:

<table>
    <tr>
        <td>Gorilla</td>
        <td>Zentralafrika</td>
        <td>1.6 m</td>
    </tr>
    <tr>
        <td>Panda</td>
        <td>China</td>
        <td>1.4 m</td>
    </tr>
    <tr>
        <td>Blauwal</td>
        <td>Alle Weltmeere</td>
        <td>26 m</td>
    </tr>
</table>

Elm-Code für Tierarten

Ein Elm-Programm, das die obige Tabelle im DOM erzeugt, kann ungefähr so aussehen:

module Main exposing (main)

import Html exposing (..)


-- Eine Tierart hat einen Namen, Lebensraum 
-- und eine typische Größe in Metern
type alias Tierart =
    ( String, String, Float )


type alias Model =
    List Tierart


initialModel : Model
initialModel =
    [ ( "Gorilla", "Zentralafrika", 1.6 )
    , ( "Panda", "China", 1.4 )
    , ( "Blauwal", "Alle Weltmeere", 26 )
    ]


viewTierart tierart =
    let
        xxx =
            tierart
    in
    tr []
        [ td [] [ text name ]
        , td [] [ xxx ]
        , td [] [ String.fromFloat groesse ++ " m" |> text ]
        ]


main =
    table []
        (List.xxx xxx xxx)

Aufgabe 1

Das Programm enthält an einigen Stellen die Zeichenfolge "xxx". Ersetze diese durch den korrekten Code, sodass die Tabelle korrekt dargestellt wird.

Erläutere die Funktionsweise des Programms.

Aufgabe 2 (optional)

Schöner ist es, wenn die Tabellenspalten eine Überschrift haben:

Tabellenüberschriften

Erweitere dein Programm entsprechend.

Sportergebnisse als Tabelle

Statt Tierarten sollen nun Spielergebnisse dargestellt werden:

Spieltabelle

Im ersten Schritt kannst du ein Testspiel und eine Funktion mit dem Namen viewSpiel implementieren. Anschließend kannst du das einzelne Testspiel anzeigen. Ein Ausschnitt deines Codes hat damit folgende Form:

        testspiel =
            Spiel "FV Heim" "VfB Gast" 2 1
        
        
        viewSpiel : Spiel -> Html msg
        viewSpiel spiel =
            tr []
                [ td [] [ text spiel.heimmannschaft ]        
                , -- hier fehlt noch Einiges...
                ]
        
        main =
            div []
                [ h1 [] [ text "Ergebnisse des Spieltags" ]
                , table [] [ viewSpiel testspiel ]
                ]
    

Aufgabe 3

(a) Ergänze deinen Code, so dass ein einzelnes Testspiel dargestellt wird:

testspiel

(b) Passe main so an, dass die gesamte Tabelle dargestellt wird. Falls du Hilfe benötigst, solltest du dir das Beispiel mit den Tierarten noch einmal ansehen.

Suche

v
8.2.3.4.1.4
inf-schule.de/deklarativ/fp_elm/dynamischewebseiten/sportergebnisse/lernstrecke/tabelle
inf-schule.de/8.2.3.4.1.4
inf-schule.de/@/page/QYv1zVkD7IeU2sVm

Rückmeldung geben