<script src='mad-lib.js' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' href='mad-lib' type='text/css' media='screen' />

<div id='example'></div>

<script>
  $('#example').madlib({
    /*
     * template (required, string)
     * - A string to serve as a template of the madlib. Form fields will be injected where "#{field_id}" field tags are found.
     */
    template: "Text field: #{my_text_field}. Single select dropdown: #{a_radio_select}. Multiselect dropdown: #{multi_select_field}",

    /*
     * fields (required, object)
     * - An object whose keys are the field identifiers used in the template.
     * - Values are an object with with field options.
     */
    fields: {
      /*
       * Valid options for a 'text_field' field include:
       * - type (required, string), set to 'text_field'
       * - prompt (optional, string), placeholder text for the input field
       * - preset (optional, string), prepopulates the value of the input field
       */
      my_text_field: {
        type: 'text_field',
        prompt: 'Type something here',
        preset: 'Example'
      },
      /*
       * Valid options for a 'radio_select' (a single select dropdown) field include:
       * - type (required, string), set to 'radio_select'
       * - values (required, array of strings), each element of the array represents a value option for the select dropdown
       * - prompt (optional, string), sets the none-selected prompt (defaults to "None selected")
       * - include_other (optional, boolean), set to true to add an "Other" option that when selected, will add a text field for custom entry
       * - preset (optional, string), preselects a value from the dropdown. To preselect "Other", set it to "madlib_other"
       * - preset_other (optional, string), prepopulates the "Other" text field that is displayed when a user selects "Other" from the dropdown
       */
      a_radio_select: {
        type: 'radio_select',
        values: ['one', 'two', 'three'],
        prompt: 'Pick a number',
        include_other: true,
        preset: 'madlib_other',
        preset_other: 'Prepopulated text'
      },
      /*
       * Valid options for a 'multi_select' field include:
       * - type (required, string), set to 'multi_select'
       * - values (required, array of strings), each element of the array represents a value option for the select dropdown
       * - prompt (optional, string), sets the none-selected prompt (defaults to "None selected")
       * - include_other (optional, boolean), set to true to add an "Other" option that when selected, will add a text field for custom entry
       * - preset (optional, string or array of strings), preselects one or more values from the dropdown. To preselect "Other", set it to "madlib_other"
       * - preset_other (optional, string), prepopulates the "Other" text field that is displayed when a user selects "Other" from the dropdown
       */
      multi_select_field: {
        type: 'multi_select',
        values: ['one', 'two', 'three', 'four', 'five'],
        prompt: 'Pick number(s)',
        include_other: true,
        preset: ['two', 'four', 'madlib_other'],
        preset_other: 'forty'
      }
    },
    /*
     * The change callback is a function that will get called everytime the user changes a dropdown option or the value of a text field.
     */
    change: function( event, data ) {
      console.log('The mad-lib has been updated!');
    }
  });
</script>