Add parser on pcapi for forms and export it to json format

[panterz]

Here's a sample html file:

<div class="fieldcontain" id="fieldcontain-text-1" type="text">
<label for="form-text-1">Title</label>
<input name="form-text-1" id="form-text-1" type="text" required="" placeholder="Placeholder" maxlength="10">
</div>
<div class="fieldcontain" id="fieldcontain-range-1" type="text">
<label for="form-range-1">Range</label>
<input name="form-range-1" id="form-range-1" type="range" required="" step="1" min="0" max="10" placeholder="Placeholder" maxlength="10">
</div>
<div class="fieldcontain" id="fieldcontain-textarea-1" type="textarea">
<label for="form-textarea-1">Description</label>
<textarea name="form-textarea-1" id="form-textarea-1" placeholder="Placeholder" required="" readonly="readonly"></textarea>
</div>
<div class="fieldcontain" id="fieldcontain-checkbox-1">
<fieldset>
<legend>Choose</legend>
<label for="form-checkbox-1">Checkbox</label>
<input name="form-checkbox-1" id="form-checkbox-1" value="Checkbox" type="checkbox" required="">
</fieldset>
</div>
<div class="fieldcontain" id="fieldcontain-radio-1" type="radio">
<fieldset data-role="controlgroup">
<legend>Choose</legend>
<label for="form-radio1-1">Radio</label>
<input name="form-radio1" id="form-radio1-1" value="Radio" type="radio" required="">
</fieldset>
</div>
<div class="fieldcontain" id="fieldcontain-select-1">
<fieldset>
<legend>Choose</legend>
<select id="form-select-1" required="">
<option value=""></option>
<option value="Select">Select</option>
</select>
</fieldset>
</div>
<div class="fieldcontain" id="fieldcontain-image-1">
<div class="button-wrapper button-camera">
<input name="form-image-1" id="form-image-1" type="file" accept="image/png" capture="camera" required="" class="camera">
<label for="form-image-1">Take</label>
</div>
</div>
<div class="fieldcontain" id="fieldcontain-audio-1">
<div class="button-wrapper button-microphone">
<input name="form-audio-1" id="form-audio-1" type="file" accept="audio/*" capture="microphone" required="" class="microphone">
<label for="form-audio-1">Record</label>
</div>
</div>

Can you convert it to a json manually and I'll add the process to the PCAPI to do it automatically?

[Trget]

I've made minor annotation additions to the html specification file. Largely these are the addition of the data-cobweb-type fields to the root div elements, which should help with identifying the base elements of the form. These additions have been added to the authoring tool.

<div class="fieldcontain" id="fieldcontain-text-1" data-cobweb-type="text">
    <label for="form-text-1">Title</label>
    <input name="form-text-1" id="form-text-1" type="text" required="" placeholder="Placeholder" maxlength="10">
</div>
<div class="fieldcontain" id="fieldcontain-range-1" type="text">
    <label for="form-range-1">Range</label>
    <input name="form-range-1" id="form-range-1" type="range" required="" step="1" min="0" max="10" placeholder="Placeholder" maxlength="10">
</div>
<div class="fieldcontain" id="fieldcontain-textarea-1" data-cobweb-type="textarea" >
    <label for="form-textarea-1">Description</label>
    <textarea name="form-textarea-1" id="form-textarea-1" placeholder="Placeholder" required="" readonly="readonly"></textarea>
</div>
<div class="fieldcontain" id="fieldcontain-checkbox-1" data-cobweb-type="checkbox">
    <fieldset>
        <legend>Choose</legend>
        <label for="form-checkbox-1">Checkbox</label>
        <input name="form-checkbox-1" id="form-checkbox-1" value="Checkbox" type="checkbox" required="">
    </fieldset>
</div>
<div class="fieldcontain" id="fieldcontain-radio-1" data-cobweb-type="radio">
    <fieldset data-role="controlgroup">
        <legend>Choose</legend>
        <label for="form-radio1-1">Radio</label>
        <input name="form-radio1" id="form-radio1-1" value="Radio" type="radio" required="">
    </fieldset>
</div>
<div class="fieldcontain" id="fieldcontain-select-1" data-cobweb-type="select">
    <fieldset>
        <legend>Choose</legend>
        <select id="form-select-1" required="">
            <option value=""></option>
            <option value="Select">Select</option>
        </select>
    </fieldset>
</div>
<div class="fieldcontain" id="fieldcontain-image-1" data-cobweb-type="camera">
    <div class="button-wrapper button-camera">
        <input name="form-image-1" id="form-image-1" type="file" accept="image/png" capture="camera" required="" class="camera">
        <label for="form-image-1">Take</label>
    </div>
</div>
<div class="fieldcontain" id="fieldcontain-audio-1" data-cobweb-type="audio">
    <div class="button-wrapper button-microphone">
        <input name="form-audio-1" id="form-audio-1" type="file" accept="audio/*" capture="microphone" required="" class="microphone">
        <label for="form-audio-1">Record</label>
    </div>
</div>

Conversion to JSON to follow shortly. (Edit: Prettified html briefly)

[Trget]

Here are the components, each individually converted to an JSON notation.

<div class="fieldcontain" id="fieldcontain-select-1" data-cobweb-type="select">
   <fieldset>
       <legend>Choose</legend>
       <select id="form-select-1" required="">
           <option value="Hello">Hello</option>
           <option value="Select">Select</option>
       </select>
   </fieldset>
</div>

{
"input_type": "list",
"value_type": "Select",
   "question": "Choose",
   "id": 1,
drop_down: ["Hello", "Select"];
   "children": {}
}

<div class="fieldcontain" id="fieldcontain-image-1" data-cobweb-type="camera">
   <div class="button-wrapper button-camera">
       <input name="form-image-1" id="form-image-1" type="file" accept="image/png" capture="camera" required="" class="camera">
       <label for="form-image-1">Take</label>
   </div>
</div>

{
   "value_type": "picture",
   "question": "",
   "id": 4,
"children": {}
},

<div class="fieldcontain" id="fieldcontain-textarea-1" data-cobweb-type="textarea" >
   <label for="form-textarea-1">Description</label>
   <textarea name="form-textarea-1" id="form-textarea-1" placeholder="Placeholder" required="" readonly="readonly"></textarea>
</div>

{
"input_type": "text",
   "value_type": "String",
   "question": "Q",
   "id": 4,
"properties": {"multiline":true},
"children": {}
},

<div class="fieldcontain" id="fieldcontain-range-1" data-cobweb-type="range">
   <label for="form-range-1">Range</label>
   <input name="form-range-1" id="form-range-1" type="range" required="" step="1" min="0" max="10" placeholder="Placeholder" maxlength="10">
</div>

{
"input_type": "slider",
   "value_type": "integer",
   "question": "Q",
   "id": 4,
"properties": { "min":"0", "max":10, "step:"1"}
"children": {}
},

[panterz]

What about radio and checkboxes?

[Trget]

Added below, modifying the select field.

"selection_type": "select"

Values for this should be select, checkbox or option

{
"input_type": "list",
"value_type": "Select",
"selection_type": "select"
   "question": "Choose",
   "id": 1,
drop_down: ["Hello", "Select"];
   "children": {}
}

[panterz]

The json format of the editor is implemented for dropbox provider, local needs to be implemented. I'll deploy it now for testing.

[MasonJohnDavis]

Just looking at the JSON notation above.

Just a couple of questions: (i) how do we handle bi-lingual capability? (ii) is there a "select" field type that would also allow us to add a new entry?

[panterz]

Authoring tool needs to support this. Check cobweb-eu/cobweb#3