(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);