Kopieer de code uit de vorige opdracht naar de cell hier onder.
Voeg bovenaan het volgende toe:
import Svg exposing (..)
import Svg.Attributes exposing (..)
Vervang:
view model =
div []
[ input [ placeholder "numbers separated by ,", value model.content, onInput Change ] []
, div [] [ text (powfuncpointsTest model.content) ]
]
</div>door:
view model =
div []
[ input [ placeholder "numbers separated by ,", value model.content, onInput Change ] []
, svg [ viewBox "0 0 200 200", Svg.Attributes.width "400px" ]
[ g [ transform "translate(100, 100) scale(1,-1)" ]
[ polyline [ fill "none", stroke "black", points (powfuncpointsTest model.content) ] []
, polyline [ fill "none", stroke "black", points(pointsListToString (powfuncpoints -100 1 100 [0]))] []
, polyline [ fill "none", stroke "black", points "0,-100 0,100"] []
]
]
]
Pas powfuncpointsTest zo aan dat de test gaat voor -100 <= x <= 100.
Uitleg
In het view model maak je een svg tag. Binnen deze svg tag maak je een polyline aan met als punten de uitkomst van:
model | outputData = powfuncpointsTest model.inputData
De andere twee polylines zijn de x-as en de y-as.
Zie https://www.w3schools.com/graphics/svg_polyline.asp als je meer over svg en polyline wilt weten.
Resultaat
Run het elm programma in de cell hier onder. Je ziet het volgende:
In het vakje kun je de a, b en c invullen voor functies van de vorm:
y = ax2 + bx + c
Vul in het vakje links onder 5 in en druk op Enter.
Je ziet nu de grafiek voor de functie y=5 voor -100 =< x =< 100.
Vul in het vakje links onder 1,0 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x voor -100 =< x =< 100.
Vul in het vakje links onder 1,2 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x+2 voor -100 =< x =< 100.
Vul in het vakje links onder 1,0,0 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x2 voor -100 =< x =< 100.
Vul in het vakje links onder 1,0,-4 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x2-4 voor -100 =< x =< 100.
Vul in het vakje links onder 1,2,-4 in en druk op Enter.
Je zie nu de grafiek voor de functie y=x2+2x-4 voor -100 =< x =< 100.
Vul nog wat andere waardes in voor a, b en c in en kijk wat er gebeurt. Als je een half wilt invullen moet dat met 0.5 en een tiende met 0.1.
```elm ```