Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Survey Aesthetics #124

Merged
merged 4 commits into from
Apr 28, 2021
Merged

Survey Aesthetics #124

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a73c6b5
Add files via upload
cassidysymons Apr 27, 2021
c25be8f
Add files via upload
cassidysymons Apr 27, 2021
671cbc4
Tag Changes for Required Fields
cassidysymons Apr 27, 2021
854a5fb
Variable Scoping & Conditionals
cassidysymons Apr 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 29 additions & 24 deletions microsetta_interface/templates/new_participant.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,11 @@
width: 80%;
margin: 0 auto;
}

.required-field {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a bunch of the spans use class="red right required-field", I'm guessing class red just sets color: red. Should we bundle the definition of right into here also, then we can just set class="required-field" everywhere and drop the red and right classes from all the spans?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "red" and "right" classes were already in the code but didn't appear to be doing anything. I added the required-field class to handle the aesthetic changes I was making, but left red and right in place in case there was some legacy reason for them that I was unaware of.

If there's no reason to keep them, I'd be happy to clean them all out and just keep required-field.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh, so spans are required-field, divs are red right required-field? I think my question is can we drop the red class from the divs (assuming the right class does something else we want that isn't covered)?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell, both the red and right classes can be dropped from the divs. Neither class is defined anywhere in the CSS and I don't see any JavaScript that uses them. If neither you nor @wasade know of any reasons to keep them, I can drop both and just leave required-field in place.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say drop them then, if nothing shifts around or changes color, we're in the clear

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just dropped all of the references to the red and right classes and standardized all of the asterisks to . I double-checked after the change and nothing was altered visually, either in color or positioning.

color: red;
display: inline-block;
}
</style>
{% endblock %}
{% block breadcrumb %}
Expand Down Expand Up @@ -148,13 +153,13 @@
<a href="http://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf" target="_blank">{{ tl['BILL_OF_RIGHTS']|e}}</a><br/>
<form id="0-6-form" name="consent_info" onsubmit="return validate06();" action="{{ post_url }}" method="post">
<input type="hidden" name="age_range" value="0-6">
<p><input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_PARENT'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_PARENT'] |e}} <span class="required-field">*</span></p>
</div>
<table>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}</td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"><div class="red right" required data-rule-required="true">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_1'] |e}}</td><td><input tabindex="7" type="text" name="parent_1_name" id="0-6-form_parent_1_name" required data-rule-required="true"></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_2'] |e}}</td><td><input tabindex="8" type="text" name="parent_2_name" id="0-6-form_parent_2_name" required data-rule-required="true"></td></tr>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}</td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"> <div class="red right required-field" required data-rule-required="true">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_1'] |e}}</td><td><input tabindex="7" type="text" name="parent_1_name" id="0-6-form_parent_1_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_2'] |e}}</td><td><input tabindex="8" type="text" name="parent_2_name" id="0-6-form_parent_2_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_DECEASED_PARENTS'] |e}}</td><td><input tabindex="9" type="checkbox" name="deceased_parent" id="deceased_parent" value="true" onclick="relax_parents(this)"></td></tr>
<tr><td><input type="submit" id="0-6-submit_button" value="I Accept"></td><td></td></tr>
</table>
Expand All @@ -168,18 +173,18 @@
<hr>
<form id="7-12-form" name="consent_info" onsubmit="return validate712();" action="{{ post_url }}" method="post">
<input type="hidden" name="age_range" value="7-12">
<p><input value="Yes" type="checkbox" name="consent_child" id="consent_child" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_SIMPLIFIED'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent_child" id="consent_child" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_SIMPLIFIED'] |e}} <span class="required-field">*</span></p>
</div>
<p><table>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}</td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}</td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
</table></p>
<div>
<h4>{{ tl['PERSON_ATTAINING_ASSENT'] |e}}</h4>
<p><input value="Yes" type="checkbox" name="consent_witness" id="consent_witness" required data-rule-required="true"> {{ tl['TEXT_ASSENT_WITNESS'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent_witness" id="consent_witness" required data-rule-required="true"> {{ tl['TEXT_ASSENT_WITNESS'] |e}} <span class="required-field">*</span></p>
</div>
<p><table>
<tr><td><label for='obtainer_name'>{{ tl['OBTAINER_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="obtainer_name" id="obtainer_name" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td><label for='obtainer_name'>{{ tl['OBTAINER_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="obtainer_name" id="obtainer_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
</table></p>
<hr>
<div class='scrolltext'>
Expand All @@ -190,12 +195,12 @@
<div class="" id="consent">
<hr>
<a href="http://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf" target="_blank">{{ tl['BILL_OF_RIGHTS']|e}}</a><br/>
<p><input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_PARENT'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_PARENT'] |e}} <span class="required-field">*</span></p>
</div>
<table>
<tr><td>{{ tl['PARTICIPANT_PARENT_1'] |e}}</td><td><input tabindex="7" type="text" name="parent_1_name" id="7-12-form_parent_1_name" required data-rule-required="true"></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_2'] |e}}</td><td><input tabindex="8" type="text" name="parent_2_name" id="7-12-form_parent_2_name" required data-rule-required="true"></td></tr>
<tr><td>{{ tl['PARTICIPANT_DECEASED_PARENTS'] |e}}</td><td><input tabindex="9" type="checkbox" name="deceased_parent" id="deceased_parent" value="true" onclick="relax_parents(this)"></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_1'] |e}}: </td><td><input tabindex="7" type="text" name="parent_1_name" id="7-12-form_parent_1_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_2'] |e}}: </td><td><input tabindex="8" type="text" name="parent_2_name" id="7-12-form_parent_2_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_DECEASED_PARENTS'] |e}}: </td><td><input tabindex="9" type="checkbox" name="deceased_parent" id="deceased_parent" value="true" onclick="relax_parents(this)"></td></tr>
<tr><td><input type="submit" id="7-12-submit_button" value="I Accept"></td><td></td></tr>
</table>
</form>
Expand All @@ -209,11 +214,11 @@
<hr>
<form id="13-17-form" name="consent_info" onsubmit="return validate1317();" action="{{ post_url }}" method="post">
<input type="hidden" name="age_range" value="13-17">
<p><input value="Yes" type="checkbox" name="consent_child" id="consent_child" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_1'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent_child" id="consent_child" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_1'] |e}} <span class="required-field">*</span></p>
</div>
<p><table>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}</td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}: </label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}: </td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
</table></p>
<hr>
<div class='scrolltext'>
Expand All @@ -224,12 +229,12 @@
<div class="" id="consent">
<hr>
<a href="http://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf" target="_blank">{{ tl['BILL_OF_RIGHTS']|e}}</a><br/>
<p><input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_PARENT'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent_parent" id="consent_parent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_PARENT'] |e}} <span class="required-field">*</span></p>
</div>
<table>
<tr><td>{{ tl['PARTICIPANT_PARENT_1'] |e}}</td><td><input tabindex="7" type="text" name="parent_1_name" id="13-17-form_parent_1_name" required data-rule-required="true"></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_2'] |e}}</td><td><input tabindex="7" type="text" name="parent_2_name" id="13-17-form_parent_2_name" required data-rule-required="true"></td></tr>
<tr><td>{{ tl['PARTICIPANT_DECEASED_PARENTS'] |e}}</td><td><input tabindex="9" type="checkbox" name="deceased_parent" id="deceased_parent" value="true" onclick="relax_parents(this)"></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_1'] |e}}: </td><td><input tabindex="7" type="text" name="parent_1_name" id="13-17-form_parent_1_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_PARENT_2'] |e}}: </td><td><input tabindex="7" type="text" name="parent_2_name" id="13-17-form_parent_2_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_DECEASED_PARENTS'] |e}}: </td><td><input tabindex="9" type="checkbox" name="deceased_parent" id="deceased_parent" value="true" onclick="relax_parents(this)"></td></tr>
<tr><td><input type="submit" id="13-17-submit_button" value="I Accept"></td><td></td></tr>
</table>
</form>
Expand All @@ -246,11 +251,11 @@
<a href="http://oag.ca.gov/sites/all/files/agweb/pdfs/research/bill_of_rights.pdf" target="_blank">{{ tl['BILL_OF_RIGHTS']|e}}</a><br/>
<form id="18-form" name="consent_info" onsubmit="return min_validation('18-form');" action="{{ post_url }}" method="post">
<input type="hidden" name="age_range" value="18-plus">
<p><input value="Yes" type="checkbox" name="consent" id="consent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_1'] |e}}</p>
<p><input value="Yes" type="checkbox" name="consent" id="consent" required data-rule-required="true"> {{ tl['TEXT_I_HAVE_READ_1'] |e}} <span class="required-field">*</span></p>
</div>
<p><table>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}</label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}</td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"><div class="red right">*</div></td></tr>
<tr><td><label for='participant_name'>{{ tl['PARTICIPANT_NAME'] |e}}: </label></td><td><input tabindex="2" type="text" name="participant_name" id="participant_name" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td>{{ tl['PARTICIPANT_EMAIL'] |e}}: </td><td><input tabindex="3" type="email" name="participant_email" id="participant_email" required data-rule-required="true"> <div class="red right required-field">*</div></td></tr>
<tr><td><input type="submit" id="18-submit_button" value="I Accept"></td><td></td></tr>
</table></p>
</form>
Expand Down
115 changes: 112 additions & 3 deletions microsetta_interface/templates/survey.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,60 @@
<script type="text/javascript" src="/static/vendor/js/vue-2.5.17.min.js"></script>
<script type="text/javascript" src="/static/vendor/vue-form-generator-2.3.4/vfg.js"></script>
<link rel="stylesheet" type="text/css" href="/static/vendor/vue-form-generator-2.3.4/vfg.css">
<style type="text/css">
.vue-form-generator .field-radios .radio-list label {
Copy link
Contributor

@dhakim87 dhakim87 Apr 27, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My understanding is that this catches labels in groups of radio buttons, should similar style be set for groups of checkboxes?

(See Do you eat a specialized diet ? (select all that apply), Step 2 of 7 in the Microsetta Participant Survey)

Rough guess on the css selector is:
.vue-form-generator .field-checklist .dropList .list-row label

Could be a separate change entirely though.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you thinking you'd want to have the checkbox options span the entire width of the screen (similar to radio buttons), rather than in a one-per-line dropdown?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dhakim87 is this a blocking item or can this be sorted out later?

padding-right: 25px;
display: inline-block;
}

