Implement answer type verification

3 files changed, 45 insertions, 4 deletions

diff --git a/README.md b/README.md
index cb67d50..234beff 100644
--- a/README.md
+++ b/README.md
@@ -23,10 +23,11 @@ Place in `data/example.yaml`, where the `data` directory is a sibling of this RE
       answers: [A, B, C, D]
     - type: type
       prompt: This is a basic short answer question
-      answer_form: $1
     - type: type
-      prompt: The answer to this short answer question is a probability
-      answer_form: 1 in $1
+      prompt: The answer to this short answer question is a percentage
+      answer_form: $1%
+      answer_type: number
+      answer_range: [0, 100]
     - type: draw
       prompt: Draw on the diagram
       image: some_image.gif
diff --git a/pblive/data.py b/pblive/data.py
index 9316331..f770042 100644
--- a/pblive/data.py
+++ b/pblive/data.py
@@ -100,11 +100,15 @@ class TypeQuestion(Question):
 		super().__init__(*args, **kwargs)
 		
 		self.answer_form = kwargs.get('answer_form', '$1')
+		self.answer_type = kwargs.get('answer_type', None)
+		self.answer_range = kwargs.get('answer_range', None)
 	
 	def load_dict(self, obj):
 		super().load_dict(obj)
 		
 		self.answer_form = obj.get('answer_form', self.answer_form)
+		self.answer_type = obj.get('answer_type', self.answer_type)
+		self.answer_range = obj.get('answer_range', self.answer_range)
 
 class SpeedQuestion(MCQQuestion):
 	template = 'question_speed.html'
diff --git a/pblive/templates/question_type.html b/pblive/templates/question_type.html
index ac42050..4cbdbae 100644
--- a/pblive/templates/question_type.html
+++ b/pblive/templates/question_type.html
@@ -25,6 +25,23 @@
 		</div>
 	{% endset %}
 	<div>{{ session.questions[question_num].answer_form.replace('$1', answerinput)|safe }}</div>
+	{% if session.questions[question_num].answer_type %}
+		<div class="ui hidden error message">
+			<div class="header">
+				{% if session.questions[question_num].answer_range %}
+					{% if session.questions[question_num].answer_range[0] is not none and session.questions[question_num].answer_range[1] is not none %}
+						Please enter a {{ session.questions[question_num].answer_type }} between {{ session.questions[question_num].answer_range[0] }} and {{ session.questions[question_num].answer_range[1] }}.
+					{% elif session.questions[question_num].answer_range[0] is not none %}
+						Please enter a {{ session.questions[question_num].answer_type }} greater than {{ session.questions[question_num].answer_range[0] }}.
+					{% else %}
+						Please enter a {{ session.questions[question_num].answer_type }} less than {{ session.questions[question_num].answer_range[1] }}.
+					{% endif %}
+				{% else %}
+					Please enter a {{ session.questions[question_num].answer_type }}.
+				{% endif %}
+			</div>
+		</div>
+	{% endif %}
 	
 	<script>
 		var submitAnswerTimer = 0;
@@ -33,7 +50,26 @@
 		}
 		$('#answer').on('input', function() {
 			window.clearTimeout(submitAnswerTimer);
-			submitAnswerTimer = window.setTimeout(submitAnswer, 500);
+			// Validate input
+			{% if session.questions[question_num].answer_type == 'number' %}
+				isValid = $.isNumeric($('#answer').val());
+				{% if session.questions[question_num].answer_range %}
+					{% if session.questions[question_num].answer_range[0] is not none %}
+						isValid = isValid && parseFloat($('#answer').val()) >= {{ session.questions[question_num].answer_range[0] }};
+					{% endif %}
+					{% if session.questions[question_num].answer_range[1] is not none %}
+						isValid = isValid && parseFloat($('#answer').val()) <= {{ session.questions[question_num].answer_range[1] }};
+					{% endif %}
+				{% endif %}
+			{% else %}
+				isValid = true;
+			{% endif %}
+			if (isValid) {
+				$('.message').addClass('hidden');
+				submitAnswerTimer = window.setTimeout(submitAnswer, 500);
+			} else {
+				$('.message').removeClass('hidden');
+			}
 		});
 	</script>
 {% endblock %}