HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-12 16:48:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

commenting

Browse Source
This commit is contained in:
GavinQ1 2016-11-17 00:26:52 -05:00
parent 307657a8b5
commit ccd97f773a
4 changed files with 377 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
tests-form-plugin/Thumbs.db
View File

Binary file not shown.

19
tests-form-plugin/commenter.py Normal file
View File

@ -0,0 +1,19 @@
def commenter(name, parent, args, inherited=True):
print "/*"
print "#"*60
if inherited:
print "# %s **inherits** %s"%(name, parent)
print "# %s does the following:\n"%name
print '''#
# Default settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True
#'''
print "# @param parent_id --> the id of its parent element\n# @param item --> a set of values for setting"
for i in args.split('.'):
print "# @param item.%s -->"%i
print "#"*60
print "# @return\n#"
print "#"*60
print "*/"

454
tests-form-plugin/form_supporting_mdl.js
View File

@ -1,6 +1,6 @@
/*
Depend on jQuery, Material Design Lite
Dependency: jQuery, Material Design Lite
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
@ -73,6 +73,148 @@ function inherit(proto) {
}
/*
e.g.
var schema = {
form: {form_title: "Test #1", ribbon_bg: "somePicture", form_description: ""},
// for more avaliable settings, check the attributes of classes for each type
"Question #1": {type: "short answer", label: ""},
"Question #2": {type: "password"},
"Question #3": {type: "checkbox", labels: ["option1", "option2"], images:[1, 2], values:[1, 2, 3, 4]},
"Question #4": {type: "radio", labels: ["option1", "option2"]}, // will automatically fill valuse
"Question #5": {type: "range"},
// not display question
"Question #6": {type: "dropdown", needQuestion: false},
// insert paragraph (similar for form)
"Question #7": {type: "long answer", question_description: ""}, // better styled
"Question #8<p>Contents</p>": {type: "long answer"},
onSubmit: {label: "Next"}
};
*/
function createForm(display_element, opt) {
opt.form = opt.form || {};
var form = new Form(display_element, opt.form);
var form_id = form.id;
var tags = [];
tags.push(form);
for (var i in Object.keys(opt)) {
i = Object.keys(opt)[i]
if (i == "form" || i == "onSubmit")
continue;
item = opt[i]
item.question = item.question || i;
var type = item.type;
var tag;
switch(type) {
// major uses
case "short answer":
item.type = "text";
case "text":
tag = new InputText(form_id, item);
break;
case "long answer":
item.type = "textarea";
case "textarea":
tag = new Textarea(form_id, item);
break;
case "dropdown":
tag = new Dropdown(form_id, item);
break;
case "checkbox":
case "switch":
case "radio":
tag = new ToggleGroup(form_id, item);
break;
case "range":
tag = new Range(form_id, item);
break;
// minor features
case "date":
tag = new InputDate(form_id, item);
break;
case "datetime":
tag = new InputDatetime(form_id, item);
break;
case "datetime-local":
tag = new InputDatetimeLocal(form_id, item);
break;
case "email":
tag = new InputEmail(form_id, item);
break;
case "file":
tag = new UploadFile(form_id, item);
break;
case "month":
tag = new InputMonth(form_id, item);
break;
case "password":
tag = new InputPassword(form_id, item);
break;
case "search":
tag = new InputSearch(form_id, item);
break;
case "telephone":
tag = new InputTel(form_id, item);
break;
case "time":
tag = new InputTime(form_id, item);
break;
case "url":
tag = new InputUrl(form_id, item);
break;
case "week":
tag = new InputWeek(form_id, item);
break;
}
tags.push(tag);
}
var button = new Button(form_id, opt.onSubmit);
tags.push(button);
return tags;
}
/*
############################################################
# Form
# Form does the following: render a MDL style form
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
#
# @param parent_id --> the id of its parent element
# @param item --> a set of values for setting
# @param item.form_title
# @param item.form_title_size
# @param item.form_title_color
# @param item.form_description
# @param item.form_description_color
# @param item.form_description_size
# layout settings:
# @param item.layout_color
# @param item.ribbon_color
# @param item.ribbon_height
# @param item.ribbon_bg
# @param item.ribbon_bg_size
# @param item.content_bg_color
# @param item.content_text_color
############################################################
# @return
#
############################################################
*/
function Form(display_element, item = {}) {
this.type = "form";
@ -126,7 +268,39 @@ Form.prototype.render = function() {
$(this.display_element).html(this.html);
}
/*
############################################################
# Tag does the following:
#
# @param parent_id --> the id of its parent element
# @param item --> an object of values for setting
# @param item.label --> general inner html content
# @param item.question --> question
# @param item.question_description --> question description
# @param item.question_color --> color of of question
# @param item.question_size --> font size of question
# @param item.question_description_size --> font size of question description
# @param item.question_description_color --> color of question description
# @param item.needQuestion --> whether displaying question
# @param item.newline --> whether inserting new line when rendering
# @param item.value --> html attribute
# @param item.name --> html attribute
# @param item.type --> html attribute
# @param item.id --> html attribute
# @param item.disabled --> html attribute
# @param item.maxlength --> html attribute
# @param item.readonly --> html attribute
# @param item.required --> html attribute
# @param item.autofocus --> html attribute
# @param item.size --> html attribute
############################################################
# @return
#
############################################################
*/
function Tag(parent_id, item) {
// standard attributs
this.parent_id = parent_id;
@ -174,7 +348,30 @@ Tag.prototype = {
}
}
/*
############################################################
# Button **inherits** Tag
# Button does the following: render a MDL style button
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- False
#
# @param parent_id --> the id of its parent element
# @param item --> an object of values for setting
# @param item.buttonStyle --> see MDL attribute
# @param item.color --> see MDL attribute
# @param item.primary --> see MDL attribute
# @param item.accent --> see MDL attribute
# @param item.ripple --> see MDL attribute
# @param item.icon --> see MDL attribute
# @param item.onclick --> html attribute
############################################################
# @return
#
############################################################
*/
function Button(parent_id, item = {}) {
item.id = item.id || "{0}_{1}".format(item.type, __BUTTON++);
item.type = item.type || "button";
@ -225,6 +422,25 @@ function Button(parent_id, item = {}) {
}
Button.prototype = inherit(Tag.prototype);
/*
############################################################
# UploadFile **inherits** Tag
# UploadFile does the following:
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- False
#
# @param parent_id --> the id of its parent element
# @param item --> an object of values for setting
# @param item.fileType --> prompts users to upload certain file type
# @param item.icon --> see MDL attribute
############################################################
# @return
#
############################################################
*/
function UploadFile(parent_id, item = {}) {
item.type = "file";
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_FILE++);
@ -259,6 +475,28 @@ UploadFile.prototype._generate = function() {
return html
}
/*
############################################################
# Range **inherits** Tag
# Range does the following:
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True or assigned by user
#
# @param parent_id --> the id of its parent element
# @param item --> an object of values for setting
# @param item.width --> html attribute
# @param item.max --> html attribute
# @param item.min --> html attribute
# @param item.step --> html attribute
# @param item.value_prompt --> prompts users the current value
############################################################
# @return
#
############################################################
*/
function Range(parent_id, item = {}) {
item.type = "range";
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_RANGE++);
@ -294,6 +532,27 @@ id="{1}" min="{2}" max="{3}" value="{4}" step="{5}" {8} {9} {10} {11}></div></di
}
Range.prototype = inherit(Tag.prototype);
/*
############################################################
# Dropdown **inherits** Tag
# Dropdown does the following:
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True or assigned by user
#
# @param parent_id --> the id of its parent element
# @param item --> an object of values for setting
# @param item.options --> the labels of the options
# @param item.option_values --> the values of the options
# @param item.dropRight --> define from which direction the list drops down, default is "false"
# @param item.choose_prompt --> prompts the users to choose
############################################################
# @return
#
############################################################
*/
function Dropdown(parent_id, item={}) {
item.type = "select";
item.id = item.id || "{0}_{1}".format(item.type, __SELECT++);
@ -347,6 +606,33 @@ Dropdown.prototype._option_factory = function () {
return html;
}
/*
############################################################
# InputTextField **inherits** Tag
# InputTextField does the following: as a superclass for <input> tag
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True or assigned by user
#
# @param parent_id --> the id of its parent element
# @param item --> a set of values for setting
# @param item.expandable --> see MDL attribute
# @param item.floating --> see MDL attribute
# @param item.icon --> see MDL attribute
# @param item.errorInfo --> see MDL attribute, define desired error message, the default is "Your input is not as required!"
# @param item.pattern --> html attribute
# @param item.accessKey --> html attribute
# @param item.defaultValue --> html attribute
# @param item.alt --> html attribute
# @param item.tabIndex --> html attribute
############################################################
# @return
#
############################################################
*/
function InputTextField(parent_id, item) {
item.needQuestion = (item.needQuestion == false) ? false : true;
Tag.call(this, parent_id, item);
@ -539,7 +825,29 @@ function InputWeek(parent_id, item = {}) {
}
InputWeek.prototype = inherit(InputTextField.prototype);
/*
############################################################
# Textarea **inherits** InputTextField
# Textarea does the following:
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True or assigned by user
#
# @param parent_id --> the id of its parent element
# @param item --> a set of values for setting
# @param item.name --> html attribute
# @param item.placeholder --> html attribute
# @param item.cols --> html attribute
# @param item.rows --> html attribute
# @param item.wrap --> html attribute
############################################################
# @return
#
############################################################
*/
function Textarea(parent_id, item = {}) {
item.type = "textarea";
item.id = item.id || "{0}_{1}".format(item.type, __TEXTAREA++);
@ -563,6 +871,26 @@ Textarea.prototype._generate = function() {
return '<div class="{0}">{1}<div>'.format(this.style, component);
}
/*
############################################################
# Toggle **inherits** Tag
# Toggle does the following: as a superclass for checkbox, radio, switch
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True or assigned by user
#
# @param parent_id --> the id of its parent element
# @param item --> a set of values for setting
# @param item.ripple --> see MDL attribute
# @param item.checked --> html attribute
############################################################
# @return
#
############################################################
*/
function Toggle(parent_id, item = {}) {
item.newline = item.newline || false;
Tag.call(this, parent_id, item);
@ -654,6 +982,31 @@ function Radio(parent_id, item = {}) {
}
Radio.prototype = inherit(Toggle.prototype);
/*
############################################################
# ToggleGroup **inherits** Tag
# ToggleGroup does the following: renders a group of toggles
# **note:
# if item.values is not assigned, it will first take values
# from item.labels and then from item.images until
# item.values have the same size as item.labels + item.images
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
# item.needQuestion <-- True or assigned by user
#
# @param parent_id --> the id of its parent element
# @param item --> a set of values for setting
# @param item.images --> an array of images
# @param item.values --> an array of values
# @param item.labels --> an array of labels
############################################################
# @return
#
############################################################
*/
function ToggleGroup(parent_id, item) {
item.id = item.id || "Toggle group_{0}".format(__TOGGLE_GROUP++);
item.type = item.type || "checkbox";
@ -709,100 +1062,3 @@ ToggleGroup.prototype._selector = function() {
}
}
/*
e.g.
opt = {
form: {ribbon-bg: somePicture}, --> form setting and layout
question#1: {type: someType},
question#2: {type: someType},
onSubmit: {}, --> button setting
}
*/
function createForm(display_element, opt) {
opt.form = opt.form || {};
var form = new Form(display_element, opt.form);
var form_id = form.id;
var tags = [];
tags.push(form);
for (var i in Object.keys(opt)) {
i = Object.keys(opt)[i]
if (i == "form" || i == "onSubmit")
continue;
item = opt[i]
item.question = item.question || i;
var type = item.type;
var tag;
switch(type) {
// major uses
case "short answer":
item.type = "text";
case "text":
tag = new InputText(form_id, item);
break;
case "long answer":
item.type = "textarea";
case "textarea":
tag = new Textarea(form_id, item);
break;
case "dropdown":
tag = new Dropdown(form_id, item);
break;
case "checkbox":
case "switch":
case "radio":
tag = new ToggleGroup(form_id, item);
break;
case "range":
tag = new Range(form_id, item);
break;
// minor features
case "date":
tag = new InputDate(form_id, item);
break;
case "datetime":
tag = new InputDatetime(form_id, item);
break;
case "datetime-local":
tag = new InputDatetimeLocal(form_id, item);
break;
case "email":
tag = new InputEmail(form_id, item);
break;
case "file":
tag = new UploadFile(form_id, item);
break;
case "month":
tag = new InputMonth(form_id, item);
break;
case "password":
tag = new InputPassword(form_id, item);
break;
case "search":
tag = new InputSearch(form_id, item);
break;
case "telephone":
tag = new InputTel(form_id, item);
break;
case "time":
tag = new InputTime(form_id, item);
break;
case "url":
tag = new InputUrl(form_id, item);
break;
case "week":
tag = new InputWeek(form_id, item);
break;
}
tags.push(tag);
}
var button = new Button(form_id, opt.onSubmit);
tags.push(button);
return tags;
}

5
tests-form-plugin/test_form_supporting_mdl.html
View File

@ -14,15 +14,16 @@
<script type="text/javascript">
var schema = {
form: {form_title: "Test #1", ribbon_bg: "ribbon.jpg", form_description: ""},
form: {form_title: "Test #1", form_description: ""},
"Question #1": {type: "short answer"},
"Question #2": {type: "password"},
"Question #3": {type: "checkbox", labels: ["option1", "option2"]},
"Question #4": {type: "radio", labels: ["option1", "option2"]},
"Question #5": {type: "range"},
"Question #6": {type: "dropdown", needQuestion: false},
"Question #7": {type: "long answer", question_description: ""},
"Question #7": {type: "long answer", question_description: "Some random contents"},
"Question #8": {type: "file"},
"Question #9<p>Some random contents</p>": {type: "long answer", question_description: ""},
onSubmit: {label: "Next"}
};