![Please, correct the following ELM code:
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import List
import Random
import Basics exposing (modBy)
type alias Model =
{ board : List Int
, gridSize : Int
, emptyIndex : Int
}
init : Model
init =
{ board = List.range 1 15 ++ [ 0 ]
, gridSize = 4
, emptyIndex = 15
}
type Msg
= Shuffle
| Move Int
update : Msg -> Model -> Model
update msg model =
case msg of
Shuffle ->
let
shuffledBoard =
Random.shuffle model.board
in](https://image.slidesharecdn.com/pleasecorrectthefollowingelmcodemodulemainexposing-230322175426-c146456d/85/Please-correct-the-following-ELM-codemodule-Main-exposing-pdf-1-320.jpg)
![, onClick <| Move idx
]
[ if number == 0 then text "" else text <| String.fromInt number ]
in
div []
[ div [ style "display" "grid", style "grid-template-columns" "repeat(4, 50px)" ]
<| List.indexedMap cell model.board
, button [ onClick (Shuffle) ] [ text "Shuffle" ]
]
main : Program () Model Msg
main =
Browser.sandbox { init = init, update = update, view = view }
//Dependencies:
{
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0"
},
"indirect": {
"elm/json": "1.1.3",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2"
}
},](https://image.slidesharecdn.com/pleasecorrectthefollowingelmcodemodulemainexposing-230322175426-c146456d/85/Please-correct-the-following-ELM-codemodule-Main-exposing-pdf-3-320.jpg)
Please, correct the following ELM codemodule Main exposing (..).pdf
- 1. Please, correct the following ELM code: module Main exposing (..) import Browser import Html exposing (Html, button, div, text) import Html.Attributes exposing (style) import Html.Events exposing (onClick) import List import Random import Basics exposing (modBy) type alias Model = { board : List Int , gridSize : Int , emptyIndex : Int } init : Model init = { board = List.range 1 15 ++ [ 0 ] , gridSize = 4 , emptyIndex = 15 } type Msg = Shuffle | Move Int update : Msg -> Model -> Model update msg model = case msg of Shuffle -> let shuffledBoard = Random.shuffle model.board in
- 2. { model | board = shuffledBoard } Move idx -> if isAdjacent model model.gridSize idx then { model | board = swap model.board model.emptyIndex idx, emptyIndex = idx } else model isAdjacent : Model -> Int -> Int -> Bool isAdjacent model gridSize idx = let rowDiff = abs <| (idx // gridSize) - (model.emptyIndex // gridSize) colDiff = abs <| (idx `modBy` gridSize) - (model.emptyIndex `modBy` gridSize) in (rowDiff == 1 && colDiff == 0) || (rowDiff == 0 && colDiff == 1) swap : List Int -> Int -> Int -> List Int swap list index1 index2 = let value1 = List.nth index1 list value2 = List.nth index2 list in case ( value1, value2 ) of ( Just a, Just b ) -> List.indexedMap (i x -> if i == index1 then b else if i == index2 then a else x) list _ -> list view : Model -> Html Msg view model = let cell idx number = button [ style "width" "50px" , style "height" "50px"
- 3. , onClick <| Move idx ] [ if number == 0 then text "" else text <| String.fromInt number ] in div [] [ div [ style "display" "grid", style "grid-template-columns" "repeat(4, 50px)" ] <| List.indexedMap cell model.board , button [ onClick (Shuffle) ] [ text "Shuffle" ] ] main : Program () Model Msg main = Browser.sandbox { init = init, update = update, view = view } //Dependencies: { "type": "application", "source-directories": [ "src" ], "elm-version": "0.19.1", "dependencies": { "direct": { "elm/browser": "1.0.2", "elm/core": "1.0.5", "elm/html": "1.0.0" }, "indirect": { "elm/json": "1.1.3", "elm/time": "1.0.0", "elm/url": "1.0.0", "elm/virtual-dom": "1.0.2" } },
- 4. "test-dependencies": { "direct": {}, "indirect": {} } } //HTML Fifteen Puzzle