- added accesskey to radio and checkboxes (shortcuts depend on the

browser/OS combination). - always use shift+enter to submit radio, checkbox, text and textarea.

- added accesskey to radio and checkboxes (shortcuts depend on the
browser/OS combination). - always use shift+enter to submit radio, checkbox, text and textarea.
Miguel Barao
1 parent 7c0e56ca
Showing 5 changed files with 11 additions and 18 deletions Show diff stats
BUGS.md
README.md
templates/learn.html
templates/question-checkbox.html
templates/question-radio.html
@@ -8,13 +8,13 @@ BUGS:
 TODO:
  
 - configuração e linha de comando.
-- logging
 - como gerar uma sequencia de perguntas?
 - generators not working: bcrypt (ver blog)
-- implementar navegacao radio/checkbox. cursor cima/baixo, espaco selecciona, enter submete.
  
 SOLVED:
  
+- implementar navegacao radio/checkbox. cursor cima/baixo, espaco selecciona, enter submete.
+- logging
 - textarea tem codigo para preencher o texto, mas ja não é necessário porque pergunta não é reloaded.
 - gravar answers -> db
 - como gerar key para secure cookie.
@@ -3,7 +3,7 @@
  
 ## Requirements
  
-We will need to install python3.6, pip and sqlite3 python package.
+We will need to install python3.6 with sqlite3 support.
 This can be done using the system package management, downloaded from [http://www.python.org](), or compiled from sources.
  
 - Installing from the system package management:
@@ -18,12 +18,12 @@ This can be done using the system package management, downloaded from [http://ww
     - `./configure --prefix=$HOME/.local/bin`
     - `make && make install`
  
-To install pip (if not yet installed):
+Next install pip (if not yet installed):
  
     python36 -m ensurepip --user
  
 This will install pip in your account under `~/.local/bin`.
-In the end you should be able to run `pip3 --version` and `python3 -c "import sqlite3"` without errors (sometimes `pip3` is `pip`, `pip3.6` or `pip-3.6` are used).
+In the end you should be able to run `pip3 --version` and `python3 -c "import sqlite3"` without errors (sometimes `pip3` is `pip`, `pip3.6` or `pip-3.6`).
  
 Install additional python packages locally on the user area:
  
@@ -39,7 +39,6 @@ Note: If you want to always install python modules on the user account, edit the
     [global]
     user = yes
  
-
 ## Installation
  
 Replace USER by your bitbucket username:
@@ -60,7 +59,6 @@ First we need to create a database:
  
 We also need certificates for https. Generate selfsigned certificates using openssl:
  
-    mkdir certs
     cd certs
     openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
     cd ..
@@ -98,20 +98,14 @@ $.fn.extend({
     }
 });
  
+// Processes the response given by the served after an answer is submitted.
 function updateQuestion(response){
-
     switch (response["method"]) {
     case "new_question":
         $("#question_div").html(response["params"]);
         MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
  
-        $("input:text").keypress(function (e) {
-            if (e.keyCode == 13) {
-                e.preventDefault();
-                getQuestion();
-            }
-        });
-        $("textarea").keydown(function (e) {
+        $("textarea, input:text, input:radio, input:checkbox").keydown(function (e) {
             if (e.keyCode == 13 && e.shiftKey) {
                 e.preventDefault();
                 getQuestion();
@@ -129,6 +123,8 @@ function updateQuestion(response){
     }
 }
  
+// Send answer and receive a response.
+// The response can be a new_question or a shake if the answer is wrong.
 function getQuestion() {
     $.ajax({
         type: "POST",
@@ -144,7 +140,6 @@ function getQuestion() {
 $(document).ready(function() {
     var audio = new Audio('/static/sounds/intro.mp3');
     audio.play();
-    // getQuestion();
     $("#submit").click(getQuestion);
 });
 </script>
@@ -6,7 +6,7 @@
     <div class="list-group">
     {% for n,opt in enumerate(question['options']) %}
             <a class="list-group-item">
-                <input type="checkbox" id="{{ n }}" name="answer" value="{{ n }}">
+                <input type="checkbox" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
                 <label for="{{ n }}">{{ md(opt) }}</label>
             </a>
     {% end %}
@@ -6,7 +6,7 @@
     <div class="list-group">
     {% for n,opt in enumerate(question['options']) %}
             <a class="list-group-item">
-                <input type="radio" id="{{ n }}" name="answer" value="{{ n }}">
+                <input type="radio" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
                 <label for="{{ n }}">{{ md(opt) }}</label>
             </a>
     {% end %}
...	...	@@ -8,13 +8,13 @@ BUGS:
8	8	TODO:
9	9
10	10	- configuração e linha de comando.
11		-- logging
12	11	- como gerar uma sequencia de perguntas?
13	12	- generators not working: bcrypt (ver blog)
14		-- implementar navegacao radio/checkbox. cursor cima/baixo, espaco selecciona, enter submete.
15	13
16	14	SOLVED:
17	15
	16	+- implementar navegacao radio/checkbox. cursor cima/baixo, espaco selecciona, enter submete.
	17	+- logging
18	18	- textarea tem codigo para preencher o texto, mas ja não é necessário porque pergunta não é reloaded.
19	19	- gravar answers -> db
20	20	- como gerar key para secure cookie.
...	...
...	...	@@ -3,7 +3,7 @@
3	3
4	4	## Requirements
5	5
6		-We will need to install python3.6, pip and sqlite3 python package.
	6	+We will need to install python3.6 with sqlite3 support.
7	7	This can be done using the system package management, downloaded from [http://www.python.org](), or compiled from sources.
8	8
9	9	- Installing from the system package management:
...	...	@@ -18,12 +18,12 @@ This can be done using the system package management, downloaded from [http://ww
18	18	- `./configure --prefix=$HOME/.local/bin`
19	19	- `make && make install`
20	20
21		-To install pip (if not yet installed):
	21	+Next install pip (if not yet installed):
22	22
23	23	python36 -m ensurepip --user
24	24
25	25	This will install pip in your account under `~/.local/bin`.
26		-In the end you should be able to run `pip3 --version` and `python3 -c "import sqlite3"` without errors (sometimes `pip3` is `pip`, `pip3.6` or `pip-3.6` are used).
	26	+In the end you should be able to run `pip3 --version` and `python3 -c "import sqlite3"` without errors (sometimes `pip3` is `pip`, `pip3.6` or `pip-3.6`).
27	27
28	28	Install additional python packages locally on the user area:
29	29
...	...	@@ -39,7 +39,6 @@ Note: If you want to always install python modules on the user account, edit the
39	39	[global]
40	40	user = yes
41	41
42		-
43	42	## Installation
44	43
45	44	Replace USER by your bitbucket username:
...	...	@@ -60,7 +59,6 @@ First we need to create a database:
60	59
61	60	We also need certificates for https. Generate selfsigned certificates using openssl:
62	61
63		- mkdir certs
64	62	cd certs
65	63	openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
66	64	cd ..
...	...
...	...	@@ -98,20 +98,14 @@ $.fn.extend({
98	98	}
99	99	});
100	100
	101	+// Processes the response given by the served after an answer is submitted.
101	102	function updateQuestion(response){
102		-
103	103	switch (response["method"]) {
104	104	case "new_question":
105	105	$("#question_div").html(response["params"]);
106	106	MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);
107	107
108		- $("input:text").keypress(function (e) {
109		- if (e.keyCode == 13) {
110		- e.preventDefault();
111		- getQuestion();
112		- }
113		- });
114		- $("textarea").keydown(function (e) {
	108	+ $("textarea, input:text, input:radio, input:checkbox").keydown(function (e) {
115	109	if (e.keyCode == 13 && e.shiftKey) {
116	110	e.preventDefault();
117	111	getQuestion();
...	...	@@ -129,6 +123,8 @@ function updateQuestion(response){
129	123	}
130	124	}
131	125
	126	+// Send answer and receive a response.
	127	+// The response can be a new_question or a shake if the answer is wrong.
132	128	function getQuestion() {
133	129	$.ajax({
134	130	type: "POST",
...	...	@@ -144,7 +140,6 @@ function getQuestion() {
144	140	$(document).ready(function() {
145	141	var audio = new Audio('/static/sounds/intro.mp3');
146	142	audio.play();
147		- // getQuestion();
148	143	$("#submit").click(getQuestion);
149	144	});
150	145	</script>
...	...
...	...	@@ -6,7 +6,7 @@
6	6	<div class="list-group">
7	7	{% for n,opt in enumerate(question['options']) %}
8	8	<a class="list-group-item">
9		- <input type="checkbox" id="{{ n }}" name="answer" value="{{ n }}">
	9	+ <input type="checkbox" id="{{ n }}" accesskey="{{ n+1 }}" name="answer" value="{{ n }}">
10	10	<label for="{{ n }}">{{ md(opt) }}</label>
11	11	</a>
12	12	{% end %}
...	...