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

remove dependency on jQuery

Browse Source
This commit is contained in:
GavinQ1 2016-11-25 21:53:52 -05:00
parent a4821a4882
commit 61907d358f
5 changed files with 76 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/markdown_docs/plugins/jspsych-form.md
View File

@ -16,7 +16,7 @@ schema|object|{}|A JSON schema that holds the values of settings for creating a
Parameter | Type | Default Value | Description
----------|------|---------------|------------
form|[*Class* Form](#Form)|{}|Values of settings for the form layout.
"any question string"|[*Classes* start from here](#Dropdown)|{}|Take the key string as the question title, and the value as question settings.
"any question string"|[*Classes* start from here](#Dropdown)|*undefined*|Take the key string as the question title, and the value as question settings.
onSubmit|[*Class* Button](#Button)|{label: "Submit"}|Values of settings for the button in the form.
## Function

56
plugins/jspsych-form.js
View File

@ -1,22 +1,21 @@
/*
* jspsych-form (Version 1.0)
* jspsych-form (Version 1.1)
* Junyan Qi
*
* plugin for generating a form from a json schema.
*
* Documentation: docs.jspsych.org
*
* Dependency: jsPsych, jQuery, Material Design Lite
* Dependency: jsPsych, Material Design Lite
*
*
Required links in the html file:
<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">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-form.js"></script>
SCHEMA EXAMPLE:
@ -72,10 +71,10 @@ var schema = {
var value;
switch(type) {
case "select":
value = $("#" + question.label_id).val();
value = document.getElementById(question.label_id).value;
if (question.required != "") {
if (!value) {
$("#" + question.label_id).focus();
focus(question.label_id);
return;
}
}
@ -88,7 +87,7 @@ var schema = {
var checed;
for (var j = 0; j < question.products.length; j++) {
product = question.products[j];
checked = $("#" + product.id).is(":checked");
checked = document.getElementById(product.id).checked;
if (checked) flag = true;
value.push(["item_label: " + product.label,
"item_value: " + product.value,
@ -96,13 +95,14 @@ var schema = {
}
if (question.required != "" && !flag) {
document.getElementById(question.id).scrollIntoView();
focus(question.products[0].id);
return;
}
break;
default:
value = $("#" + question.id).val();
value = document.getElementById(question.id).value;
if (question.required != "" && !value) {
$("#" + question.id).focus();
focus(question.id);
return;
}
break;
@ -115,9 +115,9 @@ var schema = {
jsPsych.finishTrial(trial_data);
}
$("#" + button.id).click(function () {
document.getElementById(button.id).onclick = function () {
end_trial();
})
}
};
// Help functions
@ -154,6 +154,10 @@ var schema = {
return new F;
}
function focus(id) {
document.getElementById(id).focus();
}
// track unique ids for each element
var __INPUT_CHECKBOX = 0;
var __INPUT_DATE = 0;
@ -443,7 +447,8 @@ Tag.prototype = {
render: function() {
if (this.newline)
this.html = "<br>" + this.html;
$("#{0}".format(this.parent_id)).append(this.question_html + this.question_description_html + this.html);
document.getElementById(this.parent_id).insertAdjacentHTML('beforeend', this.question_html + this.question_description_html + this.html);
// $("#{0}".format(this.parent_id)).append(this.question_html + this.question_description_html + this.html);
}
}
@ -558,10 +563,14 @@ function UploadFile(parent_id, item = {}) {
this.render();
var label_id = this.label_id;
$("#{0}".format(this.id)).change(function() {
document.getElementById(this.id).onchange = function() {
document.getElementById(label_id).value = this.files[0].name;
document.getElementById(label_id).textContent = this.files[0].name;
};
/*$("#{0}".format(this.id)).change(function() {
$("#{0}".format(label_id)).val(this.files[0].name);
$("#{0}".format(label_id)).text(this.files[0].name);
});
});*/
};
UploadFile.prototype = inherit(Tag.prototype);
UploadFile.prototype._generate = function() {
@ -631,9 +640,14 @@ function Range(parent_id, item = {}) {
var label_id = this.label_id;
var id = this.id;
document.getElementById(this.id).onchange = function() {
document.getElementById(label_id).textContent = document.getElementById(id).value;
};
/*
$("#" + this.id).change(function() {;
$("#" + label_id).text($("#" + id).val());
})
*/
}
Range.prototype = inherit(Tag.prototype);
@ -693,16 +707,18 @@ function Dropdown(parent_id, item={}) {
var option_values = this.option_values;
var label_id = this.label_id;
for (let i in this.option_ids) {
$("#"+this.option_ids[i]).click(function() {
$("#"+label_id).val(option_values[i]);
})
document.getElementById(this.option_ids[i]).onclick = function() {
document.getElementById(label_id).value = option_values[i];
};
/*$("#"+this.option_ids[i]).click(function() {
$("#"+label_id).val(option_values[i]);
})*/
}
}
Dropdown.prototype = inherit(Tag.prototype);
Dropdown.prototype._option_factory = function () {
var html = '<li disabled class="mdl-menu__item mdl-menu__item--full-bleed-divider">{0}</li>'.format(this.choose_prompt);
for (var i in this.options) {
html += '<li id="{1}" value="{2}" class="mdl-menu__item">{0}</li>'.format(
this.options[i], this.option_ids[i], this.option_values[i]
@ -819,7 +835,7 @@ function InputEmail(parent_id, item = {}) {
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_EMAIL++);
item.label = item.label || "Please enter you email...";
InputTextField.call(this, parent_id, item);
this.html = this._generate();
this.render();
}

5
tests&examples/jspsych-form.html
View File

@ -2,10 +2,11 @@
<html>
<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">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-form.js"></script>
<!-- <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<head>
<title></title>
</head>

57
tests-form-module/form.js
View File

@ -1,16 +1,14 @@
/*
* form (Version 1.0)
* form (Version 1.1)
*
* Junyan Qi
*
* The module for jspsych-form.js
Dependency: jQuery, Material Design Lite
Dependency: 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">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
*/
@ -152,14 +150,14 @@ function createForm(display_element, schema) {
case "week":
question = new InputWeek(form_id, item);
break;
}
questions.push(question);
}
questions.push(question);
}
var button = new Button(form_id, schema.onSubmit);
var button = new Button(form_id, schema.onSubmit);
return [form, questions, button];
}
return [form, questions, button];
}
/*
@ -247,7 +245,8 @@ function Form(display_element, item = {}) {
this.render();
}
Form.prototype.render = function() {
$(this.display_element).html(this.html);
document.getElementsByTagName(this.display_element)[0].innerHTML = this.html;
// $(this.display_element).html(this.html);
}
/*
@ -338,7 +337,8 @@ Tag.prototype = {
render: function() {
if (this.newline)
this.html = "<br>" + this.html;
$("#{0}".format(this.parent_id)).append(this.question_html + this.question_description_html + this.html);
document.getElementById(this.parent_id).insertAdjacentHTML('beforeend', this.question_html + this.question_description_html + this.html);
// $("#{0}".format(this.parent_id)).append(this.question_html + this.question_description_html + this.html);
}
}
@ -453,10 +453,14 @@ function UploadFile(parent_id, item = {}) {
this.render();
var label_id = this.label_id;
$("#{0}".format(this.id)).change(function() {
$("#{0}".format(label_id)).val(this.files[0].name);
$("#{0}".format(label_id)).text(this.files[0].name);
});
document.getElementById(this.id).onchange = function() {
document.getElementById(label_id).value = this.files[0].name;
document.getElementById(label_id).textContent = this.files[0].name;
};
/*$("#{0}".format(this.id)).change(function() {
$("#{0}".format(label_id)).val(this.files[0].name);
$("#{0}".format(label_id)).text(this.files[0].name);
});*/
};
UploadFile.prototype = inherit(Tag.prototype);
UploadFile.prototype._generate = function() {
@ -526,9 +530,14 @@ function Range(parent_id, item = {}) {
var label_id = this.label_id;
var id = this.id;
document.getElementById(this.id).onchange = function() {
document.getElementById(label_id).textContent = document.getElementById(id).value;
};
/*
$("#" + this.id).change(function() {;
$("#" + label_id).text($("#" + id).val());
})
*/
}
Range.prototype = inherit(Tag.prototype);
@ -588,11 +597,13 @@ function Dropdown(parent_id, item={}) {
var option_values = this.option_values;
var label_id = this.label_id;
for (let i in this.option_ids) {
$("#"+this.option_ids[i]).click(function() {
$("#"+label_id).val(option_values[i]);
})
}
document.getElementById(this.option_ids[i]).onclick = function() {
document.getElementById(label_id).value = option_values[i];
};
/*$("#"+this.option_ids[i]).click(function() {
$("#"+label_id).val(option_values[i]);
})*/
}
}
Dropdown.prototype = inherit(Tag.prototype);
Dropdown.prototype._option_factory = function () {
@ -1044,9 +1055,9 @@ function ToggleGroup(parent_id, item) {
product = factory(this.parent_id, item);
this.products.push(product);
this.html += product.html + "\n";
}
this.html = '<br><div id="{0}">'.format(this.id) + this.html + "</div><br>";
this.render();
}
this.html = '<br><div id="{0}">'.format(this.id) + this.html + "</div><br>";
this.render();
}
ToggleGroup.prototype = inherit(Tag.prototype);
ToggleGroup.prototype._selector = function() {

4
tests-form-module/test_form.html
View File

@ -2,8 +2,8 @@
<html>
<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">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<script src="form.js"></script>
<head>
<title></title>