Use a consistent naming style for DOM IDs

17 files changed, 150 insertions, 150 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 86aae2d..87f599c 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -121,23 +121,23 @@ div#disabled {
 }
 
 /* modal screens*/
-#screen_login, #screen_signup, #screen_change_pass, #screen_settings, #screen_upgrade_to_aai {
+#screen-login, #screen-signup, #screen-change-pass, #screen-settings, #screen-upgrade-to-aai {
     padding: 15px 0;
 }
 
-#screen_login div.login-failed {
+#screen-login div.login-failed {
     color: red;
 }
 
 /* screen language */
-#screen_language {
+#screen-language {
     margin-top: 4em;
     margin-bottom: 4em;
 }
-#screen_language .col-lg-4 {
+#screen-language .col-lg-4 {
     cursor: pointer;
 }
-#screen_language .col-lg-4 a {
+#screen-language .col-lg-4 a {
     color: inherit;
     text-decoration: none;
 }
@@ -254,7 +254,7 @@ h2.group-title a.view-solutions {
 }
 
 /* robot connection & sensor info */
-#screen_robot .block3 .status {
+#screen-robot .block3 .status {
     background-color: #666;
     border: 1px solid #444;
     color: yellow;
@@ -297,36 +297,36 @@ h2.group-title a.view-solutions {
 
     /* prolog */
     /* code_editor */
-    .line-layout#screen_prolog .block.block2 {
+    .line-layout#screen-prolog .block.block2 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
     /* console */
-    .line-layout#screen_prolog .block.block3 {
+    .line-layout#screen-prolog .block.block3 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
 
     /* python */
     /* code_editor */
-    .line-layout#screen_python .block.block2 {
+    .line-layout#screen-python .block.block2 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
     /* console */
-    .line-layout#screen_python .block.block3 {
+    .line-layout#screen-python .block.block3 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
 
     /* robot */
     /* code_editor */
-    .line-layout#screen_robot .block.block2 {
+    .line-layout#screen-robot .block.block2 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
     /* console */
-    .line-layout#screen_robot .block.block3 {
+    .line-layout#screen-robot .block.block3 {
         min-height: 100%; height: 100%;
         min-width: 50%; width: 50%;
     }
@@ -338,73 +338,73 @@ h2.group-title a.view-solutions {
     }
 
     /* prolog */
-    .quadrants.square-layout#screen_prolog > * > .block {
+    .quadrants.square-layout#screen-prolog > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
     /* instructions+hints */
-    .square-layout#screen_prolog .block-left {
+    .square-layout#screen-prolog .block-left {
         min-width: 33%; width: 33%;
     }
     /* code_editor + console */
-    .square-layout#screen_prolog .block-right {
+    .square-layout#screen-prolog .block-right {
         min-width: 67%; width: 67%;
     }
     /* code_editor */
-    .square-layout#screen_prolog .block.block2 {
+    .square-layout#screen-prolog .block.block2 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
     /* console */
-    .square-layout#screen_prolog .block.block3 {
+    .square-layout#screen-prolog .block.block3 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
 
     /* python */
-    .quadrants.square-layout#screen_python.prof2 > * > .block {
+    .quadrants.square-layout#screen-python.prof2 > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
     /* instructions+hints */
-    .square-layout#screen_python .block-left {
+    .square-layout#screen-python .block-left {
         min-width: 33%; width: 33%;
     }
     /* code_editor + console */
-    .square-layout#screen_python .block-right {
+    .square-layout#screen-python .block-right {
         min-width: 67%; width: 67%;
     }
     /* code_editor */
-    .square-layout#screen_python .block.block2 {
+    .square-layout#screen-python .block.block2 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
     /* console */
-    .square-layout#screen_python .block.block3 {
+    .square-layout#screen-python .block.block3 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
 
     /* robot */
-    .quadrants.square-layout#screen_robot.prof2 > * > .block {
+    .quadrants.square-layout#screen-robot.prof2 > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
     /* instructions+hints */
-    .square-layout#screen_robot .block-left {
+    .square-layout#screen-robot .block-left {
         min-width: 33%; width: 33%;
     }
     /* code_editor + console */
-    .square-layout#screen_robot .block-right {
+    .square-layout#screen-robot .block-right {
         min-width: 67%; width: 67%;
     }
     /* code_editor */
-    .square-layout#screen_robot .block.block2 {
+    .square-layout#screen-robot .block.block2 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
     /* console */
