Finish implementing contextual help, and reduce use of shortened hashes

eosweb/core/static/css/main.css

@@ -170,3 +170,7 @@ time[title] {
 .ticket > .content > .party-name {
 	font-size: inherit;
 }
+
+#selections-make-help {
+	display: none;
+}

eosweb/core/static/nunjucks/booth/audit.html

@@ -25,7 +25,7 @@
 		<p>Your vote has <span class="superem">not</span> yet been cast. Please follow the instructions to continue.</p>
 	</div>
 	
-	<p>The following is your ballot with fingerprint <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64(true) }}</span>, decrypted and ready for auditing.</p>
+	<p>The following is your ballot with fingerprint <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64() }}</span>, decrypted and ready for auditing.</p>
 	
 	<div class="ui form">
 		{# For some reason nunjucks doesn't like calling this the normal way #}
@@ -41,3 +41,11 @@
 	{# Dirty trick to go back to the encryption step #}
 	<button class="ui right floated primary button" onclick="nextTemplate(-2);">Continue</button>
 {% endblock %}
+
+{% block help %}
+	<p>Eos is now ready to audit your ballot. This is an optional step that you can take to ensure that your ballot was prepared correctly by the voting booth.</p>
+	<p>To complete the audit, provide the data shown to a trusted third-party, or <a href="/auditor?electionUrl={{ election_base_url }}" target="_blank">click here to open the Eos auditor</a> and copy-paste in the data shown.</p>
+	<p>If you are satisfied with the result of the audit, click the blue ‘Continue’ button to proceed to cast your ballot.</p>
+	<p>Click the ‘OK’ button below to close this help screen.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
+{% endblock %}

eosweb/core/static/nunjucks/booth/base.html

@@ -57,7 +57,7 @@
 
 <div class="ui container">
 	{% block helpbtn %}
-		{# <button class="tiny ui right floated labeled icon teal button" onclick="$('#modal-help').modal('show');"><i class="help circle icon"></i> Help</button> #}
+		<button class="tiny ui right floated labeled icon teal button" onclick="$('#modal-help').modal('show');" style="margin-bottom: 1em;"><i class="help circle icon"></i> Help</button>
 	{% endblock %}
 	{% block content %}{% endblock %}
 </div>

eosweb/core/static/nunjucks/booth/cast.html

@@ -20,7 +20,7 @@
 
 {% block content %}
 	<div id="cast_prompt">
-		<p>Your vote has <span class="superem">not</span> yet been cast. If you have not already done so, please make a note of your ballot fingerprint, <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64(true) }}</span>.</p>
+		<p>Your vote has <span class="superem">not</span> yet been cast. Please make a note of your ballot fingerprint, <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64(true) }}</span>.</p>
 		
 		<div class="ui negative message">
 			<p>Your vote has <span class="superem">not</span> yet been cast. Please follow the instructions to continue.</p>
@@ -64,6 +64,11 @@
 {% endblock %}
 
 {% block after %}
+	<div class="ui tiny message" style="margin-top: 3em;">
+		<div class="header">Information for advanced users</div>
+		<p>Your full ballot fingerprint is <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64() }}</span>.</p>
+	</div>
+	
 	<script>
 		$(".message .close").on("click", function() {
 			$(this).closest(".message").addClass("hidden");
@@ -131,3 +136,10 @@
 		}
 	</script>
 {% endblock %}
+
+{% block help %}
+	<p>You are now ready to cast your ballot. If you disconnected your internet connection earlier, you must now reconnect it before proceeding.</p>
+	<p>Click the ‘OK’ button below to close this help screen, then click the blue ‘Cast ballot’ button. If there is no ‘Cast ballot’ button, select your login method from the list shown, and enter your voter details. These details may be found in the email or message instructing you to vote.</p>
+	<p>Once you have logged in, your vote will be automatically cast.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
+{% endblock %}

eosweb/core/static/nunjucks/booth/cast_prepoll.html

@@ -19,13 +19,11 @@
 #}
 
 {% block content %}
-	<p>Your vote has <span class="superem">not</span> yet been cast.</p>
-	
-	<div class="ui negative message">
+	<div class="ui negative message" style="clear: both;">
 		<p>Your vote has <span class="superem">not</span> yet been cast. Please follow the instructions to continue.</p>
 	</div>
 	
-	<p>If you have not already done so, please make a note of your ballot fingerprint, <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64(true) }}</span>. Please retain a copy of your ballot fingerprint – you can use it to verify that your vote has been counted correctly. You may <a href="#" onclick="window.print();return false;">print this page</a> as a receipt if you wish.</p>
+	<p>Please make a note of your ballot fingerprint, <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64(true) }}</span>. Please retain a copy of your ballot fingerprint – you can use it to verify that your vote has been counted correctly. You may <a href="#" onclick="window.print();return false;">print this page</a> as a receipt if you wish.</p>
 	
 	<p>To continue, copy and paste the ballot below and provide it to the election administrator.</p>
 	
