Files
edx-platform/common/static/js/capa/choicetextinput.js
2016-08-08 15:59:18 -04:00

74 lines
3.0 KiB
JavaScript

(function() {
var update = function() {
// Whenever a value changes create a new serialized version of this
// problem's inputs and set the hidden input field's value to equal it.
var parent = $(this).closest('section.choicetextinput');
// find the closest parent problems-wrapper and use that as the problem
// grab the input id from the input
// real_input is the hidden input field
var real_input = $('input.choicetextvalue', parent);
var all_inputs = $('input.ctinput', parent);
var user_inputs = {};
$(all_inputs).each(function(index, elt) {
var node = $(elt);
var name = node.attr('id');
var val = node.val();
var radio_value = node.attr('value');
var type = node.attr('type');
var is_checked = node.attr('checked');
if (type === 'radio' || type === 'checkbox') {
if (is_checked === 'checked' || is_checked === 'true') {
user_inputs[name] = radio_value;
}
} else {
user_inputs[name] = val;
}
});
var val_string = JSON.stringify(user_inputs);
// this is what gets submitted as the answer, we deserialize it later
real_input.val(val_string);
};
var check_parent = function(event) {
// This looks for the containing choice of a textinput
// and sets it to be checked.
var elt = $(event.target);
var parent_container = elt.closest('section[id^="forinput"]');
var choice = parent_container.find("input[type='checkbox'], input[type='radio']");
choice.attr('checked', 'checked');
choice.change();
// need to check it then trigger the change event
};
var imitate_label = function(event) {
// This causes a section to check and uncheck
// a radiobutton/checkbox whenever a user clicks on it
// If the button/checkbox is disabled, nothing happens
var elt = $(event.target);
var parent_container = elt.closest('section[id^="forinput"]');
var choice = parent_container.find("input[type='checkbox'], input[type='radio']");
if (choice.attr('type') === 'radio') {
choice.attr('checked', 'checked');
} else {
if (choice.attr('checked')) {
choice.prop('checked', false);
} else {
choice.prop('checked', true);
}
}
choice.change();
update();
};
var choices = $('.mock_label');
var inputs = $('.choicetextinput .ctinput');
var text_inputs = $('.choicetextinput .ctinput[type="text"]');
// update on load
inputs.each(update);
// and on every change
// This allows text inside of choices to behave as if they were part of
// a label for the choice's button/checkbox
choices.click(imitate_label);
inputs.bind('change', update);
text_inputs.click(check_parent);
}).call(this);