Closed panterz closed 8 years ago
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)
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": {}
},
What about radio and checkboxes?
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": {}
}
The json format of the editor is implemented for dropbox provider, local needs to be implemented. I'll deploy it now for testing.
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?
Authoring tool needs to support this. Check cobweb-eu/cobweb#3
Here's a sample html file:
Can you convert it to a json manually and I'll add the process to the PCAPI to do it automatically?