Extreme-Typing is a primer for another typing course, or use it as a typing course itself. Those new to English, will learn the keyboard layout.

This runs through the English alphabet. Mouseover the ABC bar and its match will light up on the keyboard and the same will happen when mousing over the keyboard keys. Press a key, and both will light up.

The program will display a letter, and the user will find this letter on their keyboard. Use the above methods to find the letter, or have the letter to be found highlighted in colors, the user decided on, or have a crosshatch line pattern appear over the letter.

There are dozens of CSS options to customize the keyboard, and is following the design principles of philosopher Merleau-Ponty’s Phenomenology of Perception, where if a person can customize a thing, they will like that thing better, use it more, and learn faster.


The

Software


Free download in many languages at: Extreme-Typing


Main Screen


Multi-layered keys

The keys all have many layers, called "labels". This was done to make coding much easier. When a few layers are present, the code becomes complicated. With a separation of duties or "tasks", one layer is responsible for only
one thing. This reduces errors as the program is being created. There are more lines of code; however, the coding
itself becomes much simpler.

Below is an isometric diagram of a key. Cursor is on top mousing over. Picture of key is on the left.
This key currently has "None" turned off.




Isometric diagram




Some code for each key on the keyboard

Keypress

This is for each keypress on the keyboard.
ABC bar is at top with eng1 naming convention. The eng1_2 is the matching key on the keyboard.
Images are next with other stuff. Sounds are at the bottom, and this is the part that gave the most headaches.
Sound states:

1. No sound
2. Sound effects
3. Sound effects with Extreme Keyboard
4. Soft or strict difficulty settings





Change Color Back

This is returning the key color and any images back to its normal state. Called half a second when in "flash" state, or when the key is released in "continuous" state.



Determining The Right Key

This is finding if the right key was pressed in forward direction. It is called for each keypress. There is different
code for reverse and random direction.


The

WebPage


Find this at: Extreme-Typing


Search pages for Keyboard and Paint themes.

Originally, I used the standard form elements. It was unattractive and did not match the flavor of the product,
which is basically selling color whilst learning to type.

So, I made the form elements much more colorful with some CSS generated shapes. The database-accessing display
is now more fun. (And they said there was no way to make databases fun.)



Original

  • Language

  • Search by

  • Order by

  • Direction

  • Enter keywords

  • English


    Russian


    To Eng


  •    

    Up


       

    Down


Same thing now with some color and cool code.

Click the colored CSS generated shapes. Watch form elements on right.

Be sure to click the date oval.



Part of the form for Search Paint.
The entire form is located at: http://www.ralphcorbett.com/extremeTyping/searchPaint.php





All of this interacts with a ton of PHP to access a MySQL database for searching and then displaying.
Download links are included in the final results.




HTML for first oval option - Painting

< span   class="oval"   id="oval1"   onclick="searchBy1();"   >

< select   name="optionName"   size="7"   >
< option   id="option1"   value="paintName"   >   Painting Name < /option>
...
...
< /select>




JavaScript

function searchBy1()
{

// Bool flags
flagSearchBy1 = true;  // Painting
flagSearchBy2 = false; // Artist
flagSearchBy3 = false; // Description
flagSearchBy4 = false; // Age
flagSearchBy5 = false; // Number
flagSearchBy6 = false; // Date
flagSearchBy7 = false; // All

// This is the important part
document.getElementById('option1').selected = "selected";

// Code for display on far left. See below
document.getElementById('searchBy').innerHTML = "Painting Name";
document.getElementById('searchBy').style.color = "red";


// For textbox, not shown. Clears box and resets progress bar.
form1.searchBox.setAttribute('maxlength', 20);
maxLength = 20;
document.getElementById("displayCount").innerHTML = 0;

clearSearchBox();
document.getElementById("displayRemaining").innerHTML = "20";
form1.searchBox.focus();

}






PHP Displaying Results in HTML

This is the PHP code for displaying the results after a match has been found.
The PHP variables are set earlier in the code.
Notice the $counter variable. It is added to the rel=lightbox[…] to generate a new light box for each entry,
and not to have one very long lightbox for the entire search results.


Much more CSS-detailed for the page Search Keyboard.

This is located at: http://www.RalphCorbett.com/extremeTyping/searchKeyboard.php