[{"name":"Questions","comment":"\n\n\n# Types\n\n@docs Question, Msg, Mark, UserState, MsgTaggers\n\n\n# Creation\n\n@docs createStateful, createStateless\n\n\n# View\n\n@docs mapView\n\n\n# Utilities\n\n@docs getQuestionView, getResponseFieldView\n\n","unions":[{"name":"Mark","comment":" A custom type for quiz results. You can attach detailed explanation in `Html Never` for educational purpose.\n","args":[],"cases":[["Correct",["Html.Html Basics.Never"]],["Wrong",["Html.Html Basics.Never"]]]},{"name":"Msg","comment":" `Msg`s sent from the quiz component to the parent application. You need to convert them into your application's `Msg` type using the first argument of the `mapView` function.\n","args":[],"cases":[["Updated",["Questions.Question"]],["Marked",["Questions.Mark"]]]},{"name":"Question","comment":" An opaque type that represent quiz question component. For now, the inner representation is:\n\n    type Question\n        = Question\n            { viewQuestion : Html Never\n            , viewResponseField : Html Msg\n            }\n\nwhere `Msg` is defined below.\n\n","args":[],"cases":[]},{"name":"UserState","comment":" A custom type that represents the user's state regarding a question. You need to maintain this value in your application's model and pass it to the `mapView` function.\n","args":[],"cases":[["Answering",[]],["HasAnswered",["Questions.Mark"]]]}],"aliases":[{"name":"MsgTaggers","comment":" A type alias of record which is used in `createStateful` function.\n","args":["model","ans"],"type":"{ modelUpdated : model -> Questions.Msg, modelUpdatedWith : (model -> model) -> Questions.Msg, userHasAnswered : ans -> Questions.Msg }"}],"values":[{"name":"createStateful","comment":" Creates a quiz component with its own `Model`, separate from your main application's model.\nThink of the argument as a simplified version of `Browser.sandbox`, as it lacks an `update` function and has a limited `Msg`.\n\nYou can send a `Msg` using the internally provided `modelUpdate`, `modelUpdateWith` and `userHasAnswered` functions.\nThe `modelUpdated newModel` and `modelUpdatedWith f` functions emit `Updated <Question with the model updated>`, and the `userHasAnswered ans` function emits `Marked ((Correct|Wrong) (Html Never))` based on whether `isCorrect ans` returns `True` or `False`.\n\n    import Html as H exposing (Html)\n    import Html.Attributes as HA\n    import Html.Events as HE\n\n    type alias QuizModel =\n        { userInput : String\n        , isShowingHint : Bool\n        }\n\n    type alias Answer =\n        String\n\n    quiz : Question\n    quiz =\n        let\n            qInit : QuizModel\n            qInit = \"\"\n\n            viewQuestion : Html Never\n            viewQuestion =\n                span []\n                    [ H.text <| \"Write the name of the atom that is represented in atomic symbol \"\n                    , H.span [HA.style \"font-weight\" \"bold\"]\n                        [H.text \"P\"]\n                    , H.text \".\"\n                    ]\n\n            viewResponseField :\n                MsgTagger QuizModel Answer\n                    -> QuizModel\n                    -> Html Msg\n            viewResponseField {modelUpdated, userHasAnswered} model =\n                \\model ->\n                    H.div []\n                        [ H.input\n                            [ HA.value model\n                            , HA.placeholder \"input your answer.\"\n                            , HE.onInput\n                                (\\input ->\n                                    modelUpdated\n                                        { model | userInput = ans }\n                                )\n                            ]\n                            []\n                        , H.button\n                            [ HE.onClick\n                                (userHasAnswered model.userInput)\n                            ]\n                            [ H.text \"submit\"]\n                        , H.br [] []\n                        , H.button\n                            [ HE.onClick <|\n                                modelUpdated\n                                    { model\n                                        | isShowingHint =\n                                            not model.isShowingHint\n                                    }\n                            ]\n                            [ if model.isShowingHint then\n                                H.text \"show hint\"\n                            , else\n                                H.text \"hide hint\"\n                            ]\n                        , if model.isShowingHint then\n                            H.div [ HA.style \"color\" \"pink\" ]\n                                [ H.text \"Phosphoric acid contains this element as its center atom.\"\n                                ]\n                          else\n                              H.text \"\"\n                        ]\n\n            isCorrect : Answer -> Bool\n            isCorrect userAnswer =\n                List.member userAnswer\n                    [ \"Phosphorus\"\n                    , \"phosphorus\"\n                    , \"PHOSPHORUS\"\n                    ]\n\n            viewExplanation : Answer -> Html Never\n            viewExplanation userAnswer =\n                if isCorrect userAnswer then\n                    H.text \"Correct!\"\n\n                else\n                    H.span\n                        []\n                        [ H.span [ HA.style \"font-weight\" \"bold\" ]\n                            [H.text \"P\"]\n                        , H.text \" stands for \"\n                        , H.strong []\n                            [ H.text \"phosphorus\"\n                            ]\n                        , H.text\n                            <| \", while you have input \"\n                            ++ userAnswer\n                            ++ \".\"\n                        ]\n        in\n        createStateful\n            { init = qInit\n            , viewQuestion = viewQuestion\n            , viewRespanseField = viewResponseField\n            , isCorrect = isCorrect\n            , viewExplanation = viewExplanation\n            }\n\n","type":"{ init : model, viewQuestion : Html.Html Basics.Never, viewResponseField : { modelUpdated : model -> Questions.Msg, modelUpdatedWith : (model -> model) -> Questions.Msg, userHasAnswered : answer -> Questions.Msg } -> model -> Html.Html Questions.Msg, isCorrect : answer -> Basics.Bool, viewExplanation : answer -> Html.Html Basics.Never } -> Questions.Question"},{"name":"createStateless","comment":" Creates a stateless quiz component.\n\n    import Html as H exposing (Html)\n    import Html.Attributes as HA\n    import Html.Events as HE\n\n    type alias Answer =\n        String\n\n    quiz : Question\n    quiz =\n        let\n            viewQuestion : Html Never\n            viewQuestion =\n                span []\n                    [ H.text <| \"Select the name of the atom that is represented in atomic symbol \"\n                    , H.span [ HA.style \"font-weight\" \"bold\" ]\n                        [ H.text \"P\" ]\n                    , H.text \".\"\n                    ]\n\n            viewResponseField : Html Answer\n            viewResponseField =\n                [ \"Pluto\"\n                , \"Plutinum\"\n                , \"Phosphorus\"\n                , \"Protoactinium\"\n                ]\n                    |> List.map\n                        (\\name ->\n                            H.button\n                                [ HE.onClick name ]\n                                [ H.text name ]\n                        )\n                    |> H.div []\n\n            isCorrect : Answer -> Bool\n            isCorrect =\n                (==) \"Phosphorus\"\n\n            viewExplanation : Answer -> Html Never\n            viewExplanation userAnswer =\n                if isCorrect userAnswer then\n                    H.text \"Correct!\"\n\n                else\n                    H.span\n                        []\n                        [ H.span [ HA.style \"font-weight\" \"bold\" ]\n                            [ H.text \"P\" ]\n                        , H.text \" stands for \"\n                        , H.strong []\n                            [ H.text \"phosphorus\"\n                            ]\n                        , H.text <|\n                            \", while you have selected \"\n                                ++ userAnswer\n                                ++ \".\"\n                        ]\n        in\n        createStateless\n            { viewQuestion = viewQuestion\n            , viewRespanseField = viewResponseField\n            , isCorrect = isCorrect\n            , viewExplanation = viewExplanation\n            }\n\n","type":"{ viewQuestion : Html.Html Basics.Never, viewResponseField : Html.Html answer, isCorrect : answer -> Basics.Bool, viewExplanation : answer -> Html.Html Basics.Never } -> Questions.Question"},{"name":"getQuestionView","comment":" Returns view of question sentence. Use `mapView` for rendering purpose.\n","type":"Questions.Question -> Html.Html Basics.Never"},{"name":"getResponseFieldView","comment":" Returns view of response field where users make their answers. Use `mapView` for rendering purpose.\n","type":"Questions.Question -> Html.Html Questions.Msg"},{"name":"mapView","comment":" Renders the quiz question. The `Msg`s from the quiz are mapped to your application's `Msg` using the first argument.\nThe functions `viewQuestion` and `viewResponseField` are provided by the `Question` value you passed as the last argument.\nSo if you have lots of `Question`s and want to show them at once, following code works.\n\n    import Array exposing (Array)\n    import Browser\n    import Html as H exposing (Html)\n    import Html.Attributes as HA\n    import Html.Events as HE\n    import Questions exposing (..)\n\n    type alias AppModel =\n        { questions : Array Question\n        , userStates : Array UserState\n        }\n\n    initialQuestions : Array Question\n    initialQuestions =\n        [ createStateless\n            { viewQuestion =\n                H.text \"1+1 =?\"\n            , viewResponseField =\n                List.range 1 9\n                    |> List.map\n                        (\\n -> H.button [ HE.onClick n ] [ H.text <| String.fromInt n ])\n                    |> H.div []\n            , isCorrect = (==) 2\n            , viewExplanation =\n                \\n ->\n                    if n == 2 then\n                        H.text \"Correct!\"\n\n                    else\n                        H.text \"Incorrect...\"\n            }\n        , createStateless\n            { viewQuestion =\n                H.text \"2+1 =?\"\n            , viewResponseField =\n                List.range 1 9\n                    |> List.map\n                        (\\n -> H.button [ HE.onClick n ] [ H.text <| String.fromInt n ])\n                    |> H.div []\n            , isCorrect = (==) 3\n            , viewExplanation =\n                \\n ->\n                    if n == 3 then\n                        H.text \"Correct!\"\n\n                    else\n                        H.text \"Incorrect...\"\n            }\n        ]\n            |> Array.fromList\n\n    type AppMsg\n        = NoOp\n        | UserHasAnswered Int UserState\n        | ModelUpdated Int Question\n\n    update : AppMsg -> AppModel -> AppModel\n    update msg model =\n        case msg of\n            NoOp ->\n                model\n\n            UserHasAnswered index userState ->\n                { model\n                    | userStates =\n                        Array.set index userState model.userStates\n                }\n\n            ModelUpdated index question ->\n                { model\n                    | questions =\n                        Array.set index question model.questions\n                }\n\n    view : AppModel -> Html AppMsg\n    view model =\n        List.map2\n            (\\a b -> ( a, b ))\n            (Array.toList model.userStates)\n            (Array.toList model.questions)\n            |> List.indexedMap\n                (\\n ( userState, question ) ->\n                    mapView\n                        (\\msg ->\n                            case msg of\n                                Updated q ->\n                                    ModelUpdated n q\n\n                                Marked m ->\n                                    UserHasAnswered n (HasAnswered m)\n                        )\n                        (\\us { viewQuestion, viewResponseField } ->\n                            H.div\n                                []\n                                [ H.text \"Q: \"\n                                , viewQuestion\n                                , H.br [] []\n                                , case us of\n                                    Answering ->\n                                        viewResponseField\n\n                                    HasAnswered m ->\n                                        let\n                                            ( correct, explanation ) =\n                                                case m of\n                                                    Correct e ->\n                                                        ( True, e )\n\n                                                    Wrong e ->\n                                                        ( False, e )\n                                        in\n                                        H.map (always NoOp)\n                                            (if correct then\n                                                explanation\n\n                                             else\n                                                H.span [ HA.style \"color\" \"red\" ]\n                                                    [ explanation ]\n                                            )\n                                ]\n                        )\n                        userState\n                        question\n                )\n            |> H.div []\n\n    main : Program () AppModel AppMsg\n    main =\n        Browser.sandbox\n            { init =\n                { questions = initialQuestions\n                , userStates = Array.repeat (Array.length initialQuestions) Answering\n                }\n            , update = update\n            , view = view\n            }\n\n","type":"(Questions.Msg -> msg) -> (Questions.UserState -> { viewQuestion : Html.Html msg, viewResponseField : Html.Html msg } -> Html.Html msg) -> Questions.UserState -> Questions.Question -> Html.Html msg"}],"binops":[]}]