-    .square-layout#screen_robot .block.block3 {
+    .square-layout#screen-robot .block.block3 {
         min-height: 50%; height: 50%;
         min-width: 100%; width: 100%;
     }
@@ -449,7 +449,7 @@ h2.group-title a.view-solutions {
 /* xs & sm */
 @media (max-width: 991px) {
     /*layout selection is  disable on small screens*/
-    #gui_layout_select_form_group {
+    #settings-layout-group {
         display: none;
     }
 }
@@ -510,45 +510,45 @@ ul.dropdown-menu a {
 }
 
 /* main screen */
-#screen_language a {
+#screen-language a {
     cursor: pointer;
 }
 
 /* problem index screen */
-#screen_problem_list .language-description {
+#screen-problem-list .language-description {
     margin-bottom: 1em;
 }
 
-#screen_problem_list .group-description {
+#screen-problem-list .group-description {
     margin-bottom: 0.5em;
 }
 
-#screen_problem_list h2 {
+#screen-problem-list h2 {
     font-size: 1.4em;
     font-weight: bold;
 }
 
-#screen_problem_list ul.group-problems {
+#screen-problem-list ul.group-problems {
     padding-left: 1em;
 }
 
-#screen_problem_list ul.group-problems li {
+#screen-problem-list ul.group-problems li {
     list-style-type: none;
 }
 
-#screen_problem_list a {
+#screen-problem-list a {
     cursor: pointer;
 }
 
-#screen_problem_list ul.group-problems a::before {
+#screen-problem-list ul.group-problems a::before {
     color: gray;
     content: '○  ';  /* non-breaking spaces */
 }
-#screen_problem_list ul.group-problems a.attempted::before {
+#screen-problem-list ul.group-problems a.attempted::before {
     color: #e4c13b;
     content: '●  ';  /* non-breaking spaces */
 }
-#screen_problem_list ul.group-problems a.solved::before {
+#screen-problem-list ul.group-problems a.solved::before {
     color: #5baa5b;
     content: '●  ';  /* non-breaking spaces */
 }
diff --git a/index.html b/index.html
index cd4dbbf..3585499 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
                 <!-- 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="" tabindex="20" accesskey="2" data-tkey="problem_list">Problems</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>
@@ -99,7 +99,7 @@
         </div>
 
         <!-- login screen -->
-        <div class="container" id="screen_login" style="display: none;">
+        <div class="container" id="screen-login" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -127,14 +127,14 @@
                         <div class="panel-body">
                             <div class="text-center">
                                 <span data-tkey="signin_via">Or you can login via</span><br />
-                                <a href="" role="button" id="aai_login_button">
+                                <a href="" role="button" id="aai-login-button">
                                     <img src="res/gumb_aaiprijava.png" style="width: 49%">
                                 </a>
                             </div>
                         </div>
                         <div class="panel-footer">
                             <div class="text-center">
-                                <span data-tkey="signin_footer">New here?</span> <a href="" role="button" id="signup_button"><b data-tkey="signin_footer_signup">Sign up!</b></a>
+                                <span data-tkey="signin_footer">New here?</span> <a href="" role="button" id="signup-button"><b data-tkey="signin_footer_signup">Sign up!</b></a>
                             </div>
                             <br>
                             <div class="text-center small">
@@ -148,17 +148,17 @@
         </div>
 
         <!-- AAI login -->
-        <div class="container-fluid" id="screen_aai_login" style="display: none;">
+        <div class="container-fluid" id="screen-aai-login" style="display: none;">
             <div class="row">
                 <div class="col-md-12" style="padding: 0;">
-                    <button type="button" class="pull-right" id="cancel_aai_login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button>
-                    <iframe width="100%" height="100%"  frameborder="0" scrolling="yes" allowtransparency="true"  src="" id="aai_iframe"></iframe>
+                    <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button>
+                    <iframe width="100%" height="100%"  frameborder="0" scrolling="yes" allowtransparency="true"  src="" id="aai-iframe"></iframe>
                 </div>
             </div>
         </div>
 
         <!--Sign up screen-->
-        <div class="container" id="screen_signup" style="display: none;">
+        <div class="container" id="screen-signup" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -166,43 +166,43 @@
                             <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
                         </div>
                         <div class="panel-body">