.survey-nav-button {
padding: 6px 12px;
color: #ffffff!important;
background-color: #337ab7!important;
border: 1px solid #cccccc;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
display: none;
}

.form-group label span{
font-weight: 700;
}

.form-group {
padding-bottom: 5px;
}

.field-wrap {
font-size: 90%;
}

#form-progress {
width: 100%;
text-align: center;
display: none;
font-weight: bold;
}
</style>
<script>
var result_txt = "";
var error_txt = "";
var form_submitted = 0;

function postSurvey() {
fieldsetObject = document.getElementsByTagName("fieldset");
cassidysymons marked this conversation as resolved.
Show resolved Hide resolved

// workaround to make the first six sections of the survey visible to the DOM so they submit, but hidden to the user
for(i=1; i<(fieldsetObject.length-1); i++) {
fieldsetObject[i].style.position = "absolute";
fieldsetObject[i].style.top = "-9999px";
fieldsetObject[i].style.left = "-9999px";
fieldsetObject[i].style.display = "inline-block";
}

$.ajax({
type: "POST",
url: "{{ endpoint }}/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ survey_template_id }}",
Expand Down Expand Up @@ -65,14 +114,16 @@
<li class="breadcrumb-item active" aria-current="page">Participant Survey</li>
{% endblock %}
{% block content %}
<div id="form-progress">Progress</div>
<div class="panel panel-default">
<div class="panel-body">
<form id="survey_form" name="survey_form">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</form>
</div>
<input type="button" id="survey-nav-button-previous" class="survey-nav-button" value="&lt;&lt; Previous Section" onClick="changePage('previous');">
<input type="button" id="survey-nav-button-next" class="survey-nav-button" value="Next Section &gt;&gt;" onClick="changePage('next');">
</div>

<script type="text/javascript">
var survey_model = {};
var survey_schema= {{survey_schema|tojson}};
Expand All @@ -94,10 +145,68 @@
type: "submit",
validateBeforeSubmit: true,
onSubmit: function(){
$("input").prop('disabled', true);
return postSurvey();
if(form_submitted == 0) {
confirm_submit = confirm("Please note: Once you've submitted this survey, you'll be unable to edit your answers. If you'd like to review or change any of your responses, please press the Cancel button. Otherwise, press OK to submit your responses.");
cassidysymons marked this conversation as resolved.
Show resolved Hide resolved
form_submitted = 1;
} else {
confirm_submit = true;
}

if(confirm_submit == true) {
$("input").prop('disabled', true);
return postSurvey();
}
}
});

var active_section = 0;

function paginateForm() {
fieldsetObject = document.getElementsByTagName("fieldset");

if(fieldsetObject.length <= 1) {
document.getElementById("survey-nav-button-next").style.display = "none";
} else {
document.getElementById("form-progress").style.display = "block";
document.getElementById("form-progress").innerHTML = "Step 1 of " + fieldsetObject.length + " - 0% Complete";
for(i=1; i<fieldsetObject.length; i++) {
cassidysymons marked this conversation as resolved.
Show resolved Hide resolved
fieldsetObject[i].style.display = "none";
}
document.getElementById("survey-nav-button-next").style.display = "inline-block";
}
}

function changePage(direction) {
if(direction == "next") {
new_active_section = active_section + 1;
} else {
new_active_section = active_section - 1;
}
display_active_section = new_active_section+1;

fieldsetObject = document.getElementsByTagName("fieldset");

fieldsetObject[active_section].style.display = "none";
document.getElementById("form-progress").innerHTML = "Step " + display_active_section + " of " + fieldsetObject.length + " - " + Math.round((new_active_section/fieldsetObject.length)*100) + "% Complete";
fieldsetObject[new_active_section].style.display = "block";

if(new_active_section == 0) {
document.getElementById("survey-nav-button-previous").style.display = "none";
} else {
document.getElementById("survey-nav-button-previous").style.display = "inline-block";
}
if(new_active_section == (fieldsetObject.length-1)) {
document.getElementById("survey-nav-button-next").style.display = "none";
} else {
document.getElementById("survey-nav-button-next").style.display = "inline-block";
}

window.scrollTo(0,0);
active_section = new_active_section;
}

$(paginateForm);
</script>
<script type="text/javascript" src="/static/vue_survey_form.js"></script>
{% endblock %}