diff options
| -rw-r--r-- | css/codeq.css | 4 | ||||
| -rw-r--r-- | index.html | 46 | ||||
| -rw-r--r-- | js/codeq/language.js | 13 | ||||
| -rw-r--r-- | js/codeq/problem_list.js | 9 |
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*/ @@ -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; }); }, |