-                            <form id="formSignUp" class="form">
+                            <form id="signup-form" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="username">Username</label>
-                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text"
+                                    <input class="form-control" name="username" id="signup-username" type="text"
                                            data-tkey-placeholder="username_placeholder" placeholder="Desired username"
                                            data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters."
                                            pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="name">Display name</label>
-                                    <input class="form-control" name="name" id="modalSignUpName" type="text"
+                                    <input class="form-control" name="name" id="signup-name" type="text"
                                            data-tkey-placeholder="name_placeholder" placeholder="Desired display name"
                                            data-tkey-title="name_title" title="Choose a display name." />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="email">E-mail</label>
-                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email"
+                                    <input class="form-control" name="email" id="signup-email" type="email"
                                            data-tkey-placeholder="email" placeholder="E-mail"
                                            data-tkey-title="email_title" title="Enter a valid email address."
                                            required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password">Password</label>
-                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password"
+                                    <input class="form-control" name="password" id="signup-password" type="password"
                                            data-tkey-placeholder="password" placeholder="Password"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
-                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password"
+                                    <input class="form-control" name="verify" id="signup-password-verify" type="password"
                                            data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="exit_signup_btn" data-tkey="cancel">Cancel</button>
+                                    <button type="button" class="btn btn-default" id="signup-cancel" data-tkey="cancel">Cancel</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="signup_button">Sign up</button>
                                 </div>
                             </form>
@@ -219,7 +219,7 @@
         </div>
 
         <!-- change password screen -->
-        <div class="container" id="screen_change_pass" style="display: none;">
+        <div class="container" id="screen-change-pass" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -227,23 +227,23 @@
                             <h3 class="text-center" data-tkey="change_password_header">Change password</h3>
                         </div>
                         <div class="panel-body">
-                            <form id="formChangePassword" class="form">
+                            <form id="change-password-form" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_new">New Password</label>
-                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password"
+                                    <input class="form-control" name="new" id="change-password-new" type="password"
                                            data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify Password</label>
-                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password"
+                                    <input class="form-control" name="verify" id="change-password-verify" type="password"
                                            data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="cancel_change_pass_button" data-tkey="cancel">Cancel</button>
+                                    <button type="button" class="btn btn-default" id="change-password-cancel" data-tkey="cancel">Cancel</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="change_password_button">Change password</button>
                                 </div>
                             </form>
@@ -254,7 +254,7 @@
         </div>
 
         <!-- upgrade account to AAI screen -->
-        <div class="container" id="screen_upgrade_to_aai" style="display: none;">
+        <div class="container" id="screen-upgrade-to-aai" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -262,21 +262,21 @@
                             <h3 class="text-center" data-tkey="upgrade_to_aai_header">Upgrade to AAI?</h3>
                         </div>
                         <div class="panel-body">
-                            <form id="formUpgradeToAAI" class="form">
+                            <form id="upgrade-to-aai-form" class="form">
                                 <div data-tkey="upgrade_to_aai_body_text_1">
                                     <p>User with this email address already exists.</p>
                                     <p>Enter its password and select <span class="badge">Yes</span> to upgrade it to AAI.</p>
                                 </div>
                                 <div class="form-group">
                                     <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                    <input type="password" class="form-control" name="password" id="formUpgradeToAAIPassword"
+                                    <input type="password" class="form-control" name="password" id="upgrade-to-aai-password"
                                            data-tkey-placeholder="password" placeholder="Password" />
                                 </div>
                                 <div data-tkey="upgrade_to_aai_body_text_2">
                                     <p>Select <span class="badge">No</span> to do a separate account.</p>
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="btnUpgradeToAAINo" data-tkey="upgrade_to_aai_no_button">No, make new</button>
+                                    <button type="button" class="btn btn-default" id="upgrade-to-aai-cancel" data-tkey="upgrade_to_aai_no_button">No, make new</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="upgrade_to_aai_yes_button">Yes, upgrade to AAI</button>
                                 </div>
                             </form>
@@ -293,12 +293,12 @@
         </div>
 
         <!-- about screen -->
-        <div class="container" id="screen_about" style="display: none;">
+        <div class="container" id="screen-about" style="display: none;">
             <div class="row">
                 <div class="col-md-12">
                     <h2 data-tkey="about">About</h2>
                     <div class="btn-group">
-                        <button type="button" class="btn btn-default" id="btnAboutGoBack" data-tkey="go_back">Go back</button>
+                        <button type="button" class="btn btn-default" id="about-back" data-tkey="go_back">Go back</button>
                     </div>
                     <hr>
                     <div data-tkey="about_html">
