Page 1 of 1

[Challenge] The Querty Keyboard

Posted: Mon Dec 07, 2009 12:29 am
by Weiry
The aim of this challenge is to make a code which will generate a "querty" keyboard!
Bonus points to whoever creates the 'fullest' keyboard :D
Extra bonus points will be awarded to whoever can generate it using the least amount of code!

The final keyboard MUST RESEMBLE AN ACTUAL KEYBOARD LAYOUT

Example:

Code: Select all

q w e r t y u i o p 
 a s d f g h j k l 
  z x c v b n m

Code: Select all

Points Table:
::::::::::::::::::::::::::::::::::::::
:: Correct Order        :   5 pts   ::
:: Output in 3 rows     :   5 pts   ::
:: With Layout          :   5 pts   ::
:: With Numbers         :   5 pts   ::
:: With F keys          :   5 pts   ::
:: With Spacebar        :  10 pts   ::
:: With Extras*         :  15 pts   ::
:: With Arrow Keys      :  20 pts   ::
:: Keyboard Outline     :  20 pts   ::
:: Least Code Used      :  50 pts   ::
:: FULL Keyboard**      :  80 pts   ::
::::::::::::::::::::::::::::::::::::::
    *  Extras count as CTRL, ALT, SHIFT, RETURN, BACKSPACE etc.
    ** This includes everything you see on a standard querty keyboard
        This does not include gaming keyboard's gaming buttons.
        
    ::NOTE::
        Keyboards do NOT need to contain SHIFT CHARACTERS
        (characters you would need to press shift to access)
            ie. !@#$%^&*()_+

Re: [Challenge] The Querty Keyboard

Posted: Wed Dec 09, 2009 7:46 am
by papa
Not the best code, but it's a Swedish keyboard:

Code: Select all

 
<html>
<head>
<title>Querty</title>
 
<style>
 
body {
    text-indent: 2px;
    font-family: verdana;
    font-size: 0.9em;
}
 
.sect1 {
    width: 676px;
    border: 1px solid #000;
}
 
.sect2 {
    width: 156px;
    border: 1px solid #000;
    margin-left: 1em;
}
 
.sect3 {
    width: 208px;
    border: 1px solid #000;
    margin-left: 1em;
}
 
.key {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}
 
.wide { 
    width: 102px;
    height: 50px;
    border: 1px solid #000;
    font-size: 2em;
    text-indent: 40px;
}
 
.high {
    width: 50px;
    height: 102px;
    border: 1px solid #000;
    font-size: 2em;
    text-indent: 15px;
}
 
.space {
    width: 362px;
    height: 50px;
    border: 1px solid #000;
}
 
.left {
    float: left;
}
 
.right {
    float: right;
}
 
.alt {
    font-size: 0.7em;
    margin: 4px;
}
</style>
 
</head>
<body>
<?php
 
$keyboard1 = 
array(
    array('Esc', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F11', 'F12', '&micro; LOCK'),
    array('&frac12;'=>array('&sect;'), 1=>array('!'), 2=>array('"', '@'), 3=>array('#', '£'), 4=>array('¤', '$'), 5=>array('%'), 6=>array('&'), 
          7=>array('/','{'), 8=>array('(', '['), 9=>array(')',']'), 0=>array('=', '}'), 'wide'=>'&lsaquo;'),
    array('TAB', 'Q', 'W', 'E'=>array('€'), 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '&Aring;', 'high'=>'&laquo;'),
    array('Caps Lock', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '&Ouml;', '&Auml;'),
    array('SHIFT', '<'=>array('>','|'), 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ','=>array(';'), '.'=>array(':'), '-'=>array('_'), 'SHIFT'),
    array('Ctrl', 'Start', 'Alt', 'space'=>'', 'Alt Gr', '&spades;', 'Ctrl')
);
 
$keyboard2 = 
array(
    array('PrtScn', 'ScrLk', 'Pause Break'), array('Insert', 'Home', 'Page Up'),
    array('Delete', 'End', 'Page Down'),
    array('', '', ''),
    array('', '&uarr;', ''),
    array('&larr;', '&darr;', '&rarr;')
);
 
$keyboard3 = 
array(
    array('=', '(', ')', '&larr;'),
    array('Num Lock', '/', '*', '-'),
    array(7=>array('Home'), 8=>array('&uarr;'), 9=>array('PgUp'), 'high'=>'+'),
    array(4=>array('&larr;'), 5, 6=>array('&rarr;')),
    array(1=>array('End'), 2=>array('&darr;'), 3=>array('PgDn'), 'high'=>'&laquo;'),
    array('wide'=>0, 'Del'=>array(','))
);
 
function displaySection($keyboard, $width)
{
    //Row by Row
    foreach($keyboard as $keys)
    {
        
        foreach($keys as $id => $key)
        {           
            $style = is_numeric($id) || is_array($key) ? "key" : $id;
            $float = !is_numeric($id) && $id == "high" ? " right" : " left";
 
            $sub = "";
        
            if(is_array($key)) 
            {
                foreach($key as $k)
                {
                    $sub .= $k." ";
                }
                $key = $id."<div class=\"alt\">{$sub}</div>";
            } 
            ?>
            <div class="<?php echo $style.$float; ?>"><?php echo $key; ?></div>
        <?php 
        }
    }
}
 
?>
<div class="sect1 left"><?php displaySection($keyboard1, 676); ?></div>
 
<div class="sect2 left"><?php displaySection($keyboard2, 156); ?></div>
 
<div class="sect3 left"><?php displaySection($keyboard3, 208); ?></div>
 
</body>
</html>
Image

Re: [Challenge] The Querty Keyboard

Posted: Wed Dec 09, 2009 8:17 am
by jayshields
There should be bonus points for getting the keyboard to function, ie. when you click on a key, that key press is simulated (I don't know exactly how this would work with element focus). Then the solution could actually be useful from an accessibility POV.

Re: [Challenge] The Querty Keyboard

Posted: Wed Dec 09, 2009 4:53 pm
by VladSun
Sorry to hijack your toppic but i haven't had any time to accomplish one of my projects:
viewtopic.php?f=50&t=89094
VladSun wrote:Damerau-Levenshtein distance

...

- I'm going to add 5-th type of miss typing - a transposition based on the keyboard layout (for now - QWERTY). Any suggestions or ideas about its implementation?
It's closely related to you topic, so anybody who wants to participate into the "QWERTY-Damerau-Levenshtein distance" topic i welcome :)