summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTimotej Lazar <timotej.lazar@fri.uni-lj.si>2015-11-18 19:28:03 +0100
committerTimotej Lazar <timotej.lazar@fri.uni-lj.si>2015-11-18 19:28:03 +0100
commit6893733a646d9e697b85feef39dc047c70dd601c (patch)
tree579e6c4eab908331411f32fc0109002eb12f1da3
parente92caf57bbad2af886b48d8ff82d8fece214b783 (diff)
Add support for tabkey and accesskey navigation
-rw-r--r--css/codeq.css4
-rw-r--r--index.html46
-rw-r--r--js/codeq/language.js13
-rw-r--r--js/codeq/problem_list.js9
4 files changed, 43 insertions, 29 deletions
diff --git a/css/codeq.css b/css/codeq.css
index b0c6066..f7ec93b 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -45,6 +45,10 @@ body {
#screen_language .col-lg-4 {
cursor: pointer;
}
+#screen_language .col-lg-4 a {
+ color: inherit;
+ text-decoration: none;
+}
/* screen about*/
diff --git a/index.html b/index.html
index d126273..399cbd3 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a id="navigation-home" class="navbar-brand" href="#" title="Intelligent tutor system">
+ <a id="navigation-home" class="navbar-brand" tabindex="10" accesskey="1" href="#" title="Intelligent tutor system">
<img src="res/CodeQ_logo-sivi.png" class="img-responsive">
</a>
<!--a class="navbar-brand" id="title"></a-->
@@ -71,28 +71,28 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
- <li style="display: none;" id="navigation-problem_list"><a href="" data-tkey="problem_list">Problems</a></li>
- <li style="display: none;" id="navigation-python"><a href="" data-tkey="python">Python</a></li>
- <li style="display: none;" id="navigation-prolog"><a href="" data-tkey="prolog">Prolog</a></li>
- <li style="display: none;" id="navigation-robot"><a href="" data-tkey="robot">Robot</a></li>
+ <li style="display: none;" id="navigation-problem_list"><a href="" tabindex="20" accesskey="2" data-tkey="problem_list">Problems</a></li>
+ <li style="display: none;" id="navigation-python"><a href="" tabindex="30" accesskey="3" data-tkey="python">Python</a></li>
+ <li style="display: none;" id="navigation-prolog"><a href="" tabindex="30" accesskey="3" data-tkey="prolog">Prolog</a></li>
+ <li style="display: none;" id="navigation-robot"><a href="" tabindex="30" accesskey="3" data-tkey="robot">Robot</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" style="display:none;">
<p class="navbar-text"><span data-tkey="signed_in_as">Signed in as </span><span id="signed-in-title">Janez</span></p>
<li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
+ <a href="#" class="dropdown-toggle" tabindex="40" accesskey="4" data-toggle="dropdown" aria-expanded="true">
<span class="glyphicon glyphicon glyphicon-user"></span>
</a>
<ul class="dropdown-menu">
- <li id="navigation-logout"><a href="#" data-tkey="logout">Logout</a></li>
- <li id="navigation-profile"><a href="#" data-tkey="profile">Profile</a></li>
+ <li id="navigation-logout"><a href="#" tabindex="41" data-tkey="logout">Logout</a></li>
+ <li id="navigation-profile"><a href="#" tabindex="42" data-tkey="profile">Profile</a></li>
<li class="saml-login-hide divider" role="separator"></li>
- <li class="saml-login-hide"><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
+ <li class="saml-login-hide"><a href="#" tabindex="43" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
<li class="divider" role="separator"></li>
- <li id="navigation-about"><a href="#" data-tkey="about">About</a></li>
+ <li id="navigation-about"><a href="#" tabindex="44" data-tkey="about">About</a></li>
</ul>
</li>
<li id="settings_dropdown_menu"> <!-- class="dropdown"-->
- <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+ <a href="" class="dropdown-toggle" tabindex="50" accesskey="5" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
</li>
</ul>
</div><!--/.nav-collapse -->
@@ -296,17 +296,23 @@
<!-- main screen: programming language selection, settings, etc. -->
<div class="container" id="screen_language" style="text-align: center; display: none;">
<div class="row">
- <div class="col-lg-4" id="choose-prolog">
- <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140">
- <h2>Prolog</h2>
+ <div class="col-lg-4">
+ <a href="#" id="choose-prolog" style="display: block;" tabindex="100">
+ <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140">
+ <h2>Prolog</h2>
+ </a>
</div><!-- /.col-lg-4 -->
- <div class="col-lg-4" id="choose-python">
- <img class="img-circle" src=res/python.png alt="Generic placeholder image" width="140" height="140">
- <h2>Python</h2>
+ <div class="col-lg-4">
+ <a href="#" id="choose-python" style="display: block;" tabindex="101">
+ <img class="img-circle" src=res/python.png alt="Generic placeholder image" width="140" height="140">
+ <h2>Python</h2>
+ </a>
</div><!-- /.col-lg-4 -->
- <div class="col-lg-4" id="choose-robot">
- <img class="img-circle" src=res/eve.png alt="Generic placeholder image" width="140" height="140">
- <h2>Robot</h2>
+ <div class="col-lg-4">
+ <a href="#" id="choose-robot" style="display: block;" tabindex="102">
+ <img class="img-circle" src=res/eve.png alt="Generic placeholder image" width="140" height="140">
+ <h2>Robot</h2>
+ </a>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
diff --git a/js/codeq/language.js b/js/codeq/language.js
index b861560..e86b09e 100644
--- a/js/codeq/language.js
+++ b/js/codeq/language.js
@@ -7,16 +7,17 @@
jqProlog = $('#choose-prolog'),
jqPython = $('#choose-python'),
jqRobot = $('#choose-robot'),
- chooseProlog = function () {codeq.globalStateMachine.transition('problem_list', 'prolog');},
- choosePython = function () {codeq.globalStateMachine.transition('problem_list', 'python');},
- chooseRobot = function () {codeq.globalStateMachine.transition('problem_list', 'robot');};
+ choose = function (language) {
+ codeq.globalStateMachine.transition('problem_list', language);
+ return false;
+ };
codeq.globalStateMachine.register('language',{
'enter': function(){
jqScreen.css('display', '');
- jqProlog.on('click', chooseProlog);
- jqPython.on('click', choosePython);
- jqRobot.on('click', chooseRobot);
+ jqProlog.on('click', function () { return choose('prolog') });
+ jqPython.on('click', function () { return choose('python') });
+ jqRobot.on('click', function () { return choose('robot') });
},
'exit' : function(){
jqProlog.off();
diff --git a/js/codeq/problem_list.js b/js/codeq/problem_list.js
index 853c8cb..cc9e716 100644
--- a/js/codeq/problem_list.js
+++ b/js/codeq/problem_list.js
@@ -200,7 +200,8 @@
Ngroups = groups.length,
html = [],
problemReferences = [],
- group, problems, Nproblems, problem, i, j;
+ group, problems, Nproblems, problem, i, j, nrefs,
+ baseTabIndex = 200; // tabindex attribute of the first problem link
var langDict = convertTranslations(rawTranslations, 'name', 'description'), // this will be the resulting dictionary: multi-level keys that lead up to the lang-dict
groupDict, problemDict;
// title: HTML structure for "name" and "desc"
@@ -218,9 +219,10 @@
problems = group.problems || [];
Nproblems = problems.length;
for (j = 0; j < Nproblems; j++) {
+ nrefs = problemReferences.length;
problem = problems[j] || {};
problemDict = convertTranslations(problem.translations, 'name');
- html.push('<li><a class="problem-', '' + problemReferences.length, '" ', ta(problemDict.name), '></a></li>');
+ html.push('<li><a href="#" tabindex="' + (baseTabIndex+nrefs) + '"' + ' class="problem-', '' + nrefs, '" ', ta(problemDict.name), '></a></li>');
problemReferences.push({'g': group.identifier || 'nogroup', 'p': problem.identifier || 'noproblem', 'id': problem.id});
}
html.push('</ul>');
@@ -254,7 +256,7 @@
ref = data.refs[index];
if (!ref) {
codeq.log.error('Clicked on a problem link having erroneous index: ' + index);
- return;
+ return false;
}
codeq.wait(
Q.all([
@@ -272,6 +274,7 @@
alert('Failed to obtain the problem definition: ' + reason);
})
.done();
+ return false;
});
},