Keyboard shortcuts Customization I have created keyboard shortcuts menu,same as like this stackoverflow keyboard shortcuts.In multilevel.


  Scenario


In first level i have assigned functions for only key A.

In the second level i have assigned functions for B &amp; C keys


I have controlled key events B &amp; c in the first level with a variable.

Its working fine.I would like to know is there any better way of doing it.



var level= 0;
$('body').keypress(function(e){
  level == 1 ?(
(((e.keyCode == 66 || e.keyCode == 98)  &amp;&amp; level==1 )? (alert("B"),level=2,$('#screen3').show()) : ""),
(((e.keyCode == 67 || e.keyCode == 99)  &amp;&amp; level==1 )? (alert("c"),level=2,$('#screen3').show()) : "")
):"";
level == 0 ?((e.keyCode == 65 || e.keyCode == 97) ? level = 1 : level =0):"";
level == 1 ?($('#screen1').hide(),$('#screen2').show()):(level =2 ?$('#screen2').hide():(level= 0));
});
#screen1,#screen2,#screen3 {
background-color: black;
background-color: rgba(0, 0, 0, .8);
position: fixed;
left: 10px;
top: 10px;
padding: 10px;
text-align: left;
border-radius: 6px;
z-index: 1000;
  color:white ;
}

:matches(#screen1,#screen2) pre kbd {
display: inline-block;
font-family: monospace;
}
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
  background-color: #f7f7f7;
color: #333;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  border-radius: 3px;
  margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap;
  }
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="screen1" style=""&gt;
  &lt;pre&gt;Keyboard shortcuts:
&lt;b&gt;&lt;kbd&gt;A&lt;/kbd&gt; alert&lt;/b&gt;
&lt;/pre&gt;&lt;/div&gt;
&lt;div id="screen2" style="display:none"&gt;
  &lt;pre&gt;Keyboard shortcuts:
&lt;b&gt;&lt;kbd&gt;B&lt;/kbd&gt; alert Key - B&lt;/b&gt;
&lt;b&gt;&lt;kbd&gt;C&lt;/kbd&gt; alert Key - C&lt;/b&gt;
&lt;/pre&gt;&lt;/div&gt;
&lt;div id="screen3" style="display:none"&gt;
  &lt;pre&gt;Thats it Folks!!
&lt;/pre&gt;&lt;/div&gt;
Right off the bat, your code needs some serious indentation. It's barely readable given its current state. If you happen to use Sublime Text, there's HTML-CSS-JS Prettify plugin.

Another thing I noticed is you're loading jQuery twice.

Next, your code is highly coupled. Your condition to check the buttons are highly coupled to the behavior it does. What would happen if I want to change the behavior to another key? Or what if you want to operate in another platform which uses different keyboard norms (Mac vs PC)? You can read Game Programming Patterns to get an idea of configurable keys.

Another thing to consider is what if the user wants to bail out of a level? What if the user accidentally pressed a button that progressed him a level, but wants to go back and use another combination instead? Usually Esc was reserved for this. For multi-press button combinations, releasing all buttons is an option.

jQuery also has event.which which is a normalized version of charCode and keyCode.

Your code lives in the global space, which means level is highly modifiable and pollutes the global namespace. You could put your code inside a closure, an IIFE to be exact, to prevent that.