@@ -309,7 +309,7 @@
         </div>
 
         <!-- main screen: programming language selection, settings, etc. -->
-        <div class="container" id="screen_language" style="text-align: center; display: none;">
+        <div class="container" id="screen-language" style="text-align: center; display: none;">
             <div class="row">
                 <div class="col-lg-4">
                     <a href="#" id="choose-prolog" style="display: block;" tabindex="100">
@@ -333,10 +333,10 @@
         </div>
 
         <!-- problem selection screen for a specific language: groups of problems, with descriptions -->
-        <div class="container" id="screen_problem_list" style="display: none;"></div>
+        <div class="container" id="screen-problem-list" style="display: none;"></div>
 
         <!-- screen to display all user solutions for a given langauge -->
-        <div class="container" id="screen_solutions" style="display: none;">
+        <div class="container" id="screen-solutions" style="display: none;">
             <div class="row">
                 <div class="col-md-12">
                     <h2 data-tkey="your_solutions">Your solutions</h2>
@@ -350,7 +350,7 @@
         </div>
 
         <!-- problem screen: prolog -->
-        <div class="container-fluid quadrants" id="screen_prolog" style="display: none;">
+        <div class="container-fluid quadrants" id="screen-prolog" style="display: none;">
             <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                     <div class="description-container">
@@ -378,7 +378,7 @@
         </div>
 
         <!-- problem screen: python -->
-        <div class="container-fluid quadrants" id="screen_python" style="display: none;">
+        <div class="container-fluid quadrants" id="screen-python" style="display: none;">
             <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                     <div class="description-container">
@@ -408,7 +408,7 @@
         </div>
 
         <!-- problem screen: robot -->
-        <div class="container-fluid quadrants" id="screen_robot" style="display: none;">
+        <div class="container-fluid quadrants" id="screen-robot" style="display: none;">
             <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                     <div class="description-container">
@@ -439,11 +439,11 @@
         </div>
 
         <!-- profile screen -->
-        <div class="container" id="screen_profile" style="display: none;">
+        <div class="container" id="screen-profile" style="display: none;">
             <h2 data-tkey="profile">Profile</h2>
             <div class="btn-group">
-                <button type="button" id="change_pass_profile" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button>
-                <button type="button" id="btnProfileGoBack" class="btn btn-default" data-tkey="go_back">Go back</button>
+                <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button>
+                <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button>
             </div>
             <hr />
             <div class="row">
@@ -453,23 +453,23 @@
                             Overview
                         </div>
                         <ul class="list-group small">
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="username">Username</strong></span><span id="profileUsername">janezk</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="name">Display name</strong></span><span id="profileName">Janez Kranjski</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="email">E-email</strong></span><span id="profileEmail">janez.kranjski@dezela_kranjska.si</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="joined">Joined</strong></span><span id="profileJoined">Sep 29, 2015</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="last_login">Last seen</strong></span><span id="profileLastLogin">1 hour ago</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="username">Username</strong></span><span id="profile-username">janezk</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="name">Display name</strong></span><span id="profile-name">Janez Kranjski</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="email">E-email</strong></span><span id="profile-email">janez.kranjski@dezela_kranjska.si</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="joined">Joined</strong></span><span id="profile-joined">Sep 29, 2015</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="last_login">Last seen</strong></span><span id="profile-last-login">1 hour ago</span></li>
                         </ul>
                     </div>
                     <div class="panel panel-default">
                         <div class="panel-heading" data-tkey="statistics">Statistics</div>
-                        <table id="table1" class="table table-bordered table-striped small"></table>
+                        <table id="profile-stats" class="table table-bordered table-striped small"></table>
                     </div>
                 </div>
             </div>
         </div>
 
         <!-- Settings screen -->
-        <div class="container" id="screen_settings" style="display: none;">
+        <div class="container" id="screen-settings" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -477,11 +477,11 @@
                             <h3 class="text-center" data-tkey="settings">Settings</h3>
                         </div>
                         <div class="panel-body">
-                            <form class="form" id="settingsForm">
+                            <form class="form" id="settings-form">
                                 <div class="form-group">
                                     <span class="small" data-tkey="language">Language</span>
                                     <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                    <select class="form-control" id="gui_lang_select">
+                                    <select class="form-control" id="settings-gui-lang">
                                         <option value="sl">Slovensko</option>
                                         <option value="en">English</option>
                                     </select>
