HTML+JS for embedding Language Survey into MTurk questions

survey.html

<!--  

HTML+JS for embedding Language Survey into MTurk questions
Licensed under MIT/CC BY-SA 3.0 license

Use: replace FOREIGN with the name of foreign language

Requires JQuery library loaded in HEAD:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  -->

<script>
/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
jQuery.cookie = function (key, value, options) {

    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

		//HACK: saving cookies to s3.amazonaws.com domain, root path; because MTurk HTML questions are hosted in random s3 buckets (different paths)
		options.path="/";
		options.domain="s3.amazonaws.com";

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
</script>

<script>
/* From StackOverflow answer - http://stackoverflow.com/a/901144/873058
 *
 * Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) 
 * http://creativecommons.org/licenses/by-sa/3.0/
 *
 * Authors:
 * Artem Barger - http://stackoverflow.com/users/104014/artem-barger
 * Andy E - http://stackoverflow.com/users/94197/andy-e
 */
function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>


<div id="survey">
<h3>Language Survey</h3>
<p>First, please answer these questions about your language abilities:</p>
			<input type="hidden" id="surveyname" name="surveyname" value="foreignenglishspeakersurvey_{{lang_name}}"/>
            <table id="surveytable" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr class="odd">
                        <td>Is FOREIGN language your native language?</td>
                        <td><input type="radio" name="survey_is_native_foreign_speaker" value="yes" id="survey_is_native_foreign_speaker_yes"/><label for="survey_is_native_foreign_speaker_yes">Yes</label> 
							<input type="radio" name="survey_is_native_foreign_speaker" value="no" id="survey_is_native_foreign_speaker_no" /><label for="survey_is_native_foreign_speaker_no">No</label> </td>
                    </tr>
                    <tr class="even">
                        <td>How many years have you spoken FOREIGN language?</td>
                        <td><input size="4" name="survey_years_speaking_foreign" id="survey_years_speaking_foreign" type="text" /> <span class="answertext">years</span></td>
                    </tr>
                    <tr class="odd">
                        <td>Is English your native language?</td>
                        <td><input type="radio" name="survey_is_native_english_speaker" value="yes" id="survey_is_native_english_speaker_yes"/><label for="survey_is_native_english_speaker_yes">Yes</label> 
							<input type="radio" name="survey_is_native_english_speaker" value="no" id="survey_is_native_english_speaker_no"/><label for="survey_is_native_english_speaker_no">No</label> </td>
                    </tr>
                    <tr class="even">
                        <td>How many years have you spoken English?</td>
                        <td><input size="4" name="survey_years_speaking_english"  id="survey_years_speaking_english" type="text" /> <span class="answertext">years</span></td>
                    </tr>
                    <tr class="odd">
                        <td>What country do you live in?</td>
                        <td><input size="15" name="survey_what_country"  id="survey_what_country" type="text" /></td>
                    </tr>
                    <tr class="even">
                        <td>What country were you born in?</td>
                        <td><input size="15" name="survey_what_country_born" id="survey_what_country_born" type="text" /></td>
                    </tr>
                </tbody>
            </table>
<br/>
  <a href="" id="hide_survey">save survey (cookies must be enabled)</a>
</div>
<div id="survey2"  style="display:none;">
	<div id="survey_summary"></div>
  <a  href="" id="show_survey">change answers</a>
</div>

<script>

var survey_name="foreignenglishspeakersurvey_FOREIGN";

function load_survey_data()
//restoring data from cookies into survey form
{
	var foreign_native=$.cookie("survey_is_native_foreign_speaker");
	var foreign_years=$.cookie("survey_years_speaking_foreign");
	var english_native=$.cookie("survey_is_native_english_speaker");
	var english_years=$.cookie("survey_years_speaking_english");
	var what_country=$.cookie("survey_what_country");
	var what_country_born=$.cookie("survey_what_country_born");

	if (foreign_native=="yes"){foreign_native="native";} else {foreign_native="non-native"}
	if (english_native=="yes"){english_native="native";} else {english_native="non-native"}

	var survey_summary="FOREIGN ("+foreign_native+") - "+ foreign_years+" years, English ("+english_native+") - "+english_years+" years, lives in "+what_country+" (born in "+what_country_born+")";
	$("#survey_summary").html(survey_summary);
	
	$("[name=survey_is_native_foreign_speaker]").filter("[value="+$.cookie("survey_is_native_foreign_speaker")+"]").prop('checked', true);
	$("#survey_years_speaking_foreign").val($.cookie("survey_years_speaking_foreign"));
	$("[name=survey_is_native_english_speaker]").filter("[value="+$.cookie("survey_is_native_english_speaker")+"]").prop('checked', true);
	$("#survey_years_speaking_english").val($.cookie("survey_years_speaking_english"));
	$("#survey_what_country").val($.cookie("survey_what_country"));
	$("#survey_what_country_born").val($.cookie("survey_what_country_born"));
}

function validate_survey()
{
	return "";
}

function save_survey_data()
//saving survey values into cookie (should be called by form submit)
{
	//mark survey in a cookie
	$.cookie(survey_name,"true");

	$.cookie("survey_is_native_foreign_speaker",$('input[name=survey_is_native_foreign_speaker]:checked').val());
	$.cookie("survey_years_speaking_foreign",$("#survey_years_speaking_foreign").val());
	$.cookie("survey_is_native_english_speaker",$('input[name=survey_is_native_english_speaker]:checked').val());
	$.cookie("survey_years_speaking_english",$("#survey_years_speaking_english").val());
	$.cookie("survey_what_country",$("#survey_what_country").val());
	$.cookie("survey_what_country_born",$("#survey_what_country_born").val());
	load_survey_data();
}

// If current survey is saved in cookies, load survey data
if ($.cookie(survey_name)!=null)
    {
	  load_survey_data();
      $("#survey").hide();
	  $("#survey2").show();
}

function show_survey()
    {
      $("#survey").toggle();
      $("#survey2").toggle();
	  return false;
    }

function hide_survey()
    {
	  save_survey_data();
      $("#survey").toggle();
      $("#survey2").toggle();
	  return false;
    }

//attach events for show/hide survey buttons/links
$("#show_survey").click(show_survey);
$("#hide_survey").click(hide_survey);

//attach save survey function to save button
$("#submitbutton").click(save_survey_data());   

</script>