@@ -39,3 +37,17 @@
 {% block buttons %}
 	<button class="ui left floated button" onclick="prevTemplate();">Back</a>
 {% endblock %}
+
+{% block after %}
+	<div class="ui tiny message" style="margin-top: 3em;">
+		<div class="header">Information for advanced users</div>
+		<p>Your full ballot fingerprint is <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64() }}</span>.</p>
+	</div>
+{% endblock %}
+
+{% block help %}
+	<p>You are now ready to cast your ballot. As this is a pre-poll voting booth, you must manually provide your ballot to the election administrator.</p>
+	<p>Copy and paste the entire text of the ballot shown in the textbox into a message to the election administrator.</p>
+	<p>Click the ‘OK’ button below to close this help screen.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
+{% endblock %}

eosweb/core/static/nunjucks/booth/complete.html

@@ -38,3 +38,18 @@
 {% block buttons %}
 	<a href="{{ election_base_url }}view/ballots" class="ui right floated primary button">Finish</a>
 {% endblock %}
+
+{% block after %}
+	<div class="ui tiny message" style="margin-top: 3em;">
+		<div class="header">Information for advanced users</div>
+		<p>Your full ballot fingerprint is <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(vote.ballot).hash_as_b64() }}</span>.</p>
+	</div>
+{% endblock %}
+
+{% block help %}
+	<p>You have now successfully cast your ballot in this election!</p>
+	<p>The green ‘smart ballot tracker’ shows the details of your vote. Please retain a copy of your smart ballot tracker, as it can be used as proof that you voted in this election, and can be used to verify that your vote is counted corectly.</p>
+	<p>You may now close this window and exit the voting booth.</p>
+	<p>Click the ‘OK’ button below to close this help screen.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
+{% endblock %}

eosweb/core/static/nunjucks/booth/review.html

@@ -30,7 +30,7 @@
 		{% include templates[selection_model_view_map[election.questions.__getitem__(loop.index0)._name]["selections_review"]] %}
 	{% endfor %}
 	
-	<p>If you are happy with your selections, then make a note of your ballot fingerprint, <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64(true) }}</span>.</p>
+	<p>If you are happy with your selections, then make a note of </p>
 	<p>Click ‘Continue’, and you will be able to log in to cast your vote.</p>
 {% endblock %}
 
@@ -40,6 +40,16 @@
 {% endblock %}
 
 {% block after %}
-	<div style="clear: both; margin-bottom: 1em;"></div>
-	<p><small>If you would like to audit your ballot, <a href="#" onclick="nextTemplate(1);">click here</a>. Auditing your ballot is an <b>optional</b> step you can take to check that your vote has been prepared correctly. You do not need to audit your ballot in order to cast a vote.</small></p>
+	<div class="ui tiny message" style="margin-top: 3em;">
+		<div class="header">Information for advanced users</div>
+		<p>Your ballot fingerprint is <span class="hash">{{ eosjs.eos.core.hashing.__all__.SHA256().update_obj(ballot).hash_as_b64() }}</span>.</p>
+		<p>If you would like to audit your ballot, <a href="#" onclick="nextTemplate(1);">click here</a></p>
+	</div>
+{% endblock %}
+
+{% block help %}
+	<p>This screen shows your selections for each of the questions in this election. Please carefully check your selections and ensure they are as you intended.</p>
+	<p>If there are any problems with your selections, they will be shown in red or orange.</p>
+	<p>Click the ‘OK’ button below to close this help screen, then click the blue ‘Continue’ button if you are satisfied with your selections, otherwise, click the ‘Back’ button.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
 {% endblock %}

eosweb/core/static/nunjucks/booth/selections.html

@@ -33,7 +33,12 @@
 			boothError("Question template unable to save selections");
 		}
 		
+		function loadHelp() {
+			$("#modal-help .content").html($("#selections-make-help").html());
+		}
+		
 		showTemplate(selection_model_view_map[election.questions.__getitem__(booth.questionNum)._name]["selections_make"], { "questionNum": booth.questionNum }, "#question-box");
+		loadHelp();
 		
 		function previousQuestion() {
 			saveSelections();
@@ -42,6 +47,7 @@
 			} else {
 				booth.questionNum--;
 				showTemplate(selection_model_view_map[election.questions.__getitem__(booth.questionNum)._name]["selections_make"], { "questionNum": booth.questionNum }, "#question-box");
+				loadHelp();
 			}
 		}
 		
@@ -54,6 +60,7 @@
 			} else {
 				booth.questionNum++;
 				showTemplate(selection_model_view_map[election.questions.__getitem__(booth.questionNum)._name]["selections_make"], { "questionNum": booth.questionNum }, "#question-box");
+				loadHelp();
 			}
 		}
 	</script>

eosweb/core/static/nunjucks/booth/welcome.html