@@ -489,20 +489,20 @@
                                 <div class="form-group">
                                     <span class="small" data-tkey="robot_address">Robot’s address</span>
                                     <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                    <input type="text" class="form-control" id="robot_address_input"
+                                    <input type="text" class="form-control" id="settings-robot-address"
                                            data-tkey-placeholder="robot_address_placeholder" placeholder="IP address"
                                            data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address."
                                            pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" />
                                 </div>
-                                <div class="form-group" id="gui_layout_select_form_group">
+                                <div class="form-group" id="settings-layout-group">
                                     <span class="small" data-tkey="layout_select" >Layout</span>
-                                    <select class="form-control" id="gui_layout_select">
+                                    <select class="form-control" id="settings-layout">
                                         <option value="line-layout"  data-tkey="line_layout">Line</option>
                                         <option value="square-layout"  data-tkey="square_layout">Square</option>
                                     </select>
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="settings_cancel_btn" data-tkey="settings_cancel_btn">Close</button>
+                                    <button type="button" class="btn btn-default" id="settings-cancel" data-tkey="settings_cancel_btn">Close</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="save">Save</button>
                                 </div>
                             </form>
diff --git a/js/codeq/aaiLogin.js b/js/codeq/aaiLogin.js
index dce047e..018b765 100644
--- a/js/codeq/aaiLogin.js
+++ b/js/codeq/aaiLogin.js
@@ -20,12 +20,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
  */
 (function(){
     "use strict";
-    var jqScreen = $('#screen_aai_login'),
+    var jqScreen = $('#screen-aai-login'),
         jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
         jqNavigationHomeBtn = $('#navigation-home'),
-        jqCancelAaiLogin = $("#cancel_aai_login"),
+        jqCancelAaiLogin = $("#cancel-aai-login"),
         jqDisabledOverlay = $('#disabled'),
-        jqAaiIframe = $('#aai_iframe'),
+        jqAaiIframe = $('#aai-iframe'),
         baseSamlUrl = 'https://codeq.si/saml/Login?sid=',
         samlLoginUrl = '';
 
diff --git a/js/codeq/about.js b/js/codeq/about.js
index 69327fc..652fb79 100644
--- a/js/codeq/about.js
+++ b/js/codeq/about.js
@@ -22,8 +22,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
  */
 (function(){
     "use strict";
-    var jqScreen = $("#screen_about"),
-        jqBtnGoBack = $("#btnAboutGoBack");
+    var jqScreen = $("#screen-about"),
+        jqBtnGoBack = $("#about-back");
 
     codeq.globalStateMachine.register('about',{
         'jqScreen': jqScreen,
diff --git a/js/codeq/change_password.js b/js/codeq/change_password.js
index 20c26d5..562f4b2 100644
--- a/js/codeq/change_password.js
+++ b/js/codeq/change_password.js
@@ -22,11 +22,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
  */
 (function(){
     "use strict";
-    var jqScreen = $("#screen_change_pass"),
-        jqNew = $("#modalChangePasswordNew"),
-        jqVerify = $("#modalChangePasswordVerify"),
-        jqCancelBtn = $("#cancel_change_pass_button"),
-        jqChangePassForm = $('#formChangePassword');
+    var jqScreen = $('#screen-change-pass'),
+        jqNew = $('#change-password-new'),
+        jqVerify = $('#change-password-verify'),
+        jqCancelBtn = $('#change-password-cancel'),
+        jqChangePassForm = $('#change-password-form');
 
     codeq.globalStateMachine.register('changePassword',{
         'jqScreen': jqScreen,
diff --git a/js/codeq/language.js b/js/codeq/language.js
index 708074b..54eedcb 100644
--- a/js/codeq/language.js
+++ b/js/codeq/language.js
@@ -21,7 +21,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function(){
     "use strict";
-    var jqScreen = $('#screen_language'),
+    var jqScreen = $('#screen-language'),
         jqProlog = $('#choose-prolog'),
         jqPython = $('#choose-python'),
         jqRobot = $('#choose-robot'),
diff --git a/js/codeq/login.js b/js/codeq/login.js
index ff217c5..9b87762 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -21,12 +21,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function(){
     "use strict";
-    var jqScreen = $("#screen_login"),
+    var jqScreen = $("#screen-login"),
         jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
         jqNavigationHomeBtn = $('#navigation-home'),
-        jqAAILoginBtn = $('#aai_login_button'),
+        jqAAILoginBtn = $('#aai-login-button'),
         jqLoginForm = $('#login-form'),
-        jqSignupBtn = $('#signup_button'),
+        jqSignupBtn = $('#signup-button'),
         jqLangSelect = jqScreen.find('.lang-select'),
         jqDisabledOverlay = $('#disabled'),
         jqLoginFailed = jqScreen.find('.login-failed');
@@ -39,23 +39,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         //nav signed in...
         $('#signed-in-title').html(data.name||data.username||data.email||'undefined');
         //merge with profile page
-        $('#profileUsername').html(data.username||data.email||'undefined');
-        $('#profileName').html(data.name||'undefined');
-        $('#profileEmail').html(data.email||'undefined');
-        $('#profileJoined').html(new Date(data.joined).toLocaleString());
-        $('#profileLastLogin').html(new Date(data["last-login"]).toLocaleString());
+        $('#profile-username').html(data.username||data.email||'undefined');
+        $('#profile-name').html(data.name||'undefined');
+        $('#profile-email').html(data.email||'undefined');
+        $('#profile-joined').html(new Date(data.joined).toLocaleString());
+        $('#profile-last-login').html(new Date(data["last-login"]).toLocaleString());
 
         //merge these settings into the already existing default settings
         var sett = data.settings;
         $.extend(codeq.settings, sett);
         if('gui_lang' in sett && sett['gui_lang'] in codeq.supportedLangs){
             codeq.setLang(sett['gui_lang']);
-            $("#gui_lang_select").val(sett['gui_lang']);
+            $("#settings-gui-lang").val(sett['gui_lang']);
         }
-        $('#robot_address_input').val(codeq.settings['robot_address'] || '');
+        $('#settings-robot-address').val(codeq.settings['robot_address'] || '');
         if('gui_layout' in sett && ($.inArray(sett['gui_layout'], codeq.supportedLayouts) >= 0) ){
             codeq.setLayout(sett['gui_layout']);
-            $("#gui_layout_select").val(sett['gui_layout']);
+            $("#settings-layout").val(sett['gui_layout']);
         }
 
         codeq.globalStateMachine.transition('language');
diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js
index 60baa9b..1406d55 100644
--- a/js/codeq/navigation.js
+++ b/js/codeq/navigation.js
@@ -139,7 +139,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         codeq.globalStateMachine.transition('language');
         e.preventDefault();
     });
-    $('#navigation-problem_list').on('click', function(e){
+    $('#navigation-problem-list').on('click', function (e) {
         codeq.globalStateMachine.transition('problem_list');
         e.preventDefault();
     });
diff --git a/js/codeq/problem_list.js b/js/codeq/problem_list.js
index e5ca36e..21d376b 100644
--- a/js/codeq/problem_list.js
+++ b/js/codeq/problem_list.js
@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function(){
     "use strict";
-    var jqScreen = $('#screen_problem_list'),
+    var jqScreen = $('#screen-problem-list'),
         languageCache = {}, // keyed by language identifier: processed data about languages
         translationCache = [], // keys are autogenerated in ta(), a value is a dictionary of translations of a translation key for every language
         problemCache = {}, // problem data cache, 3-level, keyed by: language, problem group, and problem identifier
@@ -428,7 +428,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         'enter': function(language){
             var data = languageCache[language]; // language data
 
-            $("#navigation-problem_list").addClass("active").css('display', '');
+            $("#navigation-problem-list").addClass("active").css('display', '');
 
             if (!language) language = currentLanguage; // This happens when we hit this with the back button
             if (language !== currentLanguage) {
@@ -453,7 +453,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         },
         'exit' : function(){
             jqScreen.css('display', 'none');
-            $('#navigation-problem_list').css('display', 'none').removeClass("active");
+            $('#navigation-problem-list').css('display', 'none').removeClass("active");
         }
     });
 })();
diff --git a/js/codeq/profile.js b/js/codeq/profile.js
index 4b2f9ce..79a9bf5 100644
--- a/js/codeq/profile.js
+++ b/js/codeq/profile.js
@@ -21,9 +21,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function(){
     "use strict";
-    var jqScreen = $("#screen_profile"),
-        jqBtnChangePass = $("#change_pass_profile"),
-        jqBtnGoBack = $("#btnProfileGoBack");
+    var jqScreen = $("#screen-profile"),
+        jqBtnChangePass = $("#profile-change-password"),
+        jqBtnGoBack = $("#profile-back");
 
     codeq.profile = {
     };
@@ -71,7 +71,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                         items+='</td>';
                     });
 
-                    $('#table1').html(items)
+                    $('#profile-stats').html(items)
 
                 })
                 .fail(function (reason) {
diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index 111ea68..0d2f9d5 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function() {
     "use strict";
-    var jqScreen = $('#screen_prolog'), // the screen container element
+    var jqScreen = $('#screen-prolog'), // the screen container element
         // quadrants
         jqCode = jqScreen.find('.block2'),
         jqConsole = jqScreen.find('.block3'),
@@ -29,7 +29,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         prologHandler;
 
     var enterFun = function(problemDef, commonDef, currentSolution) {
-        $('#navigation-problem_list').css('display', '');
+        $('#navigation-problem-list').css('display', '');
         var navigationProlog = $("#navigation-prolog");
         navigationProlog.addClass("active");
         navigationProlog.css('display', '');
@@ -61,7 +61,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             prologHandler.destroy();
             prologHandler = null;
 
-            $('#navigation-problem_list').css('display', 'none');
+            $('#navigation-problem-list').css('display', 'none');
             var navigationProlog = $("#navigation-prolog");
             navigationProlog.removeClass("active");
             navigationProlog.css('display', 'none');
@@ -260,7 +260,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         return {
             destroy: function () {
                 codeq.comms.endProblem().done();
-                $('#screen_prolog .title').text('');//empty the title text
+                $('#screen-prolog .title').text(''); //empty the title text
                 jqAllButtons.off();
                 editor.off('change');
                 activityHandler.queueTrace({'typ': 'close'});
diff --git a/js/codeq/python.js b/js/codeq/python.js
index ab557e5..112d7ff 100644
--- a/js/codeq/python.js
+++ b/js/codeq/python.js
@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function() {
     "use strict";
-    var jqScreen = $('#screen_python'), // the screen container element
+    var jqScreen = $('#screen-python'), // the screen container element
         // quadrants
         jqCode = jqScreen.find('.block2'),
         jqConsole = jqScreen.find('.block3'),
@@ -32,7 +32,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         pythonHandler; // created when we enter the python state and destroyed once we leave it
 
     var enterFun = function(problemDef, commonDef, currentSolution) {
-        $('#navigation-problem_list').css('display', '');
+        $('#navigation-problem-list').css('display', '');
         var navigationPhython = $("#navigation-python");
         navigationPhython.addClass("active");
         navigationPhython.css('display', '');
@@ -64,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             pythonHandler.destroy();
             pythonHandler = null;
 
-            $('#navigation-problem_list').css('display', 'none');
+            $('#navigation-problem-list').css('display', 'none');
             var navigationPhython = $("#navigation-python");
             navigationPhython.removeClass("active");
             navigationPhython.css('display', 'none');
@@ -223,7 +223,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         return {
             destroy: function () {
                 codeq.comms.endProblem().done();
-                $('#screen_python .title').text('');//empty the title text
+                $('#screen-python .title').text(''); //empty the title text
                 jqAllButtons.off();
                 editor.off('change');
                 codeq.comms.off('terminal_output'); // stop listening for the terminal events from server
diff --git a/js/codeq/robot.js b/js/codeq/robot.js
index 43bfb12..3e561a1 100644
--- a/js/codeq/robot.js
+++ b/js/codeq/robot.js
@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function() {
     "use strict";
-    var jqScreen = $('#screen_robot'), // the screen container element
+    var jqScreen = $('#screen-robot'), // the screen container element
         // quadrants
         jqCode = jqScreen.find('.block2'),
         jqConsole = jqScreen.find('.block3'),
@@ -32,7 +32,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         robotHandler;
 
     var enterFun = function(problemDef, commonDef, currentSolution) {
-        $('#navigation-problem_list').css('display', '');
+        $('#navigation-problem-list').css('display', '');
         var navigationRobot = $("#navigation-robot");
         navigationRobot.addClass("active");
         navigationRobot.css('display', '');
@@ -65,7 +65,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             robotHandler.destroy();
             robotHandler = null;
 
-            $('#navigation-problem_list').css('display', 'none');
+            $('#navigation-problem-list').css('display', 'none');
             var navigationRobot = $("#navigation-robot");
             navigationRobot.removeClass("active");
             navigationRobot.css('display', 'none');
@@ -223,7 +223,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                     reconnectTimer = null;
                 }
 
-                $('#screen_robot .title').text('');//empty the title text
+                $('#screen-robot .title').text(''); //empty the title text
                 jqAllButtons.off();
                 editor.off('change');
                 activityHandler.queueTrace({'typ': 'close'});
diff --git a/js/codeq/settings.js b/js/codeq/settings.js
index 1f35abf..e6b8fce 100644
--- a/js/codeq/settings.js
+++ b/js/codeq/settings.js
@@ -22,18 +22,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 (function(){
     "use strict";
     var navigationSettings = $('#navigation-settings'),
-        guiLangSelect = $('#gui_lang_select'),
-        robotAddressInput = $('#robot_address_input'),
+        guiLangSelect = $('#settings-gui-lang'),
+        robotAddressInput = $('#settings-robot-address'),
         jqDisabledOverlay = $('#disabled'),
-        jqSettForm = $("#settingsForm"),
-        jqSettCancelBtn = $("#settings_cancel_btn"),
-        jqScreenSettings = $('#screen_settings'),
-        jqLayoutSelect = $('#gui_layout_select');
+        jqSettForm = $("#settings-form"),
+        jqSettCancelBtn = $("#settings-cancel"),
+        jqScreenSettings = $('#screen-settings'),
+        jqLayoutSelect = $('#settings-layout');
 
     codeq.on('layoutchange', function(){
-        $("#screen_prolog").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
-        $("#screen_python").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
-        $("#screen_robot").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
+        $("#screen-prolog").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
+        $("#screen-python").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
+        $("#screen-robot").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
     });
 
     codeq.globalStateMachine.register('settings',{
diff --git a/js/codeq/signup.js b/js/codeq/signup.js
index e1d9a09..d41f1d5 100644
--- a/js/codeq/signup.js
+++ b/js/codeq/signup.js
@@ -21,14 +21,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function(){
     "use strict";
-    var jqScreen = $("#screen_signup"),
-        jqUsername = $("#modalSignUpUsername"),
-        jqName = $("#modalSignUpName"),
-        jqEmail = $("#modalSignUpEmail"),
-        jqPassword = $("#modalSignUpPassword"),
-        jqVerify = $("#modalSignUpVerify"),
-        jqFormSignUp = $('#formSignUp'),
-        jqExitSignUpBtn = $('#exit_signup_btn'),
+    var jqScreen = $("#screen-signup"),
+        jqUsername = $("#signup-username"),
+        jqName = $("#signup-name"),
+        jqEmail = $("#signup-email"),
+        jqPassword = $("#signup-password"),
+        jqVerify = $("#signup-password-verify"),
+        jqFormSignUp = $('#signup-form'),
+        jqExitSignUpBtn = $('#signup-cancel'),
         jqLangSelect = jqScreen.find('.lang-select'),
         jqNavBarRight = $('.nav.navbar-nav.navbar-right'),
         jqNavigationHomeBtn = $('#navigation-home');
diff --git a/js/codeq/solutions.js b/js/codeq/solutions.js
index 399c934..6df3c75 100644
--- a/js/codeq/solutions.js
+++ b/js/codeq/solutions.js
@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
 
 (function(){
     "use strict";
-    var jqScreen = $('#screen_solutions'),
+    var jqScreen = $('#screen-solutions'),
         jqSolutions = jqScreen.find('.solutions'),
         jqBtnGoBack = jqScreen.find('.btnGoBack');
 
diff --git a/js/codeq/upgrade_to_aai.js b/js/codeq/upgrade_to_aai.js
index ad57fed..a75be22 100644
--- a/js/codeq/upgrade_to_aai.js
+++ b/js/codeq/upgrade_to_aai.js
@@ -20,10 +20,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
  */
 (function(){
     "use strict";
-    var jqScreen = $("#screen_upgrade_to_aai"),
-        jqForm = $('#formUpgradeToAAI'),
-        jqNoBtn = $('#btnUpgradeToAAINo'),
-        jqPassword = $('#formUpgradeToAAIPassword'),
+    var jqScreen = $("#screen-upgrade-to-aai"),
+        jqForm = $('#upgrade-to-aai-form'),
+        jqNoBtn = $('#upgrade-to-aai-cancel'),
+        jqPassword = $('#upgrade-to-aai-password'),
         jqLangSelect = jqScreen.find('.lang-select');
 
     codeq.globalStateMachine.register('upgradeToAAI',{