- 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,13 +8,13 @@ BUGS:
8	TODO:	8	TODO:
9		9
10	- configuração e linha de comando.	10	- configuração e linha de comando.
11	-- logging
12	- como gerar uma sequencia de perguntas?	11	- como gerar uma sequencia de perguntas?
13	- generators not working: bcrypt (ver blog)	12	- generators not working: bcrypt (ver blog)
14	-- implementar navegacao radio/checkbox. cursor cima/baixo, espaco selecciona, enter submete.
15		13
16	SOLVED:	14	SOLVED:
17		15
		16	+- implementar navegacao radio/checkbox. cursor cima/baixo, espaco selecciona, enter submete.
		17	+- logging
18	- textarea tem codigo para preencher o texto, mas ja não é necessário porque pergunta não é reloaded.	18	- textarea tem codigo para preencher o texto, mas ja não é necessário porque pergunta não é reloaded.
19	- gravar answers -> db	19	- gravar answers -> db
20	- como gerar key para secure cookie.	20	- como gerar key para secure cookie.
	@@ -6,7 +6,7 @@		@@ -6,7 +6,7 @@
6	<div class="list-group">	6	<div class="list-group">
7	{% for n,opt in enumerate(question['options']) %}	7	{% for n,opt in enumerate(question['options']) %}
8	<a class="list-group-item">	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	<label for="{{ n }}">{{ md(opt) }}</label>	10	<label for="{{ n }}">{{ md(opt) }}</label>
11	</a>	11	</a>
12	{% end %}	12	{% end %}