/** * jspsych-survey-multi-choice * a jspsych plugin for multiple choice survey questions * * Shane Martin * * documentation: docs.jspsych.org * */ jsPsych.plugins['survey-multi-choice'] = (function() { var plugin = {}; plugin.info = { name: 'survey-multi-choice', description: '', parameters: { questions: { type: [jsPsych.plugins.parameterType.STRING], array: true, default: undefined, no_function: false, description: '' }, options: { type: [jsPsych.plugins.parameterType.STRING], array: true, default: undefined, no_function: false, description: '' }, required: { type: [jsPsych.plugins.parameterType.BOOL], array: true, default: false, no_function: false, description: '' }, horitzontal: { type: [jsPsych.plugins.parameterType.BOOL], default: false, no_function: false, description: '' }, preamble: { type: [jsPsych.plugins.parameterType.STRING], default: '', no_function: false, description: '' } } } plugin.trial = function(display_element, trial) { var plugin_id_name = "jspsych-survey-multi-choice"; var plugin_id_selector = '#' + plugin_id_name; var _join = function( /*args*/ ) { var arr = Array.prototype.slice.call(arguments, _join.length); return arr.join(separator = '-'); } // trial defaults trial.preamble = typeof trial.preamble == 'undefined' ? "" : trial.preamble; trial.required = typeof trial.required == 'undefined' ? null : trial.required; trial.horizontal = typeof trial.required == 'undefined' ? false : trial.horizontal; // if any trial variables are functions // this evaluates the function and replaces // it with the output of the function trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial); // form element var trial_form_id = _join(plugin_id_name, "form"); display_element.append($('
', { "id": trial_form_id })); var $trial_form = $("#" + trial_form_id); // show preamble text var preamble_id_name = _join(plugin_id_name, 'preamble'); $trial_form.append($('
', { "id": preamble_id_name, "class": preamble_id_name })); $('#' + preamble_id_name).html(trial.preamble); // add multiple-choice questions for (var i = 0; i < trial.questions.length; i++) { // create question container var question_classes = [_join(plugin_id_name, 'question')]; if (trial.horizontal) { question_classes.push(_join(plugin_id_name, 'horizontal')); } $trial_form.append($('
', { "id": _join(plugin_id_name, i), "class": question_classes.join(' ') })); var question_selector = _join(plugin_id_selector, i); // add question text $(question_selector).append( '

' + trial.questions[i] + '

' ); // create option radio buttons for (var j = 0; j < trial.options[i].length; j++) { var option_id_name = _join(plugin_id_name, "option", i, j), option_id_selector = '#' + option_id_name; // add radio button container $(question_selector).append($('
', { "id": option_id_name, "class": _join(plugin_id_name, 'option') })); // add label and question text var option_label = ''; $(option_id_selector).append(option_label); // create radio button var input_id_name = _join(plugin_id_name, 'response', i); $(option_id_selector + " label").prepend(''); } if (trial.required && trial.required[i]) { // add "question required" asterisk $(question_selector + " p").append("*") // add required property $(question_selector + " input:radio").prop("required", true); } } // add submit button $trial_form.append($('', { 'type': 'submit', 'id': plugin_id_name + '-next', 'class': plugin_id_name + ' jspsych-btn', 'value': 'Submit Answers' })); $trial_form.submit(function(event) { event.preventDefault(); // measure response time var endTime = (new Date()).getTime(); var response_time = endTime - startTime; // create object to hold responses var question_data = {}; $("div." + plugin_id_name + "-question").each(function(index) { var id = "Q" + index; var val = $(this).find("input:radio:checked").val(); var obje = {}; obje[id] = val; $.extend(question_data, obje); }); // save data var trial_data = { "rt": response_time, "responses": JSON.stringify(question_data) }; display_element.html(''); // next trial jsPsych.finishTrial(trial_data); }); var startTime = (new Date()).getTime(); }; return plugin; })();