(* file: survey.ml *)
open Fmlib_browser
let often_list =
[ ""; "daily"; "weekly"; "monthly"; "quarterly"; "biannually"; "annually" ]
let where_list =
[
"";
"town";
"good tramping tracks";
"tough tramping tracks";
"off-track";
"scrub";
"the tops";
"the crags";
"the summit";
]
let what_list =
[
"";
"under 2 kg";
"2 to 5 kg";
"5 to 10 kg";
"10 to 20 kg";
"20 to 25 kg";
"+ 25 kg";
]
let first_element list = match list with [] -> "" | hd :: tail -> hd
(* Model*)
type state = {
often : string;
most_used : string;
where : string;
what : string;
message : string;
}
let init : state =
{
often = first_element often_list;
most_used = "";
where = first_element where_list;
what = first_element what_list;
message = "";
}
(* Messages *)
type msg =
| Often of string
| Most_used of string
| Where of string
| What of string
| Message of string
(* Views*)
let header_view state =
let open Html in
let open Attribute in
let img attrs nodes = node "img" attrs nodes in
div []
[
div [ class_ "grid" ] [ div [] []; img [ src "logo.svg" ] []; div [] [] ];
p []
[
text
"Please complete this survey. Help design the next Fiordland Pack.";
];
p []
[
text
"This is 100% anonymous. No google analytics. No facebook pixel. \
No cookies.";
];
]
let see_view state =
let open Html in
let open Attribute in
div []
[
li [] [ text "often: "; text state.often ];
li [] [ text "most used: "; text state.most_used ];
li [] [ text "where: "; text state.where ];
li [] [ text "what: "; text state.what ];
li [] [ text "message: "; text state.message ];
]
let view state =
let open Html in
let open Attribute in
let often str = Often str in
let most_used str = Most_used str in
let where str = Where str in
let what str = What str in
let message str = Message str in
let section attrs nodes = node "section" attrs nodes in
let form attrs nodes = node "form" attrs nodes in
div
[ class_ "container-fluid" ]
[
section [ id "header" ] [ header_view state ];
section
[ id "main" ]
[
form
[
attribute "action" "https://formspree.io/f/mpzvpdvp";
attribute "method" "post";
]
[
section []
[
label
[ attribute "for" "how_often" ]
[
text "How often do you use a backpack?";
select
[
attribute "type" "text";
attribute "name" "how_often";
id "how_often";
value state.often;
on_input often;
]
(List.map
(fun x -> node "option" [] [ text x ])
often_list);
];
label
[ attribute "for" "where" ]
[
text "Where do you use your pack most?";
select
[
attribute "type" "text";
attribute "name" "where";
id "where";
value state.where;
on_input where;
]
(List.map
(fun x -> node "option" [] [ text x ])
where_list);
];
label
[ attribute "for" "what" ]
[
text "What kind of load do you carry?";
select
[
attribute "type" "text";
attribute "name" "what";
id "what";
value state.what;
on_input what;
]
(List.map
(fun x -> node "option" [] [ text x ])
what_list);
];
label
[ attribute "for" "most_used" ]
[
text "What is your all time most used backpack?";
input
[
attribute "type" "text";
attribute "name" "most_used";
id "most_used";
value state.most_used;
on_input most_used;
]
[];
];
label
[ attribute "for" "message" ]
[
text "What is most important in a backpack?";
textarea
[
attribute "type" "text";
attribute "name" "message";
id "message";
value state.message;
on_input message;
]
[];
];
button [ attribute "type" "submit" ] [ text "Send" ];
];
];
]
(* ; section [id "see"] [ see_view state ] *);
]
(* Update *)
let update (state : state) = function
| Often str -> { state with often = str }
| Most_used str -> { state with most_used = str }
| Where str -> { state with where = str }
| What str -> { state with what = str }
| Message str -> { state with message = str }
let _ = sandbox init view update