@@ -36,7 +36,8 @@
 	<p>Follow the on-screen directions to prepare and cast your ballot in this {{ election.kind }}. The bar at the top of the page will show your progress. Please note that your ballot will <b>not be cast until</b> you complete the final ‘Cast ballot’ stage and receive a <b>‘smart ballot tracker’</b>.</p>
 	<p>If at any point you wish to return to a previous screen, click the ‘Back’ button.</p>
 	{# <p>If you wish, you may disconnect your internet connection now while preparing your ballot, however you must re-connect your internet connection before logging in to cast your ballot.</p> #}
-	<p>Click the ‘OK’ button below, then click the blue ‘Continue’ button to continue.</p>
+	<p>Click the ‘OK’ button below to close this help screen, then click the blue ‘Continue’ button to continue to the next step.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
 {% endblock %}
 
 {% block buttons %}

eosweb/core/static/nunjucks/question/approval/selections_make.html

@@ -22,10 +22,17 @@
 	Vote for
 	{% if election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices %}
 		exactly {{ election.questions.__getitem__(questionNum).min_choices }}
+	{% elif election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices - 1 %}
+		either {{ election.questions.__getitem__(questionNum).min_choices }} or {{ election.questions.__getitem__(questionNum).max_choices }}
 	{% else %}
 		between {{ election.questions.__getitem__(questionNum).min_choices }} and {{ election.questions.__getitem__(questionNum).max_choices }}
 	{% endif %}
-	choices. Click the check-boxes to the left of the choices to make your selection, then click the ‘Continue’ button. If you make a mistake, click the check-boxes again to clear your selection.
+	choices.
+	{% if is_radio %}
+		Click the radio buttons to the left of the choices to make your selection, then click the ‘Continue button’. If you make a mistake, click another radio button to change your selection.
+	{% else %}
+		Click the check-boxes to the left of the choices to make your selection, then click the ‘Continue’ button. If you make a mistake, click the check-boxes again to clear your selection.
+	{% endif %}
 </small></p>
 
 {% set is_radio = election.questions.__getitem__(questionNum).max_choices == 1 %}
@@ -106,3 +113,23 @@
 		return true;
 	}
 </script>
+
+<div id="selections-make-help">
+	<p>{% if is_radio %}This is a vote-for-one question.{% else %}This is an approval voting question.{% endif %} You are required to vote for
+	{% if election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices %}
+		exactly {{ election.questions.__getitem__(questionNum).min_choices }}
+	{% elif election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices - 1 %}
+		either {{ election.questions.__getitem__(questionNum).min_choices }} or {{ election.questions.__getitem__(questionNum).max_choices }}
+	{% else %}
+		between {{ election.questions.__getitem__(questionNum).min_choices }} and {{ election.questions.__getitem__(questionNum).max_choices }}
+	{% endif %}
+	choices.</p>
+	{% if is_radio %}
+		<p>Click or tap the radio buttons to the left of the choices to make your selection. If you make a mistake, click or tap another radio button to change your selection.</p>
+	{% else %}
+		<p>Click or tap the check-boxes to the left of the choices to make your selection. If you make a mistake, click or tap the check-boxes again to clear your selection.</p>
+	{% endif %}
+	<p>Once you are satisfied with your selections, click the ‘Continue’ button.</p>
+	<p>Click the ‘OK’ button below to close this help screen.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
+</div>

eosweb/core/static/nunjucks/question/preferential/selections_make.html

@@ -22,6 +22,8 @@
 	Vote for
 	{% if election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices %}
 		exactly {{ election.questions.__getitem__(questionNum).min_choices }}
+	{% elif election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices - 1 %}
+		either {{ election.questions.__getitem__(questionNum).min_choices }} or {{ election.questions.__getitem__(questionNum).max_choices }}
 	{% else %}
 		between {{ election.questions.__getitem__(questionNum).min_choices }} and {{ election.questions.__getitem__(questionNum).max_choices }}
 	{% endif %}
@@ -246,3 +248,22 @@
 		return true;
 	}
 </script>
+
+<div id="selections-make-help">
+	<p>This is a preferential voting question. You are required to vote for
+	{% if election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices %}
+		exactly {{ election.questions.__getitem__(questionNum).min_choices }}
+	{% elif election.questions.__getitem__(questionNum).min_choices == election.questions.__getitem__(questionNum).max_choices - 1 %}
+		either {{ election.questions.__getitem__(questionNum).min_choices }} or {{ election.questions.__getitem__(questionNum).max_choices }}
+	{% else %}
+		between {{ election.questions.__getitem__(questionNum).min_choices }} and {{ election.questions.__getitem__(questionNum).max_choices }}
+	{% endif %}
+	choices.</p>
+	<p>If using a desktop computer or a laptop, use your mouse to click and drag the choices from the grey box to the blue box.</p>
+	<p>If using a smartphone or tablet, use your finger to drag the choices from the grey box to the blue box.</p>
+	<p>You should order your choices inside the blue box in order from most-preferred (at the top) to least-preferred (at the bottom).</p>
+	<p>It is in your best interests to vote for as many choices as you can.</p>
+	<p>Once you are satisfied with your selections, click the ‘Continue’ button.</p>
+	<p>Click the ‘OK’ button below to close this help screen.</p>
+	<p>If you require further assistance, contact your election administrator.</p>
+</div>