[{"name":"Questions","comment":"\n\n\n# Types\n\n@docs Question, Msg, Mark, UserState\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, getUserState\n\n","unions":[{"name":"Mark","comment":" A custom type for quiz results.\n","args":[],"cases":[["Correct",[]],["Wrong",[]]]},{"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","() -> Questions.Question"]]]},{"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            , userState : UserState Never\n            }\n\nwhere `Msg` and `UserState` 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":["a"],"cases":[["Answering",[]],["HasAnswered",["Questions.Mark","Html.Html a"]]]}],"aliases":[],"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) (() -> Question))` 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                { modelUpdated : QuizModel -> Msg\n                , userHasAnswered : Answer -> Msg\n                }\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":"getUserState","comment":" Returns user state. Use `mapView` for rendering purpose.\n","type":"Questions.Question -> Questions.UserState Basics.Never"},{"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        }\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        | QuestionUpdated Int Question\n\n    update : AppMsg -> AppModel -> AppModel\n    update msg model =\n        case msg of\n            NoOp ->\n                model\n\n            QuestionUpdated index question ->\n                { model\n                    | questions =\n                        Array.set index question model.questions\n                }\n\n    view : AppModel -> Html AppMsg\n    view model =\n        Array.toList model.questions\n            |> List.indexedMap\n                (\\n question ->\n                    mapView\n                        (\\msg ->\n                            case msg of\n                                Updated q ->\n                                    QuestionUpdated n (q ())\n\n                                Marked m q ->\n                                    QuestionUpdated n (q ())\n                        )\n                        (\\{ viewQuestion, viewResponseField, userState } ->\n                            H.div\n                                []\n                                [ H.text \"Q: \"\n                                , viewQuestion\n                                , H.br [] []\n                                , case userState of\n                                    Answering ->\n                                        viewResponseField\n\n                                    HasAnswered m e ->\n                                        case m of\n                                            Correct ->\n                                                e\n\n                                            Wrong ->\n                                                H.span\n                                                    [ HA.style \"color\"\n                                                        \"red\"\n                                                    ]\n                                                    [ e ]\n                                ]\n                        )\n                        question\n                )\n            |> H.div []\n\n    main : Program () AppModel AppMsg\n    main =\n        Browser.sandbox\n            { init =\n                { questions = initialQuestions\n                }\n            , update = update\n            , view = view\n            }\n\n","type":"(Questions.Msg -> msg) -> ({ viewQuestion : Html.Html msg, viewResponseField : Html.Html msg, userState : Questions.UserState msg } -> Html.Html msg) -> Questions.Question -> Html.Html msg"}],"binops":[]}]